Now, in Part 7, we’ll focus on smaller layout patterns that appear on almost every website: button groups, navigation menus, breadcrumbs, footer links, and tag rows. These elements look simple, but they can be tricky to make responsive because they often need to stay horizontal on Desktop, wrap cleanly on Tablet, and stack or expand on Phone without feeling cramped.

With Divi 5’s Flexbox Layout System, you can build flexible button groups, menu rows, and link sections directly in the Visual Builder. By combining Layout Direction, Gap, Layout Wrapping, Column Class, Module Groups, and responsive sizing, you can create interaction-heavy rows that adapt across screen sizes without duplicating structures or writing custom CSS for common layout patterns.

Let’s dive in.

Why Button, Menu, And Link Rows Need Special Attention

Buttons, menus, and link rows are some of the most important interactive elements on a website. They guide users to key pages, actions, categories, and conversion points, so they need to remain clear and easy to use across screen sizes.

The challenge is that these rows often have competing layout needs. On Desktop, they usually look best as compact horizontal groups. On Tablet, they may need to wrap into multiple lines. On Phone, they may need to stack vertically, become full width, or move into a separate mobile menu.

Common problems include cramped spacing, misaligned icons and labels, buttons that are too small to tap comfortably, menu rows that break awkwardly on Tablet, and link groups that lose their structure when they wrap.

Divi 5’s Flexbox tools help solve these issues at the container level. Instead of adding manual margins to every item or duplicating separate mobile versions, you can use parent-level controls like Horizontal Gap, Vertical Gap, Layout Direction, and Layout Wrapping to manage how the group behaves.

Core Flexbox Techniques For These Elements

Creating flexible button, menu, and link rows in Divi 5 becomes easier once you understand which Flexbox controls do the heavy lifting.

Layout Direction controls the main flow of the container. Use Row when items should sit side-by-side and Column when they should stack vertically. You can change this per breakpoint, which is useful for button groups that stay horizontal on Desktop but stack on Phone.

Justify Content and Align Items control distribution and alignment. Justify Content works along the main axis, while Align Items works along the cross axis. Together, they help you center icon-and-text pairs, distribute navigation groups, and keep buttons aligned inside their parent container.

Horizontal Gap and Vertical Gap provide consistent spacing between direct child items without adding margins to every button, link, or module. This is especially useful when a row wraps because the spacing between items and lines stays centralized in one place.

Layout Wrapping lets items move onto additional lines when they no longer fit in one row. Combine it with Column Class or Structure Templates when you want more control over how many items appear per line at each breakpoint.

Finally, Module Groups let you create smaller layout contexts inside a larger row or column. Wrap related buttons, links, icons, or menu items in a Module Group so you can apply independent Flexbox settings without affecting the rest of the layout.

Together, these controls help you build reusable, responsive interaction rows with less manual spacing and fewer breakpoint-specific fixes.

Real-World Examples

Let’s look at five examples that show how to create flexible button, menu, and link rows using Divi 5’s Flexbox features. Each one includes the Desktop layout, the responsive challenge, and the settings used.

Example 1: Flexible Button Group

Goal: Create a row of buttons that stays neatly spaced on Desktop, then stacks and expands on Phone for easier tapping.

The Challenge: Buttons can become cramped when screen width is limited, especially when labels are longer or multiple CTAs sit side-by-side.

The Solution: Place the buttons inside a Module Group. Use Layout Direction > Row on Desktop and Tablet, then switch the Group to Layout Direction > Column on Phone. Use Horizontal Gap and Vertical Gap for spacing, then adjust the button sizing on Phone when you want the buttons to span most of the viewport.

Settings Used: Place a Module Group with three Button modules inside a single-column row. At the Desktop and Tablet breakpoints, set the Group’s Layout Direction to Row and apply a 10px Horizontal Gap and 10px Vertical Gap.

On the Phone breakpoint, switch the Group’s Layout Direction to Column.

Then, widen each button on Phone using the Sizing options in the Button module’s Design tab. Set the Button Width and Button Max Width to a value such as 90vw, then set the Button module alignment to Center.

Example 2: Breadcrumb Link Row

Goal: Create a horizontal breadcrumb row that remains readable on Desktop while stacking neatly on Phone.

The Challenge On Mobile: Breadcrumb links can become cramped or wrap awkwardly, making the row harder to scan and tap on smaller screens.

The Solution: Place the breadcrumb links inside a Module Group. Use Layout Direction > Row on Desktop and Tablet for a horizontal flow, then switch to Layout Direction > Column on Phone. Adjust the vertical spacing so the breadcrumb remains compact but readable.

Settings Used: Set the Module Group’s Layout Direction to Row on the Desktop and Tablet breakpoints. Add a 10px Horizontal Gap and 10px Vertical Gap, then set Justify Content and Align Items to Center.

On the Phone breakpoint, set the Module Group’s Layout Direction to Column, adjust the Vertical Gap to 5px, and keep the remaining alignment settings unchanged.

Example 3: Footer With Link Groups

Goal: Create a multi-column footer with link groups, such as Product, Company, Resources, and Legal, that stays organized on Desktop and stacks cleanly on Phone.

The Challenge On Mobile: Footer links can become cramped, uneven, or hard to scan when the layout narrows.

The Solution: Use a row with Layout Wrapping enabled and adjust gaps at both the row and Module Group levels. At the row level, gaps control spacing between the link columns. At the Module Group level, gaps control spacing between the individual links inside each group.

Settings Used: At the Row level, set the Horizontal Gap to 25%, the Vertical Gap to 30px, and enable Layout Wrapping.

At the Row’s Phone breakpoint, set the Vertical Gap to 20px.

On the Desktop breakpoint, set each Module Group’s Vertical Gap to 10px.

For each Module Group at the Phone breakpoint, keep the spacing settings unchanged and set Align Items to Center so the link groups align neatly in the stacked layout.

Example 4: Header Navigation With A Nested Button Group

Goal: Build a header with a logo, navigation links, and a button group that stays horizontal on Desktop but adapts cleanly on Tablet and Phone.

The Challenge On Mobile: Navigation links and buttons can become cramped or misaligned, and the button group may need different sizing behavior than the main menu.

The Solution: Use a parent Column for the full header row and Module Groups for related items. The logo and menu can sit in one group, while the CTA buttons can sit in another. This gives each part of the header its own Flexbox settings and responsive sizing.

Settings Used: At the Column level, set the Layout Direction to Row, set the Horizontal Gap and Vertical Gap to 10px, set Justify Content to Space Between, and set Align Items to Center.

For the Module Group, set Justify Content to Space Between and Align Items to Center.

On the Phone breakpoint, set the Column Vertical Gap to 15px and leave the remaining settings unchanged unless your design needs a different mobile structure.

In addition to the Flexbox settings, adjust the Sizing for the Module Group across breakpoints. Set the Group width to 75% on Desktop, 65% on Tablet, and 100% on Phone. This helps the logo and menu group use the available width more effectively on smaller screens.

Finally, set each Button‘s width to 80vw on the Phone breakpoint so the buttons can span most of the viewport.

Example 5: Tag Cloud

Goal: Create a flexible tag cloud or category row that flows horizontally on larger screens and wraps naturally on smaller screens.

The Challenge On Mobile: Tag clouds can become cramped, uneven, or hard to tap when tag lengths vary.

The Solution: Use a single Column or Module Group with Layout Direction > Row and Layout Wrapping > Wrap. Apply Horizontal Gap and Vertical Gap at the parent level so tags have consistent spacing as they wrap. Because the layout is designed to wrap naturally, it can often use the same Flexbox settings across breakpoints.

Settings Used: The Column uses Layout Direction > Row, a 10px Horizontal Gap, and a 10px Vertical Gap. Justify Content and Align Items are both set to Center, and Layout Wrapping is enabled. These settings remain consistent across breakpoints.

Step-By-Step Build

Let’s walk through building a custom menu that includes a logo, navigation links, a CTA, and a mobile menu. By the end, you’ll understand how to combine Flexbox, Module Groups, Link loops, Canvases, and Interactions for a responsive navigation workflow.

Set Up The Main Row Structure

Start by adding a single-column row to a new page in the Visual Builder. If needed, select Flex as the Layout Style. In the Row’s Design tab, expand the Layout option group. Set the Horizontal Gap to 0px, set the Vertical Gap to 5px, and enable Layout Wrapping > Wrap.

Open the Column settings and go to the Design tab. In the Layout option group, set the Layout Direction to Row so items flow from left to right. Set Justify Content to Space Between, set Align Items to Center, and enable Layout Wrapping > Wrap.

Now add another Column to the Row. In the Row’s Content tab, expand the Elements option group and click the + Add Element button to add the Column.

Switch to the Design tab for the new Column. Set Layout Direction to Row, Justify Content to Space Between, Align Items to Center, and Layout Wrapping to Wrap.

Before moving on, open the first Column and assign a Background Color, 15px Border Radius, and 10px Padding on all four sides.

Add Modules To The Row

In the first Column, add a Module Group to hold an Icon module and a Text module. Style the modules as needed. Then, in the Group’s Layout settings, set the Horizontal Gap to 10px, set Layout Direction to Row, and set Align Items to Center.

Add a Social Media Follow module outside of the Group and style it as needed.

In the second Column, add an Image module and two Module Groups. The Image module will serve as the logo. The Module Groups will hold the navigation links, hidden hamburger icon, and CTA.

In the first Group’s Layout settings, set Horizontal Gap to 15px, Layout Direction to Row, Justify Content to End, and Align Items to Center.

Add a Link module to the Group and style the link as needed, including hover and active states.

In the Link module’s Content tab, expand the Loop option group and enable Loop Element. Select Menu as the Query Type and choose your main menu.

To assign the menu item names, expand the Text option group, click the Insert Dynamic Content icon, and choose Loop Menu Text.

In the second Module Group, add an Icon module and a Button module, then style them as needed. In the Group’s Design tab, set the Layout Direction to Row.

Hide the hamburger Icon module on Desktop so it only appears at the Tablet and Phone breakpoints.

Then hide the Module Group with the desktop navigation links on the Tablet and Phone breakpoints.

Create The Mobile Menu

In this step, we’ll create a separate Canvas to hold the mobile menu. Click the Canvas dropdown menu, select Add Canvas, give it a name such as Mobile Menu, set a Z-Index of 99999, and click Add Canvas.

When the Canvas loads, add a single-column row with an Icon module and a Module Group. Open the Section settings and go to the Design tab. Expand the Sizing option group and set the Width and Max Width to 80%. Choose Center for the Section Alignment.

Then open the Column settings and set the Vertical Gap to 10px.

Next, open the Module Group settings and set the Horizontal Gap and Vertical Gap to 15px.

Assign a Close icon to the Icon module, set an Icon Size, and expand the Sizing option group to set the Alignment to End.

Add a Link module, style it, and enable looping for your WordPress menu.

Create The Interactions

Before closing the Canvas, create an Interaction that closes the mobile menu on click. Select the Icon module and go to the Advanced tab. Expand the Interactions option group and click + Add Interaction.

Choose Click as the Trigger Event, give the Interaction a name, choose Hide Element as the Effect Action, and choose Section (Mobile Menu) as the Target Module.

Tip: To make Interactions easier to manage, label your sections clearly so they are easy to identify in the Layers Panel.

Before heading back to the Main Canvas, expand the Visibility option group and disable the mobile menu section on all breakpoints. Save the Canvas.

Finally, open the Position option group, set Position to Absolute, set Offset Origin to Top Center, and apply a -50px Vertical Offset so the mobile menu appears near the main menu when opened. You may need to adjust this value depending on your header height and spacing.

Switch back to the Main Canvas, select the hamburger Icon module, go to the Advanced tab, expand the Interactions option group, and create a new Interaction that opens the mobile menu on click.

Save the Main Canvas, open the page in a new tab, and test the functionality.

Best Practices And Tips

Here are a few practical tips to help you build better button, menu, and link rows with Divi 5.

1. Choose Wrap Vs. Column Direction Wisely

Use Layout Wrapping when you want items to flow naturally onto new lines as space becomes limited. This works well for tag clouds, link rows, and button groups that benefit from automatic wrapping.

Switch to Column direction when you need a strict vertical stack, such as a mobile menu or full-width CTA group. Avoid forcing Column direction too early, especially on Tablet, because it can make layouts longer than necessary.

2. Prioritize Important CTAs With Display Order

On mobile, you can use Display Order to move a primary button, key link, or important menu item earlier in the visual flow. A negative value, such as -1, can pull an item ahead of other elements at a specific breakpoint.

Use this selectively. A clean source order should still do most of the work, with Display Order used only when the mobile hierarchy needs a targeted adjustment.

3. Use The Loop Builder For Menu Links

When building custom menus with the Link module, you do not need to manually create a separate Link module for every page on your site. Add a single Link module, open its settings, go to the Loop option group, and toggle Loop Element on. Set the Query Type to Menu and choose your WordPress menu.

Using the Loop Builder gives you more control over link styling and helps your menu reflect updates when the connected WordPress menu changes.

4. Use Flexbox Controls For Quick Alignment

For a typical logo, menu, and button layout, set the parent container to Layout Direction > Row, set Align Items to Center, and use Justify Content > Space Between. This can position the logo, navigation, and CTA in a balanced horizontal row without relying on manual margins.

Then use Module Groups when part of the header needs its own alignment behavior, such as a menu group, social icon group, or CTA button group.

5. Build More Advanced Menus With Interactions And Canvases

You can use Divi 5’s Interactions and newer menu features to create more advanced setups, such as mobile overlays, dropdown-style menus, or mega menus. While Link modules work well for simple navigation rows, the newer Link and Dropdown modules, Canvases, Loop Builder, and Interactions make it possible to build more custom navigation patterns inside the Visual Builder.

Download The Layouts

To help you follow along, we’ve created a zip file containing the examples from this post. You’ll find an ALL file containing all sections, a folder with individual sections, and a folder containing the full step-by-step example.

To use the ALL file or individual sections, import them into the Divi Library. Go to Divi > Divi Library and click the Import & Export button.

Switch to the Import tab, choose an individual JSON file or the ALL file from your computer, and select Import Divi Builder Layouts.

To use an imported section, open a page in the Visual Builder. Click the blue + icon to add a section to the page.

Switch to Add From Library and choose the section you want to add to the page.

For the step-by-step example, enable the Export & Import Page Bar Icon. Click the Workspace icon in the Builder Bar, locate Export & Import under Page Bar Icons, and click the Export & Import icon in the top bar of the Visual Builder.

Switch to the Import tab, locate the folder containing the Menu – Step By Step.json file, and select Import Layout. This JSON file must be uploaded this way to import the Mobile Menu Canvas associated with it.

If you plan to use the example as your site’s navigation, you can add it as a Global Header in the Theme Builder after importing the layout.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Master Flexible Button, Menu, And Link Rows With Flexbox

With Divi 5 and its Flexbox Layout System, you can build button groups, link rows, custom menus, and tag clouds that adapt across screen sizes while staying easier to maintain.

