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

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

Home Forums Support I want to boxes like this. Is it possible with this theme

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
  • #864885

    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

    GP Premium 1.7.8
    Customer Support

    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.


    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

    Customer Support

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


    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.

    Customer Support

    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:


    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.


    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


    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

    Customer Support

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


    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.


    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?


    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. Screenshot-1
    And are you talking about this plugin https://wordpress.org/plugins/gutenberg/ becuase it has very low rating.

    Customer Support

    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.


    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

    Customer Support

    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.


    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?

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.