That flexibility is useful, but it also creates a small problem: the setup that works best for one task is not always the setup you want for another. A layout-heavy build might need the Layers and Inspector panels open. A writing session might need a cleaner canvas. A smaller screen might need fewer panels competing for space.

Divi 5 Workspaces solve that by letting you save complete builder setups and switch between them whenever you need. Instead of rearranging the interface by hand every time your task changes, you can save one workspace for your default build flow, another for content editing, another for responsive checks, and another for focused work.

In this post, we’ll look at what Workspaces save, how they’re organized, how to create and manage your own, how to switch between them with the Command Center, and which workspace setups are worth trying on a real Divi 5 project.

What Are Workspaces In Divi 5?

A workspace is a saved version of your Visual Builder setup. It remembers how your builder interface is arranged and which preferences shape the way it behaves. Once you save that setup, you can return to it later with one click or through the Command Center.

A workspace only changes the builder interface. It does not change the content, design, or settings on the page itself. Your modules, rows, sections, presets, and layout stay exactly as they are. Only the building environment changes.

You’ll find the Workspaces icon in the left sidebar.

Creating one is simple. Arrange the builder the way you like it, open the Workspace panel, and save that setup as a new workspace.

You are not limited to one workspace. You can create multiple setups for different jobs, then move between them as you build.

One workspace might keep the canvas clean for writing. Another might keep Layers, Inspector, and the Settings panel available for complex layout work. Another might open directly into a responsive view so you can check tablet or phone layouts faster.

The goal is not to create a different workspace for every tiny preference. The goal is to save the builder setups you actually return to.

What A Workspace Saves

A workspace saves two broad categories of information: your interface layout and your builder preferences. Together, those settings define how the Visual Builder looks and feels while you work.

Interface Layout

The first thing a workspace saves is your panel arrangement. That includes:

• Which panels are open or closed
• Where panels are docked
• Whether panels are floating or attached to a sidebar
• Panel size and position
• Sidebar width
• Tabbed panel groups
• Active builder view, such as Wireframe or responsive views

This is the part you notice immediately. Switch workspaces, and the builder rearranges itself around the task you saved it for.

Workspace Settings

A workspace also saves builder preferences from the Workspace Settings panel. These settings control how the builder behaves, how much interface chrome appears, and what kind of starting point you see when building.

Here are the main settings covered in the workspace panel:

• Interface Mode: Switches the builder between Light and Dark mode.
• Color Scheme: Sets the builder accent color, including options such as Blue, Purple, Green, Red, and Orange.
• Enable Admin Bar: Shows or hides the WordPress admin bar while you work.
• Page Bar Icons: Controls which action icons appear in the top bar, such as undo, redo, history, import/export, clear layout, and add to library.
• Builder Default View Mode: Sets the view the builder opens in, such as desktop, tablet, phone, or Wireframe View.
• History State Interval: Controls how often the builder records undo states, from After Every Action to wider intervals such as every 10th, 20th, 30th, or 40th action.
• Settings Modal Default Position: Sets where settings panels open, such as left sidebar, right sidebar, or floating over the canvas.
• Page Creation Flow: Controls what appears when creating a new page, such as Give Me A Choice, Build From Scratch, Load Premade Layout, or Build With AI.
• Show Disabled Modules At 50% Opacity: Makes hidden elements easier to spot while editing.
• Group Settings Into Closed Toggles: Keeps option groups collapsed when opening module settings.
• Add Placeholder Content To New Modules: Adds sample content to new modules so you can see their structure before replacing it.
• Speed Up The Builder With Prerendering: Preloads builder pages in the background for faster navigation.
• Show Theme Builder Layouts: Controls whether headers, footers, and other Theme Builder areas appear while editing a page.

That is why Workspaces are more than saved panel layouts. They can change the whole building environment in one move.

If a top-bar icon you expect is missing, check Workspace Settings first. It may simply be turned off in the active workspace.

Why Workspaces Matter

Before Workspaces, customizing the builder was still possible, but those adjustments were tied to the moment. You arranged panels, opened the tools you needed, cleared the ones you did not, and then did it again later when the task changed. Workspaces turn that setup process into something reusable.

You arrange the builder once, save it, and return to that arrangement whenever it fits the job. When you move from layout design to writing, or from desktop design to responsive checking, the interface can change with the task instead of staying in whatever state you last left it.

That matters most during long sessions. A cleaner workspace means fewer panels to look past. A power-user workspace means the tools you reach for most are already open. A responsive workspace means you start closer to the breakpoint you want to review.

Workspaces are also personal. Every user on the site can create their own collection, so your saved builder setup does not need to match anyone else’s. A designer, writer, developer, and client can each use a different interface without changing the page content or forcing a shared panel layout on the rest of the team.

The Three Types Of Workspaces

When you open the Active Workspace menu, workspaces are grouped by where they come from and who they belong to.

Website Workspaces

Website Workspaces belong to the site. This group includes Global, the shared workspace that acts as the baseline builder setup. It is the setup users see before they create or choose a personal workspace.

That makes Global useful as a common reference point. If a team needs screenshots, documentation, or a shared starting layout, the Global workspace gives everyone a familiar baseline before they branch into personal setups.

Your Workspaces

Your Workspaces are the ones you create and save for your own WordPress user account. Nobody else on the site has to use them, and your workspace choices do not change how someone else’s builder is arranged. This is where your personal default, content-editing setup, responsive setup, or focus setup will live.

