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:
- 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 can I use Divi's nesting layout in a new way?
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.
- Go to the Appearancetab > Customize
- Click on General Settings
- Click on Layout Settings
- Check the Enable nestedlayout option
- 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?
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:
- how to get a different background color on each page of your Divi site?
- How do you 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!