Is Divi's "boxed layout" right for you? (Boxed Layout)

Published on 24/02/2019 | 12 comments

Websites with a " boxed layout" are becoming rare these days. We see less and less of them... The theme Divi offers this option and your choice will be crucial for the rest of your project design.

The design of your website is a decision that must be made at the beginning of the customize your theme.

Is this design right for you? How do I enable nested layout with Divi? What are the benefits? This article will answer all these questions...

Here is the program:

 

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

 

What is Divi's boxed layout?

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

The boxed layout defines a fixed width to display the content of each of your pages. Thus, whatever the screen resolution, your website will always keep the same size because the boxed layout offers a fixed width.

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

 

When to choose the nested layout?

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

Even though this can be changed on the fly (as it's very easy to check or uncheck the option in Divi), it could impact the overall design of your site.

The nested layout (or not) should be decided at the same time as the type of header you wish 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 menus and headers. In this article, you'll learn about the various design types you can use for your Divi site's main menu.

 

How do I enable nested layout on Divi?

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

Activer la mise en page emboitée de Divi

Enable Divi's Boxed Layout

  1. Go to the Appearancetab > Customize
  2. Click on General Settings
  3. Click on Layout Settings
  4. Check the Enable nestedlayout option
  5. Don't forget to click "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 boxed layout and a full width layout.

On the first screenshot, you can see that the web page is 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 make...

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

Here are two examples of nested layouts 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 websites for my clients, it is rare that I choose this type of layout but I have chosen it in some cases. You have to take into account the target audience, the overall design and the atmosphere of the site.

In addition to all of this, this nested layout can allow for many customizations that are not possible with a full-width layout.

 

How can I use Divi's nesting layout in a new way?

We're getting there...

When you choose Divi's nested layout, it only allows you to set a background image or a background color.

I propose to change this to your advantage in two new tutorials:

 

Need more resources on Divi's Boxed Layout? Check out these articles from the ElegantTheme blog which is 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

932 words

4

You should like it too:

Utilisez les couleurs globales de Divi pour plus de productivité !

Use Divi's global colours for more productivity!

🚀 Do you create your clients' websites with WordPress and Divi and are looking for productivity?
🥳 Perfect, I explain how to use Divi's global colours to avoid wasting time with multiple actions when you want to change a colour on your entire site...

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 e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

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