[Support request] I want to boxes like this. Is it possible with this theme

[Bharat]

http://prntscr.com/na3cub I want to add boxes like this in my website. Is it possible with this theme? Because the screenshot which I have given, in that, the website is using the same theme. Please guide me how to create this type of boxed inside the post

[David]

Hi there,

can you link me to the page where you got the image from? I can see whether they are using a plugin or provide some HTML / CSS to do something similar.

[Bharat]

Yeah sure here is the link https://www.anabolicbodies.com/supplements/testosterone-boosters/

Please also tell me how to write a paragraph on a coloured background, this website has done this also

[David]

Are you using the Gutenberg Block editor or the Classic WP Editor?
And the black background content will that also be in the sidebar?

[Bharat]

I am using the default Gutenberg block editor and the background I was talking about is this http://prntscr.com/navfq6

Moreover, I also want that black background in the sidebar. Please guide me on how to do all these changes.

[David]

So one thing at a time – the two blocks we can do something similar.
In the Gutenberg Editor add a Column Block, leave it with as the 2 default columns.
With the Column Block selected in the Settings Sidebar > Advanced > Additional CSS – add this class:

feature-block

In each column place a Paragraph block for the title. Set its background color, text color etc.
After the paragraph add a list block and populate your list.

Then add this CSS

.feature-block .wp-block-column {
    background-color: #efefef;
    border-radius: 8px;
}

.feature-block ul {
    list-style-type: none;
    padding: 10px 0;
    margin: 0 1.5em; /* Contain list content */
}

.feature-block ul li:before {
    content: '\2713';
    margin-right: 10px;
}

.feature-block p.has-background {
    position: relative;
    padding: 10px 0 0
}

.feature-block p:after {
    content: '';
    position: absolute;
    top: 99%; /* reduce to 99% to move element up a little */
    left: 0;
    right: 0;
    padding-bottom: 10%;
    background: inherit;
    clip-path: polygon(0% 0%, 100% 0%, 50% 60%);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 60%);
}

Let me know.

[Bharat]

I tried doing it. created two columns block. Selected both the block and added the class
“feature-block” to both the column. Please check the screenshot http://prntscr.com/nbeg8v
Now Can you help me on skype. After that am I again suppose to make a new, two-column block below this and where to add the CSS you gave. My skype is vector9122. Please help me

[Bharat]

Hi, there is an update. I have added two more list blocks inside those two blocks. Now where to add CSS which you gave. Here is the screenshot http://prntscr.com/nbev6s

[David]

Sorry we don’t do Skye Support. Instead i have created you a Loom to step you through this:

https://www.loom.com/share/64f5824502f74ec78cfe978b2dcb6589

Before doing this i recommend you install the Gutenberg Plugin from the WordPress Repo. It is the latest editor and includes lots of bug fixes and improvements that are yet to be added to the editor that comes in WordPress 5.

[Bharat]

Hi thanks for this, actually I tried this and it worked but there is a thin line coming up between the heading block and the list block. Please check the screenshot here. http://prntscr.com/nbo8dy
Any remedies for this?

[Divyanshu]

Hi David, I also did exactly the same thing and a thin line is coming just like Bharat showed in the image and the left block text is also not aligned.
And are you talking about this plugin https://wordpress.org/plugins/gutenberg/ becuase it has very low rating.

[David]

The CSS i provide here:
see comment on top property. That should reduce the possibility of the 1px gap appearing.
I also added another property for containing the list.

Divyanshu, yes thats the correct plugin.
The plugin is the same editor as what is used in core. All bug fixes and updates are rolled out first in the plugin. They take a lot longer to reach the WP Core update ie. Core is using v4.7 of the editor and will receive v5.3 on the next update. By which time the plugin will be on v5.5.
The reviews stem back from when the plugin was first in Beta and yes received a hell load of criticism from the community who didn’t / don’t want Gutenberg. So reviews i would ignore.

[Bharat]

Hey actually I am not able to figure out where to add this “top: 1px” in the CSS code you provided above for removing that gap.
Thank you very much for the support btw

Moreover, I also need this thing http://prntscr.com/nbtp61 on my website. Basically, there are two columns I gues. But there is a line in between those two how to add that line? In the right column, how to make those 3 red progress bars and how to stick that “editors choice” image in that style

[David]

I edited the CSS above so it should remove the gap.

That other Columns you shared the image of can’t be done with just the Core blocks in Gutenberg. You would need to have that custom developed.

[Bharat]

Ok I will update my CSS. Thanks for that
The second change is not possible even with any css edit like you did before?
Custom development would require editing php code as well apart from the css?

[Author]

Posts