Building layouts in Divi continues to develop into further sophisticated and intuitive. You’ll now place modules inside of other modules with Nested Modules. You’ll moreover put rows inside of rows; the ones are known as Nested Rows.

Each and every give you further design freedom, and each and every sound stunning equivalent whilst you first pay attention about them. Then again, they serve as at different levels and fulfill different needs. In this post, we’ll show you the difference and can help you select the right kind function when construction your internet websites with Divi 5.

Figuring out Divi 5’s Nested Choices

Nested Modules and Nested Rows each and every amplify our design alternatives in Divi 5, on the other hand they artwork in a lot of spots within our layout building. Previous than we overview the ones two choices, let’s take a look at what each one does and which controls help you to choose the right kind device while construction.

Subscribe To Our Youtube Channel

What Are Nested Modules?

Nested Modules offered in Divi 5 on October 24, 2025. The function breaks down the old-fashioned barrier that stored modules isolated. You’ll now put modules inside of other modules as many levels deep as you wish to have.

Previous than this exchange, a Blurb Module might most efficient hang its preset portions: an icon or image, a determine, and body text. Now you’ll be capable to add buttons, bureaucracy, or entire row constructions inside of that exact same blurb. The Tabs Module used to easily accept tab content material subject matter. Now, you’ll be capable to assemble multi-column layouts within each tab using nested rows and modules.

Every module in Divi 5 gets treated as a flex or grid container. This means each module comes with layout controls. Position child portions however you want. Stack them vertically, order them horizontally, create grids, or mix approaches.

The Pricing Tables Module shows this smartly. Apply building templates to keep an eye on how value items display. The Blurb Module can keep an eye on its image position by the use of changing the flex-direction setting. The ones layout powers used to belong most efficient to rows and sections. Now modules have them too.

How To Use Nested Modules

Open any module’s settings panel inside the Visual Builder. Seek for the Parts chance staff. This section now turns out in every module, no longer merely structural portions like rows and sections.

Click on on Add Section inside of that staff. You’ll see alternatives to insert each a brand spanking new row or every other module. Choose whichever fits your design.

The interface helps you set portions precisely. Right kind-click on any module to appear alternatives for together with content material subject matter above, underneath, or inside of it. Drag and drop works too. The indicators show exactly the position your element will land, even inside of grid and flex containers.

Whilst you add nested portions, they behave like any other Divi element. Style them in my view. Apply presets. Adjust spacing. Each nested piece gets its private settings panel with entire get right of entry to to design controls.

The Layers panel clearly presentations your nested building. Lengthen and collapse sections to stick your workspace tidy. Establish portions to stay organized, specifically whilst you nest a couple of levels deep. This becomes necessary on complicated builds where you’ll have modules inside of modules inside of modules.

What Are Nested Rows?

We offered Nested Rows in Divi 5 on April 17, 2025. The function allows you to place rows within other rows with numerous nesting options. Stack them as deep as your design needs.

The development can extend to as many levels as you want. We moreover added new column sizing controls with this exchange. You get exact width adjustments for each and every mom or father and nested rows. Improbable-tune measurements to create balanced, actual layouts.

Every row in Divi 5 works as each a flex or grid container. This will provide you with the equivalent layout powers in rows that you already have in sections: keep an eye on alignment, direction, wrapping, and spacing at each stage of your building. Switch between flex and grid display modes in keeping with your layout’s needs.

The ones controls, blended with Nested Rows, give you complete freedom over content material subject matter affiliation. Assemble multi-column layouts inside of other columns. Create asymmetrical grids. Design complicated card layouts. Handle constructions that previously required workarounds or area of expertise sections.

Nested Rows artwork alongside the Flexbox and Grid Construction Techniques and Module Groups we built into Divi 5. All choices combine to imply you’ll be able to collect any layout building you’ll be capable to imagine without delay inside the Visual Builder.

How Do They Artwork?

Open the Visual Builder and add an ordinary row to your internet web page. Click on on inside of any column. The selection so to upload new content material subject matter turns out.

Select the New Row tab. Column layout alternatives display, similar to together with a regular row. Choose your building. The nested row turns out inside of your column.

Each row can use Flex or Grid display mode. Toggle between them in line with what your layout needs. Flex works smartly for flowing content material subject matter. Grid will provide you with actual keep an eye on over alignment and positioning.

Add modules to the nested row. Text, photos, buttons, bureaucracy. The entire thing works the equivalent.