Premade Workspaces

Premade Workspaces are built into Divi 5. The two premade options are Power User and Minimalist. They give you ready-made starting points when you do not want to build a workspace from scratch.

Premade Workspaces are best treated as foundations. Activate one, adjust the builder to match your workflow, then save the adjusted setup as a new workspace of your own.

How To Create A New Workspace

Creating a workspace only takes a few minutes. The main work is deciding what kind of setup you want to save. Open your page in the Visual Builder. The builder loads your current default workspace. If you have not chosen one yet, that will usually be Global.

Arrange your panels the way you want to work. Open the panels you use often, such as Layers or Inspector. Dock panels to the left or right, float them over the canvas, resize them, or combine them into tabbed groups.

Next, open Workspace Settings by clicking the Workspaces icon in the left sidebar.

Set the preferences that should belong to this workspace. Choose the interface mode, color scheme, admin bar visibility, top-bar icons, default view mode, settings modal position, and other builder preferences.

When the builder looks and behaves the way you want, click Save as New Workspace.

Give the workspace a clear name in the Save Workspace modal. Use names based on the job or screen size, such as Default Build, Content Editing, Responsive Review, Widescreen, or Focus Mode.

Enable Set as Default if you want this workspace to load automatically when you open the builder.

Click Save. Your new workspace appears under Your Workspaces.

To test it, switch to another workspace and then switch back. Your panels and preferences should return to the saved arrangement.

How To Set A Default Workspace

Your default workspace is the setup the builder loads when you open a page. If you save a new workspace and want to use it most of the time, enable Set as Default while saving it.

You can also set an existing workspace as your default later. Open the Active Workspace menu, find the workspace you want, and mark it as the default using the star icon.

Once set, your default holds across sessions. Refresh the builder or come back later, and Divi opens into that workspace with your saved panels and preferences restored.

Your personal default applies to your user account. The Global workspace remains the shared baseline for users who have not chosen their own default.

How To Manage Your Workspaces

Everything you save lives in the workspace panel. Open it, and you can activate, update, duplicate, rename, reset, or delete workspaces from one place.

Here is what each action does:

• Duplicate: Creates a copy of a workspace. Use this when you want a new setup that starts from an existing one.
• Delete: Removes a workspace you no longer use.
• Rename: Changes the workspace name.
• Set as Default: Makes the workspace the one the builder opens automatically.
• Reset: Restores the workspace to its saved state and discards unsaved interface changes.
• Update: Saves the current builder arrangement into that workspace.

The two actions to watch closely are Update and Reset. Update writes your current builder setup into the active workspace. If you moved a panel, changed the mode, or adjusted visible icons and want to keep those changes, update the workspace. Reset does the opposite. It drops recent changes and brings the workspace back to its last saved version.

For example, say you move the Inspector panel to a new position and decide it works better there. Run Update, and that new position becomes part of the workspace. Switch away and come back later, and the Inspector returns to the updated position.

If you experiment with a setup and decide you do not like it, use Reset instead.

Switching Workspaces With The Command Center

The workspace panel is easy to use, but the Command Center is the faster option once you know the commands. Press Cmd+K on Mac or Ctrl+K on Windows to open the Command Center.

Divi 5 adds workspace commands so you can save, switch, update, and reset workspaces without digging through panels.

The main workspace commands are:

• Save as New Workspace: Captures the current builder setup and saves it as a new workspace.
• Switch Workspace: Lets you choose a saved workspace and switch to it quickly.
• Update Active Workspace: Saves the current builder setup into the active workspace.
• Reset Active Workspace: Restores the active workspace to its saved state.

If you just arranged the builder and want to keep that setup, open the Command Center, run Save as New Workspace, and name it. If you want to switch setups, open the Command Center, type the workspace name or use the switch command, and press enter. The builder rearranges itself around the selected workspace.

The upkeep commands are useful during real work. If you adjust your current setup and want to keep it, run Update Active Workspace. If you changed too much and want the saved version back, run Reset Active Workspace.

Once those commands become familiar, switching workspaces starts to feel like part of the build flow rather than a separate setup task.

Practical Workspace Setups To Try

Workspaces become more useful when they are tied to real tasks. Here are a few setups worth creating.

1. Default Build Workspace

Start with one solid default workspace. This should match how you usually build. If you spend most of your time moving through page structure, keep Layers and Inspector available. If you rely on the Command Center, keep the interface cleaner and let keyboard commands handle more of the work.

Nick’s walkthrough shows this idea well. His setup keeps useful navigation panels open, keeps the builder focused, and removes top-bar icons he does not need because he handles those actions through right-click menus and keyboard shortcuts.

Use this as your baseline. Once your default feels right, duplicate it and create more specific variations.

2. Content Editing Workspace

A content-editing workspace is built for writing and text edits. Use Light mode if it feels easier for reading. Hide Theme Builder layouts if headers and footers are distracting. Turn off placeholder content if you want new modules to stay empty until real copy is added.

Keep only the panels a writer or editor needs, and give most of the room back to the canvas.

This setup works well when you are polishing copy, replacing placeholder text, or reviewing a page with a client.

3. Responsive Review Workspace

