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 further design of your project.
The design of your website is a decision that must be made at the beginning of the customising your theme.
Is this design for you? How do I enable nested layouts with Divi? What are the benefits? This article will answer all these questions...
Here is the programme:
- What is Divi's boxed layout?
- When to choose the nested layout?
- How do I enable nested layout on Divi?
- What does a "nested" layout look like?
- What are the advantages of choosing a nested layout?
- How to use Divi's nesting layout in an original way?
Announcement: this article contains affiliate links that you will easily recognise. 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 set 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. So, whatever the screen resolution, your website will always keep the same size because the boxed layout has 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 Internet user will not have to browse your writings 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 start of your web project.
Although this can be changed on the fly (as it is 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 on Divi menus and headers. In this article, you'll learn about the different types of designs you can use for the main menu of your Divi site.
How do I enable nested layout on Divi?
The good news is that this is more than simple. Just check an option in the Divi settings.
Enable Divi's Boxed Layout
- Go to the Appearance > Customisetab
- Click on General Settings
- Click on Layout settings
- Check the Enable nested layoutoption
- 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?
Here is the difference between a boxed layout and a full-width layout.
In the first screenshot, you can see that the web page extends to 100% of the screen width. This is the "default" layout offered by the Divi theme. If this type of design suits you, you will not have to do anything. No changes to be made...
In the second screenshot, we can see that the content of the page is reduced, as if "boxed". The web page then shows a sort of "void" on both sides. As 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, I rarely choose this type of layout, but I have chosen it in some cases. So 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 a lot of customisation that is not possible with a full width layout.
How to use Divi's nesting layout in an original way?
We're getting there...
When you choose Divi's nested layout, it only allows you to set a background image or background colour.
I propose to change this to your advantage in two new tutorials:
- how to get a different background colour on each page of your Divi site?
- how to display a different background image on each page of your Divi site?
Need more resources on Divi's Boxed Layout? Check out these articles from the ElegantTheme blog which is full of ideas and tutorials!
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 ?
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…
Merci par avance Lycia.
J’ai un site de test au besoin 😉
As-tu un lien ?
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 😉
Merci pour vos conseils. Cela m’a super bien aide
Merci Dominique 😉
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…
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.
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;
}
}
Merci 😉
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).