[Resolved] Containers visible separately

[Tomasz]

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.

[David]

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.

[Tomasz]

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

[David]

Awesome – glad to be of help!

[Author]

Posts