[Resolved] Adding background colour (coloured bar) behind content on static page

[Max]

Hey there!

I am using the latest GP premium.

What I would like to achieve:

I have a section for quotes on my website’s homepage (see link). I embed the quote by using Tom’s WP Show Posts plugin on a static page. I would like to add a grey or differently coloured bar behind that content to make it look like/similar to this example (you have to scroll down to the bottom until you reach the newletters signup form).

Do you have an idea how best to achieve that? Would that also work if I used different containers instead of the current “one container” variant?

Thank you in advance and best regards.

[Leo]

Hi there,

I’m not sure why WP Show Posts is needed for that?

Couldn’t you just do that with Elementor since you are already using it?

Then you should be able to change the background color within the page builder as well.

Let me know if I’m missing something 🙂

[Max]

Hi Leo,

Now I am not exactly sure whether I am missing something here ;D but I only have Elementor installed but not activated, meaning it is currently not in use. I want to reduce the load on/of the website as much as possible which is why I decided against using page builder plugins and to focus on changing the theme/design according to my preferences instead.
I inserted the WP SP Plugin Shortcode into my static homepage. I also need the plugin to let the quotes be displayed in a certain manner on archive pages.

[David]

Hi there,

you would need to wrap the quote content in a div like so:

<div class="quote-container">
    <!-- HTML and WP Show Post content here -->
</div>

Then you can style it with some CSS:

.quote-container {
    padding: 40px;
    box-sizing: border-box;
    background-color: #ccc;
}

The box will be contained, making it full width is going to be near impossible with a sidebar on the page.

[Max]

Hi David,

I added the class and container and it gets displayed correctly. I took a look at the text editor and now I understand why Leo might have been confused: There was still Elementor code in there. I removed the post and now the coast should be clear.

One question to help me understand the issue:
You said that it is nearly impossible to make the grey bar stretch across the homepage. I tried changing the width to 120% etc. and the text and bar got stretched out to the right side but not to the left side.
Could you give me a quick explanation as to why it is so difficult to create a bar that stretches across the entire width much like the hero/header? Has it something to do with the container layout of GP?

[Leo]

Because that section is within the content container and it’s very difficult to break a specific section out of the container – it’s possible using Sections:
https://docs.generatepress.com/article/sections-overview/

Page hero is in its own container which is why it’s easy to set it to full width or any desired width.

Let me know if this helps 🙂

[Max]

Hi Leo,

Previously I decided against using Sections because I had some issues with a plugin but I will give it another shot : )

Just to clarify: If I use sections and I create one specifically for the “Quote” section of the homepage (see below) will I be able to stretch that grey area across the full width while still being able to use my sidebar?

I just tried using the “Content (no sidebars)” option of one section and that stretches it across the page but disables the sidebar (of the other sections) for the rest of the page. Take a look at this link.

On a test page I am basically using the following sections:

– title
– carousel
– title
– quotes

The first three have the “Content / Sidebar” option enabled, the fourth does not which basically makes the sidebar disappear. When I did not use the “Content / Sidebar” option of the quotes section I was not able to stretch the background across the entire width of the page (of course).

[David]

If you set the Pagebuilder Container in the Layout Meta box to Full Width and add Sections then yes you will be able to contain some sections and ‘stretch’ to the quote section across the screen.

When Sidebars are in place it becomes an issue as the page is now split into two containers. I would advise against trying to make that work. Which means you can use your current method.

[Max]

Hi David,

I am not sure whether I understand. The method I used lets me stretch that one section across the screen but disables my sidebar.
I followed your instructions (first paragraph) and now I have a sidebar but that basically splits the page into two containers (see page). So now there is a sidebar but it gets stretched whereas the quote “bar” only covers the one (left) container but does not get stretched across the screen (it stops at the second, the right, container).
Is the bottom line that it is impossible to stretch that bar while keeping the sidebar (in a neat way)? If so I will stick to the old design.

[David]

Sections by default don’t have Sidebars – and the only method you can now use is by giving the Section containing the content a property of width: 100vw; which is 100% of the viewport width. I am not sure it will behave on all browsers or if at any point will overlap the sidebar.

[Max]

If I am reading you correctly then the preset layout option for sections is “Content (no sidebars)” and not e.g. “Content / Sidebar”.
Well in this case, I will probably not achieve what I initially wanted without using a pagebuilder. So I will stick to my current solution which is all right.
Thanks for the quick response!

[David]

You’re welcome

[Author]

Posts