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

Home Forums Support Adding background colour (coloured bar) behind content on static page

  • This topic has 11 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1013665
    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.

    #1013761
    Leo
    Staff
    Customer Support

    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 🙂

    #1014281
    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.

    #1014290
    David
    Staff
    Customer Support

    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.

    #1014351
    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?

    #1014594
    Leo
    Staff
    Customer Support

    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 🙂

    #1014643
    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).

    #1014803
    David
    Staff
    Customer Support

    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.

    #1014857
    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.

    #1014885
    David
    Staff
    Customer Support

    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.

    #1015289
    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!

    #1015310
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.