A responsive-review workspace is built for checking structure and breakpoints. Set Builder Default View Mode to a responsive view if you often start reviews on tablet or phone. Or save the workspace while the builder is already sitting in the breakpoint you check most often.

You can also use Wireframe View when structure matters more than visual styling.

This saves time when you are moving through a site and checking whether sections, rows, and modules stack correctly.

4. Client Editing Workspace

A client editing workspace keeps the builder approachable. Reduce visible tools, hide panels the client does not need, and keep the canvas front and center. The goal is to make light edits feel less intimidating.

There is one important limit: a workspace changes how the builder looks, not what someone is allowed to do. If you need to control permissions, use Divi’s role-management tools alongside the workspace. The workspace shapes the view. Permissions set the boundaries.

5. Focus Workspace

A focus workspace is for long, uninterrupted building sessions. Start from the Minimalist premade workspace, switch to dark mode if you prefer a lower-glare canvas, and bring in only the one or two panels you need most.

This setup is useful when you already know what you are building and want fewer interface elements competing for attention.

Tips For Using Workspaces Well

Once you start saving workspaces, a few habits will keep your collection useful.

• Build one strong default first. Get your main setup right before creating several variations.
• Start from a premade workspace when useful. Power User and Minimalist are good foundations when you do not want to start from scratch.
• Name workspaces by task. Names like Content Editing, Responsive Review, and Focus Mode are easier to scan than vague labels.
• Design around your screen size. A setup that feels perfect on a large monitor may feel crowded on a laptop.
• Update before you refresh. If you changed a workspace and want to keep it, run Update Active Workspace before reloading the builder.
• Delete setups you no longer use. A short list of useful workspaces is better than a long list of almost-identical ones.
• Keep a shared reference for teams. Since each user can customize their own builder, a shared Global workspace can make documentation and screenshots easier to follow.

Workspaces should reduce friction. If your list becomes another thing to manage, simplify it.

Make The Divi 5 Builder Your Own

Workspaces turn the Divi 5 builder interface into something you can shape around your workflow. Instead of rebuilding your setup at the start of each session, you can save the way you like to work and return to it instantly. Create a default build workspace, add a few task-specific setups, and switch between them when the job changes.

The best place to start is a real project. Open a page you are already working on, arrange the panels the way you wish the builder always opened, set your preferences, and save it as your default workspace.

From there, the next workspace usually becomes obvious. Maybe you need a cleaner writing setup, a responsive review setup, or a focused layout setup for long sessions. Build only what you will use, keep the collection practical, and let the builder adapt to the way you work.

The post Everything You Need To Know About Workspaces In Divi 5 appeared first on Elegant Themes Blog.

In Divi 5, you can create many of these interactions with the same Aspect Ratio and Image Framing controls you already use to crop and position images. Add hover states and transitions, and those layout controls become motion tools.

In this post, we’ll build five hover effects in Divi 5, from a subtle image pan to a button morph and a team-card spotlight effect. Along the way, you’ll see how Aspect Ratio, Object Fit, Object Position, Filters, Transform, and Image Presets work together.

The Controls Behind These Effects

Before we build the effects, it helps to understand the three main controls doing the work.

1. Aspect Ratio

Aspect Ratio is found in Design > Sizing. It sets a proportional relationship between an element’s width and height. A 1:1 ratio creates a square. A 16:9 ratio creates a widescreen frame. A 4:5 ratio creates a taller portrait frame.

The important part is that the ratio stays proportional as the element scales. When the parent container gets wider or narrower, the element’s height adjusts to keep the same shape.

That makes Aspect Ratio useful for more than neat image crops. It can define the resting shape of an image, card, Group, or button, and that shape can also change on hover.

2. Image Framing

Once the frame is set, Image Framing controls how the image behaves inside it. Framing is found in the Image option group, either directly under Design > Framing for the Image module or under Design > Image > Framing when the image is a sub-element inside modules like Person or Blurb.

Object Fit controls how the image fills the frame. For most effects in this post, we’ll use Cover, which scales the image proportionally until it fills the frame and crops anything that does not fit. Object Position controls which part of the image stays visible inside that cropped frame.

Think of the frame as a window and the image as a poster behind it. Object Fit: Cover keeps the window full. Object Position decides which part of the poster you see through that window.

That is what makes hover movement possible. Change Object Position between the default and hover states, and the visible part of the image shifts.

3. Hover State And Transitions

Hover state lets you create a second version of a setting, the version visitors see when their cursor lands on the element.

Set one Object Position in the default state and another in the hover state, and Divi animates between them. The same idea applies to Aspect Ratio, Filters, Transform, and other design settings.

The speed and feel of that animation are controlled in Advanced > Transitions. Duration controls how long the transition takes. Timing Function controls how the motion accelerates and slows down.

A slow image drift can feel polished at 800ms. A button hover usually needs to feel faster, closer to 300ms. With those pieces in place, we can start building.

Five Hover Effects To Build In Divi 5

The effects below move from simple to more layered. Start with the first one if you want to understand the basics, or jump to the effect that fits your current layout.

1. The Focal Glide

The Focal Glide is the simplest effect in the post. On hover, the image pans across its frame and reveals detail that was just out of view.

Start with an Image module and choose a landscape photo with visual interest on both sides. A cityscape, workspace, interior, product scene, or wide travel photo works well.

Go to Design > Sizing and set Aspect Ratio to 16:9. This creates a wide frame. Then go to Design > Framing and set Object Fit to Cover. The image now fills the frame without stretching.