The key is choosing the right structure for each pattern. Use Row direction for horizontal layouts, Column direction for strict vertical stacks, Gap for centralized spacing, Layout Wrapping for natural line breaks, and Module Groups when a set of elements needs its own layout behavior.

In Part 8, we’ll dive deeper into one of the biggest workflow shifts in Divi 5: using Gaps instead of manual margin for cleaner spacing systems.

Download Divi 5, import the example layouts included with this post, and start experimenting with flexible button, menu, and link rows. Drop a comment below and let us know which example you found most useful, or what navigation challenge you’re still working through.

The post Part 7 Of Mastering Flexbox: Building Flexible Button, Menu, And Link Rows appeared first on Elegant Themes Blog.

A card gets one border. A column gets a slightly different one. A button shadow is copied from another page. Then the design direction changes, and you have to track down the same small style decision across multiple modules.

Divi 5 gives you a better workflow with Option Group Presets. Instead of saving an entire module design, you can save one reusable group of settings, such as Border or Box Shadow, and apply it wherever that option group is available.

In this post, we’ll show you how to create reusable border and shadow presets, organize them into a practical preset library, use Design Variables inside them, and update those styles globally from one place.

Why Create A Border And Shadow Preset Library?

Borders and shadows often look like minor styling details, but they shape how polished a site feels. If cards, images, sections, forms, and callouts all use slightly different radius values, border colors, or shadow strengths, the design starts to feel inconsistent.

A preset library gives those repeated decisions a clear structure.

• Clear names make presets easier to reuse: Labels such as Border: Card, Border: Divider, Shadow: Subtle, and Shadow: Floating tell you what each preset is for.
• Shared presets reduce guesswork: Instead of rebuilding the same border or shadow by hand, you apply the saved preset.
• Global edits save time: Update the preset once, and every element using that preset can follow the change.
• Defaults speed up new builds: When a preset is set as the default for an option group, new elements can start with the right styling already applied.
• Reusable libraries support design systems: Borders and shadows become part of a consistent visual language instead of one-off styling choices.

The goal is not to create dozens of presets for every possible situation. The goal is to create a small, clear library you can maintain.

What Are Option Group Presets In Divi 5?

Before Option Group Presets, reusable styling in Divi usually meant saving an Element Preset. Element Presets are still useful, but they save the styling for an entire element or module type.

That works when you want a complete Button preset, Blurb preset, or Call To Action preset. It is less useful when you only want to reuse one part of the design.

Option Group Presets solve that. They save a specific option group, such as:

• Border
• Box Shadow
• Spacing
• Background
• Sizing
• Text
• Button

A Border preset created on a Column can also be applied to a Section, Row, Image module, Group module, or any other element that supports the Border option group. A Box Shadow preset works the same way across elements that expose Box Shadow controls.

That smaller scope is what makes Option Group Presets powerful. You can reuse one styling decision without bringing along every other setting from the original module.

Where Design Variables Fit In

Design Variables store reusable values, such as colors, numbers, fonts, images, and links.

When you use variables inside a preset, the preset becomes easier to maintain.

For example, a border preset might use:

• A Color Variable for the border color
• A Number Variable for the border width
• A Number Variable for the border radius

A shadow preset might use:

• A Color Variable for the shadow color
• Number Variables for blur, spread, or vertical position

The variable holds the raw value. The preset applies that value to a styling pattern. If the variable changes later, every preset and element referencing it can stay aligned with the updated design system.

How To Create Reusable Border Presets

There are two practical ways to create a Border Option Group Preset in Divi 5.

You can create one directly from an element you are already styling, or you can create one from the Preset Manager before applying it to a real element.

Path 1: Create A Border Preset From An Element

This path works well when you are already designing in context. You style an element, confirm that it looks right in the layout, then save that Border group as a reusable preset.

Open An Element And Go To The Design Tab

Click an element in your layout. A Column is a good example because borders are often used on cards and containers, but the same workflow works for Sections, Rows, Groups, Images, Blurbs, and other elements that include Border settings.

Open the element settings, then click the Design tab.

Scroll to the Border option group.

Open the group to access border radius, width, color, and style controls.

Set The Border Style

Start with Border Radius. The four corner fields are linked by default, so one value applies to all corners. You can unlink them if the design needs different values for each corner.

Use a Number Variable if your site already has a radius scale.

Next, set the border width and color. A Color Variable works well for border color because it keeps the preset connected to your site’s broader color system.

By default, width and color apply to all four sides. You can unlink the sides when you need a bottom border, left accent border, top-and-bottom divider, or another directional treatment.

Finally, choose a border style. Solid borders work well for card outlines, image frames, and form fields. Dashed or dotted borders can work for secondary containers, placeholder areas, or decorative separators.

Save The Border Group As A Preset

Once the border looks right, hover over the Border group header. Click the preset icon that appears.

Choose New Preset From Current Styles to save the border settings you just created.

Give the preset a clear name and save it.

Good preset names describe the style, not only the element where it was created. For example:

• Border: Card
• Border: Subtle
• Border: Divider
• Border: Accent Left
• Border: Image Frame

That naming approach matters because the same preset can be used across different element types.

Path 2: Create A Border Preset In The Preset Manager

The second path starts in the Preset Manager. This is useful when you want to define your preset library before styling individual elements.

It is also helpful on collaborative builds. Instead of each person creating borders their own way, the team can pull from the same preset library from the start.

Open The Preset Manager And Switch To Group Presets

Click the Preset Manager icon in the left sidebar of the Visual Builder.

The Preset Manager gives you a central view of your preset library. Element presets and group presets are managed separately.

Go to the Group tab. This is where Option Group Presets live, including Border, Box Shadow, Spacing, Background, and other option group presets.

Select Border to view or create Border presets.

Add A New Border Preset

Click Add New Preset.

The Preset Preview panel opens. This lets you edit the preset itself without changing an element on the page.

Set the border radius, width, color, sides, and style. The preview updates as you work, so you can test the preset before applying it to a real element.

When the preset is ready, name it and save it. It will appear in the Border preset library and can be applied across the site.

How To Create Reusable Shadow Presets

Box Shadow presets work the same way as Border presets. You can create them from an element’s settings or from the Preset Manager.

Open an element, go to the Design tab, expand Box Shadow, set the style, and save the group as an Option Group Preset. Or open the Preset Manager, go to the Group tab, choose Box Shadow, and create the preset there.

Start With The Box Shadow Controls

The Box Shadow group includes built-in shadow options that can be used as starting points.

After choosing a starting point, adjust the shadow settings.

The main controls include:

• Horizontal Position: Moves the shadow left or right.
• Vertical Position: Moves the shadow up or down.
• Blur Strength: Controls how soft or sharp the shadow appears.
• Spread Strength: Expands or contracts the shadow.
• Shadow Color: Sets the color and opacity of the shadow.
• Box Shadow Position: Switches between outer and inner shadow behavior.

Vertical Position and Blur Strength usually do the most visual work. Smaller values feel tighter and more grounded. Larger values make an element feel more lifted.

Spread Strength can help contain the shadow. A negative spread can pull the shadow back so it does not spill too far past the element.

Use Variables For Shadow Values

For a maintainable shadow system, connect shadow values to Design Variables where it makes sense.

A shadow color variable keeps shadow tone consistent across the site. Opacity matters as much as color here. Most interface shadows work best when they stay subtle.

You can also use Number Variables for values such as blur, spread, or vertical position. This is useful if you want a small shadow scale, such as:

• Shadow: Subtle
• Shadow: Medium
• Shadow: Floating

Inner shadows should be used more selectively. They can work well for inset form fields, pressed states, toggles, and panels that need a recessed effect.

Name Shadow Presets By Weight And Context

Shadow presets are easiest to manage when the name tells you how strong the shadow is.

Good examples include:

• Shadow: Subtle
• Shadow: Medium
• Shadow: Floating
• Shadow: Inset
• Shadow: Dark Section

If your site has both light and dark sections, consider separate shadow presets for each context. A shadow that looks soft on a light background may disappear on a dark one, or feel too heavy when the background changes.

Apply Border And Shadow Presets Across Your Site

After your presets are saved, applying them is quick.

Open any element that supports the option group, go to the Design tab, hover over the Border or Box Shadow group header, click the preset icon, and choose the preset from the list.

This can work across different element types because the preset belongs to the option group, not the module. The same Border preset can style a Column, Section, Image, Group, or Blurb when the Border option group is available.

Use Local Overrides When Needed

Presets do not prevent one-off adjustments. If a preset sets a 4px border but one element needs 3px, you can override that specific value on the element.

The rest of the preset can stay connected. For example, the color, radius, and border style can remain controlled by the preset while the one element uses its own width value.

Use overrides intentionally. If the same override starts appearing in multiple places, save it as a new preset instead of repeating it by hand.

Set Defaults For Faster Builds

If a border or shadow style should be the default for new elements, set it as the default preset.

Defaults are useful for repeated patterns such as:

• Standard card borders
• Default image frames
• Form field borders
• Subtle section shadows
• Default container radius

This reduces the number of manual styling decisions you need to make while building new sections.

Use Border And Shadow Presets Together

Border and shadow presets work especially well together because they control separate parts of a visual style.

For example:

• Border: Card controls the outline and radius.
• Shadow: Subtle controls depth.
• Background: Surface controls the card background.
• Spacing: Card Padding controls internal spacing.

Keeping those decisions separate gives you flexibility. You can use the same border with different shadows, or the same shadow with different border treatments.

Use Nested Presets For Larger Patterns

Nested Presets let smaller Option Group Presets sit inside larger presets or Element Presets.

For example, you might create:

• Border: Radius Standard
• Border: Card Outline
• Shadow: Subtle
• Element Preset: Card

The Element Preset can include the smaller Option Group Presets. When you apply the Card Element Preset, the border and shadow decisions come with it while still staying editable from their own preset sources.

This gives you a layered system:

• Variables hold reusable values.
• Option Group Presets apply those values to one group of settings.
• Nested Presets combine smaller preset decisions.
• Element Presets apply full design patterns to modules.

Each layer stays easier to update because it has a clear job.

Clean Up Existing Border And Shadow Styles

If a page was built before your preset library existed, it may still contain static values: one-off border colors, inconsistent radius values, or shadow settings that do not match your system.

Divi 5 gives you several tools to clean that up.

Use Inspector To Audit Existing Styles

Use the Inspector when you need to understand what is already on the page.

Right-click a section and choose Inspect. You can review applied styles in one place instead of opening every module individually.

This is useful when a row of cards looks slightly inconsistent but you do not yet know which border, radius, or shadow values are different.

Use Find And Replace For Known Values

Use Find And Replace when you already know the exact value you want to replace.

For example, you can replace a static border color with a Color Variable, change a repeated 1px border width to 2px, or update a shadow color that no longer matches your system.

Use Only Replace Identical Fields carefully. It can help prevent a number intended for border radius from being replaced in unrelated fields that happen to use the same value.

Use Extend Attributes To Copy A Correct Style

Use Extend Attributes when one element already looks right and you want matching elements to use the same styling.

Right-click the styled element, choose Extend Attributes, then extend the Border option group, Box Shadow option group, or both. Choose the scope and target element types, then apply the change.

This is less about finding a value and more about saying: make the rest match this element.

Update Presets Globally In The Preset Manager

When you need to change a preset, you do not need to find an element using it first.

Open the Preset Manager, go to the Group tab, find the Border or Box Shadow preset, and edit it. The Preset Preview system lets you adjust the preset in a safe preview area before saving.

After you save, the change applies to elements using that preset.

The Preset Manager is also useful for organizing your library. You can duplicate a preset to create a variation, set a preset as the default, remove presets that no longer fit, and move your most-used presets where they are easier to find.

Best Practices For Border And Shadow Presets

A preset library works best when it stays small, named clearly, and connected to reusable values.

• Name by role: Use names such as Border: Card or Shadow: Subtle instead of names tied to one module.
• Use variables where possible: Connect colors, radius, width, and shadow values to Design Variables when those values should stay global.
• Separate border and shadow decisions: Keep Border and Box Shadow presets independent unless you intentionally combine them through nesting or an Element Preset.
• Create variations intentionally: A small library of Subtle, Medium, and Strong is easier to manage than ten nearly identical shadows.
• Use defaults for repeated patterns: Set default presets for common card, image, or field treatments.
• Audit older pages: Use Inspector, Find And Replace, and Extend Attributes to bring older static values into your preset system.
• Review on light and dark backgrounds: Borders and shadows can feel very different depending on the section background.

Build A Reusable Border And Shadow System In Divi 5

Borders and shadows are small details, but they appear everywhere. When they are managed module by module, they become hard to maintain. When they are saved as Option Group Presets in Divi 5, they become part of your design system.

Create a focused preset library, connect repeated values to Design Variables, combine presets when needed, and update them from the Preset Manager when the design changes.

That way, your cards, images, sections, forms, and callouts stay consistent without restyling the same settings again and again.

The post How To Create Reusable Border And Shadow Presets In Divi 5 appeared first on Elegant Themes Blog.

Now, in Part 6, we’re bringing the workflow together. You’ve already learned the individual Flexbox controls and layout patterns that make Divi 5 more flexible across breakpoints. In this post, we’ll cover key tips for combining those tools into cleaner, more maintainable responsive layouts that adapt well across screen sizes.

Let’s dive in.

Why Responsive Design Feels Different In Divi 5

Divi 5’s Flexbox Layout System changes how you can approach responsive design. Instead of relying on duplicate rows, hidden spacers, or custom CSS for every breakpoint issue, you can start with a clean desktop structure and apply targeted adjustments where the layout actually needs to change.

That means fewer duplicate sections, more predictable responsive behavior, and less maintenance over time. Customizable Responsive Breakpoints and the Responsive Editor also make it easier to preview and adjust layouts across different screen sizes, so you can make decisions based on the actual layout instead of guessing.

The result is a workflow that feels more intentional: build the cleanest structure first, then use Flexbox and responsive controls to refine how it behaves on Tablet, Phone, and any custom breakpoints your project uses.

Key Tips For Building Responsive Layouts

Here are eight practical tips to help you combine everything covered so far in the series. Each tip builds on earlier Flexbox controls and focuses on responsive decisions you can apply in real Divi 5 projects.

1. Start With Clear Content Hierarchy

One of the most important shifts when building responsive layouts in Divi 5 is planning your content hierarchy before you start styling.

On Desktop, your layout might follow a logical left-to-right flow. On Phone, that same order may not be the best reading experience. Before you build, decide what should appear first on smaller screens: the heading, CTA, image, featured card, form, sidebar content, or something else.

Start with a clean desktop source order, then use Display Order at the Tablet or Phone breakpoint only when the mobile flow needs to change. This helps you keep one layout structure instead of duplicating sections for mobile.

This planning step prevents many mobile stacking issues before they happen and makes the rest of your responsive decisions easier.

2. Use Per-Breakpoint Controls Wisely

Divi 5 gives you responsive control across breakpoints, but that doesn’t mean every setting needs an override. The best approach is to change settings at Tablet or Phone only when the layout needs different behavior.

For example, fluid values like clamp() and reusable values from Divi’s Variable Generator can often reduce the need for breakpoint-specific spacing or typography overrides.

