Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[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
    Posts
  • #370710
    Callista

    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 (http://consulting.callistarakhmatov.com/). 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: http://consulting.callistarakhmatov.com/about/). 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,
    Callista

    GeneratePress 1.4
    GP Premium 1.4.3
    #370906
    Leo
    Staff
    Customer Support

    Hi there,

    You can try using Full width here: https://docs.generatepress.com/article/page-builder-container/

    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 🙂

    #371238
    Callista

    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.

    #371296
    Leo
    Staff
    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?

    #371343
    Callista

    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?

    #371360
    Callista

    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.

    #371374
    Callista

    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 🙂

    #371402
    Leo
    Staff
    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.