1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Turn off Boxed Layout on Single Page?

Discussion in 'Free Divi Community Forum' started by DiviDudester, Nov 9, 2019.

  1. DiviDudester

    DiviDudester New Member

    I am using the boxed layout on a Divi site but I want to turn it off on one page. How do I do that?

    Thanks!
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade before / after image slider for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    body.page-id-2.et_boxed_layout #page-container, body.page-id-2.et_boxed_layout #main-header, body.page-id-2.et_boxed_layout #top-header {
        max-width: 100%!important;
        width: 100%!important;
    }
    **Change page-id-2 to your own page ID.
     
  3. DiviDudester

    DiviDudester New Member

    Thanks!

    Alternatively, what

    I didn't realize it would be this complicated. I should've mentioned the following:

    - My goal is a full width page without the Divi header/navigation.
    - The site is currently set to a boxed layout. It has a vertical navigation on the left side.

    When I use the CSS you provided, it makes the header/navigation full screen and the body of the page disappears.

    Any ideas?

    Thanks so much!



    I'm unsure if this helps, but I built full-width page on a site set to full-width.
     
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    To hide the header, just use the blank template: https://www.elegantthemes.com/documentation/divi/blank-page/
     
  5. HVACadvice

    HVACadvice New Member

    Apologies for resurrecting an old thread. A Google search pointed me here and the information in this thread solved my problem. Thank you!

    If you can, could you give me the CSS for doing three pages at once?

    I repeated the first reply's code three times and that did the trick. I'm just wondering if there's a more elegant way to do it.
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    For that case, you can just combine all 3 pages into 1 line. For example:
    Code:
    body.page-id-1.et_boxed_layout #page-container, body.page-id-1.et_boxed_layout #main-header, body.page-id-1.et_boxed_layout #top-header,
        body.page-id-2.et_boxed_layout #page-container, body.page-id-2.et_boxed_layout #main-header, body.page-id-2.et_boxed_layout #top-header,
            body.page-id-3.et_boxed_layout #page-container, body.page-id-3.et_boxed_layout #main-header, body.page-id-3.et_boxed_layout #top-header {
        max-width: 100%!important;
        width: 100%!important;
    }