Save breakpoint overrides for structural changes, such as Layout Direction, Layout Wrapping, Column Class, Display Order, Align Items, or gap values when the layout becomes cramped. This keeps your desktop layout cleaner and makes future edits easier to track.

3. Build Efficient Structures With Wrap + Column Class

With Flexbox, you often don’t need multiple separate rows just to create a multi-line layout. When using Flex as the Layout Style, a single row with Layout Wrapping > Wrap and intentional Column Class settings can handle many responsive card grids, feature sections, and content blocks.

With Wrap enabled, one row can contain six cards and allow them to move onto additional lines. For example, you might use Column Class > 1/3 on Desktop, Column Class > 1/2 on Tablet, and a Fullwidth structure on Phone when each card needs its own line.

This technique, covered in Part 3 of our Mastering Flexbox course, reduces the number of rows you need to manage and makes future layout edits easier.

4. Combine Alignment, Gap, And Grow To Fill For Consistent Spacing

Flexbox becomes most useful when you combine settings instead of relying on a single control. For card layouts, Justify Content > Space Between, Gap, and Grow To Fill can work together to keep content areas balanced when text lengths vary.

This pattern, detailed in Part 2, is especially useful for feature cards, testimonials, pricing tables, team member cards, and other multi-column sections where content length varies but alignment still needs to feel consistent.

5. Use Module Groups And Nested Modules For Better Control

One of Divi 5’s biggest layout advantages is the ability to create smaller Flex containers inside larger layouts using Module Groups and Nested Modules.

Instead of trying to control every element from the parent column, wrap related elements, such as a heading and body text or a set of buttons, in their own Module Group. That group becomes its own layout context with independent controls for Layout Direction, Justify Content, Align Items, and Gap.

The button group in the example below can have its own Display Order and breakpoint overrides without affecting the outer column. You can also change spacing, alignment, or Layout Direction inside the group at specific breakpoints while keeping the parent structure intact.

6. Make Mobile Reordering Part Of Your Workflow

Treat mobile reordering as a standard review step, not an afterthought. Depending on your layout, you may need to adjust Display Order, Layout Direction, or Layout Wrapping at the Tablet or Phone breakpoint.

By default, content follows the layout’s source order. In many cases, that works well. In others, a CTA, featured card, image, sidebar, or form needs to appear earlier on smaller screens. Handling these changes with breakpoint-specific controls helps you keep a clean desktop structure while improving mobile flow.

Once this becomes part of your regular process, mobile stacking issues are easier to catch before a page goes live.

7. Optimize For Performance, Accessibility, And Maintainability

Great Flexbox layouts are not only visually clean. They should also be easy to maintain, efficient, and logical for visitors using keyboards or assistive technology.

Start with a source order that makes sense as a reading order. Use Display Order sparingly for visual reordering, and always test the result. Remember that visual order and source order can differ, so keyboard focus and screen reader flow should still feel logical.

It is also good practice to avoid unnecessary nesting. Module Groups and Nested Modules are useful, but every extra container adds complexity. Use as many nested containers as the design needs, but avoid adding groups just to compensate for unclear structure.

Finally, save tested Flexbox structures to the Divi Library when you know you’ll reuse them. For consistent spacing, sizing, and styling across a site, combine those reusable structures with Design Variables and Presets.

After saving or publishing, use the Tab key on the live page to check focus order through buttons, links, forms, and other interactive elements. If focus jumps in a confusing way, review the source order, Display Order values, and mobile structure.

8. Test With Real Content

Placeholder text and perfectly cropped images can hide responsive issues, so test with realistic content early.

For effective testing, use long headlines, real supporting copy, realistic button labels, real image dimensions, and the longest practical titles you expect to publish. On Tablet, watch for awkward wrapping and cramped gaps. On Phone, check stacking order, tap targets, text overflow, and whether key actions appear early enough.

These habits help you catch responsive issues while the layout is still easy to adjust.

Troubleshooting Tips For Responsive Flexbox

Even with a solid understanding of Flexbox, a few issues can come up when building responsive layouts in Divi 5. Knowing what to check first can save time.

Don’t Overdo It With Display Order

One common mistake is relying on Display Order to fix every layout issue instead of improving the underlying structure. Display Order is powerful, but using it on too many elements can make future edits harder to understand.

Start with a clean source order, then use Display Order only for items that truly need to move at a specific breakpoint.

Know The Difference Between Gap And Spacing

Many layout issues come from using margin or padding to create space between every individual item. In many Flexbox layouts, Horizontal Gap and Vertical Gap are better for spacing between direct child items inside the same parent container. They keep spacing centralized and easier to adjust across breakpoints.

At the Section level, Horizontal Gap may have no visible effect when the section uses a vertical/Column layout direction. Vertical Gap is useful for controlling spacing between multiple rows inside that section.

Apply gaps at the Row level when you want consistent spacing between Columns.

Apply gaps at the Column, Module Group, or Nested Module level when you want spacing between modules or nested items inside that container.

That said, Padding is still useful inside Rows, Columns, and Module Groups when you want breathing room around the content itself.

Use Structure Templates For Quick Responsive Column Changes

Manually adjusting Column Class on each column works well, but Structure Templates can speed up bigger responsive changes. In the Content tab of a row, use the Apply Structure Template button in the Elements option group.

This lets you change a row’s column structure at a specific breakpoint without manually editing every column one by one.

Structure Templates are especially useful in rows with many columns or layouts that need a very different Tablet or Phone structure.

Avoid Forcing Single-Column Layouts Too Aggressively

It can be tempting to make every mobile layout a single vertical stack. That can work, but it can also create unnecessarily long pages, especially on Tablet.

In many cases, Layout Wrapping combined with smart Column Class settings lets Flexbox create a more balanced responsive layout. For example, a four-card row may work better as two columns on Tablet and one column on Phone, instead of becoming one long stack too early.

Reserve forced single-column structures for layouts where the content truly benefits from a strict vertical reading order.

Know Where Responsive Settings Live

One common source of confusion in Divi 5 is that responsive controls can appear in multiple places. You’ll find the Breakpoint Switcher at the top of the builder, responsive controls inside the settings panel, and responsive value icons next to individual fields.

To reduce guesswork, use the Responsive Editor. Click the responsive icon next to a setting to view and manage values across breakpoints in one place. This makes it easier to see what is active on Desktop, Tablet, and Phone.

Download The Layouts

To help you practice everything covered in this post, we’ve prepared a zipped file with example layouts. These include the tip examples, plus a full workflow layout that shows how the techniques work together.

Go to your WordPress dashboard and navigate to Divi > Divi Library. Then click the Import & Export button at the top.

Switch to the Import tab, select a JSON file from your computer, and click Import Divi Builder Layouts.

Once the files are imported, open a page in the Visual Builder or create a new one. To import a single section, click the blue + icon on the Canvas.

Select the Add From Library tab, choose the layout you want to use, and click Use This Section to load it onto the page.

For the full page layout, select the Workspace icon in the Builder Bar, enable Export & Import under Page Bar Icons, and click the Export & Import icon in the top bar.

Switch to the Import tab, choose the Key Tips For Building Responsive Layouts – Full Page.json file from your computer, make sure Replace Existing Content is checked, and click Import Layout.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Master Responsive Layouts With Divi 5

You no longer need extra rows, hidden spacers, or custom CSS for many common responsive layout patterns. With Divi 5‘s Flexbox tools and the tips in this post, you can build layouts that adapt across breakpoints while staying easier to maintain.

In Part 7 Of Mastering Flexbox: Building Flexible Button, Menu, And Link Rows, we’ll focus on compact, responsive navigation elements, button groups, tag clouds, and link rows that work across different screen sizes.

Download Divi 5, import the example layouts, and start applying these responsive techniques. Drop a comment below and let us know which tip was most helpful, or what responsive challenge you’re still working through.

The post Part 6 Of Mastering Flexbox: Key Tips For Building Responsive Layouts appeared first on Elegant Themes Blog.

Now it’s time to solve another common responsive layout challenge: mobile stacking order. On desktop, a complex layout can look polished and intentional. But when that same layout stacks on mobile, the default order may not create the best reading flow. Images can stack above the wrong text, key CTAs can appear too low, featured cards can lose priority, and the overall rhythm can feel off.

Divi 5’s Flexbox Layout System gives you visual controls for reordering content across breakpoints. With Display Order, and in some cases Wrap Reverse, you can improve the mobile experience inside the Visual Builder without duplicating sections or writing custom CSS for common reordering patterns.

In this part, you’ll learn how to fix common mobile stacking problems, create more intentional mobile-first flows, and maintain stronger visual hierarchy across breakpoints.

Let’s dive in.

Why Mobile Reordering Matters

On desktop, carefully designed layouts often rely on side-by-side relationships. Images and text alternate, supporting content sits beside key messages, and featured elements are positioned for visual balance.

On mobile, those same elements usually stack vertically. Divi follows the source order of the layout, so the element that appears first in the structure usually appears first on smaller screens. That can create issues such as:

• Images stacking above other images instead of pairing with their related text.
• Important CTAs appearing below long sections of supporting content.
• Featured cards appearing after less important cards.
• Mobile layouts that feel visually disconnected from the desktop design.

These issues affect more than aesthetics. Poor mobile ordering can make a page harder to scan, slow down decision-making, and push important actions farther down the screen. Visitors on phones need a logical flow that presents the most relevant information at the right moment.

Divi 5 lets you correct these issues without creating duplicate sections for mobile. With Flexbox ordering controls, you can adjust the mobile experience while keeping one cleaner layout structure.

Core Reordering Features In Divi 5

Divi 5 gives you a few important tools for controlling content order across breakpoints. The main one is Display Order. Wrap Reverse can also help in specific wrapped layouts, especially when you want to change how wrapped lines stack.

Display Order

The primary tool for reordering content is Display Order, located in the Content tab under the Order option group. You can use it on flex items such as columns, modules, rows, and Module Groups, depending on the parent layout context.

Lower numbers appear earlier in the visual order, while higher numbers appear later. The default value is 0. You can use negative numbers, such as -1, to pull an element earlier, or positive numbers to move an element later in the visual order.

In most cases, adjust Display Order at the Tablet and Phone breakpoints while leaving Desktop at its default source order. This keeps your desktop structure easier to maintain while giving you targeted control on smaller screens.

Wrap Reverse

Wrap Reverse is useful when working with wrapped content. Instead of new flex lines stacking in the normal cross-axis direction, Wrap Reverse places wrapped lines in the opposite direction. This does not replace Display Order for precise item-by-item reordering, but it can help with certain responsive patterns where an entire wrapped line should move visually.

Mobile Reordering Examples

Below are six examples that show how to solve common mobile stacking problems using Divi 5’s Flexbox reordering controls. Each example explains the desktop goal, the mobile issue, and the targeted adjustment that improves the mobile flow.

1. Hero Section

Goal: Create a classic two-column hero layout with an image on the left and the headline, description, and CTAs on the right on desktop, while making sure the main message appears first on mobile.

The Problem On Mobile: By default, Divi stacks columns according to their source order. If the image column comes first, mobile visitors may see a large image before they see the headline, supporting text, or CTA buttons. This delays the page’s main message.

The Solution: Use Display Order to set the content column to -1 at the Phone breakpoint. This pulls the content column above the image on mobile while leaving the desktop layout unchanged.

Why Put Content Above The Image On Mobile?

On phones, space is limited and users scan quickly. Showing the heading and value proposition first helps visitors understand the page before they commit to scrolling. Placing CTA buttons higher can also make the next action easier to find.

2. Footer

Goal: Create a four-column footer on desktop, such as Company, Products, Resources, and Contact & Support, while making sure the Contact column appears higher on mobile.

The Problem On Mobile: When footer columns stack on smaller screens, the Contact & Support column may end up last. This can force mobile users to scroll through less urgent link groups before reaching phone numbers, email links, or support options.

The Solution: Enable Layout Wrapping > Wrap on Tablet. Then, on the Phone breakpoint, switch to Wrap Reverse. This changes how the wrapped columns stack, allowing the last column to move higher in the mobile flow without manually assigning Display Order values to every column.

Why Use Wrap Reverse Here?

Wrap Reverse is useful when the main issue is line-level stacking rather than precise individual ordering. For footers, it can be a low-maintenance way to bring later columns, such as contact details, higher on smaller screens while keeping the desktop footer structure intact.

3. Alternating Image-Text Rows

Goal: Maintain an alternating layout on desktop, such as image left/text right followed by text left/image right, while creating a consistent mobile flow.

The Problem On Mobile: With alternating rows, the default stacking behavior can create inconsistent mobile sequences. The first row may stack image first, while the second row stacks text first because its desktop source order is reversed. This can make the mobile layout feel uneven.

The Solution: On the second row, set the image column’s Display Order to -1 at the Phone breakpoint. This pulls the image above the text on mobile while keeping the desktop alternating layout unchanged.

Why Put The Image Above Text On Mobile?

For supporting content sections, images can act as visual anchors that introduce each topic. A consistent image-first pattern can make repeated sections easier to scan. This is different from a hero section, where the headline and CTA usually deserve priority.

4. Featured Card Grid

Goal: Create a balanced three-column card grid on desktop with a featured card in the middle, while making sure the featured card appears first on mobile.

The Problem On Mobile: On desktop, the featured card may sit in the center for visual balance. When the columns stack on mobile, the first card in the source order appears first, pushing the featured card into the second position.

The Solution: Set the middle column, which contains the featured card, to Display Order > -1 at the Tablet and Phone breakpoints. This moves the featured card to the top of the mobile stack while keeping the desktop grid unchanged.

Why Put The Featured Card First On Mobile?

On mobile, users see one card at a time. If one card highlights a key offer, main benefit, or most important option, placing it first gives it immediate visibility and supports a clearer hierarchy.

5. Sidebar Layout

Goal: Create a two-column layout with main content on the left and a sidebar on the right on desktop, while making sure high-value sidebar content appears earlier on mobile.

The Problem On Mobile: By default, Divi stacks columns in source order. If the main content column appears first, the sidebar may be pushed far down the mobile page, even if it contains important CTAs, forms, or opt-ins.

The Solution: Set the sidebar column’s Display Order to -1 at the Tablet and Phone breakpoints. This moves the sidebar above the main content on smaller screens. Inside the sidebar, set the email opt-in Module Group to Display Order > -1 so it appears at the top of the sidebar content.

Why Put The Sidebar First On Mobile?

Sidebars often contain high-value actions, such as newsletter signups, contact forms, or promotional CTAs. Moving the sidebar higher can make those actions more visible before users scroll through a long article or page.

Why Move The Email Opt-In To The Top Of The Sidebar?

The email opt-in is often one of the most important actions in a sidebar. Moving it to the top creates an earlier opportunity for engagement while preserving the desktop layout.

6. Call To Action + Blurbs

Goal: Create a section with a headline row, three feature blurbs, and a prominent button group on desktop, while bringing the CTA buttons higher on mobile.

The Problem On Mobile: If Divi stacks rows in source order, users see the headline, then the blurbs, and only then reach the CTA buttons. On mobile, this can place the primary action too far down the page.

