[Resolved] Background Flair

[Steve]

https://www.horsebrainscience.info

Hey GP folks,

I am trying to recreate this site linked above in GP… Looked all over so sorry if I missed it, but in the different sections you see a light background color … ie: Behind “His precision” … Is this two containers offset using the z-index?

If you could point me to a doc or get me started on how to do that that’d be great. Thanks in advance.

[Ying]

Hi Steve,

It can be achieved using a structure like this:
https://www.screencast.com/t/XqLfQCNG

The settings I put in for your reference:

1. Container(right-text): container width: 50% (the same as container(left-bg-image)).

2. Container(bg-color): padding:20px; margin-top:40px; margin-right:200px; min-height: 400px; background color;
https://www.screencast.com/t/jrnceDizU

3. Healine(headline): margin-top:-40px;

4. Healine(paragraph): margin-right:-150px;

Feel free to adjust the values depending on your design.

Let me know if you need further assistance 🙂

[Steve]

Wow. You Ms Ying are amazingly fast!!! I’ll give it try when I get back to my desk.. Thank you! I might have another question regarding the hero/nav/merge … but I saw a few article I need to read thru first.

[Ying]

Haha I try my best to be fast and accurate 😛

Let me know if this works!

[Steve]

Hey Ying…

I finally got the time to circle back to this…

But I’m unable to get the bg-color placed in the background? Added screen of the setting.

[Ying]

You haven’t done the step 3 and step 4:https://generatepress.com/forums/topic/background-flair/#post-2358131

And please remove the margin-top added to the text container block.

[Steve]

Thanks. My fault… duh.

I owe you a coffee.

[Ying]

Cool, I do need a coffee haha!

[Steve]

Thanks.

[Author]

Posts