Development layouts in Divi continues to turn out to be extra complicated and intuitive. You’ll now position modules within different modules with Nested Modules. You’ll additionally put rows within rows; those are referred to as Nested Rows.
Each provide you with extra design freedom, and each sound beautiful identical while you first listen about them. Alternatively, they function at other ranges and satisfy other wishes. On this publish, we’ll display you the adaptation and assist you to pick out the proper characteristic when development your web sites with Divi 5.
Working out Divi 5’s Nested Options
Nested Modules and Nested Rows each enlarge our design choices in Divi 5, however they paintings in numerous spots inside our format construction. Earlier than we evaluate those two options, let’s have a look at what every one does and which controls assist you to select the proper instrument whilst development.
Subscribe To Our Youtube Channel
What Are Nested Modules?
Nested Modules introduced in Divi 5 on October 24, 2025. The characteristic breaks down the outdated barrier that saved modules remoted. You’ll now put modules within different modules as many ranges deep as you want.
Earlier than this replace, a Blurb Module may most effective dangle its preset parts: an icon or symbol, a identify, and frame textual content. Now you’ll be able to upload buttons, paperwork, or complete row buildings within that very same blurb. The Tabs Module used to simply settle for tab content material. Now, you’ll be able to construct multi-column layouts inside every tab the usage of nested rows and modules.
Each and every module in Divi 5 will get handled as a flex or grid container. This implies every module comes with format controls. Place kid parts on the other hand you wish to have. Stack them vertically, organize them horizontally, create grids, or combine approaches.
The Pricing Tables Module presentations this neatly. Observe construction templates to regulate how worth pieces show. The Blurb Module can regulate its symbol place via converting the flex-direction environment. Those format powers used to belong most effective to rows and sections. Now modules have them too.
How To Use Nested Modules
Open any module’s settings panel within the Visible Builder. Search for the Components possibility crew. This phase now seems in each and every module, now not simply structural parts like rows and sections.
Click on Upload Part within that crew. You’ll see choices to insert both a brand new row or some other module. Select whichever suits your design.
The interface is helping you put parts exactly. Proper-click on any module to look choices for including content material above, beneath, or within it. Drag and drop works too. The symptoms display precisely the place your component will land, even within grid and flex packing containers.
When you upload nested parts, they behave like another Divi component. Taste them personally. Observe presets. Alter spacing. Every nested piece will get its personal settings panel with complete get admission to to design controls.
The Layers panel obviously shows your nested construction. Extend and cave in sections to stay your workspace tidy. Identify parts to stick arranged, particularly while you nest more than one ranges deep. This turns into vital on advanced builds the place you’ll have modules within modules within modules.
What Are Nested Rows?
We introduced Nested Rows in Divi 5 on April 17, 2025. The characteristic permits you to position rows inside different rows with countless nesting features. Stack them as deep as your design wishes.
The construction can lengthen to as many ranges as you wish to have. We additionally added new column sizing controls with this replace. You get actual width changes for each mother or father and nested rows. Fantastic-tune measurements to create balanced, exact layouts.
Each and every row in Divi 5 works as both a flex or grid container. This provides you with the similar format powers in rows that you have already got in sections: regulate alignment, route, wrapping, and spacing at every degree of your construction. Transfer between flex and grid show modes in line with your format’s wishes.
Those controls, mixed with Nested Rows, provide you with whole freedom over content material association. Construct multi-column layouts within different columns. Create asymmetrical grids. Design advanced card layouts. Maintain buildings that in the past required workarounds or uniqueness sections.
Nested Rows paintings along the Flexbox and Grid Structure Programs and Module Teams we constructed into Divi 5. All options mix to mean you can assemble any format construction you’ll be able to consider at once within the Visible Builder.
How Do They Paintings?
Open the Visible Builder and upload a regular row on your web page. Click on within any column. The choice so as to add new content material seems.
Make a selection the New Row tab. Column format choices show, identical to including a typical row. Select your construction. The nested row seems within your column.
Every row can use Flex or Grid show mode. Toggle between them in response to what your format wishes. Flex works neatly for flowing content material. Grid provides you with exact regulate over alignment and positioning.
Upload modules to the nested row. Textual content, pictures, buttons, paperwork. The whole thing works the similar.
Pass deeper via clicking within a nested row column and including some other row. Stack as many ranges as your design wishes. Every nested row will get complete regulate over spacing, backgrounds, borders, and format settings.
The Layers panel presentations all the construction. Navigate between nested ranges simply. Identify your rows to trace advanced layouts.
Nested Modules vs Nested Rows: How Are They Other?
Nested Modules are living within different modules. The latter works within columns. That placement tells you the whole thing about what every one does.
Whilst you nest modules, you’re including content material to an current component. A blurb will get a button. A tab will get a complete row construction with more than one columns. You’re packing extra capacity right into a unmarried design piece. That is specifically useful for modules like tabs and FAQs, the place click on capability is concerned.
Whilst you nest rows, you’re subdividing house. A column turns into house to a brand new row with its personal columns. The ones columns can dangle extra nested rows. You’re growing layouts inside layouts, development advanced buildings with out uniqueness sections.
Right here’s a handy guide a rough desk that will help you evaluate the diversities:
| Characteristic | Nested Modules | Nested Rows |
|---|---|---|
| The place It Is Used | Within any module | Within any column |
| Major Objective | Upload pieces within modules | Create column layouts within columns |
| The place To In finding | It’s within the parts possibility crew in module settings | Use the New Row possibility when including content material to a column |
| What It Adjustments | What a module can do and what it has | How house is organized and the way deep the format is going |
| What It Replaces | Workarounds for module limits | Particular phase layouts |
| Use For | Including modules within interactive modules (comparable to tabs and FAQs) | Developing multi-column setups, asymmetric grids, advanced card designs |
Each paintings in combination naturally. Construct a nested row within a column. Fill the ones nested columns with modules. Nest extra content material within the ones modules. The machine stacks infinitely as a result of we constructed every characteristic to deal with other jobs at other structural ranges in Divi 5.
When To Use Nested Modules & Rows
Each options enlarge what you’ll be able to construct in Divi 5, however the construction you want determines which one solves your format downside. Once in a while you’ll succeed in for one, infrequently the opposite, and ceaselessly you’ll mix them in the similar design. Let’s stroll via particular eventualities to get a greater thought:
Use Nested Modules When…
You wish to have to pack extra into an current module. This works when a unmarried design component wishes further capability however you don’t wish to rebuild all your format.
Possible use circumstances:
- Testimonial sliders with video evaluations: Put a video module within every testimonial slide. Consumers see the written quote first, then can watch the entire video evaluate. The slider controls the whole thing in combination.
- Toggle sections with touch paperwork: Construct a FAQ with toggles. One toggle controls your touch shape, whilst some other shows your location map. Other folks can get admission to data and succeed in out with out leaving the phase.
- Name to motion bins with countdown timers: Drop a countdown module within your CTA. Restricted-time gives get the urgency component constructed proper in. The timer, headline, description, and button all transfer as one unit.
- Gallery pieces with caption overlays and buttons: Every gallery symbol includes a textual content module for the caption, at the side of a button to be informed extra. Your portfolio items turn out to be interactive with out customized coding.
Use Nested Rows When…
You want to divide house and create construction inside construction. This comes into play when your design calls for columns inside columns or when you wish to have to make use of other column preparations at quite a lot of issues to your web page.
Possible use circumstances:
- Hero sections with offset content material blocks: Cut up your hero into two columns. The left column holds your headline and button. The best column accommodates a nested three-column row appearing fast stats or key options. The asymmetry makes the format pop.
- Product pages with tiered data: Your primary row has two columns. The bigger column will get a nested row with product pictures organized in a customized grid. The smaller column presentations pricing and specifications in one stack. Every space will get its personal inner construction.
- Weblog layouts with embedded sidebars: Create a two-column row. The content material column accommodates nested rows for various article sections. Every nested row will have its personal column association for quotes, pictures, or callout bins situated precisely the place you wish to have them.
- Footer sections with grouped hyperlinks: Construct a four-column footer. Within one column, upload a nested two-column row to separate your social hyperlinks and make contact with information facet via facet, whilst different columns keep unmarried stack.
Check out Nested Rows & Modules In Divi 5 These days
Each options provide the freedom to construct layouts that in the past required workarounds or customized code. We designed them to deal with quite a lot of duties at other ranges inside your design. Now you’ll be able to upload extra capacity to unmarried parts or divide house into new preparations. Make a selection the characteristic that most closely fits your mission.
Take hold of Divi 5 and spot how those options alternate the best way you manner format issues to your subsequent mission.
The publish The use of Nested Modules vs Nested Rows In Divi 5 gave the impression first on Chic Topics Weblog.
WordPress Web Design