The Solution: Use Display Order at the row level instead of only at the column level. For mobile, reorder the three rows like this:

• Row 1, Headline + copy: Display Order > 0
• Row 3, Buttons: Display Order > 0
• Row 2, Blurbs: Display Order > 1

This moves the button row directly after the headline on mobile without changing the desktop layout.

Why This Works

For conversion-focused sections, users should see the primary action early. Moving the buttons directly after the headline gives mobile visitors a clearer path to action, while the blurbs still provide supporting information afterward.

Step-By-Step Build Walkthrough

Now that you’ve seen how Display Order and Wrap Reverse can improve mobile layouts, let’s build a simple three-column section. On Desktop, the columns sit side by side. On Tablet, the CTA moves higher. On Phone, you can choose the order that best supports the content hierarchy.

Step 1: Create The Desktop Layout

Add a three-column row to a page in the Visual Builder. Set the Vertical Gap and Horizontal Gap to 25px, then leave the remaining layout settings at their defaults unless your design needs additional adjustments.

Add an image to the left column, supporting text to the middle column, and a CTA to the third column.

Step 2: Adjust Column Classes On Tablet

At the top of the builder, click the Tablet icon in the Responsive Breakpoint switcher. Any settings you change from this point forward apply to the Tablet breakpoint, while the Desktop layout remains unchanged.

Next, adjust the number of columns shown at the Tablet breakpoint. Open each column and assign a Column Class, such as 1/2 for the first two columns and Fullwidth for the third column.

Step 3: Enable Layout Wrapping

Next, enable Layout Wrapping at the Tablet breakpoint. Without wrapping, the Column Class settings may not break into multiple lines as expected when the available width changes.

In the row’s Design tab, open the Layout option group and set Layout Wrapping to Wrap. This allows the columns to move onto additional lines.

Step 4: Set The Display Order

While still on the Tablet breakpoint, select column 3, which contains the CTA. In the column’s Content tab, go to Order > Display Order and enter -1.

Setting Display Order to -1 pulls the CTA column earlier in the visual order at the Tablet breakpoint. This gives the call to action higher visibility without changing the desktop source order.

Step 5: Switch To The Phone Breakpoint

After making changes at the Tablet breakpoint, switch to the Phone breakpoint.

Review how the section stacks on Phone. Divi 5’s responsive controls let you make additional Phone-specific adjustments when the ideal mobile order differs from Tablet.

If you want the image to appear first on Phone while keeping the CTA higher on Tablet, adjust the third column, the CTA column, to Display Order > 2 at the Phone breakpoint.

When you cycle through all breakpoints, each breakpoint displays the CTA in the order you specified.

Responsive Best Practices And Tips

Now that you know how to reorder content with Flexbox in Divi 5, here are practical tips to help you use these tools effectively while keeping layouts clean and easier to maintain.

Set Display Order Values At The Breakpoint Level

Avoid changing the order on Desktop unless the desktop design specifically requires it. Make most reordering adjustments at the Tablet or Phone breakpoint using Divi’s Customizable Responsive Breakpoints and/or the Responsive Editor. This keeps your desktop layout governed by clean source order while allowing targeted mobile changes.

Use Negative Values When Appropriate

When an important element, such as a featured card or primary CTA, needs to appear earlier on mobile, set its Display Order to -1. This is usually cleaner than assigning large positive numbers to every other item. Negative values clearly mark the item that should move earlier.

Only Reorder Elements That Need It

Every flex item starts with the same default order value. You usually only need to adjust the items you want to move. Reordering every column creates unnecessary maintenance work and makes future troubleshooting harder.

Reorder Based On Content Hierarchy, Not Just Appearance

The strongest reason to change order on mobile is to improve the visitor’s flow through the page. Prioritize key messages, calls to action, featured cards, opt-ins, or visual anchors based on what the user needs to see first. Every reordering decision should support the mobile content hierarchy, not just mirror a desktop design pattern.

Download The Layouts

To make the workflow easier to explore, we’ve created a zipped folder containing the section layouts used in this post. These are the finished, reordered versions, so you can inspect how Display Order, Layout Wrapping, and Wrap Reverse work together across breakpoints.

To use them, fill out the form below to access the files. Then go to Divi > Divi Library and click the Import & Export button.

Switch to the Import tab, choose a JSON file to upload, and click Import Divi Builder Layouts.

Next, create a new page or open an existing one in the Visual Builder. Click the blue + icon to add a new section to the page.

Choose Add From Library, select a layout, and click Use This Section.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Unlock Mobile Reordering In Divi 5

You no longer need to duplicate sections or write custom CSS for common mobile reordering patterns. With Divi 5‘s Flexbox ordering controls, you can create more intentional mobile layouts while keeping the desktop structure intact.

In Part 6 Of Mastering Flexbox: Key Tips For Building Responsive Layouts, we’ll bring everything together with responsive layout strategies, breakpoint-level adjustments, and real-world workflow tips for building cleaner Divi 5 layouts.

Download Divi 5, import the example layouts, and start experimenting with mobile reordering. Drop a comment below and let us know which reordering technique you found most useful.

The post Part 5 Of Mastering Flexbox: Reordering Content For Better Mobile Layouts appeared first on Elegant Themes Blog.

In this fourth installment, we’ll focus on one of the most common layout challenges in web design: aligning content without relying on hidden spacers, manual spacing hacks, or custom CSS.

Before Divi 5, designers often used empty Divider modules, manual padding, margins, or custom CSS to push content into place, create visual balance, or force elements to align inside equal-height containers. Those methods worked, but they added extra structure, required more breakpoint-specific cleanup, and made layouts harder to maintain.

Divi 5 gives you a cleaner visual workflow. With Flexbox controls such as Justify Content, Align Items, Align Content, and Gap, plus supporting tools like Grow To Fill, Module Groups, and Nested Modules, you can align content directly in the Visual Builder with far less custom code.

Let’s dive in.

Why Traditional Alignment Methods Fall Short

Before Divi 5, precise vertical or horizontal alignment often required workarounds. Some of the most common techniques included:

• Using hidden Divider modules to push content down or create artificial space.
• Adding custom CSS to vertically center or bottom-align content inside equal-height columns.
• Relying on manual padding and margin values that needed constant adjustment across breakpoints.

Those approaches could solve the immediate visual problem, but they also made layouts more fragile. If a headline changed, a button label wrapped, or a section switched to a smaller breakpoint, the layout often needed another round of spacing adjustments.

With Divi 5’s native Flexbox Layout System, alignment can be handled at the container level. Tools like Justify Content, Align Items, Gap, and Grow To Fill help you create balanced layouts that respond more naturally to real content.

Core Alignment Tools You’ll Use Most

Most Flexbox alignment controls live in the Layout option group. The most important ones to understand are Justify Content, Align Items, Align Content, and Gap.

Justify Content distributes child elements along the main axis. In a Row direction, that usually means horizontal distribution. In a Column direction, that usually means vertical distribution. Its options, including Start, Center, End, Space Between, Space Around, and Space Evenly, help you control how content is positioned inside its parent container.

Align Items controls alignment along the cross axis. In a Row layout, this usually affects vertical alignment. In a Column layout, it usually affects horizontal alignment. The available options, Start, Center, End, and Stretch, are useful for centering items, aligning edges, or stretching items when their sizing allows it.

When Layout Wrapping is enabled and content flows onto multiple lines, Align Content controls how those wrapped lines are distributed along the cross axis. This setting only has a visible effect when there are multiple flex lines and the parent container has extra space to distribute, such as a defined or minimum height.

These alignment tools become even more powerful when combined with Horizontal Gap and Vertical Gap for consistent spacing, Grow To Fill in the Sizing option group for flexible item growth, Module Groups for grouping related modules, and Nested Modules for creating independent alignment contexts inside modules.

Alignment Examples Built With Divi 5

To show how these tools work together, let’s walk through a few practical alignment examples and the settings used in each one.

1. Navigation Menu

Goal: Build a header navigation where the logo and menu links sit on the left, the CTA buttons sit on the right, and everything stays vertically centered.

Settings Used: The layout uses a single-column row. At the column level, Justify Content is set to Space Between, Align Items is set to Center, and the Horizontal Gap is set to 20px. The first Module Group, containing the logo and navigation links, uses Justify Content > Space Between and Align Items > Center. The second Module Group, containing the two buttons, uses Justify Content > End, Align Items > Center, and a 10px Horizontal Gap so the buttons sit neatly side-by-side.

This combination creates a balanced navigation header without hidden spacing modules or manual margin adjustments between every element.

2. Hero Section

Goal: Create a clean hero section where the content stacks vertically, spacing stays consistent, and the two CTA buttons sit side-by-side.

Settings Used: The parent row uses Align Items > Stretch. At the column level, Align Items and Justify Content are both set to Start, with a 20px Vertical Gap applied between child elements. A Module Group wraps the two buttons using Layout Direction > Row and a 15px Horizontal Gap, keeping them aligned horizontally with consistent space between them.

This approach gives you predictable spacing from the parent container instead of relying on extra Divider modules or one-off padding values.

3. Statistics Grid

Goal: Display four key metrics in a responsive grid where each stat card feels centered, balanced, and easy to scan.

Settings Used: This section uses a four-column row with Layout Wrapping > Wrap and Column Class > 1/2 on each column, creating a two-by-two grid. The row uses 20px Horizontal Gap and 20px Vertical Gap to control spacing between the cards. At the column level, Justify Content and Align Items are both set to Center. Each column also uses 20px Padding on all four sides in the Spacing option group to create breathing room inside each card.

Gap handles spacing between cards, while padding handles spacing inside each card. Keeping those two roles separate makes the layout easier to adjust across breakpoints.

4. Service Cards

Goal: Create a service section where the headline row aligns cleanly and each service card keeps its button positioned consistently, even when text lengths vary.

Settings Used: The top row uses two columns with Column Class > 1/2 and Align Items > End at the row level to align the content toward the bottom edge. Each column also uses Align Items > Stretch so its internal elements can fill the available width.

The second row contains six columns with Layout Wrapping > Wrap and Column Class > 1/2. The row uses Align Items > Start. Inside each service card, the Heading module uses a Nested Module for the supporting text, paired with a 10px Horizontal Gap for spacing. Grow To Fill is enabled where the content area needs to absorb extra space, helping the button stay aligned near the bottom of each card.

This technique is useful for card layouts where text lengths vary but the CTA position needs to remain consistent.

5. Mixed-Width Highlight Section

Goal: Build a highlight area that combines a large featured content block, a statistic card, and smaller supporting boxes while keeping the layout visually balanced.

Settings Used: This section uses a row with mixed column spans and Layout Wrapping. The row has both Horizontal Gap and Vertical Gap set to 30px. At the parent level, Align Items > Stretch helps columns share a consistent row height when their sizing allows it. One column uses Justify Content > Space Between to distribute its internal content from top to bottom, while the other columns use Start. A 15px Vertical Gap on each column controls spacing between modules, and each column also applies 20px Padding on all four sides for internal breathing room.

This combination creates a more dynamic layout while keeping spacing, alignment, and internal structure easier to manage.

6. Process Steps

Goal: Build a four-step How It Works process layout where icons, step numbers, headings, and supporting text stay structured and aligned across columns.

Settings Used: This section uses a two-column row with Column Class > 1/2 and Layout Wrapping > Wrap enabled. Each column has 10px Padding on all four sides for internal spacing. At the column level, Align Items > Stretch and Justify Content > Start are applied.

Inside each column, a Module Group wraps the icon and step number. This group uses Layout Direction > Row, Justify Content > Space Between, and Align Items > Center, keeping the icon and large number aligned on the same horizontal line.

This setup creates a structured process section without extra spacer modules.

Step-By-Step Build Walkthrough

Let’s walk through how to build a three-column team member card section using native Flexbox alignment tools, with Spacing used only where it supports internal padding or visual breathing room.

Step 1: Create The Parent Row

Add a new three-column row. Select Flex as the Layout Style if it isn’t already selected. Set the row to Layout Wrapping > Wrap if you plan to add more than three team members later. This allows additional columns to move onto new flex lines instead of requiring extra rows.

Next, set the Horizontal Gap and Vertical Gap to 20px for consistent spacing between columns.

Open the first column’s settings. In the Content tab, assign a Background Color.

In the Layout option group, set the Vertical Gap to 0px. This removes automatic spacing between the column’s direct child elements so the card structure can be controlled more intentionally with internal Module Groups.

Use the Border option group to add a Border Radius, Border Style, Border Width, and Border Color to the column.

Return to the row and select the Content tab. In the Elements option group, right-click the first column, copy its item styles, and paste those styles onto the remaining columns.

Step 2: Add The Content

Add an Image module to the first column. In the Design tab, expand the Sizing option group and set the Aspect Ratio to 1:1. This frames the image as a square.

Next, expand the Framing option group. Change Object Fit from the default Fit option to Cover. Use the Object Position picker to choose which part of the image should remain visible inside the square frame.

Next, add a Module Group and a Heading module to the first column.

In the Group’s Design tab, open the Layout option group and set a 15px Vertical Gap. Then open the Spacing option group and add 20px Padding to all four sides.

Add a Text module as a nested element inside the main Heading module.

Nested Modules let you place modules inside other modules, turning the parent module into a layout container. This gives you another level of control over alignment, spacing, and internal structure.

Next, add a new Module Group with three Text modules below the other modules in the column. Style them as needed, then adjust the Group’s Flexbox settings. In the Layout option group, set the Horizontal Gap and Vertical Gap to 8px. Use Row for the Layout Direction and enable Layout Wrapping so the tags can flow onto additional lines when needed.

To finish the column, add another Module Group. Use the Layers panel to make sure it is nested within the Main Group.

Inside the last Group, add a Social Media Follow module and a Text module, then style them. Set the Group’s Layout Direction to Row and Justify Content to Space Between.

Alignment can be controlled at the module level, too. In the Text module’s Layout option group, set both Justify Content and Align Items to Center.

Fill the remaining two columns with content to finish the initial design.

Step 3: Make Alignment Adjustments

Depending on the length of your content, such as the bio text or the number of skill tags, you may notice small alignment shifts.

To keep the layout balanced as content changes, make a few targeted Flexbox and Sizing adjustments with Justify Content and Grow To Fill.

Although it might be tempting to set Justify Content > Space Between only at the column level, that does not solve every internal alignment issue. It separates the first and last direct child elements, but middle content such as bios and tags may still shift depending on its length.

A more reliable approach is to set each Column and main Module Group to Justify Content > Space Between, then use Grow To Fill on the content area that should absorb the remaining space.

Next, select the main Module Group. Open the Sizing option group and enable Grow To Fill.

This allows the main content group to expand inside the card, helping the bottom Social Icons group stay aligned near the end of the card across different content lengths.

To keep the Tag Group aligned above the Social Group, enable Grow To Fill on the Heading module as well.

This lets the heading and bio area absorb extra space, keeping the tag group and social row in a more consistent position as content changes.

Step 4: Use Divi 5’s Responsive Tools

