Black Friday! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Full Width Content/Contained Inner (Like Header/Navigation/Footer)

Home Forums Support [Resolved] Full Width Content/Contained Inner (Like Header/Navigation/Footer)

Home Forums Support Full Width Content/Contained Inner (Like Header/Navigation/Footer)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #370710

    Hi there,
    I’ve been browsing the support forums, and this may have been asked before, but if so I can’t find it. I built my front/home page with Elementor ( I like how the sections are full-width but the content is contained. It allows me to adjust the transparency and background color for each section. That being said, I don’t want to use a page builder (or even the built-in sections) for each and every page and post, but I want to keep the same look and feel as the home page.

    I set the background color of the “Content” section (using GP Premium Colors) to a semi-transparent white. This works great; however, my pages and posts look boxed (see: The background color overlay doesn’t extend for the full width, like I can choose for the header, navigation, and footer.

    I tried making a div after the header and before the page content (called “after-header-wrap”) and used CSS to add a semi-transparent white overlay, which works great – but it messes up my homepage coloring. I tried to exclude the homepage from the CSS with little success.

    Is there a simple solution to this? If it’s been covered before, please point me in the right direction πŸ™‚
    Much appreciated,

    GeneratePress 1.4
    GP Premium 1.4.3
    Customer Support

    Hi there,

    You can try using Full width here:

    Let me know if this helps.

    p.s. the home page should also be using that setting. GP’s Sections add-on is like a simple page builder so it shouldn’t be used with Elementor. Your sections are already created with Elementor already πŸ™‚


    Thanks, Leo. I had created sections before I realized I needed Elementor to do what I wanted to do on the home page. I have deleted the sections on the home page and got it to look like the way it was by setting the page builder container on the home page to Full Width.

    I don’t want to use a page builder or sections on the other pages and posts. They are going to be very simple pages and posts. Do I have to manually set the page builder container for each page and post to full width? This creates 3 problems I can see.

    1. I have to manually do it each time.
    2. The text goes all the way to the left instead of staying contained like it does in the header, menu, and footer.
    3. Now if I select a background overlay color for the content section, it also affects the home page I built with Elementor, so everything now sits on top of this white semi-transparent overlay. This isn’t the effect I want.

    Is there no simple setting like there is with the header, navigation, and footer, to have the content be full width and inner part contained? Also, how do I deal with the content overlay issue on the Elementor-built home page? Do I need to scrap Elementor and just use in-built sections? It is possible to make the overlay appear everywhere BUT the homepage?

    Thanks for all your help.

    Customer Support

    Sorry maybe I’m getting confused. For other pages that are going to be simple without Elementor, can’t you just use the normal container from GP and you can adjust the container width and padding?


    Hi Leo! Sorry I’m confusing you. I was getting confused myself. I am more than happy to just use the normal container/default width on the other pages. The problem is that I’m using a background image on the site, and I want a semi-transparent white overlay for the content so I can see the text. When I add that to the Customizer > Colors > Content > Background, the overlay only appears in the box (container), not over the full width. And, it is also changing the homepage coloring. So I’d like the overlay to appear over the full width of the page content, on every page and post except the home page.

    I was able to do this by creating a div using the GP hooks; however, it too affects the home page coloring. If I could get the overlay to NOT appear on the homepage only, I think I can solve this issue.

    Would it help if I post screen shots of what I want vs. what is happening?


    PS I currently have the CSS that works on all the pages set like this:
    #after-header-wrap {background-color:#ffffff;opacity:0.5;}

    If I do this: .home #after-header-wrap {background-color:transparent;} it gives this eerie ghost-like transparency to the home page. So I think I’m doing something wrong there.

    If I do this: .home #after-header-wrap {background-color:#ffffff;opacity:0;}, I lose all my home page content.

    If I do this: .home #after-header-wrap {background-color:#ffffff;opacity:1;}, I lose my background image.

    I feel like there should be an easy CSS solution that I’m overlooking or not knowledgeable enough to see.


    Hi Leo, I think I fixed it!

    #after-header-wrap {background-color:rgba(255,255,255,0.91);}

    .home #after-header-wrap {background-color:transparent;}

    Seems to work! Thanks so much πŸ™‚

    Customer Support

    Awesome. Glad you found the solution πŸ™‚ Thanks for reporting back!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.