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:
- What is the nested layout of Divi (or boxed layout)?
- When to choose the nested layout?
- How to activate the nested layout on Divi?
- What does a "nested" layout look like?
- What are the advantages of choosing a nested layout?
- How to use the nested layout of Divi in an original way?
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.
- Go to the Appearance tab > Customize
- Click on General Settings
- Click on Layout Settings
- Check the option Enable nested layout
- 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?
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:
- how to get a different background color 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? Discover these articles from ElegantTheme's blog full of ideas and tutorials!