Is Divi's "nested layout" made for you? (Boxed Layout)

Published on 24/02/2019 | 12 comments

Websites with a "nested layout" - also known as "Boxed Layout" - are nowadays quite rare. We see less and less... The theme Divi offers this option and your choice will be crucial for the further design of your project.

The boxing of your site's design is a bias that must be decided at the beginning of the customization of your theme.

Is this design for you? How to activate the nested layout with Divi? What are the advantages? This article will answer all these questions....

Here is the program:

 

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

 

What is the nested layout of Divi (or boxed layout)?

Websites using "framed models" allow you to define width limits for the main body of the page.

The boxed layout sets a fixed width to display the content of each of your pages. So, regardless of the screen resolution, your website will always remain the same size because the container has a fixed width.

Even if in the mobile version it can reduce the width of your pages, in the desktop version (and especially on large computers), the reading of your pages and articles will be made easier because the user will not have to browse your essays on a 100% width. This can be tiring on very large screens.

 

When to choose the nested layout?

Ideally, you should decide on this layout from the beginning of the launch of your web project.

Even if it can be modified along the way (because it's very easy to check or uncheck the Divi option), it could impact the overall design of your site.

The nested (or not) layout should be decided at the same time as the type of header you want to offer on your site.

To learn more about the types of menus/headers offered by Divi, I suggest you discover my article about Divi's menus and headers. In this article, you will discover the various types of design that you can use for the main menu of your Divi website.

 

How to activate the nested layout on Divi?

Good news, it's more than simple. Just check an option in the Divi settings.

Activer la mise en page emboitée de Divi

Enable the nested layout of Divi (also known as Boxed Layout)

  1. Go to the Appearance tab > Customize
  2. Click on General Settings
  3. Click on Layout Settings
  4. Check the option Enable nested layout
  5. Don't forget to click on "Publish" to save your changes.

You can even define the width of your site's content with additional options.

 

What does a "nested" layout look like?

Mise ne page emboitée ou boxed layout

Here is the difference between a nested layout (or boxed layout) and a full width layout.

On the first screenshot, we see that the web page extends over 100% of the screen width. This is the "default" layout proposed by the Divi theme. If this type of design suits you, you will not have to do anything. No changes to be made....

On the second screenshot, we can see that the content of the page is reduced, like "boxed". The web page then shows a kind of "void" on both sides. The nested layout being a specific will, you can activate it with a simple option as seen in the previous chapter.

Here are two examples of layout nested with Divi:

 

What are the advantages of choosing a nested layout?

Of course, choosing this type of layout is a matter of taste, but beyond that, it is a matter of design...

When I create sites for my clients, it is rare that I choose this type of layout but I have chosen it in some cases. It is therefore necessary to take into account the target audience, the overall design and the atmosphere of the site.

In addition to all this, this nested layout can give free rein to many customizations that are not possible with a full width layout.

 

How to use the nested layout of Divi in an original way?

It comes down to that...

When you choose the nested layout of Divi, it only allows you to define a background image or background color.

I suggest you change this to your advantage in two new tutorials:

 

Need more resources on Divi's Boxed Layout? Discover these articles from ElegantTheme's blog full of ideas and tutorials!

 

La mise en page emboitée de Divi (boxed layout)
Mise en page emboitée de Divi (boxed layout)
Divi boxed layout

You should like it too:

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block: Divi modules within Gutenberg!

Good news! Version 4.1 of Divi allows Divi Builder modules to be inserted into the WordPress Gutenberg editor. Your imagination knows no bounds! Can you imagine how much you can achieve with Divi and WordPress?

12 Commentaires

  1. David

    On est d’accord que sur Ecran de PC c’est plus lisible surtout avec les tailles d’écran en WXGA d’aujourd’hui.

    Par contre sur Mobile on n’a pas forcement envi d’avoir une marge sur les cotés… L’écran étant déjà réduit en visibilité (largeur).

    Du coup, je cherche à mettre la taille en pleine largeur seulement sur mobile.
    J’y arrive mais le top-heder et main-header se mettent aussi à 100%, du coup plus de marge là ou se trouve le logo et l’hamburger…

    Voici le code utilisé :
    /* Largeur page sur mobile */
    @media only screen and (max-width:980px) {
    .et_boxed_layout #page-container,
    .et_boxed_layout #page-container .container,
    .et_boxed_layout #page-container .et_pb_row,
    .et_boxed_layout.et_non_fixed_nav.et_transparent_nav #page-container #top-header,
    .et_boxed_layout.et_pb_pagebuilder_layout.single #page-container .et_pb_row,
    .et_boxed_layout.et_pb_pagebuilder_layout.single.et_full_width_page #page-container .et_pb_row,
    .et_boxed_layout.et_pb_pagebuilder_layout.single.et_full_width_portfolio_page #page-container .et_pb_row,
    .et_fixed_nav.et_boxed_layout #page-container #main-header,
    .et_fixed_nav.et_boxed_layout #page-container #top-header,
    .et_non_fixed_nav.et_transparent_nav.et_boxed_layout #page-container #main-header {
    width: 100% !important;
    }
    }

    Je vois que sur le site Divi Soup il est bien configuré.
    Avez-vous une idée des class et ID à modifier ?

  2. Lycia Diaz

    Je comprends tout à fait ce que tu veux dire mais il faudrait que je teste pour voir sur quelle classe CSS s’appuyer. Si j’ai un moment, je regarde…

  3. David

    Merci par avance Lycia.
    J’ai un site de test au besoin 😉

  4. Lycia Diaz

    As-tu un lien ?

  5. David

    Pardon pour le temps de réponse. Je finalisais le WP de test avec DIVI et la page emboitée.
    Je t’ai envoyé un mail avec les accès 😉

  6. Dominique

    Merci pour vos conseils. Cela m’a super bien aide

  7. Lycia Diaz

    Merci Dominique 😉

  8. Fab

    Je serais aussi intéressé par une solution de mise en page emboitée uniquement pour ordinateurs (et 100% pour les mobiles). Si quelqu’un a une solution…

  9. Lycia Diaz

    Salut Fab,
    Je suppose que ce n’est pas compliqué mais il faut que je cherche un peu. Dès que j’ai le temps, je mets le tuto à jour. En attendant, tu peux chercher du côté du CSS et des media-queries.

  10. David

    Aller c’est cadeau 😉

    /* Page pleine largeur sur Mobile */
    @media only screen and (max-width: 980px) {
    .et_boxed_layout #page-container,
    .et_boxed_layout #page-container #main-header,
    .et_boxed_layout #page-container #top-header,
    .et_boxed_layout #page-container #main-footer {
    width: 100% !important;
    }
    }

  11. Lycia Diaz

    Merci 😉

  12. David

    Bien entendu cela fonctionne que par rapport à la taille de l’écran < 980px.
    Et non depuis le type de périphérique utilisé (Mobile, tablette, PC/MAC, etc…)

    Il serai éventuellement possible de le faire en jQuery mais je ne vois pas trop l’intérêt.

    A 980px, on a les smartphone et les tablettes (en mode portrait seulement, en paysage la largeur dépasse souvent les 980px).

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This