Flexbox helps layouts adapt across breakpoints, but you should still review tablet and phone views. Use Divi’s Customizable Responsive Breakpoints to preview the layout on smaller screens. Switch between breakpoints to spot alignment or spacing issues, then apply targeted adjustments with per-breakpoint Flexbox settings, Column Class values, or Structure Templates when needed.

Step 5: Edit, Duplicate, Or Delete Columns

Once your team member card works across breakpoints, adding more team members is simple. Open the row settings, then go to the Elements option group. From here, you can edit, duplicate, or delete any column.

Duplicating a column copies the column styling, Flexbox settings, padding, borders, and nested modules. Update the content in the new column, then review the layout at each breakpoint. Because Layout Wrapping is enabled on the row, additional cards can flow onto new lines instead of requiring new rows.

Best Practices And Pro Tips

Now that you’ve seen Flexbox alignment in action, here are a few practical tips to help you build cleaner, more maintainable layouts.

Adjust Alignment Per Breakpoint

You don’t have to use the same alignment settings across every device. For example, you might use Center alignment on mobile for better visual balance while keeping Start alignment on desktop. Divi 5’s Responsive Editor and Customizable Responsive Breakpoints make these changes easier to manage.

Combine Alignment With Layout Direction

Switching between Row and Column direction at different breakpoints changes how Justify Content and Align Items behave. Use this intentionally when a horizontal desktop layout needs to become a stacked or centered mobile layout.

Use Height When Working With Align Content

Align Content only has a visible effect when wrapping creates multiple flex lines and the parent container has extra cross-axis space. Adding a height or minimum height, such as 600px, gives Align Content room to distribute those wrapped lines.

Always Test With Real Content

Placeholder content can hide alignment issues. Test with short, medium, and long copy, different button labels, varying tag counts, and real images early in the process so you can catch layout issues before publishing.

Download The Layouts

To help you practice everything covered in this post, we’ve prepared a zipped file called Flexbox Alignment. It includes the example layouts shown above, built with Flexbox alignment patterns you can inspect and reuse. You can import any layout individually or upload the Flexbox Alignment – ALL.json file to import them all at once.

To import them, go to your WordPress dashboard and navigate to Divi > Divi Library. Click the Import & Export button at the top.

Switch to the Import tab, select a JSON file, and click Import Divi Builder Layouts.

Once imported, open a page in the Visual Builder or create a new one. When the Builder loads, click to add a new section to the page.

Select the Add From Library tab, choose a layout, and click Use This Section to load it onto the page.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Master Alignment With Flexbox In Divi 5

For many common alignment patterns, you no longer need hidden Divider modules, spacing hacks, or custom CSS. Divi 5‘s Flexbox tools give you visual, content-aware controls for positioning, spacing, and aligning elements across responsive layouts.

In Part 5 Of Mastering Flexbox: Reordering Content For Better Mobile Layouts, we’ll show how to combine Display Order, Flexbox direction changes, and Wrap Reverse to create better mobile flows without duplicating content.

Download the example layouts, experiment in the Visual Builder, and start building cleaner, more maintainable pages. Drop a comment below and let us know which alignment technique you’re most excited to try.

The post Part 4 Of Mastering Flexbox: Aligning Content Without Spacers Or Custom CSS appeared first on Elegant Themes Blog.

Each design uses modular blocks, offset cards, bold spacing, layered content areas, typography, imagery, buttons, and clean grid relationships to create polished sections with a dynamic, puzzle-like layout style. Import a section, replace the content, update the visuals, and you’re ready to go.

Preview

Here’s a quick look at the 5 Tetris Designs included in the pack. The download is further down the post.

Download 5 Tetris Designs For Divi 5

Get all 5 designs for free. Import them into your Divi Library and add them to any page in the Visual Builder.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

What’s Included (6 Exports)

After you download and unzip the file, you’ll find 5 styled Tetris Layout Section exports, plus 1 file containing all layouts.

Styled – Tetris Layout Section 1 to 5 (5) → Five fully styled modular section layouts with offset content blocks, layered cards, bold visual structure, refined typography, buttons, images, and clean spacing that you can use as-is or customize.

Styled – Tetris Layout Sections (All) → Imports all 5 designs into your Divi Library at once.

How To Use The Tetris Designs

Keep your download folder handy. We’ll import the files, add a section to a page, and then replace the content.

1. Import Sections Into The Divi Library

Go to Divi → Divi Library. Click Import & Export at the top of the screen.

In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON file. Choose any Tetris Layout Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Tetris Section To Any Page

Open a page in the Visual Builder and add a new Section.

Click Add From Library and select one of your Tetris Layout sections.

3. Swap The Content

Once the section is on the page, replacing the placeholder content only takes a few clicks. Start by updating the heading, body copy, buttons, labels, stats, feature text, service details, captions, links, and calls to action so the section matches your brand and message. Then swap in your own images, icons, screenshots, product visuals, or supporting content as needed.

Because Tetris-style layouts rely on modular blocks, offset positioning, and strong spacing relationships, it’s best to replace content one block at a time. This helps preserve the balance between text, imagery, cards, buttons, and negative space as you customize the design.

If you want to expand or simplify a section, duplicate or remove existing rows, columns, groups, cards, content blocks, or modules rather than rebuilding the design from scratch. That’s the easiest way to preserve the original structure, spacing, alignment, and visual rhythm of the layout.

4. Adjust Styles (Optional)

These Tetris Designs are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, backgrounds, borders, shadows, spacing, images, buttons, card treatments, and layout sizing as needed using the settings in the Design tab.

To change typography, open any Text or Heading module and go to the Design tab. Expand the relevant text settings to adjust Font, Font Weight, Text Alignment, Text Color, Text Size, Letter Spacing, Line Height, and more.

To refine the modular styling, open the row, column, group, card, or module you want to adjust and use the Content and Design tabs to tweak Background, Border Width, Border Color, Border Radius, Box Shadow, Sizing, and Spacing.

If your section uses offset cards, stacked blocks, overlapping content, image tiles, stat boxes, button groups, or asymmetric spacing, keep those relationships in mind as you edit so the layout remains intentional and balanced.

Use Divi’s responsive editing tools to fine-tune spacing, stacking, block order, image size, card width, text alignment, and button placement on smaller screens so the layout stays polished across devices.

Tips For Effective Tetris Layouts

Tetris-style layouts work best when every block feels intentionally placed. Use these quick tips to keep your sections dynamic, organized, and easy to customize.

Give Each Block A Clear Purpose

Every card, image, stat, button, and text area should support the section’s main message. Avoid filling the layout with too many competing elements, and let each block do one clear job.

Use Contrast To Guide The Eye

Tetris layouts often include several content blocks in one section. Use contrast, color, scale, and spacing to guide visitors through the layout and highlight the most important content first.

Keep Spacing Consistent

Even when the layout feels playful or offset, spacing should still feel intentional. Keep the gaps between blocks, cards, images, buttons, and text areas consistent so the design feels polished instead of random.

Balance Asymmetry With Structure

The appeal of a Tetris layout comes from its modular, asymmetric feel. Balance that movement with clean alignment, repeated shapes, consistent spacing, and clear visual hierarchy.

Check The Layout On Mobile

Tetris layouts can change noticeably on tablet and phone screens as blocks stack. Review your layout on smaller devices to make sure content order still makes sense, images crop well, spacing feels balanced, and calls to action remain easy to tap.

Start Building In Divi 5 Today!

These 5 Tetris Designs for Divi 5 give you a fast way to build dynamic, modular sections for landing pages, service sections, feature highlights, product pages, portfolio layouts, agency websites, call-to-action areas, and more. Swap in your content, customize the styling if needed, and you’ll have a polished section ready in minutes with Divi 5’s Visual Builder.

The post 5 Tetris Designs For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

I have used page builders across dozens of client projects over the years. The difference between a good page builder and a mediocre one shows up in build speed, long-term maintainability, and how often you hit walls that require workarounds. The wrong choice means fighting your tools instead of building.

The builders below represent the best options based on my experience. Each serves a distinct workflow, and I have noted where each excels so you can match your needs to the right tool.

Best WordPress Page Builders

There are certainly many options out there for you to consider. Here, I offer a few opinions, along with videos and images for each page builder, to help you decide.

1. Divi 5

Divi is a complete website building system for WordPress and is one of the best page building experiences. Newly improved, Divi 5 is a ground-up rebuild of the entire theme and visual builder. It is one of the most modern editing environments you could hope to have in a WordPress page builder.

Divi includes dozens of modules to build any page, including forms, carousels, Instagram galleries, pricing tables, SVGs, countdown timers, and more. Each module comes with a full arsenal of styling options for typography, spacing, borders, backgrounds, filters, and animations. These styling options are built directly into the builder and do not require custom CSS (though it supports using it if you like).

Divi’s Preset system is what pulls it ahead of other builders. Instead of managing scattered global styles or writing CSS class styles in separate style sheets (or purchasing an expensive CSS framework), you build reusable style configurations right inside the visual editor. Presets are the visual designer’s version of a class-based design system, and they’re easy to set up and apply across your on-page elements. Presets can target entire modules or specific option groups (such as typography or spacing), and they can be stacked or nested to create a flexible design system.

Design Variables complement Presets by storing reusable values for colors, fonts, numbers (including clamp, min/max, and calc functions), URLs, and images. Change a color variable once, and every element using it updates instantly. Again, this is an in-editor way to create design tokens/variables that circumvent the need to create a CSS stylesheet.

The layout system handles Flex and Grid with prebuilt structures you can apply in two clicks. You can change a container’s structure easily, and at different break points assign different rules for it to behave by.

Divi’s theme builder uses a template system where each template contains header, footer, and body areas (called the Theme Builder). Conditions control which pages, posts, categories, or custom post types each template applies to. You can see all templates and their assignments in one view, making site architecture easy to manage.

The Loop Builder handles custom post queries with filtering by post type, category, tag, author, date range, and custom fields. You design loop items directly on the page rather than in a separate template library. Imagine building a staff directory in 15 minutes—all dynamic content fields would pull in post titles, featured images, excerpts, custom fields, and taxonomy terms directly into your design in the page builder.

Key Features

• 70+ native modules covering forms, sliders, galleries, pricing tables, and more
• Preset-first design system for consistent, reusable styling without CSS
• Design Variables for global colors, fonts, spacing, and calculated values
• Integrated theme builder for headers, footers, and archive templates
• Loop builder for custom post queries with conditional visibility
• Native Flex and Grid layouts with prebuilt structures
• Off-canvas builder for slide-out menus and popups
• 25+ WooCommerce modules for product pages, carts, and checkouts
• Dozens of starter sites and 2,000+ premade layouts

Best For: Agencies and freelancers who build multiple client sites. The lifetime license with unlimited site usage means your per-project cost approaches zero over time. Business owners who want to manage their own updates will appreciate that pages and templates use the same interface. The Preset system particularly suits designers who want Figma-like workflow efficiency.

Pricing: $89/year or $249 lifetime for unlimited sites. Compare that to Elementor’s $399/year for unlimited sites with no lifetime option, or Bricks’ $599 lifetime.

Get Divi 5

2. Elementor

Elementor is a plugin-based page builder that requires a separate theme (most users pair it with Hello Elementor, their minimal starter theme, or a premium theme). It has the largest market share among WordPress page builders, which means abundant tutorials, third-party add-ons, and community support. The visual builder, like most page builders, updates in real time so you can see what you are building. The widget library includes 100+ elements covering text, images, buttons, forms, sliders, and interactive components.

Global styles in Elementor handle colors and typography through a site settings panel. You define color palettes and font families, then apply them across widgets. The system works, but feels dated compared to Divi’s Presets. Changes require navigating to site settings rather than editing in context, and the options lack the granularity of a true design system.

Theme building in Elementor Pro uses display conditions to target post types, taxonomies, specific posts, archives, and WooCommerce pages. Conditions support AND/OR logic with include/exclude rules. However, there is no unified view of all template assignments. You have to check each template individually, which becomes cumbersome on complex sites.

The Loop Builder creates custom post displays with filtering by post type, taxonomy, date, author, and custom fields. However, you design loop items as separate templates in the template library, then insert them into pages via a Loop Grid widget. This means extra page loads and context switching compared to builders that let you design loops directly on the page.

Dynamic tags insert post data, site information, ACF fields, and WooCommerce product data into widget settings. The implementation supports before/after text and fallback values. WooCommerce support includes dedicated product widgets and template types for shop, product, cart, checkout, and account pages.

One consideration: Elementor v4 is on the horizon, introducing a completely different class-based styling mechanism. This will require relearning parts of the builder, even if you are proficient with the current version. The new approach resembles Divi 5’s Preset system, which suggests the industry is moving in that direction.

Elementor’s coming V4 update (center) introduces class-based styling similar to Divi 5 (right), compared to Elementor now (left)

Key Features

• 100+ widgets with deep styling controls
• Theme builder for headers, footers, and archives (Pro only)
• 300+ premade templates and starter sites
• Loop builder for custom queries (requires separate template creation)
• WooCommerce integration with dedicated product widgets
• Dynamic tags for ACF, Pods, Toolset, and native fields
• Largest third-party add-on ecosystem in WordPress

Best For: Users who want maximum third-party integration options and access to the largest community of tutorials and resources. Elementor makes sense if you need a specific add-on that only works with its ecosystem, or if your team is already trained on it.

Pricing: Free version available, but limited. Pro starts at $59/year for one site, but the full theme builder requires the $99/year plan (3 sites). Agency plan runs $399/year for 1,000 sites. No lifetime option available.

Get Elementor

3. Beaver Builder

Beaver Builder has built a reputation for stability and reliability over professional features. It is primary a page builder plugin, but also has a separate Theme that you can use with it.

Beaver Builder feels more like Divi 4 and WP Bakery vs. Divi 5 or Bricks

The drag-and-drop interface is clean and intuitive. You add modules from a panel, drag them onto the canvas, and configure settings in a pop-up modal. The approach is straightforward without the complexity that can overwhelm new users. What you see is what you get, and the learning curve is gentle. Beaver Builder feels like a better WP Bakery, but also not the best that is on offer today.

The module library covers essentials: text, images, buttons, galleries, sliders, forms, pricing tables, and more. The styling options are less comprehensive than Divi or Elementor, focusing on practical controls rather than exhaustive customization. This constraint keeps the interface fast and prevents option paralysis, though power users may feel limited.

Theme building requires Beaver Themer, a separate add-on included only in the Pro and Agency tiers. With Themer, you can create custom headers, footers, archive templates, and singular templates with conditional logic. The implementation uses an older setup that isn’t as intuitive and modern as other Theme Builders.

The Theme also relies heavily on the old Theme Customizer experience, which was dated even 3 years ago. In it, typography, headers, footers, and other styles can be set.

Key Features

• Stable, reliable codebase with minimal update issues
• Clean drag-and-drop interface with straightforward controls
• Works with any WordPress theme
• Beaver Themer add-on for headers, footers, and archive templates
• White labeling for client projects (Agency plan)
• Assistant Pro cloud storage for reusable layouts
• Clean code output with readable markup

Best For: Agencies that like a simpler builder that is still stable and has plenty of integrations. It’s not the best on this list, but it is better than average.