Still in the Framing group, set Object Position to:

• X: 0%
• Y: 50%

This pins the visible crop toward the left side of the image.

Switch to the Hover state and change the X value to 80%. Leave the Y value at 50%. That one change creates the motion. On hover, the image view moves from left to right inside the same frame.

Switch back to the default state, go to Advanced > Transitions, and set:

• Duration: 800ms
• Timing Function: Ease-In-Out

This effect works best when it feels like a slow reveal, so avoid making the transition too quick. Here is the finished effect.

To make the pan more subtle, bring the X values closer together. To make it more dramatic, move them further apart. If the effect barely shows, choose a wider image or a photo with more contrast between the left and right sides.

2. The Subject Reveal

The Subject Reveal changes two things on hover: the frame shape and the image position. At rest, the card shows a wide strip of the photo. On hover, the frame becomes taller and the image shifts toward the subject.

Choose a photo with a clear subject and enough surrounding space to crop from. Product shots, interior details, lifestyle images, and styled scenes all work well.

In the default state, open the Image module and go to Design > Sizing. Set Aspect Ratio to 4:2.2. This creates a wide frame that hides part of the subject below the visible area. Then go to Design > Framing and set:

• Object Fit: Cover
• Object Position X: 50%
• Object Position Y: 0%

Now switch to the Hover state. Change Aspect Ratio to 4:3. Then update Object Position to:

• Object Position X: 50%
• Object Position Y: 85%

The frame grows taller while the visible part of the image moves down toward the subject.

Go to Advanced > Transitions and set:

• Duration: 800ms
• Timing Function: Ease-Out

Ease-Out works well here because the card responds quickly and then slows into place. Here is the result on the front end.

Because the frame grows taller on hover, it can push nearby content downward. Give the surrounding layout enough room, or use this effect in a section where the expanding card has space to breathe. This works especially well for product pages, portfolio cards, and feature grids where the photos have a similar composition.

3. The Button Morph

The first two effects moved an image inside a frame. This one changes the frame itself. Aspect Ratio can also shape a Button module. By giving the button a fixed height and then changing its ratio on hover, the button stretches sideways while keeping the same height.

Add a Button module and open Design > Sizing. Set:

• Height: 50px
• Aspect Ratio: 3:1

With a 50px height and a 3:1 ratio, the button becomes 150px wide. Switch to the Hover state and change Aspect Ratio to 5:1. At the same height, the button stretches to 250px wide.

Then go to Advanced > Transitions and set:

• Duration: 300ms
• Timing Function: Ease-In-Out

Buttons need to feel immediate, so keep this transition faster than the image effects.

The button grows from its alignment point, so centering the module usually looks the most controlled. Since the button genuinely changes size on hover, leave enough clearance around it.

For a variation, create a circle-to-pill morph. Set the resting ratio to 1:1, use a fully rounded border radius, and keep the resting label short or icon-only. On hover, change the ratio to 3:1 so the circle opens into a pill.

4. The Contained Zoom

The Contained Zoom is a classic image hover effect. The image scales up, but the frame stays the same size.

In Divi 5, the Group module makes this possible without custom CSS. The Group defines the frame and clips the overflow. The Image module inside it scales on hover. Start with a Group module. Go to Design > Sizing and set Aspect Ratio to 4:3.

Go to Advanced > Visibility and set both overflow options to Hidden:

• Horizontal Overflow: Hidden
• Vertical Overflow: Hidden

Now add an Image module inside the Group and set its width to 100%.

Set Object Fit to Cover and remove any extra margin or padding on the Group and Image module. The image should sit flush inside the Group frame.

The motion comes from Transform, not Object Position. Open the Image module, switch to the Hover state, and go to Design > Transform. Set Scale to 110%.

On hover, the Image module grows. The Group module clips anything that extends past the frame. Set the Image module transition to:

• Duration: 800ms
• Timing Function: Ease-In-Out

Preview the effect on the front end. If the image escapes the frame on hover, check the overflow setting. Overflow Hidden belongs on the Group module, not only on the Image module inside it.

You can use the same container idea for other hover interactions too. Add a caption inside the Group and move it upward on hover. Combine the zoom with a small rotation. Or pair the scale with a dark overlay. The Group keeps the motion contained.

5. The Spotlight Pan

The Spotlight Pan combines three changes at once:

• The image pans toward the subject.
• Saturation increases from grayscale to full color.
• Brightness lifts slightly.

At rest, the portrait feels quieter and slightly off-center. On hover, the subject comes into focus visually and compositionally. We’ll build this on the Person module. Choose portraits where the subject sits a little off-center and has some environment around them. The effect needs room to pan toward the person.

Open the Person module and go to Design > Sizing. Set Aspect Ratio to 4:5. This creates a portrait frame that works well for team grids.

Then go to Design > Image > Framing. Set:

• Object Fit: Cover
• Object Position X: 73%
• Object Position Y: 50%

This frames the image slightly away from the subject in the default state.

In the same Image option group, open Filters. Set:

• Saturation: 0%
• Brightness: 90%

Now switch to the Hover state. Update the values to:

• Object Position X: 70%
• Object Position Y: 50%
• Saturation: 100%
• Brightness: 100%

The image pans slightly, color returns, and the portrait brightens at the same time.

