Desktop source order
1. Hero heading + CTA
2. Hero image
3. Feature cards (x3)
4. Testimonial
5. CTA banner
Mobile priority order
1. Hero heading + CTA
2. Hero image
3. CTA banner
4. Testimonial
5. Feature cards (x3)
Master Flexbox with Divi 5
Tip #1
Your content goes here.
Tip #2
Your content goes here.
Tip #3
Your content goes here.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Ready To Build Better Layouts?
D
T
P
Active: Desktop — settings here are the inherited default
Variable generator tokens — set on Desktop only
font-size: clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem)
space-m: clamp(1rem, calc(0.008081 * (100vw - 360px) + 16px), 1.5rem)
space-l: clamp(1.125rem, calc(0.021042 * (100vw - 360px) + 18px), 2.427rem)
Generated by Divi 5's variable generator — fluidly scale between viewports, no Tablet/Phone override needed for any of them.
Desktop
Padding: space-l (set here)
Font size: clamp() (set here)
Direction: Row
Tablet — override
Padding: inherited — space-l scales itself
Font size: inherited — clamp() handles it
Direction: Row
Phone — override
Padding: inherited — space-l scales itself
Font size: inherited — clamp() handles it
Direction: inherited
What's new in Divi 5
Fluid Layouts. Zero Compromises.
Visual flex controls
Direction, gap, wrap, and alignment — editable per module, no code required.
Variable generator
One clamp() value per property. Perfect fluid scaling across every viewport, automatically.
One row, wrap: on, column class:1/3.
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Old way (pre-Flexbox)
Row 1: Card 1, 2, 3
Row 2: Card 4, 5, 6
2 separate row structures
Flexbox way
1 row, Wrap: On
Column class: 1/3
1 structure, scales to any item count
What's new in Divi 5
Everything you need to build responsive layouts
Visual Builder
Drag-and-drop modules with live preview across all breakpoints.
Flex Controls
Direction, gap, wrap, and alignment set per module without writing CSS.
Responsive Editor
Per-breakpoint overrides for any setting, applied directly in the Visual Builder.
Variable Generator
Fluid clamp() values for type and spacing — generated once, scales everywhere.
Theme Builder
Control headers, footers, and post templates with full Flexbox support throughout.
Divi Library
Save and reuse sections across every project — breakpoint settings included.
Without Grow to Fill
Short copy
Much longer copy that wraps to several lines
Buttons misaligned, heights uneven
With Grow to Fill + Justify Content: Stretch
Short copy
Much longer copy that wraps to several lines
Equal heights, buttons align at bottom
HOW WE WORK
Three ways we can help you ship
Discovery and strategy
We map your users' journey and define site structure before a single pixel is placed. Goals documented, stakeholders aligned.
Design and development
Full Divi 5 build with custom flex layouts, mobile-optimized sections, scroll animations, and WooCommerce integration. Four-week delivery with two rounds of revision included.
Monthly support
Post-launch content updates, uptime monitoring, and plugin maintenance. Plans from $299 per month.
Nested module group — own flex context, direction: column
Heading
Body Text
What's new in Divi 5
Nested flex contexts, total control
Module groups inside rows create independent flex containers. Set direction, gap, and display order inside the card without touching the outer row. Each context responds to its own breakpoint overrides.
Display Order
2 → 1: Image
1 → 2: Text
Wrap Reverse
Last item first
middle
first item last
Layout Direction
2 → 1: Image
2 → 1: Image
What's new in Divi 5
The Divi 5 flex row is live
One row module replaces the old column system entirely. Set direction, gap, wrap, and order — all from the Visual Builder.
Logical source order
Visual reorder via Display Order, not by physically dragging modules out of reading order — keeps screen readers sane.
Avoid over-nesting
Last item first
middle
middle
2–3 flex levels deep max — each extra wrapper is a render cost.
Reusable library items
Save tested flex rows (cards, CTAs) to the library so spacing and breakpoint logic doesn't get rebuilt per page.
How we build
Three principles behind every layout
Logical source order
Structure modules in the order a screen reader or keyboard user would encounter them. Use Display Order only to shift visual position — never to compensate for a broken source structure.
Avoid over-nesting
Two or three flex levels covers nearly every layout. A row, a nested group, and a button row inside it. Every extra wrapper adds a render cost and makes the Layers panel harder to maintain.
Save to the Divi Library
Once a flex row is tested across all breakpoints, save it to the Divi library. Spacing, direction, and display order settings travel with it — no rebuilding layout logic page after page.
1. Desktop
Long headlines, real images, real button labels
2. Tablet
Watch for awkward 2-up wraps, cramped gaps
3. Phone
Check order, tap targets, text overflow
4. Edge content
Test with the longest realistic title/copy
Divi 5 in production
Responsive layouts that hold up with real content, not placeholder copy
Short headline
Flex Gaps
Consistent spacing between modules regardless of how many wrap onto a second line.
Medium headline
Align items and grow to fill
Cards match height even when one has two sentences and another has four. Buttons stay anchored to the bottom of every card in the row.
Longest headline
Display order and wrap reverse
Mobile reordering works correctly when the section uses real section titles and full-length description copy instead of two-word placeholders.