Pricing: Free lite version available. Standard plan (1 site) at $89/year. Higher tiers include more website usage, cloud storage, white-labeling, and multisite support for agency plans.

Get Beaver Builder

4. Bricks

Bricks targets developers and power users who want control over HTML output and prefer working close to CSS. The builder functions as a theme (like Divi), so you install it and get full-page building and theme-building capabilities without needing a separate theme. If you think in classes and CSS variables, Bricks gives you that access.

The global classes and variables system lets you define reusable styles that apply across elements. You create a class, configure its styles, and apply it to any element. Variables store colors, fonts, and spacing values for consistent use. This approach mirrors how developers work with CSS, making Bricks feel familiar to those with coding backgrounds.

Theme Styles provide another layer of global control, letting you set default styles for headings, body text, buttons, and form elements. You can apply conditions to target specific pages or post types. However, the nested menu structure requires multiple clicks to find specific settings, which feels less intuitive than Divi’s in-context Preset editing.

Template assignment uses conditions that rival Divi’s flexibility. You can target post types, taxonomies, specific posts, archives, author pages, search results, and WooCommerce templates. Conditions support AND/OR logic with includes and excludes, giving you precise control over where templates apply.

The query loop builder is among the most powerful available. You can filter by post type, taxonomy, meta fields with comparison operators, date ranges, author, and relationship fields from ACF or JetEngine. For complex CPT archives, filtered directories, or data-driven sites, Bricks handles queries that other builders cannot match.

Dynamic data integration natively supports ACF, Meta Box, Pods, Toolset, and JetEngine. Dynamic tags are available across most settings, with options for before/after text, fallbacks, and formatting. If you build sites that pull content from custom post types and complex field relationships, Bricks handles it as well as any builder on this list.

The builder generates cleaner markup than most visual builders, resulting in faster page loads and easier custom CSS. However, many Bricks users supplement it with frameworks like ACSS or Core Framework, which suggests gaps in the native design system tooling compared to Divi’s Presets.

Key Features

• Clean HTML output with semantic markup
• Global classes and variables for CSS-like workflow
• Advanced query loop builder with meta field filtering
• Native support for ACF, Meta Box, Pods, Toolset, and JetEngine
• Full theme building included (headers, footers, archives)
• WooCommerce templates with dedicated elements
• Wireframe templates for rapid structure building

Best For: Developers and technical freelancers who prioritize code quality and need advanced dynamic data features (though there are better solutions that get you closer to your code, if that is where you place value). Bricks suits those who have adopted a CSS framework and work primarily through class-based styling. The learning curve is steeper, but the control is nearly unmatched.

Pricing: $79/year for one site, $249/year for unlimited sites, or $599 lifetime for unlimited sites. Divi’s lifetime at $249 is less than half the cost of comparable unlimited-usage plans.

Get Bricks

5. Spectra

Spectra (formerly Ultimate Addons for Gutenberg) extends the native WordPress Block Editor with additional blocks and design options. If you prefer to stay within WordPress core rather than adopt a third-party builder, Spectra fills the gaps that make the Block Editor frustrating for serious page-building. Spectra is a page builder plugin, and when purchased at the Essential Toolkit tier, it comes with the Astra theme (lower tiers require a different theme).

The plugin adds 30+ blocks for layouts, forms, pricing tables, testimonials, countdowns, and interactive elements that the native editor lacks. Container blocks support Flexbox and Grid layouts, giving you structural control that core WordPress does not provide. You can build complex page layouts without needing a full page builder.

Design controls include granular spacing, typography settings, and responsive adjustments that give you finer control than core blocks. You can copy and paste styles between blocks, which speeds up repetitive styling tasks. The interface stays within the familiar Block Editor, so there is no separate builder to learn.

Spectra integrates with the Full Site Editor for template building. You can create custom headers, footers, and archive templates using Spectra blocks alongside core blocks. This keeps you within WordPress’ native tooling while significantly extending its capabilities. It also includes various prebuilt templates for you to get a quick start from.

The plugin works well alongside the Astra theme or Spectra ONE (both from Brainstorm Force), though it also works with any block theme. Spectra ONE is a Full-Site Editing theme, available free of charge. Astra is a classic theme that approaches theme building differently. Any of the Full SIte Editing features shown above (FSE styles, templates) are using Spectra and Spectra Pro. But it works with most any theme of your choice.

Key Features

• 30+ additional blocks for the native Block Editor
• Container blocks with Flexbox and Grid support
• Enhanced design controls for spacing, typography, and responsiveness
• Copy/paste styles between blocks
• Works within WordPress core (no separate builder interface)
• Full Site Editor integration for template building (os a classic theme like Astra)
• Lightweight with minimal performance impact

Best For: Users committed to the WordPress Block Editor who want enhanced capabilities without adopting a full page builder. Spectra suits those who believe in the Gutenberg direction and want to stay within that ecosystem while gaining the design control that core WordPress lacks.

Pricing: Free version available with essential blocks. Pro starts at $49/year for one site, up to $189/year for unlimited sites.

Get Spectra

Page Builder Pricing Comparison

Understanding the total cost of ownership matters when choosing a page builder. Annual pricing can get hefty, especially if you are paying for a theme + a page builder.

For agencies building multiple sites annually, Divi’s lifetime unlimited license at $249 offers the best economics. For users committed to the Block Editor, Spectra is a good bet, but you still have to choose your theme with it. Elementor’s large ecosystem comes at the cost of annual fees, with no unlimited-site option.

Making Your Page Builder Decision

Every page builder on this list can produce professional WordPress sites. The differences come down to how you prefer to work, what you’re willing to spend, and how much control you need.

Three questions should guide your decision:

First: How many sites will you build? If the answer is more than two or three, lifetime licensing makes economic sense. Divi’s $249 lifetime for unlimited sites pays for itself quickly compared to annual subscriptions.

Second: What is your technical comfort level? Developers who write CSS daily will appreciate Bricks’ control. Designers who think visually will prefer Divi’s Preset system. Those committed to WordPress-native tooling should consider Spectra.

Third: Do you need theme building? If you want to design headers, footers, and archive templates visually, ensure your choice includes this. Divi and Bricks include it. Elementor and Beaver Builder require Pro tiers or add-ons.

The builder I keep returning to is Divi. The lifetime license eliminates recurring costs, the visual builder is genuinely enjoyable to use, and the Preset system speeds up builds once you understand it. For most users, it represents the best combination of capability, workflow efficiency, and long-term value.

Frequently Asked Questions About Page Builders

The post 5 Best WordPress Page Builders in 2026 (Expert Picks) appeared first on Elegant Themes Blog.

This isn’t the end; it’s a new beginning for Divi, and we are moving forward faster than ever with weekly updates. If you use Divi 5, you’ll see a version 5.9 update notification today.

The majority of our team is focused on bug fixing and overall stability. However, after months of doing nothing but fixing bugs, we are slowly transitioning back to feature development.

That means the rate of innovation will accelerate significantly over the next few months.

If you want to get an early inside scoop, I often post progress reports in the Divi Theme Users Facebook group. Join us!

What’s New In Divi 5.9?

We implemented 65 bug fixes and improvements, along with two brand new features: Variable Fonts and the CSS Grid Editor.

Variable Fonts And New Text Styling Options

We released Variable Fonts in Divi 5.8.1!

Divi 5 now supports the latest Google Fonts collection, including variable fonts and the dozens of new controls they provide. If you aren’t familiar with variable fonts, keep reading because they are amazing.

We also added many new text styling options that allow you to create magazine-style text layouts, style dropcaps, and give you more control over text stroke, spacing, and more. When it comes to typography, Divi 5 now has it all.

Take the full tour. 👇

CSS Grid Editor

We released the CSS Grid Editor in Divi 5.9!

Divi 5 embraces CSS Grid. It comes with tons of flexible grid templates and all the options you could ever need to build every grid layout imaginable.

Today, we are taking things a step further by introducing an interface for visualizing, editing, and building advanced CSS grid layouts. It’s awesome!

Whether you’re new to CSS Grid or an experienced developer, you can use the new interface to build stunning layouts without getting lost in a maze of settings.

Furthermore, thanks to Divi 5’s unique grid offset editor, layouts built with the grid editor are housed entirely within the container, which means you don’t have to worry about editing child elements, and every CSS Grid layout built with Divi 5 works with loops.

Take the full tour. 👇

What’s Coming Next?

We have many new modules in the works, some of which I previewed recently. I am most excited for our first round of loop filter modules, which will make Divi 5’s versatile loop builder even more useful.

Additionally, we are working on the Divi AI Agent, and it’s coming along very nicely.

Since my last sneak peek, we added new tools, different chat modes, attachments, and more. Divi AI’s original features were nice, but the new agent is something else entirely. It was built to work like a human and to augment your workflows inside the builder. It’s going to change everything.

We plan to release a beta version in the next couple of weeks to gather feedback, during which time we will give all Divi AI users free tokens to experiment with.

Changelog

Here is a list of all fixes and improvements included in this update.

• Added new Grid Editor, enabling the visual creation of advanced grid layouts.
• Added support for number variables in the grid offset editor.
• Individual grid offset editor rules now support the full range of start, end, and span settings in a single rule.
• Fixed columns getting consolidated when switching the layout style from flex to grid when editing a row preset.
• Fixed grid offset rules not being copied to presets when creating new presets from current styles.
• Fixed minimum column width CSS not printing when set at the module level, when “equal minimum width columns” was set at the preset level.
• Fixed sections remaining hidden when section animation was enabled, but duration and delay were stored as empty values.
• Fixed Theme Builder loops using the “current page” query on 404 pages, incorrectly showing recent blog posts instead of the no-results state.
• Fixed Button Line Color and Button Line Style being unavailable when editing hover or sticky states after enabling underline on the normal state.
• Improved frontend font-family sanitization and archived global variable CSS output reliability.
• WooCommerce checkout pages built with Divi checkout modules now render a single, consistent checkout form instead of multiple competing forms.
• Woo Product Gallery now exposes Design -> Image -> Sizing -> Column Class and keeps wrapped flex gallery item sizing aligned between the frontend and Visual Builder.
• Fixed an issue where nested Blurb modules could display the wrong icon in Visual Builder preview due to parent icon style leakage.
• Fixed ACF Color Picker dynamic content not displaying the correct text and decoration colors in the Visual Builder, so on-canvas styles now match the resolved colors shown on the live site.
• Internal test coverage only; no customer-facing changelog.
• Added Theme Builder Playwright smoke tests to the Builder 5 CI pipeline.
• Added a Playwright smoke test to verify that the Theme Builder admin screen loads.
• Fixed the Layer view drop zone indicator and drag handle label being invisible in dark mode when dragging regular modules.
• Fixed an issue where module settings reset/default values could show module preset styles instead of the applied option group preset styles.
• Fixed an issue where custom button icons did not appear on the Contact Form 7 Styler module submit button in the Visual Builder and on the front end.
• Fixed the Dropdown mega-menu positioning and sizing so floating menus can reliably align to the parent row or viewport width across columns.
• Fixed frontend module order classes not starting at zero after layout migration.
• Imported legacy Text modules now preserve the expected Open Sans body weight during import, so frontend rendering matches freshly created Text modules.
• Fixed an issue where Code Module curly-quote HTML entities rendered correctly in Visual Builder but not on the frontend.
• Fixed an issue where CTA modules with AnalyticsWP tracking enabled could enter backward compatibility mode after the Divi 4 to Divi 5 migration.
• Fixed Visual Builder REST responses exposing Instagram tokens and accepting invalid Post Navigation post contexts.
• Improved performance of variable font weight inheritance.
• Fixed an issue where Video modules could fail to render YouTube videos when a video is added via Insert from URL in the media modal.
• Added more Google fonts to the default list of web fonts.
• Added support for flexible fonts, including variable font weight and many additional font settings.
• Added a drop cap tab to all body text option groups, allowing drop caps to be added and styled along with paragraph, anchor text, block quote, and lists.
• Add new text styling options to all body font elements, including text direction, columns, stroke position, capitalization, hyphenation, and wrapping.
• The long font select menu is now lazy-loaded, improving performance when selecting fonts.
• Fixed Comment Module comment boxes duplicating in the Visual Builder when changing Comment Count or Form Title heading levels.
• Fixed a fatal error when using Event Tickets Move Attendees and other admin iframe flows that pass a null hook suffix to admin_enqueue_scripts.
• Fixed Divi 4 to Divi 5 migration for mixed Gutenberg and Divi Layout content by improving layout block detection and preserving non-layout Gutenberg blocks with native serialization.
• Fixed accordion modules showing backward compatibility mode after D5 migration when Rank Math FAQ Schema Markup was enabled in Divi 4.
• Fixed Group Carousel in the Visual Builder not navigating to a newly added carousel slide, which prevented adding content to the new slide without manually switching slides.
• Fixed an issue where Brevo/Sendinblue custom fields were not always visible in the Email Optin module Visual Builder.
• Fixed an issue where the field dropdown always showed “Choose a field…” after selection.
• Fixed an issue where custom fields remained visible on the canvas after disabling the “Use Custom Fields” toggle.
• Fixed global font variables not rendering in the Visual Builder when applied to module font settings.
• Fixed Query Monitor reporting missing dependencies for wp-block-library on Theme Builder pages with header or footer overrides when Defer Block CSS is enabled.
• Fixed gap-0 global variables not appearing in Dynamic Content pickers for dimensional number fields such as Horizontal Gap.
• Fixed Preview Mode showing disabled modules at 50% opacity when the “Show Disabled Modules At 50% Opacity” builder setting was enabled.
• Fixed Google+ icon appearing in the Person module on imported layouts when no Google+ setting is available.
• Fixed nested module entrance animations not playing inside the Dropdown module when editing in the Visual Builder, so animated content inside an open dropdown now matches the behavior on the live page.
• Improved Divi 5 AI Agent planner prompt clarity and consistency in orchestration for multi-agent request execution.
• Fixed the default Layout option group preset Vertical Gap not applying to columns on the frontend when the preset was not explicitly assigned.
• Fixed an issue where the default image border could not be removed from Woo Related Products using the builder’s Image border settings.
• Fixed a Blog migration issue where the D4 “Show Content” option could revert to excerpt behavior after conversion to Divi 5.
• Fixed Visual Builder crash when loop subTypes were stored as an object instead of an array, which caused nested modules such as Group Carousel and Icon List to show “Oops, an error has occurred”.
• Added public upload attachment metadata support for third-party developers, including attachmentMetadata on upload field change events and a getAttachmentMetadata() helper in @divi/field-library.
• Fixed CSS numeric and similar module settings fields losing their values when edited in the main settings modal by correctly handling field onChange callbacks that pass a plain value rather than an event-shaped object.
• Adds Layer 1 preset unit tests for Divi 5: a shared cross-cutting fixture library, then PHP and TypeScript coverage for stack normalization, preset merge and selection, option-group discovery and attribute path mapping, attribute fetch and merge primitives, full merge orchestration (including two small production fixes), preset class names and store selectors, edit-mode field resolution, and edit-container plus settings-panel orchestrator merge paths (with a behavior-neutral settings merge extract for unit testability).
• Fixed Blurb image alignment not applying when the image width is used as a percentage unit with top image placement.
• Fixed Group Carousel automatic rotation not working in the Visual Builder, while it worked correctly on the frontend.
• Fixed the modifier indicator dot appearing on border option groups when explicit border values matched defaults.
• Fixed Block Row layouts breaking on the frontend after updating Divi when Website Gutter Width was customized.
• Fixed a migration regression where column widths could become larger after an update due to the gutter class and dynamic asset desynchronization.
• Fixed an issue where Countdown Timer, Email Optin, and Login could lose frontend padding because et_pb_no_bg was incorrectly added when non-color backgrounds were active.
• Fixed an issue where migrated modules could receive unintended center auto margins when module alignment was set to center without custom width constraints.
• Fixed an issue where the CSS Variable option was incorrectly shown in the color type picker for Background Pattern Color and Background Mask Color fields, causing those fields to render as black when a CSS variable was selected.
• Fixed the Contact Form Module failing to submit or show a success message when All-In-One SEO was active.
• Fixed an issue where clicking “Remove Variable” on a global color in a background gradient stop would leave the stop’s color empty, causing the gradient to break and the background to appear white after saving and refreshing the page.