Go to Advanced > Transitions and set:

• Duration: 600ms
• Timing Function: Ease-In-Out

One transition controls the pan, saturation, and brightness changes, so the effect feels unified.

Here is the full effect on a team grid.

If the subject sits on the opposite side of the image, reverse the X values so the pan moves toward the person instead of away from them. When your team photos are composed consistently, the same settings can work across the whole grid.

Save Your Hover Effects As Image Presets

The Spotlight Pan uses several settings across default and hover states. Rebuilding that effect on every Person module would be slow. Because the effect lives inside the Image option group, you can save it as an Image Option Group Preset and apply it to other modules that use the same Image option group.

With your finished Person module open, go to Design > Image. Click the preset chip at the top of the option group, save a new preset, and give it a descriptive name, such as Spotlight Pan.

Open another Person module, go to the same Image option group, and select the saved preset. The image styling, framing, filters, and hover-state values carry over.

The one thing to watch is direction. A preset can save the pan values, but different photos may place the subject on different sides of the frame.

If a portrait pans away from the person, open that module’s Framing settings and swap the X values for that image. The preset can still handle the rest of the effect, while that one local adjustment keeps the crop correct.

Want the pan slower, the grayscale softer, or the frame a little taller? Update the preset, and every module using it updates with the same change. That is the larger Divi 5 workflow: turn a design decision into a reusable preset, apply it across the site, and manage the shared style from one place.

Create Unique Image Effects in Divi 5 Today!

Aspect Ratio and Image Framing are usually thought of as cropping tools. But when you combine them with hover states, transitions, filters, transforms, and presets, they become a flexible way to create interactive visual effects. You can pan across an image, reveal a subject, morph a button, zoom inside a fixed frame, or bring a portrait into focus without writing custom CSS.

Start with one effect, save the settings that repeat, and refine the values for each image when needed. The same tools that keep your images proportional and well-framed can also make your Divi 5 layouts feel more responsive and polished.

The post 5 Hover Effects You Can Create With Aspect Ratio And Framing In Divi 5 appeared first on Elegant Themes Blog.

Though I’ve never built a custom theme with PHP, I have extensively used a variety of theme builders across dozens of client projects. The state of theme builders today is impressive, as I can now do with visual builders in a drag-and-drop canvas what only developers could do a decade ago.

Every builder here taps into the same WordPress template system developers use, just without the code. Some are standalone themes, others are packaged as plugins. The best ones integrate deeply with custom fields and custom post types, which is where theme building gets powerful.

Here’s what I’ve found works best after testing the major options.

Best WordPress Theme Builders

1. Divi 5

Divi 5 is a standalone theme with a fully integrated theme builder, meaning you install one product and get everything: page building, theme building, and global design controls, all without needing a plugin or add-on. If you want a single ecosystem that handles both individual page design and sitewide template control, Divi eliminates the plugin-plus-theme juggling act that other solutions force you into.

Divi’s Template Assignment and Conditions

Divi’s theme builder uses a template system in which each template can include a header, footer, and body area. Conditions are assigned at the template level, so you define which pages, posts, categories, tags, authors, or custom post types a template applies to. You can stack multiple conditions on a single template or create separate templates for granular deployment.

The interface shows all your templates in one view, making it easy to see what’s assigned and where.

Divi’s Visual Builder Quality

Divi 5’s visual builder is a significant departure from earlier versions. The visual editor is fast, with next to no lag when adding modules or adjusting settings. You’re designing directly on the page with live content, not in a sidebar panel that updates a preview.

Responsive controls let you adjust layouts per breakpoint, and the styling options (typography, spacing, borders, backgrounds, filters) are comprehensive without feeling buried. It also has ultra-fast layout options for flex and grid displays.

If you’ve used Divi’s page builder, the theme builder works identically, so there’s no separate interface to learn.

Divi’s Dynamic Data Integration

Dynamic content in Divi works through dynamic field toggles on most module settings. You can pull post titles, featured images, excerpts, author info, dates, custom fields, and taxonomy terms into any text or image field. ACF, Pods, and Toolset fields are supported natively. For WooCommerce, Divi includes dedicated product modules that pull price, add-to-cart buttons, product galleries, and related products dynamically. You’re not limited to predefined layouts. You can place WooCommerce data anywhere in your template design.

Divi’s Custom Query Loops

The Blog module and post-related modules let you filter by post type, category, tag, author, and date range. You can set custom post counts, offsets, and sort orders. For more advanced queries, you can use Divi’s built-in Loop Builder. It gives plenty of options for setting up post/product/CPT loops as needed.

Who Divi Is Best For

Agencies and freelancers who build multiple client sites will get the most value from Divi. The lifetime license with unlimited site usage means your per-project cost approaches zero over time. Business owners who want to manage their own site updates will appreciate that the visual builder works the same way for both pages and templates, so there’s only one interface to learn.

Divi’s Pricing

Divi costs $89 per year or $249 for lifetime access, both with unlimited site usage. That lifetime option is where Divi stands apart from nearly every competitor. Elementor’s comparable unlimited plan runs $399 per year with no lifetime option. Bricks offers a lifetime license at the much higher cost of $599. For anyone building more than a couple of sites, the math favors Divi quickly.

 Get Divi 5

2. Elementor

