Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

How to make my blog post page template like your page layout design?

  • Hello,

    How to edit my blog post page structure like yours. Please take a look at the screenshot.

    Screenshot: https://postimg.cc/YL686bwL

    The background color should still be there.

    Thank you

  • Hi there,

    Your site is using one container structure, try switching it to separate container at cusotmizer > layout > container.

    And you can set the background color for sidebars at customzier > colors.

  • Hello Ying,

    Sorry for the delayed response. I was waiting for the review from Google Adsense, so I didn’t edit the blog post page structure for a few days.

    I was trying to achieve something like this: Set the background color as black and the content container as grey. Meanwhile, I want to create several customized containers in the sidebar. I used to have a query loop template called “recent posts” there. And I will create an email sign up form below the recent posts there. These two containers’ color will be grey same as the content container. And each container will have a gap there like this support forum page structure.

    I tried to use your method but the sidebar is a piece of black rectangle. And I don’t know how to put content or any blocks or elements into it.

    Is the best way to do it: still set one container structure, and use elements to create and design the layout for sidebar?

    Please take a look at the screenshot: https://postimg.cc/jDRkP8Gv

    Thank you in advance!

  • Hi there,

    1. in the Customizer > Layout > Container
    1.1 set the Container Structure to Separate Containers
    1.2 set the Separating Space to a value eg 20px. This is the space between content containers and widget.

    2. in Customize Colors set the Content Background and the Sidebar Widget Background

    That should give you what you require

  • Hello,

    It seems that if I set the content background color, the content background color on the homepage will be changed too. How can I separate them? I want to separately customize the content background on the blog post page and homepage.

    Please take a look at the screenshot: https://postimg.cc/gallery/3dqfqsC

    By the way, where to edit the container background color? I mean the full-width container on the blog post page.

  • Hi there,

    To apply the content background color only on the blog post page, you’ll need to use CSS. For example:

    body.single-post .site-content .content-area {
       background-color: grey;
    }

    By the way, where to edit the container background color? I mean the full-width container on the blog post page.

    I see that you used CSS to define the background color. You can find this CSS under Customize > Additional CSS:

    body.single-post, body.single-post .site-content {
       background-color: #201f1d;
    }
  • Hello,

    How can I only change the left container’s background color?

    Screenshot: https://postimg.cc/LJgS38J6

    Thank you in advance.

  • Try this:

    .separate-containers.single-post .inside-article {
        background-color: red;
    }
  • It worked!

    Jesus. Marry me, Ying! The customer support is way too good!

  • I’m married lol…

    Glad you are happy with our support 🙂

  • lol… congratulations! Sad news for me😭, Just kidding.😛

    Anyway, Your support is awesome as always. You are all very good. You, Alvind, David and the others.

    Have a great day.

  • Thank you 🙂

    I’m very happy to see these nice words!

  • Hi Davi,

    I have the following problem with the Spacious template:

    In the Layout > Container section, even though I set the “Separating space” field to 15px, it always remains larger than I would like. What would be the CSS to fix this?

    See this image: https://drive.google.com/file/d/1NGPEgRWfw7oXCNwtUOSaxFrJQdlj4tSv/view?usp=sharing

    I need this space to be 15px

    Thank you very much

    Roberto Soares

  • Hi Roberto,

    can you raise a new topic where you can share a link to your site so I can take a look at where the extra space is coming from.

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