Jump Into Divi 5 Today

It’s official. Divi 5 is ready for production. Give it a try, and let us know what you think!

If you are brand new to Divi 5, we suggest familiarizing yourself with its many new features; there’s much to explore.

• The Divi 5 page provides a good overview of some of its most exciting changes.
• Our help center has nearly 200 articles focused on Divi 5.
• On the blog, the Divi Resources category features hundreds of long-form tutorials that explore every aspect in depth.
• On YouTube, we have many videos that walk you through each new update.
• Plus, our Fin chatbot is trained on everything and can answer questions instantly! Behind the chatbot is our support team, ready to chat with you and help you through the transition.

The post Divi 5.9 Release Notes appeared first on Elegant Themes Blog.

Divi 5 gives you a better way to build footer layouts with its Flexbox controls. Instead of fixing alignment with one-off margins and padding, you can decide how footer sections stretch, stack, align, and reflow directly inside the builder.

In this tutorial, we’ll build a responsive footer with a CTA block, newsletter signup, navigation links, social links, and a copyright bar. We’ll use Design Variables for reusable styling and Flexbox for the structure, so the footer stays easier to adjust across desktop, tablet, and mobile.

Why Build A Flexbox Footer In Divi 5?

A footer might look simple, but it usually contains several different content types: calls to action, menus, signup forms, social icons, legal text, and sometimes contact details.

That mix can get messy fast. One column has more content than another. A form needs more space than the link list beside it. Social icons need to sit close together, but the whole group still needs to align with the rest of the footer. In older workflows, the fix often involved stacking manual margin and padding values until the footer looked right in one viewport. Then you checked tablet or mobile, and the layout needed another round of adjustments.

Divi 5’s Flexbox layout system handles those relationships at the container level. Instead of treating every module as an isolated object, you control how items behave inside Sections, Rows, Columns, and Module Groups. Three Flexbox controls do most of the work in this footer:

• Align Items: Controls how flex items align across the cross axis. In this build, Stretch helps columns fill the available height so the two sides of the footer stay visually balanced.
• Gap: Controls the spacing between flex items without relying on separate margin values on each module.
• Layout Direction: Controls whether items flow horizontally in a row or vertically in a column.

This footer also follows the same system-first approach we use across Divi 5 builds. Design Variables define repeated values, such as colors, spacing, and fluid font sizes. Flexbox controls the layout relationships between those styled elements.

That combination gives you a footer that is easier to maintain. If the accent color changes, update the variable. If the spacing needs more breathing room, adjust the shared spacing value. If the layout needs to stack differently on smaller screens, update the Flexbox settings instead of rebuilding the whole section.

Learn Everything About Divi 5’s Flexbox

What We’re Building

Before we start building, here’s a look at the finished footer.

The footer has one main two-column layout. The left side contains two stacked blocks:

• A yellow CTA block with a heading, supporting text, and button
• A dark newsletter block with an Email Optin module

The right side contains two matching white blocks:

• A navigation link group
• A Follow Us group with social icons

Below the main row, a separate full-width copyright row closes out the footer. This structure gives us a good reason to use Flexbox. The left and right sides contain different kinds of content, but they still need to align cleanly as one footer system.

Step 1: Open The Global Footer In Theme Builder

Go to Divi > Theme Builder. In the Global Template, click the pencil icon next to the Global Footer area to edit it.

The footer opens in the Visual Builder, where you can build the layout using Divi 5’s row, column, module, and Flexbox controls.

If your site already has a footer, you can adapt the same process to the existing structure. If you are starting fresh, begin with a blank footer canvas.

Step 2: Create The Design Variables

If your site already uses Design Variables, you can reuse your existing color, font, and spacing system. If you are building this footer as a standalone exercise, create a few variables first.

Open the Design Variables panel and start with colors. Create or update variables for:

• Footer Accent: The yellow accent color used in the CTA block
• Footer Dark: The black or dark background used in the newsletter block
• Footer Light: The white background used in the right-side blocks
• Footer Muted Text: A softer text color for secondary footer text

Name variables by role instead of by value. Footer Accent is easier to maintain than a name based on the current hex code, because the role can stay the same even if the color changes later.

Next, set up a font variable if the footer uses a typeface different from your site’s default body font.

Create a Number Variable for repeated spacing. Name it Footer Spacing and set it to 5%. We’ll use this for padding inside the footer blocks so the spacing stays consistent.

Finally, create a Number Variable for fluid footer text. Save it as Footer Font – Fluid and set it to:

clamp(16px, 1rem + 0.4vw, 21px)

This lets footer text scale more smoothly between smaller and larger screens without setting separate font sizes for every breakpoint.

The goal is not to create variables for every possible value. The goal is to create variables for values you expect to reuse.

Step 3: Build The Main Footer Structure

Inside the footer section, insert a Flex Offset 2-column row. This will be the main row that holds the left stack and the right stack.

Open the Row settings and go to Design > Sizing. Set:

• Width: 90%
• Max Width: 1280px
• Alignment: Center

This keeps the footer content centered and prevents it from stretching too wide on large screens. Inside the left column, add a nested one-column Row. This row will hold the CTA content. Add these modules inside it:

• Heading module: CTA headline
• Text module: Supporting copy
• Button module: CTA button

Below that CTA row, add another one-column Row for the newsletter signup. Place an Email Optin module inside it.

In the right column, add a Group module for the navigation links. Place a single Heading module inside it. We’ll use Loop Builder later so this one module can repeat for each page in the query.

Below that, add another Group module for the social section. Inside it, add:

• A Heading module with the text Follow Us
• A Social Media Follow module with your chosen platforms

Finally, add one more row below the main two-column row. Use a single-column row and add a Text module for the copyright line.

Here is the footer structure in Wireframe view.

Step 4: Apply Flexbox To The Main Row

Now that the structure is in place, use Flexbox to control how the two sides align. Open the main two-column row settings and go to Design > Layout. Confirm Layout Style is set to Flex. Then set:

• Layout Direction: Row
• Horizontal Gap: 0
• Vertical Gap: 0
• Align Items: Stretch
• Layout Wrapping: No Wrap

The row direction keeps the two main columns side by side. The zero gaps keep the blocks flush against each other. Align Items: Stretch helps the columns fill the available height, which keeps both sides visually aligned.

Keep Justify Content and Align Content at their defaults for this layout. Align Content only becomes relevant when wrapping creates multiple lines of flex items, and this row is set to No Wrap. Next, open each of the two child columns. In both columns, go to Design > Layout and set Vertical Gap to 0.

This keeps the CTA and newsletter blocks touching in the left column, and the navigation and social blocks touching in the right column.

Step 5: Apply Flexbox To The CTA Block

Open the nested CTA row, the one containing the Heading, Text, and Button modules. Go to Design > Layout and confirm Layout Style is set to Flex. Set Horizontal Gap to 0.

Then go to Design > Sizing and enable Stretch to Fill. This helps the CTA row fill the available height inside the left column instead of leaving awkward empty space below the button.

Now open the column inside this CTA row. Go to Design > Layout, confirm Flex is enabled, and set Vertical Gap to 10px.

Then go to Design > Spacing and set the column padding to the Footer Spacing variable.

The gap controls spacing between the modules. The padding controls the space inside the CTA block. Keeping those jobs separate makes the layout easier to adjust later.

Step 6: Style The CTA Block

Stay inside the CTA column and go to Design > Background. Set the background color to your Footer Accent variable.

Next, go to Design > Box Shadow. Select Preset 4. Leave every value at 0 except Spread, which should be set to 1. Set the shadow color to #000000 at 100% strength.

This creates a thin, flat edge that reads more like a border than a traditional drop shadow. Open the Heading module and add the text: “Ready to Get Started?”. Then, apply the following settings:

• Tag: H2
• Font Size: 50px
• Line Height: 1.3em
• Layout Style: Block

Setting the Heading module to Block keeps it behaving like a normal block element inside the flex column.

Move to the Text module. Set the text color to black or your dark footer text variable, set Font Size to 16px, and set Layout Style to Block.

Finish with the Button module. Set the background color to black and the text color to white. Then go to Design > Spacing and set the top and bottom padding to 16px.

Step 7: Apply Flexbox To The Newsletter Block

Now repeat the layout setup for the newsletter row.

Open the nested row that contains the Email Optin module. Go to Design > Layout and confirm Layout Style is set to Flex. Set Horizontal Gap to 0.

Open the column inside that row. Confirm Flex is enabled under Design > Layout, then set Vertical Gap to 10px.

Go to Design > Spacing and set the column padding to the same Footer Spacing variable.

This keeps the newsletter block aligned with the CTA block above it and uses the same spacing system.

Step 8: Style The Newsletter Block

Open the newsletter column settings and go to Design > Box Shadow. Match the CTA column:

• Preset: Preset 4
• Spread: 1
• Other values: 0
• Shadow Color: #000000 at 100%

Inside the Email Optin module, type Newsletter as the title. Turn off any fields you do not need, then connect your email provider and email list.

Go to Design > Background and set the module background to your Footer Dark variable.

Under Design > Layout, set Layout Direction to Row and Vertical Gap to 0. This keeps the form elements tighter inside the dark block.

Style the title next. Set the title text color to white and the Font Size to 34px. Then customize the input fields:

• Input Background: Black or Footer Dark
• Placeholder Text: White
• Input Text: White
• Border Width: 1px
• Border Color: Transparent or subtle light value

Customize the label text as well, using white or your light footer text variable. If your optin form uses checkbox or radio fields, review those styles too so they match the dark layout.

For the Email Optin button, set the background to white and the text color to black. Then go to Design > Spacing and set:

• Top Padding: 16px
• Bottom Padding: 16px
• Left Padding: 32px
• Right Padding: 32px

Finally, open the Email Optin module’s spacing settings and set its padding to 0 on all sides. The outer column already handles the spacing, so the module itself does not need extra internal padding.

Step 9: Create The Footer Navigation With Loop Builder

Now turn the Heading module inside the navigation Group into a repeating element. Open the Heading module and go to Content > Loop. Toggle Loop Element on.

Set Query Type to Post Type, then set Post Type to Pages.

This pulls page content into the loop. For a production footer, review the query settings carefully so the loop only includes the pages you want in the footer. This is not the same thing as automatically outputting your WordPress navigation menu; it is a looped page list that you can style and control inside the builder.

Next, go to Content > Text > Heading. Click the dynamic content icon and select Loop Title. The Heading module now displays the title for each page returned by the loop query.

Then go to Content > Link. Click the dynamic content icon on the URL field and select Loop Link. Each looped heading now links to its corresponding page.

Step 10: Apply Flexbox And Style The Navigation Group

Open the Group module that contains the looped Heading. Go to Design > Layout and set:

• Layout Direction: Column
• Vertical Gap: 0

Then go to Design > Sizing and enable Grow to Fill. This lets the navigation group take up the available height in the right column.

Now style the looped Heading module inside it.

Go to Design > Background and set the background to white. Set Layout Style to Block and the heading tag to H4.

For Font Size, use the Footer Font – Fluid variable. Set Line Height to 1.3em.

Go to Design > Sizing and enable Grow to Fill here as well, so each looped heading can stretch evenly inside the group.

Go to Design > Spacing and set the module padding to the Footer Spacing variable.

Under Design > Box Shadow, use the same flat edge treatment:

• Preset: Preset 4
• Spread: 1
• Other values: 0
• Shadow Color: #000000 at 100%

Repeat the same visual treatment for the Follow Us group so the right column feels consistent.

Step 11: Add The Copyright Text

Open the Text module in the copyright row. Click the dynamic content icon and select Current Date. Set Date Format to Custom and enter:

Y

This outputs the current year only, so the footer does not need a manual year update each January. In the Before field, type:

Copyright © Divi

In the After field, type:

. All Rights Reserved

Then go to Design > Text and set Text Alignment to Center.

Step 12: Optimize The Footer For Responsive Screens

Switch to tablet and mobile view using the responsive toolbar.

Much of the layout should already behave well because the structure is based on Flexbox relationships instead of fixed manual spacing.

The main settings to review are:

• Column stacking: Confirm the left and right footer stacks appear in the right order.
• Layout Direction: Adjust direction on specific rows or groups if content needs to stack differently on smaller screens.
• Gap: Check whether the spacing between stacked items still feels intentional.
• Grow to Fill and Stretch to Fill: Make sure these settings help the layout instead of forcing awkward heights on smaller screens.
• Email Optin layout: Confirm the input field and button have enough room once the layout narrows.
• Navigation loop: Make sure the looped links do not feel too cramped on mobile.
• Social icons: Review icon size and spacing.
• Copyright text: Make sure the final line stays readable.

The fluid text variable helps here because the footer text scales between its minimum and maximum values. You still need to review responsive views, but you should need fewer manual breakpoint fixes.

Save the footer and preview it across desktop, tablet, and mobile.

Download 20 Flexbox Footers For Divi 5

Get all 20 Flexbox footers for free, including both Default and Prestyled versions. Each footer is ready to import into your Divi Library and use in the Theme Builder. Just download and start building.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Build Better Footer Layouts With Flexbox In Divi 5

You just built a responsive footer in Divi 5 without writing custom CSS.

Design Variables handled repeated colors, spacing, and fluid text sizing. Flexbox handled the structure: stretching columns, controlling gaps, stacking content, and keeping related elements aligned.

The larger takeaway is that this workflow is not limited to footers. The same Flexbox controls can help with headers, pricing tables, card layouts, feature rows, optin sections, and any layout where multiple pieces need to stay aligned as the screen changes.

Once you understand how Align Items, Gap, and Layout Direction work together, you can build layouts that need fewer one-off fixes and hold up better across screen sizes.

The post How To Build A Flexbox Footer In Divi 5 appeared first on Elegant Themes Blog.

That is where Divi 5’s multi-level preset system becomes important. Design Variables, Option Group Presets, Element Presets, Composable Settings, and Nested Option Presets can work together as connected layers.