Elementor is a page builder plugin that requires a separate theme to function, which adds a layer of setup compared to all-in-one solutions. Most users pair it with the Hello theme (Elementor’s minimal theme) or a third-party theme designed for Elementor compatibility (such as Astra Pro). The theme builder is included only with Elementor Pro, so you’ll need the paid version to access template creation.

Elementor’s Template Assignment and Conditions

Elementor’s display conditions are set per template and offer solid granularity. You can target all posts, specific post types, specific categories, individual posts, author archives, search results, 404 pages, and WooCommerce templates. Conditions can be combined with AND/OR logic and include/exclude rules.

The condition interface is straightforward, though managing conditions across many templates can get cluttered since there’s no unified view of all assignments. You have to check each template individually.

Elementor’s Visual Builder Quality

Elementor’s builder is panel-based: you select an element, and settings appear in a left sidebar while the canvas updates in real time. The widget library is extensive, styling controls are deep, and responsive editing is well-implemented. The builder can feel heavy on complex pages, and some users notice slowdown when templates have many widgets.

Its main weakness is its global typography and colors, which I think are behind the times. Its v4 update will dramatically change this, but it comes at a steep learning curve.

Elementor’s Dynamic Data Integration

Dynamic tags in Elementor enable you to insert post data, site information, author data, ACF fields, and WooCommerce product data into most widget settings. The implementation is mature, supporting before/after text and fallback values. WooCommerce support is strong, with dedicated product widgets and template types for shop, single product, cart, checkout, and account pages.

Many Custom Post Type and Custom Field plugins work with Elementor, making it easy to use your preferred tools.

Elementor’s Custom Query Loops

Elementor Pro’s Loop Builder lets you create custom query loops with filtering by post type, taxonomy, date, author, and custom fields. You design a loop item as a template (separate from your page). Then you add it to your page and set up the query to populate the loop. This means extra page loads and working in the template library, as well as the page where the loop goes. Pagination, load more, and infinite scroll are also available.

Who Elementor Is Best For

Designers who want maximum third-party integration options will find Elementor’s ecosystem unmatched. However, a few quality tools go a long way further than haplessly installing add-ons. Also worth considering is that Elementor v4 is on the horizon, meaning significant changes are underway. This could involve needing to relearn its visual builder when the update lands.

Elementor’s Pricing

Elementor Pro starts at $59 per year for one site (Essential plan), but that tier lacks the full theme builder and WooCommerce features. The Advanced plan, at $99 per year for three sites, includes the complete theme builder (which we are focusing on in this article). For agencies, the Expert plan costs $199 per year for 25 sites, and the Agency plan costs $399 per year for up to 1,000 sites. All plans are annual with no lifetime option.

Get Elementor

3. SeedProd

SeedProd started as a landing page and “coming soon” plugin, but has since expanded into a full theme builder. It’s a plugin that requires a theme, though SeedProd can effectively replace your theme’s templates.

SeedProd positions itself as beginner-friendly, with a lighter interface than Elementor or Divi. However, Theme Building is only available with the Pro version. It is also packed with cross-promotional upsells for their other products, such as WPForms, OptinMonster, and more.

SeedProd’s Template Assignment and Conditions

SeedProd’s theme builder includes templates for headers, footers, single posts, single pages, archives, search, 404, and WooCommerce pages. It’s styled like the WordPress post view, which is not intuitive. Condition assignment lets you choose a template type and applies globally to that type (with more granular controls available). All in all, it works, but if you have to pay for SeedProd’s theme builder, you may want to consider other options.

SeedProd’s Visual Builder Quality

SeedProd’s builder is lightweight and fast. This can be attributed to having stripped-down styling options. The drag-and-drop canvas is responsive, and the block library covers the essentials without overwhelming new users. If you need pixel-perfect control over every spacing value and box shadow, you may find SeedProd limiting.

SeedProd’s Dynamic Data Integration

SeedProd supports dynamic content through template tags that pull post titles, content, featured images, author info, and dates. Custom field support is available but less developed than in other theme builders. WooCommerce integration is available, but again, only with the Pro versions. The dynamic data system is functional but not as flexible for advanced use cases involving ACF repeaters or complex field relationships.

Only Available in Pro

SeedProd’s Custom Query Loops

SeedProd’s post grid blocks let you display by post type, category, and tag, but only for template pages. Advanced query options (meta queries, complex taxonomy filtering, and date ranges) are nonexistent. Again, this is more of a compromise choice for reduced complexity.

Who SeedProd Is Best For

SeedProd is for beginners who want a straightforward path to a custom theme without the complexity of full-featured builders. It also places a heavy emphasis on sales-oriented landing pages, making it best suited for marketers who primarily need to capture leads. However, in my testing, it takes all of 1 minute in SeedProd to see that nearly every advanced feature they have is in their Pro versions.

SeedProd’s Pricing

SeedProd’s Basic plan starts at $79 per year for one site, but theme builder functionality requires the Plus plan at $199 per year (3 sites). All plans are annual. They may offer a discount in the first year, but full price in subsequent renewals. For theme building specifically, you’re looking at a minimum of $199/year, which is higher than Divi’s $89 annual plan and nearly the same price as Divi’s lifetime (unlimited sites) plan.

Get SeedProd

4. Full Site Editor

