Site logo

Archived topic

Containers visible separately

3 replies · Started by Tomasz on October 12, 2022

Viewing posts 1–4 of 4

I'm making a website for a friend and I'm having some trouble.
I am using the Marketer theme and I want to get an effect like this:
- https://flexiblog-education.netlify.app/
- https://www.wpbeginner.com/

The point is that the background is gray and the containers are white. And it's okay, but how can I separate these containers so that everyone is visible as on the above-mentioned pages because currently it is visible as one.

Hi there,

tricky one for static pages. Try this:

1. You would need to use some CSS to remove the Themes ( Customizer > Color > Content ) inside container color.

For your home page you can use:

.home.separate-containers .inside-article {
    background: transparent;
}

2. Now remove the Themes padding on that page by setting the Content Container to Contained

https://docs.generatepress.com/article/content-container/

3. Now edit each Container Block, and:

3.1 Set the Backround Color
3.2 Set the Padding ( to replace the missing theme padding )
3.3 Set the Bottom Margin eg. 40px

What this does is remove the themes container styling so you can apply to each Container Block.

As always, professional help. It works, thank you. I persuaded my friend to buy the premium version.

Awesome - glad to be of help!

This archived topic is closed to new replies.