Instead of saving disconnected styles, you can build a system where variables feed presets, smaller presets sit inside larger presets, and Element Presets bring those decisions together into reusable components. Stacking then lets you layer contextual variations without creating a separate preset for every possible use case.

In this guide, we’ll walk through how the system works, where Nested Option Presets fit, why Composable Settings matters, and how to build a preset structure that becomes easier to maintain as your site grows.

How Divi 5’s Multi-Level Preset System Works

Divi 5 presets started as a way to save and reuse styles. Now they can work more like a connected design system. The idea is simple: each layer should reference the layer below it.

A color, font, spacing value, or radius starts as a Design Variable. That variable gets used inside an Option Group Preset. That Option Group Preset can be used on its own, stacked with other Option Group Presets, nested inside another Option Group Preset, or included inside an Element Preset. The Element Preset then becomes a complete reusable component.

When the foundation changes, the connected layers can update with it.The newest piece of this system is Nested Option Presets. The name can sound like a separate preset type, but the idea is more specific than that: a Nested Option Preset is still an Option Group Preset at its core. It becomes “nested” when it is applied to an option group inside another option group or inside a module sub-element.

That matters because many important design decisions live below the top-level module. A Call To Action module has a button. A Blurb has an image and title. A Contact Form has fields and a submit button. With Composable Settings, those sub-elements can expose additional option groups such as Border, Background, Spacing, Sizing, Transform, or Animation. Once those nested option groups are available, they can use presets too.

This creates a real chain of reusable decisions. For example:

• Design Variable: Radius Large
• Option Group Preset: Border: Pill
• Option Group Preset: Button: Primary
• Nested Option Preset: Border: Pill applied inside the Button option group
• Element Preset: CTA: Promo Card

If the radius changes, you can update the variable or the Border preset once. Every connected Button preset, nested button border, and CTA preset can follow. That is the difference between saving styles and building a system.

The Main Layers In A Divi 5 Preset System

A strong Divi 5 preset system has three main layers. Composable Settings and Nested Option Presets extend how deeply those layers can reach.

1. Design Variables

Design Variables sit at the foundation. They store reusable raw values such as colors, fonts, numbers, text, links, and images. Examples include:

• Primary Color
• Heading Text Color
• Body Font
• Spacing Medium
• Radius Large
• Shadow Blur

Variables should describe the role of a value, not only the value itself. A variable called Primary Color still makes sense if the brand color changes later. A variable named after a hex code does not.

Variables are the least visible part of the system, but they carry the most weight. If your presets use variables instead of hardcoded values, global updates become much easier.

2. Option Group Presets

Option Group Presets save one group of settings, such as Border, Box Shadow, Spacing, Background, Text, Button, Sizing, or Image.

They are more flexible than Element Presets because they are not tied to one module type. A Border preset can be applied to any element that exposes the Border option group. A Spacing preset can be reused across Sections, Rows, Columns, Groups, and modules where that option group is available.

Option Group Presets can also be stacked. That means you can apply more than one preset to the same option group when you need a base style plus a contextual variation. With Nested Option Presets, an Option Group Preset can also contain another Option Group Preset. That is what gives this layer more depth than a simple saved setting.

3. Element Presets

Element Presets save the full design of a specific module or element type. A Button Element Preset applies to Button modules. A Blurb Element Preset applies to Blurbs. A Contact Form Element Preset applies to Contact Forms. Each Element Preset can include multiple Option Group Presets inside it, so the full component still stays connected to smaller reusable decisions.

Element Presets can also be stacked. This is useful when a module needs a base component style plus one or more contextual variations.

Element Presets are also where defaults become useful. Every module type can have a default preset. When a default is assigned, new instances of that module start with the preset styling already applied. That means a new Button, Blurb, Form, or Group can arrive closer to your design system without manual styling every time.

The Behaviors That Make Presets Multi-Level

The layers matter, but the system becomes powerful because of how those layers behave together. Four behaviors do most of the work: Nesting, Stacking, Composable Settings, and Nested Option Presets.

1. Nested Presets

Nested Presets let one preset live inside another preset while staying connected to its original source. For example, a Button Element Preset might include:

• Text: Button Label
• Spacing: Button Padding
• Border: Pill
• Box Shadow: Subtle

Each of those smaller Option Group Presets can still be edited from its own source. If you update Border: Pill, every Button preset using that border can update with it.

2. Stacked Presets

Stacked Presets let you apply more than one preset to the same element or option group. This helps you avoid creating too many variations. Instead of building separate presets for every possible context, you can keep one base preset and layer focused variations on top.

For example, a Text module might use:

• Text: Body Base
• Text: Tag
• Text: Light

The base preset controls the main typography. The tag preset adds the label treatment. The light preset changes the text color for a dark section. Stacking keeps your preset library smaller. You can reuse one base style and apply only the contextual difference when needed.

3. Composable Settings

Composable Settings lets you enable additional design option groups for module sub-elements.

This is important because many modules are made of smaller parts. A Blurb has an image, title, and body text. A Call To Action has a button. A Contact Form has fields. Without Composable Settings, some of those smaller parts may not expose the design controls you need.

With Composable Settings, you can toggle on additional option groups for those sub-elements. For example, you can enable:

• Border for a Blurb image
• Sizing for a CTA button
• Background for body text
• Transform for an icon
• Animation for a nested image

Composable Settings can also be used inside presets. If you enable specific nested option groups inside a preset, those groups can appear automatically when that preset is used. That keeps the design panel cleaner while still giving reusable access to deeper styling controls.

4. Nested Option Presets

Nested Option Presets are where Composable Settings and presets meet. After Composable Settings exposes a nested option group, that option group can use a preset. For example, if you enable Border controls for a CTA button sub-element, you can apply the same Border: Pill preset you use elsewhere.

This is the key distinction: a Nested Option Preset is not a random extra layer floating outside the system. It is an Option Group Preset being used inside a nested option group. That means the same reusable decision can reach more places.

Why Preset Order Matters

A multi-level preset system works best when it is built from the bottom up:

• Step 1: Define Design Variables.
• Step 2: Create core Option Group Presets that use those variables.
• Step 3: Enable Composable Settings where sub-elements need reusable controls.
• Step 4: Apply Nested Option Presets to those nested option groups.
• Step 5: Build Element Presets that include your Option Group Presets and Nested Option Presets.
• Step 6: Use stacking for contextual variations.
• Step 7: Test the system with global changes.

This order keeps the system connected. If you skip the foundation, your presets may still save time, but they will not update as cleanly later.

How To Build A Multi-Level Preset System In Divi 5

Now let’s walk through the process from the foundation up.

Step 1: Define Your Design Variables

Open the Variable Manager from the left sidebar of the Visual Builder. This is where your reusable values live. Divi supports variable types such as Colors, Fonts, Numbers, Images, Text, and Links.

Start with role-based color variables. Divi includes default colors such as Primary, Secondary, Body, Heading, and Link. Update those values to match your brand before creating extra variables.

If the design needs more colors, add them with names that describe their role. Examples include:

• Accent
• Surface
• Muted Text
• Border Light
• Success
• Warning

Then define the values you know will repeat across the site. Under Fonts, set your Heading and Body fonts. Under Numbers, add spacing values, radius values, widths, and other reusable measurements. Keep this list focused. Variables are most useful when they represent values you will use repeatedly across presets.

The goal is to create a reliable source of truth before building presets on top of it.

Step 2: Create Your Core Option Group Presets

After variables are in place, create the Option Group Presets you will reuse most often. These may include:

• Text: Heading Large
• Text: Body Regular
• Button: Primary Filled
• Button: Secondary Outline
• Spacing: Section Large
• Spacing: Card Padding
• Border: Card
• Border: Pill
• Shadow: Subtle
• Background: Surface

To create an Option Group Preset, open an element in the Visual Builder and go to the Design tab. Find the option group you want to save, hover over its label, and click the preset icon. Choose Add New Preset if you want to build it from scratch, or New Preset From Current Styles if the current element already has the style you want to save.

The important part is how you set the values. When a field should stay global, reference a Design Variable instead of typing a static value. For example, a heading preset might use a Font Variable, a Number Variable for size, and a Color Variable for text color.

A Button preset might use the Primary Color variable for its background.

A Border preset might use a Number Variable for radius.

This is what makes the system maintainable. The Option Group Preset does not just store a value; it stores a connected decision.

Step 3: Use Composable Settings For Sub-Elements

Next, decide which module sub-elements need deeper styling controls.

For example, inside a Blurb module, you may want more control over the image, title, icon, or body text. Inside a Call To Action module, you may want to style the nested button with the same presets you use on standalone buttons. Inside a Contact Form, you may want field borders, spacing, or focus styles to follow the same system as the rest of the site.

Composable Settings lets you expose those additional option groups. To use it, open a module, go to the Design tab, hover over the sub-element option group, and click the Toggle Options icon. Then enable the option groups that sub-element needs. For example:

• Enable Border for a CTA button.
• Enable Sizing for a Blurb image.
• Enable Spacing for a nested title.
• Enable Background for a form field group.
• Enable Transform or Animation for a visual sub-element.

Only enable the option groups you actually need. The point is not to make every sub-element show every possible setting. The point is to expose the controls that should participate in your design system.

Step 4: Apply Nested Option Presets

Once Composable Settings exposes a nested option group, apply your existing Option Group Presets to it. For example:

• Apply Border: Pill to a nested CTA button.
• Apply Border: Card to a Blurb image.
• Apply Spacing: Compact to a sub-element container.
• Apply Text: Heading Small to a nested title.

At that point, those presets function as Nested Option Presets because they are being used inside nested option groups.

This keeps sub-element styling connected to the same system as the rest of your site. A border preset can control a standalone Button, a nested CTA button, and a form field border. A spacing preset can control a module wrapper and a nested sub-element. The reusable decision stays in one place.

Step 5: Build Element Presets That Include Your Preset System

Once the core Option Group Presets and Nested Option Presets are ready, use them inside Element Presets. Element Presets turn smaller styling decisions into complete reusable components. For example, an Email Opt-In module might use:

• Spacing: Card Padding
• Background: Surface
• Text: Heading Medium
• Text: Body Regular
• Button: Primary Filled
• Border: Card
• Shadow: Subtle

Open the module, apply the relevant Option Group Presets across its Design tab, enable any needed Composable Settings for sub-elements, apply Nested Option Presets where needed, then save the module as an Element Preset from the preset menu in the top-right corner of the settings panel.

Choose New Preset From Current Styles.

The Element Preset now carries those smaller preset decisions with it.

A Blurb Element Preset follows the same logic. Apply the right Title Text preset, Body Text preset, Spacing preset, Border preset, and any nested presets needed for the image or title, then save the Blurb as an Element Preset.

When you edit one of the nested Option Group Presets later, every Element Preset using it can reflect that change.

The same approach works for Contact Forms, Call To Action modules, Pricing Tables, Groups, Images, and any other module you use often.

After your core Element Presets are ready, open the Preset Manager and set defaults for the module types you use most. That way, every new instance starts closer to your system.

Step 6: Apply Stacked Presets For Variations

Not every design variation needs its own full Element Preset. A better approach is to create a base preset, then stack smaller presets on top when the context changes.

For example, a Text module could start with a base text preset. Then you could stack a tag-style preset and a dark-section color preset when needed.

Use stacking for focused variations such as:

• Light text on dark backgrounds
• Larger spacing in hero sections
• Compact spacing in sidebars
• Accent borders on featured cards
• Alternative button sizes
• Special hover treatments

Stacked presets help you avoid creating a bloated library of nearly identical styles. The base preset stays shared, while the variation handles only the difference.

Use the same logic with Option Group Presets. If a base Button preset handles the main button style, a second Button preset can layer on a size variation, a dark-section variation, or a hover treatment. If those presets overlap, the later preset controls the overlapping value.

Step 7: Test The System With A Global Change

After the system is built, test it. Open the Variable Manager and change a value that multiple presets reference. For example, change the Primary Color, a spacing value, or a radius value.

Then review your page. Elements using presets connected to that variable should update. You can also test at the preset level. Edit a core Option Group Preset, such as Border: Card or Button: Primary Filled, and check where that change appears.

If something does not update, that usually means one of three things:

• The value was hardcoded instead of connected to a variable.
• The element is not using the expected preset.
• A local override is taking priority over the preset value.

That is not a failure. It is an audit. It shows where the system still has gaps.

Managing Your System With The Preset Manager

The Preset Manager is the central place to manage your preset system.

Open it from the left sidebar of the Visual Builder. From there, you can create, edit, duplicate, reorder, delete, import, export, and assign default presets without opening each module one by one.

When editing a preset used across many elements, use the Preset Preview panel. It gives you a safer place to adjust the preset before saving changes that may affect the site globally. The Preset Manager is also useful for keeping your library clean. Remove presets you no longer use, duplicate presets when you need a controlled variation, and reorder important presets so they are easier to find.

Export Variables And Presets For Future Projects

Once your system is complete, export it so you can reuse it on future builds. Design Variables and Presets can be exported from their respective managers. The Variable Manager exports your variables, while the Preset Manager exports your presets. Together, those files carry the reusable foundation of your design system into another Divi 5 site.

This is especially useful for agencies, freelancers, and teams that want every new build to start from the same design foundation, rather than rebuilding variables and presets from scratch.

Best Practices For A Multi-Level Preset System

A preset system should make design work easier, not harder to manage. Keep the structure clear from the beginning.

• Name by role: Use names like Primary Color, Border: Card, and Button: Primary Filled instead of names tied to one page.
• Build from the bottom up: Start with variables, then Option Group Presets, then Element Presets, then layouts.
• Keep presets focused: One preset should have a clear job. Avoid creating several presets that only differ by one hardcoded value.
• Use stacking for context: Stack small variation presets instead of creating a new full preset for every context.
• Use nesting for structure: Let smaller Option Group Presets feed larger Option Group Presets and Element Presets.
• Use Composable Settings intentionally: Expose sub-element option groups when they need to participate in the design system.
• Treat Nested Option Presets as connected OGPs: Use them to bring the same preset decisions into nested option groups instead of styling sub-elements by hand.
• Set defaults for repeated modules: Default presets reduce manual styling when adding new modules.
• Audit local overrides: Use overrides when needed, but avoid turning them into hidden one-off design systems.
• Export your system: Save variables and presets so your design foundation can travel to future projects.

Build A Preset System That Scales With Your Site

The real value of Divi 5’s multi-level preset system is not just speed. It is consistency.

Variables define the values. Option Group Presets turn those values into reusable design decisions. Nested Option Presets bring those same decisions into nested option groups. Element Presets turn connected decisions into complete components. Stacked Presets handle context without bloating the library. Composable Settings lets deeper module parts join the same workflow.

When those layers are connected, your site becomes easier to update because the system knows where each decision lives. That means a color change, spacing adjustment, border update, or button refresh can move through the design from one source instead of becoming a module-by-module cleanup job. Build the system once, keep it organized, and every page after that becomes easier to design, update, and maintain.

The post How To Build A Multi-Level Preset System In Divi 5 appeared first on Elegant Themes Blog.