The Full Site Editor (FSE) is WordPress’s native block-based theme builder, available with any block theme. Although it is built in, you will need to use it with a theme like Twenty Twenty-Five or a premium theme. Ollie is a well-designed starter block theme that makes FSE approachable, with pre-built patterns and a nice design system. FSE is still maturing, and the editing experience has a higher learning curve than traditional page builders.

FSE’s Template Assignment and Conditions

FSE uses the WordPress template hierarchy natively. You create templates for single posts, pages, archives, categories, authors, 404, search, and more. Custom templates can be assigned to individual posts or pages through the post editor. The system is logical if you understand WordPress template hierarchy.

FSE’s Visual Builder Quality

FSE utilizes the block editor, so if you’ve created posts in WordPress, the interface will be familiar. Templates are built with blocks: header, navigation, query loop, post content, and footer. The experience is improving with each WordPress release, but it still lacks the polish of mature third-party builders.

Global styles let you set sitewide typography and colors that cascade to individual blocks. Some users find FSE intuitive (mostly WP purists and developers), while others find it disjointed compared to purpose-built theme builders.

Interestingly, there are no native responsive options

FSE’s Dynamic Data Integration

Dynamic content in FSE works through core blocks like Post Title, Post Content, Post Featured Image, Post Excerpt, Post Author, and Post Date. For custom fields, you’ll need plugins like ACF that add their own blocks for field display. This means that if you have dynamic data, there must be a block for you to insert it, unlike more mature theme and page builders that allow you to insert dynamic data in nearly any text, link, or image input area.

FSE’s Custom Query Loops

The Query Loop block is FSE’s answer to custom post displays. You can filter by the current template, post type, category, tag, author, and keyword. However, there are specific blocks that can be used within a Query Loop block. This is different compared to Divi or Bricks, where any element can be turned into and used as a Loop.

For advanced queries, you’re limited without custom code or plugins that extend Query Loop functionality (many people use the Advanced Query Loop plugin).

Who the Full Site Editor Is Best For

Developers and technically comfortable users who want to stay within core WordPress without third-party dependencies. Sites that prioritize long-term maintainability and minimal plugin counts will benefit from FSE’s native approach. However, for the average user, you will likely end up wanting a premium Block Theme, which kind of puts you in a position to consider a non-Block theme like Divi.

FSE’s Pricing

The Blocked Editor and Full Site Editing are free if using a free block theme. However, you may end up spending on plugins to fill functionality gaps (such as custom fields display, advanced queries, and WooCommerce templates), which can erode the cost advantage. The FSE also requires a compatible Block Theme, with numerous premium options that improve upon it (like Ollie Pro). For simple sites, FSE is genuinely free. For complex builds, factor in the add-ons you’ll need.

Learn About Full Site Editing

5. Bricks

Bricks is a visual site builder that functions as a theme, similar to Divi. You install Bricks, and it becomes your theme, with full theme-building capabilities. Bricks has gained traction among developers and advanced users for its clean code output, performance focus, and deep customization options.

It has a smaller user base than many other theme builders, but it is worth consideration. If you’re comfortable with a steeper learning curve and want more control over markup and queries, Bricks is worth evaluating.

Bricks’ Template Assignment and Conditions

Bricks uses a template system with conditions that rival Divi’s flexibility. You can target post types, taxonomies, specific posts, archives, author pages, search results, error pages, and WooCommerce templates. Conditions support AND/OR logic, includes, and excludes.

Bricks’ Visual Builder Quality

Bricks’ is fast, even on complex pages. The styling controls are extensive, including custom CSS at the element level, state styling (hover, focus), and detailed responsive breakpoint control. The interface assumes some familiarity with web development concepts, so it offers less hand-holding than SeedProd but more control than most others.

Output markup is much cleaner than Elementor, which matters for performance and custom styling. It also relies on an integrated variable system.

Bricks’ Dynamic Data Integration

Bricks treats dynamic data as a core feature. Dynamic tags are available in most settings and pull post data, custom fields (ACF, Meta Box, Pods, Toolset, JetEngine), WooCommerce data, and user data. The implementation is flexible, with options for before/after text, fallbacks, and formatting. WooCommerce templates are fully supported with dedicated elements. If you’re building data-driven sites with CPTs and custom fields, Bricks handles it as well as any on this list.

Bricks’ Custom Query Loops

Bricks’ query builder is powerful. You can filter by post type, taxonomy, meta fields (including comparison operators), date, author, and relationship fields from ACF and JetEngine. The query loop element lets you design the item template inline. Pagination, infinite scroll, and AJAX filtering are available. For complex CPT archives or filtered directories, Bricks’ query capabilities are near the top of the market.

Who Bricks Is Best For

Developers and performance-focused agencies who care about code output quality. Bricks generates cleaner markup than most visual builders, which translates to faster page loads and easier custom CSS. Users coming from Oxygen Builder will find Bricks familiar. However, Bricks is the most complicated of the theme builders on this list, and if you value access to a site’s codebase, there are better-suited solutions such as Etch and Builderius.

Bricks’ Pricing

Bricks offers annual plans starting at $79 per year for one site, $149 per year for three sites, and $249 per year for unlimited sites. The lifetime option costs $599 for unlimited sites. Compared to Divi’s $249 lifetime for unlimited sites, Bricks’ lifetime is more than double the cost. However, Bricks’ annual unlimited plan ($249) matches Divi’s lifetime price, so the value comparison depends on how long you plan to use the builder.

Get Bricks

Quick Pricing Comparison