Cross deeper by the use of clicking inside of a nested row column and together with every other row. Stack as many levels as your design needs. Each nested row gets entire keep an eye on over spacing, backgrounds, borders, and layout settings.

The Layers panel shows the entire building. Navigate between nested levels merely. Establish your rows to track complicated layouts.

Nested Modules vs Nested Rows: How Are They Different?

Nested Modules reside inside of other modules. The latter works inside of columns. That placement tells you the entire thing about what each one does.
While you nest modules, you’re together with content material subject matter to an present element. A blurb gets a button. A tab gets an entire row building with a couple of columns. You’re packing further capability proper right into a single design piece. This is particularly helpful for modules like tabs and FAQs, where click on on capacity is worried.

While you nest rows, you’re subdividing space. A column becomes space to a brand spanking new row with its private columns. Those columns can hang further nested rows. You’re rising layouts within layouts, construction complicated constructions without area of expertise sections.

Proper right here’s a at hand information a coarse table to help you overview the differences:

Function	Nested Modules	Nested Rows
Where It Is Used	Inside any module	Inside any column
Main Goal	Add items inside of modules	Create column layouts inside of columns
Where To To find	It’s inside the portions chance staff in module settings	Use the New Row chance when together with content material subject matter to a column
What It Changes	What a module can do and what it has	How home is arranged and the best way deep the layout goes
What It Replaces	Workarounds for module limits	Specific section layouts
Use For	Together with modules inside of interactive modules (similar to tabs and FAQs)	Growing multi-column setups, uneven grids, complicated card designs

Each and every artwork together naturally. Assemble a nested row inside of a column. Fill those nested columns with modules. Nest further content material subject matter inside the ones modules. The device stacks infinitely because of we built each function to handle different jobs at different structural levels in Divi 5.

When To Use Nested Modules & Rows

Each and every choices amplify what you’ll be capable to assemble in Divi 5, on the other hand the development you wish to have determines which one solves your layout problem. From time to time you’ll achieve for one, occasionally the other, and eternally you’ll combine them within the equivalent design. Let’s walk by the use of specific scenarios to get a better idea:

Use Nested Modules When…

You want to pack further into an present module. This works when a single design element needs additional capacity on the other hand you don’t want to rebuild your entire layout.

Conceivable use cases:

• Testimonial sliders with video critiques: Put a video module inside of each testimonial slide. Customers see the written quote first, then can watch all of the video overview. The slider controls the entire thing together.
• Toggle sections with contact bureaucracy: Assemble a FAQ with toggles. One toggle controls your contact form, while every other presentations your location map. People can get right of entry to knowledge and achieve out without leaving the section.
• Title to movement boxes with countdown timers: Drop a countdown module inside of your CTA. Limited-time offers get the urgency element built correct in. The timer, headline, description, and button all switch as one unit.
• Gallery items with caption overlays and buttons: Each gallery image features a text module for the caption, in conjunction with a button to learn further. Your portfolio pieces develop into interactive without custom designed coding.

Use Nested Rows When…

You wish to have to divide space and create building within building. This comes into play when your design requires columns within columns or when you want to use different column arrangements at relatively numerous problems on your internet web page.

Conceivable use cases:

• Hero sections with offset content material subject matter blocks: Reduce up your hero into two columns. The left column holds your headline and button. The most productive column comprises a nested three-column row showing rapid stats or key choices. The asymmetry makes the layout pop.
• Product pages with tiered knowledge: Your number one row has two columns. The larger column gets a nested row with product photos arranged in a custom designed grid. The smaller column shows pricing and specs in a single stack. Each house gets its private internal building.
• Blog layouts with embedded sidebars: Create a two-column row. The content material subject matter column comprises nested rows for more than a few article sections. Each nested row may have its private column affiliation for quotes, photos, or callout boxes located exactly the position you want them.
• Footer sections with grouped links: Assemble a four-column footer. Inside one column, add a nested two-column row to split your social links and speak to data aspect by the use of aspect, while other columns stay single stack.

Take a look at Nested Rows & Modules In Divi 5 This present day

Each and every choices give you the freedom to build layouts that previously required workarounds or custom designed code. We designed them to handle relatively numerous tasks at different levels within your design. Now you’ll be capable to add further capability to single portions or divide space into new arrangements. Select the function that most nearly fits your undertaking.

Seize Divi 5 and see how the ones choices trade one of the best ways you way layout problems on your next undertaking.

The post The use of Nested Modules vs Nested Rows In Divi 5 appeared first on Chic Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more