Pricing structures vary widely across theme builders, especially when comparing annual subscriptions to lifetime options. Here’s how each builder stacks up for different use cases.

Making The Right Choice Of Theme Builder

Every theme builder on this list can produce a functional, custom WordPress site, from header to footer. The differences come down to how you prefer to work, what you’re willing to spend, and how much control you need.

Divi remains my go-to recommendation for most users. The lifetime license eliminates recurring costs, the visual builder is genuinely enjoyable to use, and the learning curve is manageable for non-developers. It is also the best option for designers or those working with professional designers. If you’re building client sites or managing multiple projects, the unlimited usage makes it the most cost-effective option over time.

Elementor makes sense if you’re already invested in its ecosystem or need specific third-party integrations that only work with Elementor. The annual costs add up, but the plugin library is unmatched. Its loop builder is awkward, and its templating is a little bit harder to grasp than Divi’s, but it is a popular choice nonetheless.

SeedProd fits a narrower use case: simple sites where the builder’s limitations won’t matter. If you’re building landing pages and basic business sites without complex dynamic content needs, it gets the job done without overwhelming you. In my experience, it is great at first, but website envy will lead you to wanting more over time.

The Full Site Editor is ideal for staying within core WordPress and avoiding plugin dependencies. It’s free, evolving, and future-focused, but requires more learning. Bricks targets developers and agencies valuing clean code and performance, where higher costs may be justified.

For everyone else, start with Divi. The lifetime license means you can learn it once, use it everywhere, and never worry about renewal fees eating into your project budgets.

Theme Builder FAQs

The post 5 Best WordPress Theme Builders in 2026 (Compared) appeared first on Elegant Themes Blog.

Each design uses layered text, overlapping image placement, strong contrast, typography, spacing, and structured visual hierarchy to create polished sections with a dynamic editorial feel. Import a section, replace the content, update the images, and you’re ready to go.

Preview

Here’s a quick look at the 7 Text Overlapping Image Designs included in the pack. The download is further down the post.

Download 7 Text Overlapping Image Designs For Divi 5

Get all 7 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 (8 Exports)

After you download and unzip the file, you’ll find 7 styled Text Overlapping Image Section exports, plus 1 file containing all layouts.

Styled – Text Overlapping Image Section 1 to 7 (7) → Seven fully styled text and image section layouts with layered typography, overlapping image areas, strong visual contrast, refined spacing, buttons, supporting content blocks, and clean responsive structure that you can use as-is or customize.

Styled – Text Overlapping Image Sections (All) → Imports all 7 designs into your Divi Library at once.

How To Use The Text Overlapping Image 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 Text Overlapping Image Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Text Overlapping Image 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 Text Overlapping Image 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, oversized text, body copy, buttons, labels, links, service names, captions, calls to action, and supporting details so the section matches your brand and message. Then swap in your own images, portraits, product photos, background visuals, icons, or supporting media as needed.

Because these designs rely on the relationship between text and image placement, it’s best to replace content one area at a time. This helps preserve the balance between typography, overlapping visuals, negative space, contrast, and supporting content as you customize the design.

If your new headline is longer or shorter than the original, review the layout immediately after editing. Large text can overlap images differently, wrap onto new lines, or shift the visual balance of the section. Adjust text size, line height, spacing, module width, or image position as needed.

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

4. Adjust Styles (Optional)

These Text Overlapping Image Designs are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, images, overlays, borders, shadows, spacing, backgrounds, buttons, 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 overlapping effect, open the section, row, column, group, image module, or text module you want to adjust and use the Design tab to tweak Sizing, Spacing, Transform, Position, Background, Border, and Box Shadow settings.

If your section uses large stacked text, image overlays, portrait cutouts, background photos, split layouts, dark panels, or layered content blocks, keep those relationships in mind as you edit so the composition remains intentional, readable, and balanced.

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

Tips For Effective Text Overlapping Image Designs

Text overlapping image sections work best when the typography and visuals support each other. Use these quick tips to keep your sections bold, readable, and easy to customize.

Keep The Main Message Clear

Overlapping text can create a strong visual moment, but the message should still be easy to understand. Use concise headings and make sure the most important words remain readable at a glance.

Use Images With Strong Composition

The image needs to support the text instead of competing with it. Choose visuals with clear focal points, enough open space, and contrast that works well with the typography placed over or around it.

Balance Overlap With Readability

The overlap should feel intentional, not accidental. Make sure text remains readable by adjusting color, opacity, spacing, image brightness, overlay strength, and placement as needed.

Create Depth With Layers

Layered text and imagery can make a section feel more dynamic. Use scale, contrast, spacing, and image placement to create depth while keeping the layout organized and easy to scan.

Check The Layout On Mobile

Text overlapping image designs can change noticeably on tablet and phone screens as text wraps and images crop differently. Review your layout on smaller devices to ensure the overlap still works, the text remains readable, and calls to action stay easy to tap.

Start Building In Divi 5 Today!

These 7 Text Overlapping Image Designs for Divi 5 give you a fast way to build bold, layered sections for hero areas, portfolio intros, photography websites, landing pages, service pages, creative agencies, product showcases, event pages, and more. Swap in your content, customize the styling if needed, and you’ll have a polished visual section ready in minutes with Divi 5’s Visual Builder.

The post 7 Text Overlapping Image Designs For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

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.