With new form field options, dedicated Input, Checkbox, and Radio option groups, focus and checked states, Design Variables, and the Preset Manager, you can style form fields once and reuse those decisions across your site.

In this tutorial, we’ll build a reusable form styling system in Divi 5. You’ll style inputs, checkboxes, radio buttons, focus states, checked states, and form buttons, then save everything as presets you can manage from one place.

Build A Reusable Form Styling System In Divi 5

Divi 5 changes how form styling is structured.

Previously, Divi form modules used a single Field option group, and the available controls could vary depending on the module or field type. Divi 5 replaces that older structure with dedicated Input, Checkbox, and Radio option groups.

That gives each field type its own styling controls. Inputs can have their own background, border, spacing, typography, label text, and placeholder text controls where those elements apply.

Checkboxes and radio buttons can also be styled as their own field types. As a result, they can match the rest of your form design without relying on custom CSS for common styling decisions.

Divi 5 also adds focus and checked editing states for form fields. Focus controls how a field looks when someone clicks into it. Checked controls how checkboxes and radio buttons look when selected.

In addition, the Contact Form 7 module brings the same general styling workflow to CF7 forms. Existing Contact Form 7 forms can be rendered and styled inside Divi instead of being handled separately with custom CSS.

How The System Works

Form styling becomes much more powerful when it connects to Divi 5’s preset system.

Element Presets handle the full module. Once you style a Contact Form module, you can save the complete module design as an Element Preset.

That preset can include spacing, typography, button styling, field styling, and other module-level settings. Then, when you add another Contact Form later, you can apply the preset and start from the same design foundation.

Option Group Presets handle reusable style groups. Input, Checkbox, and Radio option groups support presets, so you can save field styles once and apply them across compatible form-based modules.

This is the layer that keeps your actual field design consistent across different form types.

Design Variables make the system easier to maintain. For example, use a color variable for your input border, a number variable for spacing, and a font variable for labels.

When the variable changes, every preset that uses it follows.

The scalable workflow looks like this:

• Design Variables store reusable values like colors, spacing, fonts, links, and images.
• Option Group Presets apply those values to reusable style groups like inputs, borders, buttons, and spacing.
• Element Presets save complete module designs that can include those option group presets.
• The Preset Manager lets you find, edit, reorder, import, and export those presets from one place.

Building And Styling Forms In Divi 5

The best way to understand the workflow is to build it once.

Start with a Contact Form module. Then, style the field groups, save those styles as presets, and reuse them across other forms.

By the end, you will have a form system instead of a one-off form design.

Add A Contact Form Module In Divi 5

Open a page in the Visual Builder, add a row, and click the plus icon to open the module picker. Search for “Contact Form” and insert the module.

Divi adds a starting form to the page. From there, open the module settings and go to the Content tab. Next, click Add New Field.

Choose the field option.

Each field needs a Field ID and a Title. The Field ID is the backend reference, so keep it simple and consistent.

Use lowercase characters and underscores instead of spaces, such as “phone_number” or “project_budget.” The Title is the visible label, so write it for humans.

After naming the field, use the Field Type dropdown under Field Options to choose what the field collects.

Common field types include Input for short text, Email for email addresses, Textarea for longer messages, Checkboxes when multiple selections are allowed, Radio Buttons when one answer should be selected, and Select Dropdown when a list would take up too much vertical space.

For this example, build a simple contact form with name, email, message, query type, and priority fields.

Set Up Your Input Field Styles

The Input option group in the Design tab is the starting point for standard text fields. Start with the field container. Background, border, and border radius define the base shape of the input.

A clear background gives the field structure. Meanwhile, a border defines its edge, and a consistent radius helps it match the rest of your design system.

This is a good place to use Design Variables. Use one color variable for the field background and another for the default border.

If your brand colors change later, update the variables instead of editing each form manually.

Next, style the text layers. Input Text controls what visitors type. Label Text controls the visible field titles. Placeholder Text controls hint text inside the field where placeholders are used.

Keep labels clear and readable. Also, do not rely on placeholder text alone to explain what a field is for because placeholder text disappears once someone starts typing.

Use placeholder text as a helper, not as the only label.

Finally, set spacing. Input padding determines whether the form feels open and comfortable or tight and cramped.

If your site uses number variables for spacing, use the same spacing scale for form fields. As a result, they will feel connected to your buttons, cards, sections, and other interface elements.

Style Your Checkboxes And Radio Buttons

Checkboxes and radio buttons behave differently from text inputs. They are smaller, state-based controls, so the design needs to make selection obvious.

Open the Checkbox and Radio option groups in the Design tab. Their structure follows the same design-system logic as Input, but the most important decisions are size, shape, border, selected color, and label readability.

Use the background and indicator controls to define the selected state clearly. A selected checkbox or radio button should be easy to identify at a glance.

Next, use border radius to match the visual language of your site. Checkboxes can stay squared, become softly rounded, or take on a more pill-like shape.

Radio buttons should remain visually distinct from checkboxes. That way, visitors can quickly understand the difference between multiple-choice and single-choice inputs.

Because these controls are small, border width has a bigger visual impact than it does on a full text input. Test it carefully. A border that feels subtle on an input can feel heavy on a checkbox.

Configure Focus And Checked States

A form is not finished when it looks good at rest. It also needs to look good when someone interacts with it.

Focus and checked states are where that happens.

Use the state switcher in the settings panel to move from the default state into Focus or Checked. Focus styles apply when a visitor activates a field. Checked styles apply when a checkbox or radio button is selected.

For Focus, start with the input border. A focused border in your primary brand color is one of the clearest ways to show where the visitor is in the form.

A subtle background change can also help. However, keep it restrained. The goal is to guide the visitor, not distract them.

For Checked, style the selected checkbox or radio button so the state is unmistakable. A brand-colored fill paired with a contrasting indicator usually works well.

However, avoid relying on color alone if the difference between selected and unselected is too subtle.

Focus and checked styles build on top of your default field styles. Therefore, you only need to define what changes in that interaction state.

Save Field Styles As Option Group Presets

At this point, the form looks consistent, but the styles still live on one module. Option Group Presets turn those styles into reusable field presets.

To create one, hover over the Input, Checkbox, or Radio option group header in the Design tab. Then, click the preset icon, choose “New Preset From Current Styles,” and name the preset clearly.

Good preset names are descriptive:

• Form Input Default
• Form Input Focus
• Site Checkbox Default
• Site Radio Default
• Compact Form Input
• Dark Form Input

If a preset should be the starting style for future modules, set it as the default preset for that option group. New compatible form fields can then start from that base style automatically.

Option Group Presets are reusable across compatible option groups. That distinction matters.

For example, a border preset can be reused anywhere the same border option group exists. A spacing preset can be reused anywhere the same spacing group exists.

In other words, the preset follows the option group, not the original module.

Save The Complete Module As An Element Preset

Option Group Presets handle reusable parts. Element Presets handle the complete module.

After styling the Contact Form module, open the module preset dropdown at the top of the settings panel. Choose “New Preset From Current Styles” and name it something like “Primary Contact Form.”

Use Element Presets for the full form design. That includes field presets, button styling, spacing, typography, layout choices, and any other module-level decisions.

Use Option Group Presets for reusable pieces. These can include input styles, checkbox styles, radio styles, borders, spacing, buttons, and other groups you want to share across modules.

Together, they give you a layered system. Design Variables define the values. Option Group Presets reuse the style groups. Element Presets package complete form modules.

Apply Your Saved Presets To The Email Optin Module

Now add an Email Optin module to the page. If your Input preset is set as the default for that option group, the module can already inherit the same field styling.

If you did not set the preset as default, apply it manually.

Open the Email Optin module settings, go to the Design tab, find the field option group, open the preset menu, and choose your saved input preset.

The Email Optin module now shares the same input background, border, border radius, typography, spacing, and focus state as the Contact Form.

When you update the preset later, both modules follow.

Use the same workflow for other compatible form-based modules. The goal is not to restyle every form by hand. Instead, the goal is to connect them to the same reusable field system.

Use One-Off Overrides Carefully

Presets do not lock you in. If one form needs a unique border color, extra spacing, or a different background, you can override that value directly on the module.

However, use overrides for true exceptions, not routine variations.

If you repeat the same override more than once, turn it into a new preset. That keeps your system clean and prevents hidden one-off styles from spreading across the site.

Migrate Existing Forms With The Inspector

If your site already has forms with static values, use the Inspector to bring them into your new design system.

Right-click a section, row, or module in the Visual Builder and choose Inspect. The Inspector shows modified values such as colors, spacing, fonts, media, and presets, so you can identify what has been customized.

From there, replace static values with Design Variables or apply presets where appropriate. For example, if several forms use the same hardcoded border color, replace that color with your field border variable.

If a form has custom input spacing, replace it with your input spacing preset. This is especially useful when updating older layouts or imported layouts that were not built from your current design system.

Make Changes In The Preset Manager

Saving presets inside a module is fast. However, the Preset Manager is better once the system grows.

Open the Visual Builder and click the Preset Manager icon in the left sidebar.

The Preset Manager lists your presets in one place. Use the Element tab for full module presets and the Group tab for Option Group Presets.

Search for terms like “Form Input,” “Contact Form,” or “Checkbox” to find your form presets quickly. You can also filter by module type.

Click the Edit Preset icon to open the preset preview. Make your changes, save the preset, and every element or option group using that preset updates.

You can also reorder presets inside the Preset Manager. Put the presets you use most often near the top, and they will be easier to find inside module preset dropdowns.

A Practical Preset Structure For Site-Wide Forms

For a real website, keep the preset system simple enough that other people can understand it.

A good starting structure looks like this:

• Color Variables: Primary, Accent, Field Background, Field Border, Field Border Focus, Text, Muted Text, Error
• Number Variables: Field Padding, Field Radius, Field Gap, Button Radius
• Input Presets: Form Input Default, Form Input Compact, Form Input Dark
• Checkbox Presets: Site Checkbox Default, Site Checkbox Dark
• Radio Presets: Site Radio Default, Site Radio Dark
• Button Presets: Form Button Primary, Form Button Secondary
• Element Presets: Primary Contact Form, Compact Contact Form, Newsletter Optin, Login Form

This gives you room for variation without turning every form into a separate custom design.

Go Deeper With Composable Settings And Nested Presets

The Input, Checkbox, and Radio groups cover the fields. However, the submit button is another important part of the form.

Some sub-elements do not expose every design option by default. Composable Settings let you enable additional option groups for module sub-elements when you need more control.

Hover over the Button group header in the Design tab. Then, click the Toggle Options icon.

Enable the option groups you need, such as Sizing, Border, Transform, Box Shadow, or Animation. Those groups appear as nested options inside the Button group.

Style those nested groups the same way you would style any other option group. For example, a button border can use your brand border variable, your button radius variable, and a reusable border preset.

Once styled, nested option groups can support their own presets. Save a button border preset, nest it inside your button preset, and nest that button preset inside your Contact Form Element Preset.

That creates a deeper chain of control. Update the border preset, and every form button that uses it can follow without opening each form module.

Bonus: Style Your Contact Form 7 Module

Not every site uses Divi’s native Contact Form module. Many sites already rely on Contact Form 7, and rebuilding those forms only to match a new design system is not always practical.

Divi 5’s Contact Form 7 module helps bridge that gap.

Add the Contact Form 7 module from the module picker, choose the CF7 form you want to display, and style it from Divi’s Design tab.

The same general system applies. Use the Input, Checkbox, and Radio option groups where they apply. Then, use your saved Option Group Presets.

Design Variables can handle colors, spacing, and typography. In addition, focus and checked states can make interaction feel consistent.

This lets your CF7 forms live inside the same visual system as your Divi forms instead of feeling like a separate layer of the site.

Build Your Forms In Divi 5 Today!

A reusable form system starts with Design Variables, grows through Option Group Presets, and comes together with Element Presets. From there, the Preset Manager gives you one place to maintain the styles that power forms across your site.

That means you are not rebuilding the same input, checkbox, radio button, or form button styles every time you add a new form. You are applying a system that can scale with your site. Use the Inspector to bring older forms into that system. Then, use Composable Settings and nested presets when you need deeper control over sub-elements like buttons.

If you want every form on your site to feel consistent, polished, and easier to maintain, start building your form design system in Divi 5 today!

The post How To Style Every Form On Your Website From One Place In Divi 5 appeared first on Elegant Themes Blog.

Responsiveness was part of the build all along, but this final pass is where we refine everything. The goal is to make the site feel polished across phones, tablets, desktops, wider screens, and the breakpoints in between.

In this part, we’ll audit the full site, fine-tune key layouts, use Divi 5’s responsive tools, and keep global consistency with your Design Variables and Presets. By the end, your site will be much closer to launch-ready.

Let’s dive in.

Divi 5 Responsive Tools You’ll Use Most

Divi 5 includes a focused set of responsive tools for editing layouts across different screen sizes. Since we used many of these while building the site in earlier parts, this section is a practical recap before the final audit.

Customizable Responsive Breakpoints

The Page Bar at the top of the Visual Builder gives you access to responsive controls. Divi 5 includes seven customizable responsive breakpoints: Phone, Phone Wide, Tablet, Tablet Wide, Desktop, Widescreen, and Ultra Wide.

Click the ellipsis in the responsive menu to reveal the available breakpoints.

Toggle on any extra breakpoints you want to target. For example, enable Phone Wide when you need more control between standard phone and tablet widths, or Ultra Wide when you want to check larger desktop displays.

Canvas Scaling

Start your audit on Desktop, then move to Tablet, and finish on Phone. When you need more precision, use the responsive width field to enter an exact width. You can also drag the edge of the Canvas to resize the preview and test how the design responds in real time.

Responsive State Picker

When you select an element on the Canvas, the settings panel includes a state picker. Use it to choose which breakpoint or interaction state you are editing, such as Desktop, Tablet, Phone, Hover, Focus, Checked, Active, or Sticky.

This keeps responsive and state-based editing in one workflow. For this final pass, you’ll mostly use the responsive breakpoints, but it is also worth checking interactive states on buttons, forms, and sticky elements.

Responsive Editor

The Responsive Editor lets you review and edit values across breakpoints from one panel. Click the Edit Responsive Values icon next to a setting to open it.

From this panel, you can make precise adjustments without switching views repeatedly. This is useful for typography, spacing, alignment, column sizing, and other values that need small breakpoint-specific changes.

Structure Templates And Display Order

Structure Templates help you change column layouts per breakpoint. For example, a three-column desktop layout can become a single-column mobile stack without rebuilding the section manually.

The Display Order setting, found in each Column’s settings, lets you change the visual order of Columns on smaller screens without moving modules or relying on Visibility settings.

Design Variables

Your Design Variables from Part 3 help keep responsive design consistent. Because many typography and spacing values use fluid CSS functions like clamp(), much of the site already scales between breakpoints.

When a value needs to change everywhere, update the variable in the Variable Manager. That keeps related presets and modules connected instead of creating one-off responsive fixes.

Flexbox And CSS Grid

At the Row, Column, and Group level, Flexbox and CSS Grid give you control over how layouts adapt across breakpoints.

When using Flexbox, adjust Layout Direction, Layout Wrapping, Justify Content, Align Items, and Horizontal or Vertical Gap for each breakpoint as needed.

With CSS Grid, you can change the number of columns or rows and adjust grid item placement for different screen sizes.

Together with Presets and Design Variables, these layout systems make responsive changes easier to manage across the whole site.

The Recommended Responsive Workflow fFr Divi 5

Now that the tools are clear, it helps to follow a consistent audit process. A dedicated workflow keeps changes organized and prevents you from fixing the same issue in several different ways.

Start with the homepage because it sets most of the site’s visual patterns. Then, review the inner pages and reuse the responsive decisions you already made. After that, check your Theme Builder templates, especially the global header and footer.

Finally, use the Inspector and Layers panel to find inconsistencies and make quick updates to Variables, Presets, and repeated styles when needed.

Use A Desktop-First Review

For this site, use a desktop-first responsive review. Start on the Desktop breakpoint and confirm the base layout. Then, move to Tablet and make structural adjustments. Finally, finish on Phone, where spacing, stacking, and touch targets usually need the most attention.

This approach works well because the design system was built around fluid variables and reusable presets. Most adjustments should be small refinements rather than full rebuilds.

Use Builder View Tools

Use the Canvas resize handle to drag the right edge of the Canvas. This lets you test different widths without switching breakpoints for every minor check.

Turn on X-Ray Mode when adjusting spacing or structure. It outlines layout elements to make container boundaries clearer.

Use Wireframe Mode when you want a high-level view of the page structure, especially on long pages with many sections.

The Inspector is useful for bulk checks and repeated changes. For example, you can inspect a section and quickly review spacing, presets, and key style values across multiple elements.

Know Where To Make Responsive Changes

Knowing when to make a local change versus a global change is important.

Use local styles when the adjustment is specific to a single section. For example, the homepage hero might need slightly different mobile spacing than other sections.

Update Presets and Variables when the change should apply everywhere. For example, if every button needs different mobile padding, update the Button preset instead of changing each button manually.

After making a local change, ask whether it should be included in a Preset. If the answer is yes, save it and use Extend Attributes to apply it across the page where appropriate.

Refining The Homepage Responsiveness

Your homepage already has a strong responsive foundation from Part 5. At this stage, the goal is refinement, not rebuilding.

Focus on tightening spacing, improving typography, checking touch targets, and making sure each section feels intentional across breakpoints. Work from Desktop to Tablet to Phone, then add extra breakpoints only where the design needs them.

Hero Section

The hero is the first impression visitors get, so it deserves extra attention on smaller screens. Confirm that the main headline uses the H1 Big variable from Part 3 so it scales fluidly.

Then, use the Responsive Editor to fine-tune line height at Tablet and Phone sizes if the text feels too tight or too loose.

On Phone, you may want the two hero buttons to stack vertically. Switch to the Phone breakpoint, select the Group module containing the buttons, and change Layout Direction to Column. Make sure the Spacing – XSmall variable is applied so the buttons have enough separation.

The three-column row at the bottom of the hero should stack cleanly on mobile. Confirm that the alignment stays centered and the top borders remain visually balanced.

If the headings feel uneven on Tablet, update the Heading 4 preset. For example, apply an H4 Tablet variable to reduce the Heading Text Size to 20px.

Next, use the Responsive State Picker to select the Phone breakpoint. Change the Heading Text Size to the H2 Mobile variable, such as 24px, if that better fits the small-screen layout.

Features Grid Section

The first Features section relies on CSS Grid. Confirm that the Number of Columns changes from three columns on Desktop to two columns on Tablet and one column on Phone.

Then, tighten the Vertical Gap on mobile if the cards feel too spread out. Use the Spacing – Medium variable so the layout stays spacious without feeling loose.

Split Features Section

The second Features section uses a split layout. On Tablet, check whether the image and content stack cleanly.

Use the Apply Structure Template button in the Row’s Elements option group to switch the Row to a single-column layout at the Tablet breakpoint.

Once the Row becomes a single column on Tablet, the overall layout works better. However, you may notice extra white space on the right side of the supporting feature blocks.

Inside the second Column are three Module Groups. The first Group, which contains the introductory text, should remain full-width. The second and third Groups can sit side by side on Tablet instead of stacking with large gaps.

Create A Parent Group For The Supporting Blocks

Add a new Module Group directly below the first Group. Then, drag the second and third Groups into this new parent Group.

Once the two supporting Groups are nested inside, change the new parent Group’s Layout Direction to Row on Tablet. This lets the two supporting blocks sit next to each other.

On the Phone breakpoint, switch that parent Group back to Column so the supporting blocks stack vertically and remain easy to read.

Review The Remaining Homepage Sections

After refining the hero and features sections, review the rest of the homepage. Check Testimonials, Pricing, Countdown, and FAQ for any remaining inconsistencies.

Pay close attention to spacing between elements, Row structure on smaller screens, button size, form size, and touch targets on Phone. Also, confirm that typography scales consistently with the rest of the page.

Most remaining sections should need little or no adjustment. Still, this final pass helps the homepage feel cohesive across all active breakpoints.

Ensuring Inner Pages Are Fully Responsive

The responsive patterns you refined on the homepage should carry into the rest of the site. Thanks to Design Variables, Presets, Flexbox, and CSS Grid, most inner pages should already feel consistent.

Your task here is to catch page-specific issues. Focus on the Contact and Events pages because they include unique elements such as forms, maps, event cards, countdowns, and email opt-ins.

Check The Contact Page

On the Contact page, make sure form fields stack properly on Tablet and Phone. With Divi 5’s form field options, you can control sizing at the field level.

While in Phone view, click into any field you want to adjust. In the Design tab, expand the Sizing option group, locate the Column Class field, and set it to Fullwidth.

At the Section or Row level, adjust the Vertical Gap between elements to reduce extra white space. For example, on the Contact page, select the first Section. Then, go to the Design tab, expand the Layout option group, and apply the Spacing – Medium variable to the Vertical Gap field.

Use Page Manager To Move Between Pages

To switch between pages without leaving the Visual Builder, click the Page Manager icon in the Builder Bar.

Page Manager gives you a high-level view of your pages and quick actions for moving through the site. When enabled, Speculative Prerendering can help speed up page-to-page transitions inside the builder by loading likely destinations in the background.

Check The Events Page

On the Events page, confirm that event cards collapse cleanly on Tablet and Phone. Check date blocks, event details, pricing, buttons, and alignment on smaller screens.

If the event card layout feels cramped, adjust the Row structure with a Structure Template, reduce column counts, or update Flexbox alignment and gap values at the relevant breakpoint.

Quick Inner Page Audit Checklist

Go through each inner page and ask:

• Do all multi-column Rows collapse properly using Structure Templates?
• Are buttons and touch targets large enough on mobile?
• Does typography scale consistently with the homepage?
• Are there any awkward gaps, cramped areas, or elements that are overflowing?
• Do forms, maps, countdowns, and opt-ins remain easy to use on Phone?

A focused pass through Tablet and Phone views is usually enough to bring the inner pages up to the same quality level as the homepage.

Perfecting Global Templates

Global elements like the header and footer appear across the site, so they need careful responsive design. Because these are built in the Theme Builder, improvements you make here can apply site-wide.

Thanks to editable Theme Builder areas, you can review headers, footers, body layouts, and page content together inside the Visual Builder.

Responsive Header

The header is one of the most important elements to get right on mobile. While in the Visual Builder, enable Show Theme Builder Layouts in the Builder Settings. This lets you see and edit the header and footer in context.

Make sure the logo scales appropriately. It should remain clear without taking too much vertical space on smaller screens. The main navigation should transition cleanly from the desktop layout to the mobile menu layout at Tablet and Phone breakpoints.

Fine-tune bottom padding on the sticky header if it takes up too much space on mobile.

For a cleaner preview, review disabled or hidden elements in Builder Settings. If disabled elements are dimmed at 50% opacity, turn that setting off temporarily when you want the preview to look closer to the final front-end output.

Responsive Footer

The footer is often the last section visitors see, so it should feel just as polished as the rest of the site. Adjust Column widths using the Column Class field in the Sizing option group so footer content flows logically on Tablet and Phone.

Use number variables to keep footer typography consistent with the rest of the design system.

Check the alignment of social icons and adjust spacing where needed.

Finally, adjust the gap so the footer does not feel cramped or overly tall on smaller screens.

What’s Coming Next

Your coworking space website is now more consistently responsive across its key breakpoints. You refined the homepage, checked the Contact and Events pages, and reviewed the global header and footer.

You also completed the main Divi 5 workflow for this course: building a design system, applying presets, using Flexbox and CSS Grid, creating templates, and refining responsive behavior across the full site.

In Part 13: Creating Interactive Off-Canvas Elements, we’ll take things further by building interactive elements such as popups, slide-ins, and mega menus using Canvases and Interactions.

You are close to launching a polished website built entirely in Divi 5.

The post Part 12: Making Your Divi 5 Website Fully Responsive appeared first on Elegant Themes Blog.

1. Create beautiful, animated timelines using the timeline module. This one works great with loops.
2. Add breadcrumbs to any page using the new breadcrumbs module; simple, but great for Theme Builder templates!
3. SVGs are great; lightweight and pixel-perfect. Now you can add SVGs and style them using native stroke and width settings using the SVG module.
4. Use the Table of Contents module to automatically generate clickable tables of contents; great for Theme Builder post templates.
5. Create beautiful image galleries directly from Instagram with the Instagram Feed module.

There’s much to explore, so let me jump into the builder and give you the full tour. 👇

Five New Modules for Divi 5

We’re moving fast on module development, cranking out great new modules weekly. The Divi 5 architecture makes it so easy, and our team is killing it!

Timeline Module

The timeline module lets you list a series of events following a horizontal or vertical line. You can customize every element in the timeline using Divi’s full suite of design settings, and control the timeline’s direction and offset.

Each timeline item is its own module; you can customize the text and nested additional modules inside it thanks to Divi 5’s nested elements.

Want to animate timeline items? That’s easy thanks to composable settings. Simply enable animation settings on the card element.

Plus, this module is perfect for creating beautiful loops using Divi’s loop builder.

Breadcrumbs Module

The breadcrumbs module provides a hierarchical link tree, making it easy to return to a post’s parent category or your homepage.

This module is useful for post and category templates built with Divi’s Theme Builder.

SVG Module

Divi already has an image module, and if you enable SVG mime types, you can upload SVG images.

But you can’t customize SVG paths. With the SVG module, you can add SVG markup directly and then use the module’s design settings to customize the stroke and fill.

Using the SVG module is a great way to add custom icons, and you can use the design settings to ensure the SVG matches your design.

Table of Contents Module

The table of contents module parses your page and generates a clickable table of contents. You can add it to any post or page, and it will work automatically.

You can also add the module to Theme Builder post templates to create tables of contents for all of your blog posts. It’s easy!

Instagram Feed Module

Now you can generate galleries directly from your Instagram feed. Plus, thanks to Divi 5’s new image aspect ratio and framing settings, as well as composable settings, you have full control over the size and design of each image.

Try Divi 5 Today

Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.

We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.

Have you tried the new Aspect Ratio and Framing settings?

We recently added a bunch of new image options to Divi 5.

First, we added new aspect ratio settings to all images. Elements with aspect ratios scale proportionally across different screen sizes.

Next, we added framing settings that allow you to reposition cropped images within a defined aspect ratio. Take any image, regardless of its size, and make it fit perfectly into your design! It’s a great way to make perfect-looking loops.

Finally, we enabled option presets for the image option group. That’s huge! Now you can manage the style of all the images in every Divi module using Divi’s preset-based design system.

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

If you are enjoying these updates, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.

Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁

The post Five New Modules for Divi 5 (Timeline, Breadcrumbs, Table of Contents, SVG, Instagram Feed) appeared first on Elegant Themes Blog.

CSS Grid gives you precise control over two-dimensional layouts. Instead of only arranging items in a row or column, you can define rows and columns at the same time. Then, you can place child elements across that structure.

In Divi 5, layout-capable containers such as Sections, Rows, Columns, Groups, and supported nested Module containers can use Grid. Once a container is set to Grid, you can control key grid settings such as track counts, gaps, alignment, item placement, and rule-based offsets from the settings panel.

This is Part 11 of the Divi 5 Mastery Course. In this part, we’ll take one Row containing six Columns with content and styling already applied. Then, we’ll reshape it three different ways using row-level grid controls.

First, we’ll use a one-click Structure Template. Next, we’ll use a different Structure Template with Grid Offset Rules. Finally, we’ll use a Masonry template that combines a denser column structure with multi-property offset rules. After that, we’ll add responsive overrides at tablet and phone breakpoints.

The content and column-level styles stay the same. Only the Row-level Layout option group and Grid Offset Rules do the work.

By the end, you’ll know how to navigate Divi 5’s Grid settings, use Structure Templates, understand Grid Offset Rules, and adapt complex grids across breakpoints. Together with the Flexbox concepts from Part 10, CSS Grid gives you a stronger layout toolkit for building custom Divi 5 websites.

How CSS Grid Works

CSS Grid is a layout method built into modern browsers. While Flexbox arranges items mainly along one axis, either a row or a column, Grid arranges items in two dimensions at once.

You define the structure in the parent container. Then, its children fill that structure as grid items.

Parent And Child Controls

Two layers of control matter.

1. The parent, or grid container, defines the structure. This includes how many columns and rows there are, how wide and tall each track is, the gap between tracks, and the default alignment of items inside the grid.
2. Each child, or grid item, can override its own placement. A single item can span multiple cells, start at a specific column or row, or align differently from its siblings.

Divi 5 follows this same parent-and-child model. The Layout option group on the parent controls the grid structure. The Sizing option group on each child controls how that child sits inside the grid.

Once that mental model is clear, the settings become easier to predict. Parent settings define the grid. Child settings define how individual items behave inside it.

How To Set A Container To Grid

You will usually use Grid on containers such as Sections, Rows, Columns, and Groups. With Divi 5’s Nested Modules system, supported native modules can also act as layout parents and contain other modules or rows.

Grid layout settings are applied at the parent container level. They define the general rules for how the grid works and how child items respond to it.

Start With A Simple Grid

Let’s start by building something simple. Add a Section with a single-column Flex Row. Then, open the Row settings and change the Row from Flex to Grid.

Next, change the Row’s grid structure to a 6-column grid.

When working with Grid, it helps to separate two ideas. A grid column is part of the CSS Grid structure. A Divi Column is a Divi container element.

Adding grid columns in the Layout settings is not the same as adding Divi Columns to a Row. However, the two can work together.

Now, add six Divi Columns inside the Row. You now have six Divi Columns placed into six grid columns.

Next, change the grid structure from six columns to three columns. Notice how the same six Divi Columns flow into the new structure.

If you check the breakpoints, the 3-column grid remains in place unless you override it at a specific breakpoint.

This simple example shows the core Grid workflow. Define the grid structure at the parent level. Then, let the child elements flow into it.

Before moving further, let’s look at the main Grid settings Divi provides.

Row-Level Grid Settings: The Layout Option Group

When a Row is set to Grid, the Layout option group controls the grid structure. Here is a quick reference for the main settings.

• Horizontal Gap and Vertical Gap: Control spacing between grid columns and rows.
• Column Widths: Control how grid columns are sized, including equal widths or custom track sizing.
• Number of Columns: Defines how many columns the grid uses.
• Collapse Empty Columns: Helps with dynamic layouts where some grid cells may be empty.
• Grid Auto Columns: Sets the size of automatically generated columns when items are placed outside the defined grid.
• Row Heights: Controls how grid rows are sized, including auto-height rows or equal-height rows.
• Number of Rows and Grid Auto Rows: Provide row-based controls similar to the column controls above.
• Grid Direction: Controls how items auto-place through the grid, such as row direction or column direction.
• Grid Density: Controls whether the grid follows normal source order or backfills empty cells with later items when possible.
• Justify Content and Align Content: Position the overall grid inside the container when extra space is available.
• Align Items and Justify Items: Set the default alignment for items inside their grid cells.
• Offset Rules: Apply position-based layout rules to child items from the parent level. These are useful for asymmetric or repeating grid patterns.

Child-Level Grid Settings: The Sizing Option Group

Parent-level Grid settings define the grid. Child elements can still control how they occupy space inside that grid.

Click into one of the six Columns. Open the Design tab and expand the Sizing option group.

Below the standard Width, Height, and Module Alignment controls, grid item settings appear.

• Column Span and Row Span: Control how many grid tracks the item occupies. For example, setting Column Span to 2 makes the item span two grid columns.
• Column Start, Column End, Row Start, and Row End: Pin the item to specific grid lines. Use these when a span value is not precise enough, such as when an item needs to start at column 2 and end at column 5.
• Align Self and Justify Self: Override the parent’s default alignment for that item only.

These controls appear on direct children of a parent container set to Grid, including Columns, Groups, and modules. They are useful for asymmetrical layouts where one card occupies a larger hero block while the remaining cards sit in a tighter arrangement.

In this tutorial, we’ll mostly use Grid Offset Rules at the parent level instead of editing each child manually. That approach lets us create repeating layout patterns that continue to work even if more child items are added later.

However, when you have a fixed number of child elements, setting custom spans on the individual children can also work well.

Exploring What’s Possible With CSS Grid In Divi 5

CSS Grid is a logical way to control how child elements behave inside a container. As you saw above, the parent can define the overall grid while individual children can still break from the default pattern.

To focus on Grid, we’ll keep using the six-Divi-Column structure from the previous section. The content and general styles are already in place. Therefore, the examples below focus only on changing the grid layout.

Three Layout Variations

We’ll reshape the same content three ways:

• Variation 1: A simple grid created with one Structure Template.
• Variation 2: An alternating grid created with a Structure Template and Grid Offset Rules.
• Variation 3: A masonry-style grid created with multi-property offset rules and responsive overrides.

Variation 1: Apply A Structure Template

We have already seen how to change a Row to Grid and adjust the number of grid columns. The fastest way to get a working grid layout is to let Divi configure those settings with a Structure Template.

Switch to the Row’s Content tab. At the bottom of the Elements list, click Apply Structure Template.

Choose a Multi-Row Template

You will see grouped templates, including preconfigured grid layouts. Look under Multi-Row, Masonry, and Sidebar. Each thumbnail represents a complete layout configuration, including the number of columns, gap values, and item placement rules.

Pick the third Multi-Row template. The Row updates to a 3-column grid with defaulted 60px Horizontal Gap and 60px Vertical Gap values.

Open the Row’s Design tab and check the Layout option group. You should see Layout Style set to Grid, Number of Columns set to 3, and the gap values applied.

This simple grid structure works well for service features, product loops, blog layouts, and other evenly spaced card layouts.

Variation 2: Use Grid Offset Rules

For the second variation, we’ll use a different Structure Template that creates an alternating pattern with Grid Offset Rules. These rules control which child items span extra columns.

In the Row’s Content tab, click Apply Structure Template again. Then, pick the eleventh Multi-Row template. The Row still uses three grid columns, but it adds offset rules that make certain child items span multiple column tracks.

Inspect The Offset Rules

Divi’s Structure Templates can include more than basic column counts. Some templates also include offset rules, which means you can apply a Grid layout and its repeating placement logic in a few clicks.

Now, let’s inspect the rules. Open the Row’s Design tab, expand the Layout option group, and find Grid Offset Rules. You should see two rules created by the Structure Template.

Rule 1: Span Every 4n+2 Item

The first rule uses these settings:

• Admin Label: Auto-generated from the rule settings, such as 4n+2 Spans 2 Columns.
• Target Offset: Custom nth-child Rule, with the pattern set to 4n+2. This matches the 2nd item, then every 4th item after that: 2, 6, 10, and so on.
• Offset Rule: Column Span. This tells Divi which grid property to change on the targeted items.
• Offset Value: 2. This makes each targeted item span two column tracks instead of one.

Read from top to bottom, the rule says: target items 2, 6, 10, and onward, and make each one span two column tracks.

That creates a repeating pattern where every fourth targeted item becomes wider on the right side of the grid.

Rule 2: Span Every 4n+3 Item

The second rule does the same thing, but targets a different set of child items.

• Admin Label: Auto-generated from the rule settings, such as 4n+3 Spans 2 Columns.
• Target Offset: Custom nth-child Rule, with the pattern set to 4n+3. This matches the 3rd item, then every 4th item after that: 3, 7, 11, and so on.
• Offset Rule: Column Span. This changes the same grid property as the first rule, but for a different item pattern.
• Offset Value: 2. This makes each targeted item span two column tracks.

Together, the two rules create an alternating rhythm. The 2nd item in each group of four spans two columns. Meanwhile, the 3rd item in each group of four also spans two columns. The 1st and 4th items remain one column wide.

Invert The Pattern

If you wanted to invert the pattern and start with a larger item, you could change the rules to these patterns:

• First Rule: 4n+1 spans two columns.
• Second Rule: 4n+4 spans two columns.

Grid Offset Rules open up many layout possibilities because they let you create repeating asymmetric patterns from the parent container. Next, we’ll use a more complex grid structure.

Variation 3: Create A Masonry-Style Grid

The third variation uses a Masonry Structure Template and two Grid Offset Rules. This time, the rules target two different grid properties in the same layout: Row Span and Column Span.

In the Row’s Content tab, click Apply Structure Template and pick the second template under Masonry.

Inspect The Masonry Settings

The template applies several Layout settings. Open the Row’s Design tab to inspect them.

• Number of Columns: 4
• Offset Rules: Two rules, one for spanning across rows and one for spanning across columns.

The Offset Rules do most of the work in this layout.

Rule 1: Span Every 6n+1 Item Across Rows

The first rule uses these settings:

• Admin Label: Auto-generated from the rule settings, such as 6n+1 Items Span 2 Rows.
• Target Offset: Custom nth-child Rule, with the pattern set to 6n+1. This matches the 1st item, then every 6th item after that: 1, 7, 13, and so on.
• Offset Rule: Row Span. This changes how many row tracks the targeted item occupies.
• Offset Value: 2. This makes each targeted item take up two row tracks instead of one.

Read top to bottom, the rule says: target items 1, 7, 13, and onward, and make each one twice as tall. This creates the tall anchor item at the start of each group of six.

Rule 2: Span Every 6n+6 Item Across Columns

The second rule works on the other axis.

• Admin Label: Auto-generated from the rule settings, such as 6n+6 Items Span 2 Columns.
• Target Offset: Custom nth-child Rule, with the pattern set to 6n+6. This matches the 6th item, then every 6th item after that: 6, 12, 18, and so on.
• Offset Rule: Column Span. This changes how many column tracks the targeted item occupies.
• Offset Value: 2. This makes each targeted item span two column tracks instead of one.

The two rules work in different dimensions. The first stretches the first item in each group of six vertically. The second stretches the final item in each group of six horizontally.

If you duplicate the Divi Columns until you have 12 total items, you can see how the rules repeat every six child items.

Make The Masonry Layout Responsive

The masonry pattern works well on desktop, but a 4-column grid with larger anchor items can feel cramped on smaller screens. This is where responsive Grid settings become important.

Grid settings in Divi 5 can be adjusted across breakpoints. On tablet and phone, we can simplify the layout by overriding the desktop configuration.

Tablet Grid Settings

Switch the Visual Builder to Tablet view and open the Row’s Layout option group. Make two changes:

• Set Number of Columns to 2.
• Change the Offset Value on both Grid Offset Rules from 2 to 1 at the tablet breakpoint.

Setting Row Span to 1 on the 6n+1 rule and Column Span to 1 on the 6n+6 rule effectively neutralizes the desktop masonry effect on tablet.

The targeted items still match the rules. However, they span the same amount as every other item. The result is a cleaner 2-column grid where each item occupies the same amount of space.

Phone Grid Settings

Switch to Phone view and set Number of Columns to 1. If you have not overridden the tablet offset values again on phone, those tablet values will continue downward through Divi’s responsive inheritance.

Every item now stacks vertically in a single column.

A Structure Template gives you a strong starting point. The Layout option group exposes the settings the template applies. Since those settings can be adjusted across breakpoints, you can use more complex Grid layouts on desktop and simplify them for smaller screens.

Wrapping Up

CSS Grid in Divi 5 makes it easier to build layouts that would have been difficult to create with standard column structures alone. In this lesson, the same six Columns of content were reshaped three different ways using row-level Grid controls.

First, we applied a basic Structure Template. Then, we used a template with Grid Offset Rules. Finally, we created a masonry-style template with responsive overrides.

Where To Use This Next

You can extend the same approach in many directions. Containers can become grids. Structure Templates give you tested starting points. Grid Offset Rules turn position-based logic into reusable patterns that can continue working as more child items are added.

That last point is especially useful for dynamic content and Loop Builder layouts, where the number of items may change over time.

In Part 12: Making Your Divi 5 Website Fully Responsive, we’ll take everything built so far and refine it across breakpoints. That includes the Flexbox layouts from Part 10, the CSS Grid layouts from this part, typography, spacing, and templates.

The goal is to make the full site hold up from wide desktops to small phones.

The post Part 11: Mastering CSS Grid In Divi 5 appeared first on Elegant Themes Blog.

Flexbox solves that problem with layout rules. In Divi 5, those controls live inside the Visual Builder, so you can define the structure visually instead of writing custom CSS. Below, we will build two practical Flexbox headers and show how Divi 5’s menu, canvas, and interaction tools work together.

Flexbox In Divi 5

Flexbox is a CSS layout model for arranging items inside a container. Items can sit in a row, stack in a column, wrap, grow, shrink, and align.

In Divi 5, Flexbox is part of the core layout system. Sections, Rows, Columns, and Module Groups can act as flex containers. When an element becomes a flex container, its direct children become flex items. That direct-child relationship matters throughout this tutorial.

Core Flexbox Controls

Divi 5 gives you visual controls for the most important Flexbox settings. You can set Layout Direction, Justify Content, Align Items, Layout Wrapping, Display Order, and Gap values. These settings help you control structure, spacing, and alignment without custom CSS.

These controls are responsive. A desktop row can become a mobile column, and items can change order at different breakpoints. That makes Flexbox ideal for headers because a wide navigation layout can turn into a compact mobile header without duplicate sections.

Why Use Flexbox For Headers

Headers usually need one-dimensional layout control. You might place a logo and menu in a row, or stack mobile menu items in a column. Flexbox handles those patterns well.

• Use Display Order to reorder items on smaller screens.
• Use Align Items: Stretch when columns need equal height.
• Use Grow To Fill when an item should use available space.
• Use Shrink To Fit when an item should stay compact.
• Use Gap settings instead of manual padding between modules.
• Use Layout Wrapping when items need to move onto a new line.

The most important rule is simple: Flexbox controls the direct children of a container. If several modules should behave like one item, place them inside a Module Group. That makes complex headers easier to manage.

More Divi 5 Features To Help You Build Better Headers

Flexbox handles the layout, but modern headers also need dynamic navigation, off-canvas menus, and global editing. These Divi 5 features help with that.

The Link And Dropdown Modules

A header without navigation is usually just branding. Divi 5’s Link Module gives you a flexible building block for custom menus. You can create links manually or use Menu Loops to pull items from an existing WordPress menu.

Using Menu Loops

With Menu Loops, one Link Module can repeat for each item in a selected menu. The menu text and URL can come from dynamic content, which keeps your WordPress menu as the source of truth. Add, remove, or reorder menu items in WordPress, and the looped navigation can update with it.

Using Dropdown Modules

The Dropdown Module builds on that system. Place a Dropdown Module inside a parent element, such as a Link Module, and Divi connects the dropdown behavior to that parent. The dropdown content area is flexible, so you can add simple links, rows, images, text, buttons, or full mega menu layouts.

Use Dropdown Modules with care inside looped menu items. A dropdown placed inside a loop can repeat with each looped item. For simple menus, the standard Menu Module is still useful. Use Link and Dropdown modules when you need more control.

Interactions And Canvases

A header often needs to show or hide something. It might open a mobile menu, search panel, form, or promo modal. Building those elements inside the main header can clutter the layout, so Canvases help keep them separate.

What Canvases Do

Every page has a Main Canvas for the primary layout. Divi 5 also lets you create detached Canvases, where a mobile menu, popup, slide-in panel, or staging area can live outside the main page structure.

Canvases can be local or global. A local Canvas belongs to one page, while a Global Canvas can be reused across the site. That makes Global Canvases useful for mobile menus because you can build the menu once and use it wherever the global header appears.

What Interactions Do

Interactions make detached elements interactive. You can add behavior in the builder without writing JavaScript. Choose a Trigger Event, such as click, hover, scroll, or viewport entry. Then choose an Effect Action, such as showing or hiding an element. Finally, choose the target element or container that receives the effect.

For headers, this is especially useful. A hamburger icon can show a mobile menu Canvas, and a close icon can hide it again.

Editable Theme Builder Areas

Headers do not exist in isolation. They sit above real page content, and that context matters. Logo size, spacing, contrast, and sticky behavior are easier to judge when the page is visible.

Editable Theme Builder Areas let you edit assigned headers, footers, body templates, and page content in one front-end builder session.

This helps when building headers because you can compare the header against the hero section below it and adjust spacing without leaving the page.

Global template changes apply everywhere that template is assigned, so review every breakpoint before publishing.

Before You Build: Plan The Header Structure

Before opening the Visual Builder, decide how the header should work on desktop, tablet, and mobile. Flexbox makes layout changes easier, but the build will still be cleaner if you know which elements belong together and which ones should move into a Canvas.

Map The Header Elements

Start by listing every item the header needs. Most headers include a logo, navigation, CTA, social links, search, cart icon, contact details, or business hours. Then decide which items are primary and which are secondary. Primary items should stay visible on desktop. Secondary items can move into the mobile menu or disappear at smaller breakpoints.

• Keep the logo visible on every breakpoint.
• Keep the main CTA visible on desktop when it supports the page goal.
• Move long navigation menus into a mobile Canvas.
• Move contact details, hours, and social icons out of the compact mobile header.

Group Items Before Styling Them

Flexbox works on the direct children of a container, which means structure matters before styling. If a logo and menu should move together, place them inside a Module Group. If three contact blurbs should stay together on the left side of a row, place them inside one group. Then Flexbox can treat that group as a single item.

• Use Module Groups for related header elements.
• Use Rows or Columns as the main flex containers.
• Use Gap settings for spacing between direct flex items.
• Avoid using padding as the main spacing system between modules.

Plan The Mobile Behavior

The mobile header should not be a squeezed version of the desktop header. It should be a simpler layout with fewer visible items. A good mobile pattern is a logo on one side and a hamburger icon on the other. The full navigation, CTA, and secondary links can live inside a Global Canvas.

• Use Display Order when items need a different mobile sequence.
• Use Visibility settings to hide desktop-only modules on mobile.
• Use a Global Canvas when the same mobile menu should appear sitewide.
• Use Interactions to show and hide the mobile menu Canvas.

Check The Details Before Publishing

Small header issues are easy to miss because headers appear on every page. Test the layout before publishing the global header.

• Check desktop, tablet, and phone breakpoints.
• Test widths between the default breakpoints.
• Confirm dropdowns and Canvases sit above page content.
• Set a clear Z Index for overlays, sticky headers, and dropdowns.
• Make sure hamburger and close icons have clear labels.
• Check that menu links, CTA links, cart links, and social links work.

Building A Flexbox Header In Divi 5

Now, let us build two headers from scratch. We will recreate two layouts from our free 20 Header Design Pack: Design #11 and Design #12.

Follow along step by step. You can also download the resources from this blog post to get a faster start.

Design #1: Three-Row Stacked Header

Some businesses need more than a logo and navigation. Clinics, law offices, agencies, and local service providers often need contact details visible right away. This layout uses a navigation row and a utility row. The utility row holds contact information and a CTA.

Setting Up The Header In The Theme Builder

Go to Divi > Theme Builder in your WordPress dashboard. Click Add Global Header, then Build Global Header. The Visual Builder will open.

Open the section settings before adding modules. Go to Design > Layout and set the Vertical Gap to 0px. This keeps the header rows flush against each other.

Next, go to Design > Spacing. Set the top and bottom padding to 0px. The outer section stays compact, while each row can still control its own spacing.

Adding The Header Rows

Start with the default single-column row inside the section. This row will hold the nested rows. Open the row settings and go to Design > Layout.

Set Layout Direction to Column, Justify Content to Start, Align Items to Stretch, and Vertical Gap to 0px. This stacks the nested rows vertically and keeps them edge-to-edge.

Set the row’s top and bottom padding to 8px. Next, duplicate the structure to create two stacked nested rows. The first row will hold the logo, navigation, and social icons. The second row will hold contact details and the CTA.

For the nested rows, set the Horizontal Gap to 2% and the Vertical Gap to 8px.

Apply the same alignment logic to the column inside the first row. This makes the modules easier to align.

Creating The Two-Tone Background

Add a gradient background to the section. Set both color stops to the same point. This creates a sharp transition instead of a blended gradient. Use 50% for an even split, or adjust the stop if one row is taller than the other.

Building The Logo, Navigation, And Social Row

The first nested row has three parts: the logo, navigation, and social icons. Flexbox controls how those parts sit together.

Adding The Logo And Navigation Group

Add a Module Group for the logo and navigation cluster. A group is useful because Flexbox distributes direct children. When related modules sit inside a group, the group behaves as one flex item.

Inside the group, set Layout Direction to Row, Horizontal Gap to 2%, Justify Content to Start, and Align Items to Center.

Adding The Dynamic Logo

Add an Image Module for the logo. Instead of uploading a static logo, use the Site Logo dynamic tag. This connects the header logo to Divi > Theme Options > General, so future logo updates can be handled from one place.

Adding The Navigation Links

Add a Link Module inside the same group. Style the typography, spacing, and colors. Use Design Variables where possible so the menu stays consistent with the rest of the site.

Turn on the Loop Element toggle. Set the Query Type to Menu, select the WordPress menu you want to display, and set the loop order to follow the menu order.

Apply the Loop Menu Text dynamic tag to the Link Module label. Then apply the Loop Menu Link dynamic tag to the Link URL. The first controls the visible label. The second sends each item to the correct page.

A Menu Module can build a simple navigation bar faster. Use a looped Link Module when you need more control.

Adding Social Icons

Add the Social Media Follow module to the row. Style the icon size, spacing, and colors to match the header’s navigation style.

Building The Contact Info And CTA Row

The second row has one job. It places contact details on the left and a CTA on the right. Set the row or column to Layout Direction: Row, Justify Content: Space Between, and Align Items: Stretch. This keeps both sides aligned across the row.

Building The Contact Details Group

Place the contact details inside a Module Group. This matters because Space Between works on direct children. The contact group becomes one item on the left, and the button becomes the item on the right.

Inside the group, add a Blurb Module for each contact item. A Blurb works well because it includes an icon, title, and body content. For the first item, use an envelope icon, set the title to Email, and add the email address as the body content.

Under Design > Image And Icon, set Icon Placement to Left. Under Sizing, set the icon size to 20px.

Duplicate the Blurb twice. Use the copies for the phone number and business hours, then swap the icon, title, and body content for each item.

Adding The CTA Button

Add the Button Module outside the contact details group. That placement is intentional. The contact group sits on the left, and the button sits on the right. With Space Between enabled, the CTA lands at the far edge of the row.

Making The Layout Responsive

The desktop header has more content than a mobile header should show. On smaller screens, keep the logo and hamburger visible, then move the full menu into a Canvas.

Hiding Desktop-Only Items

Hide the Link Module group and Social Media Follow module on mobile. Use Advanced > Visibility.

Add an Icon Module opposite the logo. Set it to a hamburger icon, style it to match the header, and hide it on desktop.

Hide the second nested row on mobile too. The contact and CTA strip takes too much space in a compact header.

Adjusting The Mobile Background

The gradient background no longer makes sense on mobile because it was only used to separate two visible rows. At the mobile breakpoint, replace the gradient with a flat background color.

The faded elements in the builder are hidden at the active breakpoint. This helps you confirm what is visible on mobile.

Setting Up The Mobile Navigation Canvas

Create the mobile menu in a detached Canvas. Use the Canvas dropdown at the top of the Visual Builder, then add a new Canvas.

Name it clearly. Mobile Menu works well. Make it global if the same menu should appear across the site. Set the Z Index to 999 so it appears above the page layout.

Positioning The Canvas

Inside the Canvas, center the content. Set the column’s Justify Content and Align Items to Center. In the Canvas section, go to Advanced > Position and set Position to Fixed.

Set Offset Origin to Top Left and set both offsets to 0. This lets the Canvas cover the viewport instead of sitting in normal page flow.

Go to Design > Sizing and set the height to 100vh. Use Flexbox alignment on the Canvas section or column to center the menu vertically and horizontally.

Adding The Mobile Menu Content

Copy the desktop navigation Module Group into the Canvas to save time. Set the group’s Layout Direction to Column so the menu items stack vertically.

Set the Column Class to Fullwidth where needed. Remove any desktop-only visibility settings, then add the CTA button below the menu.

You can also add phone, hours, or email details. Only include them if they help mobile visitors act faster. Keep the mobile menu focused.

Adding The Close Icon

Add an Icon Module inside the Canvas and set it to a close icon.

After styling the close icon, go to Advanced > Position. Set Position to Fixed, Offset Origin to Top Right, and both offsets to 20px. Set the Z Index to 999. This pins the close icon to the corner of the viewport.

When the Canvas is finished, go to the Canvas section’s Advanced tab. Disable it across all breakpoints under Visibility. This keeps it hidden on load until an Interaction shows it.

Wiring Up The Interactions

Select the hamburger icon and add an Interaction. Set the Trigger Event to Click, the Effect Action to Show Element, and the Target Module to the mobile menu Canvas section.

Select the close icon inside the Canvas and add the reverse Interaction. Set the Trigger Event to Click, the Effect Action to Hide Element, and use the same Canvas section as the target.

Optional Accessibility Cleanup

Give the hamburger and close icons clear labels. This helps visitors using assistive technology. If your build uses Divi 5’s semantic element options, set the navigation wrapper to nav.

Previewing The Finished Header

That is all it takes to build an advanced responsive header in Divi 5.

The result is maintainable. The navigation comes from WordPress, the logo comes from the Site Logo dynamic tag, the mobile menu lives in a Canvas, and the open and close behavior lives in Interactions. The spacing and alignment come from Flexbox, so no hidden duplicate sections are needed.

Design #2: Single-Row Navigation Header

Not every site needs a utility bar. Some sites need a clean header that stays out of the way. This layout works well for SaaS products, portfolios, membership sites, and lightweight business sites.

The structure is simple. The logo and navigation sit on the left, and supporting actions sit on the right.

Adding A Two-Column Flexbox Row

The row uses a two-column layout. The wider left column holds the logo and navigation. The narrower right column holds supporting elements, such as search, cart, social icons, or a CTA.

For the row, set the Horizontal Gap to 2% and the Vertical Gap to 8px. Set Justify Content to Start and Align Items to Stretch. Stretch keeps both columns the same height, even when their contents differ.

Building The Left Column

Set the first column to Layout Direction: Row, Justify Content: Start, and Align Items: Center. Add the logo and navigation using the same setup from Design #1.

Add an Image Module connected to the Site Logo dynamic tag. Then add a Link Module using Menu Looping.

Building The Right Column

Set the second column to Layout Direction: Row and Align Items: Center. Use an 8px horizontal and vertical gap to keep the supporting actions evenly spaced.

Add Icon Modules for search and cart if the site needs them. Link the cart icon to the cart page for WooCommerce sites, and remove it for non-commerce builds. Then add the Social Media Follow module and Button Module side by side.

Adapt Your Design To Smaller Breakpoints

Similar to the first header, create a canvas with all the elements you want in your mobile menu: navigation, CTA buttons, and more. Likewise, add a close button. Then a hamburger icon next to your site logo while hiding everything else. And then put up interactions to connect all these pieces together.

The Possibilities Are Nearly Endless With Divi 5

The two headers look different, but the method is the same. Flexbox handles the layout. Link Modules and Menu Loops handle dynamic navigation. Canvases keep mobile overlays separate from the main header. Interactions handle the open and close behavior.

Each tool does its part. Because they are built into Divi 5, the workflow stays visual and maintainable. You are not stitching the header together with duplicate sections, CSS fixes, or hidden JavaScript snippets.

Divi 5 is available now. This kind of header workflow is where its layout and interaction improvements shine.

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

With the release of Nested Option Presets, the preset system goes deeper. You can apply presets to nested option groups inside modules, and you can nest option presets inside other option presets. That means a small preset, such as a border style, can be reused inside a button preset, which can then be included inside a larger element preset.

In this post, we’ll explain what Nested Option Presets are, how they work, how they connect to Element Presets and Option Group Presets, and how to use them to build a cleaner design system in Divi 5.

Let’s get started.

What Are Presets In Divi 5?

Divi 5’s preset system lets you save groups of design settings and reuse them across your site. When you update a preset, every element using that preset updates with it, which makes presets useful for building consistent buttons, typography, backgrounds, borders, spacing, shadows, and other shared styles.

There are two main preset types to understand before working with Nested Option Presets:

Element Presets: These apply to entire elements, such as modules, rows, columns, and sections. For example, you can create an Element Preset for a Button module and reuse that complete button style on other Button modules.

Option Group Presets: These apply to specific groups of settings inside an element, such as Typography, Background, Border, Spacing, Button, Box Shadow, or Effects. They are more granular than Element Presets and can be reused anywhere a compatible option group exists.

Previous updates introduced stacked presets and nested presets. Stacked presets let you apply multiple presets to the same element or option group. Nested presets let you include Option Group Presets inside Element Presets, so a complete module style can still be built from smaller reusable pieces.

Why Presets Matter

Presets are useful because they keep your design decisions connected. If your site uses the same rounded border preset on buttons, images, icons, and cards, you can update that border style once instead of editing each element manually.

They also make your workflow faster. You can create a small set of reusable styles, apply them throughout a layout, and make future changes from one place. That matters on larger sites where small design inconsistencies can add up quickly.

Nested Option Presets Explained

Nested Option Presets extend the preset system to deeper option groups inside modules and sub-elements.

Before this update, presets could be used for full elements and standard option groups, but deeply nested option groups had more limitations. For example, a border group inside a module’s button sub-element could not always have its own reusable preset.

Now, nested option groups can support presets too. That includes deeply nested controls such as a button border inside a CTA module, an image border inside a Blurb module, or form field styles inside a form-based module.

This works especially well with Composable Settings. Composable Settings let you enable additional design option groups for module sub-elements, such as Sizing, Border, Background, Transform, or Animation. Once those option groups are available, they can become part of your preset workflow.

How Multi-Level Nesting Works

Nested Option Presets add another level to Divi 5’s preset structure. A small Option Group Preset can be nested inside another Option Group Preset, which can then be included inside an Element Preset.

For example, you could create a Pill Border preset, use it inside a Primary Button option preset, and then include that button preset inside a CTA Element Preset.

You can also reuse compatible Option Group Presets across different modules. A border preset created for one element can be applied to another element as long as that option group supports the same kind of preset.

The advantage is global updating. If you change the low-level border preset later, that change can flow through every button, icon, image, card, or module using it, including styles where the preset is nested inside other presets.

How To Use Nested Option Presets

Now, let’s walk through the process inside the Visual Builder.

1. Create A Nested Option Preset

Open any page in the Visual Builder. Click a Button module, open its settings, and go to the Design tab. Style the button as needed.

Once your styles are in place, locate the nested option group you want to save. For this example, use the Border option group inside the button settings. Hover over the option group title to reveal the Assign Preset icon.

Click the icon, then choose New Preset From Current Styles.

Give the preset a clear name, confirm the border styles are correct, and click Save Preset.

After the preset is created and applied, it appears next to the option group’s title. You can apply it to compatible option groups elsewhere in the Builder.

Repeat the same process for other nested option groups you want to reuse, such as shadows, spacing, sizing, or backgrounds.

2. Create An Option Group Preset

Next, create broader Option Group Presets for the Button’s main option groups, such as Spacing or Button. The process is similar: style the option group, click the Assign Preset icon, choose New Preset From Current Styles, name the preset, and save it.

Quick Tip: Include important state styles, such as hover styles, before saving the preset. That way, the preset stores the button’s normal and interactive styling together.

This gives you a reusable button-level style that can still contain smaller nested presets, such as the border preset you created earlier.

3. Create An Element Preset

Once your nested option presets and option group presets are in place, you can include them inside an Element Preset for the Button module.

In the Button module settings, hover over the module header to reveal the Assign Preset icon.

Click New Preset From Current Styles, name your preset something clear, such as Button – Primary, and save it.

You can now apply that Element Preset to other Button modules. The Element Preset can include the Option Group Presets and Nested Option Presets used to build it, so the full button style remains reusable and easier to update.

4. Apply Nested Option Presets To Other Modules

Nested Option Presets become more useful when you reuse them across different module types. For example, the same rounded border preset you created for a Button module can also be applied to an Icon module if the compatible Border option group is available.

Add or locate an Icon module on the page. Open the module settings, add a background color and padding, and adjust the icon size. Then locate the Border option group in the Design tab.

Hover over the option group title, click the Assign Preset icon, and apply the border preset you created earlier.

From there, you can create additional Nested Option Presets and Option Group Presets for the Icon module, then include those styles inside an Icon Element Preset.

With just a few clicks, you can apply that Element Preset to other Icon modules and avoid repeating the same styling work.

5. Edit And Update Presets

When you edit a preset, every element using that preset updates across your site. This also applies when the preset is nested inside another preset.

That is the main reason to keep presets focused. If one border preset is used across buttons, icons, and cards, changing it will affect all of those places. That is powerful when intentional and frustrating when the preset is too broad.

Tips And Best Practices

Nested Option Presets are powerful, but they work best when your preset library is organized. Use the tips below to keep your design system flexible and easy to maintain.

Use Nested Option Presets With Other Divi 5 Design Tools

Nested Option Presets work well with other Divi 5 design system features. Use them with Design Variables when you want colors, fonts, spacing values, or other design tokens to stay consistent across presets.

Use Composable Settings when you need additional design controls for a module sub-element. For example, you can enable a Border option group for a sub-element, style it, and then save that style as a preset.

Together, presets, variables, and Composable Settings let you create a design system that is reusable without becoming rigid.

Start Simple And Build A Modular Library

Start with small, focused presets before creating large Element Presets. Good low-level presets include borders, shadows, spacing rules, text styles, button styles, and background treatments.

Once those smaller pieces are working, combine them into broader Option Group Presets and Element Presets. This modular approach makes your preset library easier to update later.

Use Clear And Consistent Naming

Good names make presets easier to trust. Use names that describe the preset’s role and scope, such as Border – Pill, Button – Primary, Button – Outline, Shadow – Soft Card, or Text – Section Heading.

Avoid vague names like New Preset, Style 1, or Blue. They may be understandable today, but they become hard to manage as your site grows.

Know When To Override And When To Nest

Nested presets are best for styles you want to reuse and update globally. Local overrides are better for one-off changes that should not affect the rest of the site.

For example, if one promotional button needs a unique black background, a local override may be enough. If every primary button needs a new border radius, update the shared border or button preset instead.

Manage Presets From The Preset Manager

As your preset library grows, use the Preset Manager to keep it organized. From one place, you can create, edit, duplicate, delete, search, filter, and set default presets.

The Preset Manager is especially helpful when you want to adjust a design system without hunting through individual modules on the page.

Export And Import Presets For Reuse Across Projects

Divi 5 lets you export and import presets, which is useful for freelancers, agencies, and anyone maintaining multiple websites. You can build a preset library once, export it as a reusable design system, and import it into future projects.

This is a practical way to standardize buttons, typography, card styles, borders, spacing, and other repeatable design patterns across client sites.

Build Better With Nested Option Presets

Nested Option Presets make Divi 5’s preset-based design system more flexible. You can save styles for deeply nested option groups, reuse those styles across compatible modules, and nest small presets inside larger presets.

That gives you a more modular way to build. Start with focused presets for things like borders, spacing, shadows, and buttons. Then combine them into larger Element Presets that are easier to apply, update, and reuse across a full website.

Download the latest version of Divi 5, open the Visual Builder, and experiment with Nested Option Presets in your next layout.

The post Everything You Need To Know About Divi 5’s Nested Option Presets appeared first on Elegant Themes Blog.

All SVG elements are added through Divi’s Code Module, making them easy to inspect, adjust, and restyle if you are comfortable editing SVG markup. One section also uses an Image Module with a nested SVG element that defines a clipPath for the quote mask effect. Import a section, update the content, adjust the styling, and you’re ready to go.

What makes this freebie especially valuable is the combination of ready-to-use designs and smart, flexible code. These sections include multiple color options, CSS custom properties for quick customization, and clean structure, so you can match them to your brand while keeping everything light on any device.

Preview

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

Download 5 SVG Sections For Divi 5

Get all 5 sections 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 SVG section exports, plus 1 file containing all layouts.

Styled – SVG Section 1

This fully styled SVG section features decorative SVG artwork that can be used as a visual accent, feature block, or design-forward content section. What makes this one unique is the cosmic scene within a tall, elegant capsule. It features hands gently reaching toward a glowing sun, surrounded by flowing lines, stars, and a crescent moon. One version offers a rich, deep teal background with subtle strokes for a night-sky feel, while the others feature a bold orange outline and a vibrant blue-and-pink combo.

Built with clean paths and simple CSS variables for color and stroke width, it’s super easy to customize and ready for animations.

Styled – SVG Section 2

This fully styled SVG section features an illustrated graphic that works well for promotional content, product highlights, ecommerce messaging, or brand storytelling. The illustration has plenty of personality, thanks to the dynamic motion lines, floating stars, and sense of fun movement. It uses a vibrant red stroke with smart color fills controlled through simple CSS, making it super easy to match your brand colors.

Styled – SVG Section 3

This section is a fully styled testimonial-style section that uses a visual mask effect to frame content more dynamically. It uses an Image module with a nested element to create a clip-mask effect using SVG code. It shapes the background photo in a unique, organic, asymmetrical form, gently curved on one side for a modern, flowing look. The combination of a clipped image and bold text creates a standout framed effect that feels artistic, rather than a plain rectangular box. It’s lightweight, fully responsive, and easy to customize.

Styled – SVG Section 4

This layout is perfect for testimonials, team highlights, social proof, customer status, or community-focused content. It uses a set of three bold, playful SVG shapes, each designed to frame circular profile photos with personality. Available in vibrant colors and bold strokes, they add energetic visual interest around headshots. The simple, scalable SVG paths make them lightweight, fully responsive, and easy to recolor or animate, helping your team or customer profiles feel fun instead of ordinary.

Styled – SVG Section 5

This section uses compact icon-style elements for ratings, reviews, feature highlights, or small supporting visuals. What makes this one unique is its bold, calendar-style icons that use clean, thick strokes and smart CSS custom properties for primary and secondary colors, giving you multiple color variations right out of the box. Thanks to vector-effect: non-scaling stroke in the code, the lines stay crisp and consistent no matter how small or large you make the icon. It’s lightweight, fully responsive, and super easy to colorize.

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

How To Use The SVG Sections

Keep your download folder handy. We’ll import the files, add a section to a page, and then update the content and SVG styling as needed.

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 SVG Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add An SVG 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 SVG sections.

3. Update The Content

Once the section is on the page, replace the placeholder content. Update the headings, body text, captions, buttons, images, testimonials, names, ratings, icons, and supporting copy so the section aligns with your website.

Because these designs use SVG elements as part of the visual structure, it’s best to update the regular content first before editing the SVG markup. This helps you see how the section reads with your real copy in place.

4. Edit The SVG Code Carefully

All of the SVG artwork in these sections is added through Code Modules. To customize those visuals, open the relevant Code module and inspect the SVG markup.

Common SVG edits include changing fill colors, stroke colors, stroke widths, opacity values, gradients, shape colors, and other inline SVG attributes. Make small edits and preview the section after each change to quickly catch any missing tags or broken markup.

For example, to change colors in Section 1, look for the hex code values immediately after the opening style tag.

Replace the color-stroke and color-fill values with new hex values. Divi will update the colors in real time, letting you view changes as you work.

If you are editing the quote mask section, note that the mask effect is handled differently. It uses an Image Module with a nested SVG element that defines the clip path.

When customizing that section, be careful not to remove the SVG element or change the clip path ID (located in Advanced tab > Attributes) unless you also update every place where that ID is referenced.

To locate the SVG in Section 3, open the Image module, expand the Elements option group, and click the edit icon of the nested Code module.

5. Adjust Styles In Divi

These SVG sections are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, spacing, backgrounds, borders, shadows, sizing, and responsive settings using Divi’s 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, and more.

To refine the surrounding section layout, open the section, row, column, group, or module you want to adjust and use the Design tab to tweak Border, Box Shadow, Sizing, and Spacing.

Use Divi’s responsive editing tools to fine-tune spacing, stacking, image size, SVG scale, text alignment, and button placement on smaller screens.

Tips For Using SVG Sections Effectively

SVG sections work best when the visuals support the message rather than distract from it. Use these quick tips to keep your sections polished, flexible, and easy to customize.

Keep The SVG Supporting The Main Message

Decorative SVG elements should guide attention toward the section’s content. Use headings, short copy, and clear calls to action to make the design feel intentional.

Use Consistent Colors

SVGs can include multiple fills, strokes, gradients, and opacity values. Keep your palette focused so the section matches your brand and remains easy to scan.

Edit SVG Code In Small Steps

When working inside a Code Module, make small changes and preview often. A missing bracket, a changed ID, or a missing closing tag can affect how the SVG displays.

Preserve Masks, Clip Paths, And IDs

Some SVG effects depend on internal IDs, masks, or clip paths. If you edit those values, make sure all related references are updated too. This is especially important for the Quote SVG mask section.

Check The Layout On Mobile

SVG visuals can scale beautifully, but spacing and stacking still matter. Review each section across tablet and phone views to ensure the SVG artwork, text, buttons, images, and supporting elements remain balanced.

Start Building In Divi 5 Today!

These 5 SVG Sections give you a fast way to add crisp, scalable visuals to landing pages, service pages, product pages, testimonial sections, promotional layouts, and more. Import the layouts, update the content, customize the SVG styling where needed, and use Divi 5‘s Visual Builder to refine each section for your website.

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

Divi 5‘s dedicated Woo Checkout modules let you build a branded checkout layout visually, without relying on a single checkout shortcode. In this tutorial, we’ll build a clean, two-column checkout page from scratch using Divi 5, WooCommerce, and Design Variables.

Using Woo Modules In Divi 5

Divi has supported WooCommerce cart and checkout modules for years, so this workflow isn’t about replacing a shortcode-only process. The bigger shift in Divi 5 is that the Woo modules are rebuilt for Divi 5’s current Visual Builder, layout system, and performance-focused architecture, making them easier to place, style, and reuse inside custom WooCommerce templates.

Instead of treating checkout as one rigid block of WooCommerce output, Divi 5 lets you build the page from individual Woo modules. On the checkout side, you get dedicated modules for billing details, shipping details, additional order notes, the order summary, and payment. Each one can be placed, styled, spaced, and responsive-tuned independently.

For cart pages, the suite includes modules for cart products, cart totals, and cross-sells. Together, Divi 5’s 25 Woo modules cover the main WooCommerce experience, from product pages and product archives to cart, checkout, and order-focused layouts.

Learn About Divi 5’s Woo Cart & Checkout Modules

Design Variables Keep The Checkout Consistent

Before building the layout, set up Design Variables. In Divi 5, the Variable Manager lets you create reusable values for colors, fonts, numbers, text, images, and links. You can then apply those values to modules, presets, spacing controls, buttons, and other design settings throughout your site.

That matters for WooCommerce because a store usually has more than one important page: shop, product, category, cart, checkout, account, and sometimes promotional landing pages. Without shared design values, you end up matching colors, fonts, borders, and spacing manually across every template.

Design Variables give you a shared foundation. When you use the same primary color, border color, heading font, body font, and spacing values across your Woo modules, your checkout feels like part of the same store instead of a separate WooCommerce screen.

This is especially useful for checkout because the page includes many small details: labels, input fields, section headings, table rows, payment options, notices, and the final Place Order button. Variables help you make those details feel consistent without restyling every element from zero.

We’ll set these up in Step 2 before building the layout. Once they’re in place, the rest of the checkout design becomes faster to refine and easier to update later.

What We’re Building

We’ll build a clean, two-column checkout page with billing, shipping, and order notes on the left, and the order summary and payment section on the right. The Woo Checkout modules handle the WooCommerce functionality, while Design Variables keep the layout aligned with the rest of the store.

Before you start, add at least one product to the cart in a separate browser tab. Checkout modules are easier to evaluate when WooCommerce has real cart data to display.

1. Set Up Divi 5 And WooCommerce

Before building, make sure WooCommerce and Divi 5 are installed and active. In WooCommerce, add at least one product and confirm that your Cart and Checkout pages are assigned under WooCommerce > Settings > Advanced. WooCommerce needs those pages assigned so customers can reach the cart and checkout flow correctly.

For Divi 5, download the theme from your Elegant Themes account.

Then upload the zip file to Appearance > Themes > Add New > Upload Theme in your WordPress dashboard.

Activate Divi 5 and connect your Elegant Themes account so the site can receive updates.

Once Divi 5 is active, go to the Theme Builder. This is where you’ll create a dedicated WooCommerce Checkout template and build the page with individual Woo modules instead of a single fixed checkout layout.

The screenshot below shows a Theme Builder setup after multiple WooCommerce templates have been assigned. Your site may only show the Checkout template at this point. If you’re building the rest of your WooCommerce templates too, follow this WooCommerce and Divi 5 guide.

2. Set Up Your Design Variables

Open the Visual Builder and click the Variable Manager icon.

Start with your core color variables: a primary color for buttons and highlights, a background color for sections, a text color, and a border color for form fields.

Then create font variables for headings and body text. Keep the body font readable, and make sure labels, field text, and table content stay comfortable on mobile.

Finally, define number variables for spacing values such as section padding, field padding, row gaps, and module margins. These values are especially useful when you start adjusting the checkout layout across desktop, tablet, and mobile.

3. Create A Checkout Template

Go to Divi > Theme Builder from your WordPress dashboard. Click Add New Template > Build New Template.

Scroll down to WooCommerce Pages, select Checkout, and click Create Template.

Next, click Add Custom Body and open it in the Visual Builder.

The canvas will open empty. In the next step, we’ll add the Woo Checkout modules that make up the full checkout layout.

4. Build The Checkout Layout

Start by adding a new section inside your checkout template, then add a single-column row. Inside it, add a Heading module. In the Content tab, find the Text > Heading field, hover over it, and click the Dynamic Content icon. Select Post/Archive Title so the page title pulls in automatically.

Next, insert the Woo Notice module and set the Page Type to Checkout in the Content settings. Keep this near the top so customers can see checkout-specific messages, validation errors, and coupon confirmations before they continue through the form.

Now add a new row with two columns. The left column will hold customer information fields, and the right column will hold the order summary and payment section. This keeps form entry and order review visually separate, which makes the checkout easier to scan.

Click into the left column and add the Woo Checkout Billing module at the top.

Below it, add the Woo Checkout Shipping module. If your store does not collect shipping details, you can leave this module out and keep the checkout shorter.

Then add the Woo Checkout Information module under the shipping section. This module handles optional order notes, so customers can add delivery instructions or other checkout details when needed.

Move to the right column and add the Woo Checkout Details module at the top. This displays the order summary, including products, quantities, subtotal, and total.

Below it, add the Woo Checkout Payment module. This is where WooCommerce displays available payment methods, payment form details, and the final Place Order action.

That’s the full checkout structure. With Design Variables already set, your colors, fonts, and spacing can now be applied consistently as you refine each module.

5. Refine The Layout And Style Each Module

With all modules in place, start with the two-column row. Open the row settings and adjust the column widths to around 60/40. Give the left column more room because customers spend more time entering billing, shipping, and order details there.

Then go to Design > Layout > Horizontal Gap and add space between the two columns so the form and order summary do not feel crowded.

Adjust the Vertical Gap as well to create consistent spacing between stacked modules. Then open the section settings and add top and bottom padding so the checkout area has breathing room.

Now go through each checkout module. Start with the Woo Checkout Billing module and open the Design tab. Review the label, field, text, spacing, border, and background settings. Use your variables where possible so the billing form matches the rest of the site.

Repeat the same process for the shipping and information modules. Keep field padding generous enough for mobile users, and make section titles easy to scan.

On the right side, style the Woo Checkout Details module as a clear order review box. A subtle background, border, or box shadow can help separate the summary from the rest of the form.

Then style the Woo Checkout Payment module. Make the payment options easy to read, leave enough room between radio buttons, and make sure the final Place Order button has the strongest visual weight on the page.

6. Improve Conversion Without Adding Distractions

A better checkout is not only about making it look branded. It should also remove unnecessary friction.

Start with the Woo Notice module. Style notices so errors, coupon confirmations, and important checkout messages are clearly visible. Use a background or border color that stands out, but keep it aligned with your design system.

Then review the Woo Checkout Payment module. The Place Order button should be the clearest call to action on the page. Avoid styling secondary actions, coupon notices, or login links in a way that competes with it.

A few WooCommerce settings outside Divi are worth checking before launch:

• Enable guest checkout if your store allows customers to order without an account.
• Only collect the fields you truly need for billing, delivery, taxes, and fulfillment.
• Make sure taxes, shipping costs, and totals are visible before the customer places the order.
• Confirm that your payment gateways display correctly inside the Woo Checkout Payment module.
• Add reassurance near payment, such as accepted payment methods, secure checkout copy, or a short returns note.

Keep this section practical. The goal is to make customers feel informed and confident, not to add more content to a page that should stay focused.

7. Optimize For Mobile And Save

Divi 5’s Flexbox layout controls make two-column layouts easier to adjust across screen sizes, but you should still review the checkout manually on tablet and mobile.

Switch to tablet and mobile views in the Visual Builder and check the full flow. The columns should stack cleanly, fields should be easy to tap, and the order summary should be readable without pinching or horizontal scrolling.

Pay special attention to:

• Field height and padding
• Label readability
• Spacing between checkout sections
• Payment method readability
• The Place Order button position and size
• Coupon and notice spacing

Once you’re satisfied, click the Save button in the Visual Builder.

Because this is a Theme Builder template, your changes apply to the assigned WooCommerce checkout page as soon as you save the template.

Before publishing the store or sending traffic to the checkout, place a test order. Check the full path from cart to checkout to order confirmation, including coupons, shipping rates, taxes, payment gateway behavior, confirmation emails, and the mobile layout.

Build Your Next Online Store In Divi 5

The checkout page is often the last WooCommerce page store owners customize, but it is one of the most important. By the time someone reaches checkout, they have already shown buying intent. The page should make the final step feel clear, trustworthy, and consistent with the rest of the shopping experience.

What you’ve built here is more than a styled form. It’s a branded checkout template made from individual Woo modules, supported by Design Variables that keep colors, fonts, spacing, and buttons consistent across your store.

From here, you can keep improving the experience as your store grows. Apply the same design system to your cart, product, shop, and account templates so every step of the WooCommerce journey feels connected.

The post How To Build Custom Woo Checkout Pages In Divi 5 appeared first on Elegant Themes Blog.

Preview

Here’s a quick look at the 17 Graphs & Charts sections included in the pack. The download is further down the post.

Download 17 Graphs & Charts For Divi 5

Get all 17 sections 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 (18 Exports)

After you download and unzip the file, you’ll find 17 styled Graphs & Charts section exports, plus 1 file containing all layouts.

Styled – Graphs and Charts Section 1 to 17 (17) → Seventeen fully styled graph and chart-inspired section layouts with visual data blocks, colorful chart elements, clear labels, polished spacing, and flexible structures that you can use as-is or customize.

Styled – Graphs and Charts Sections (All) → Imports all 17 designs into your Divi Library at once.

How To Use The Graphs & Charts Sections

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

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 Graphs & Charts Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Graph Or Chart 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 Graphs & Charts sections.

3. Update The Data, Labels, And Content

Once the section is on the page, replacing the placeholder content only takes a few clicks. Start by updating headings, chart titles, data labels, percentages, numbers, legends, captions, buttons, and supporting copy so the section matches your website, report, product, or campaign.

Because these sections rely on clear visual relationships between labels, chart elements, spacing, and color, it’s best to update one chart or data group at a time. This helps preserve the layout’s balance while making sure the information still reads clearly.

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

4. Adjust Styles (Optional)

These Graphs & Charts sections are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, borders, spacing, backgrounds, shadows, chart blocks, and data accents 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, and more.

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

If your section uses stacked bars, comparison cards, line-style elements, pie-style graphics, legends, stat blocks, or dashboard-style layouts, keep those relationships in mind as you edit so the design continues to communicate the data clearly.

Use Divi’s responsive editing tools to fine-tune spacing, stacking, chart width, label size, and alignment on smaller screens so every section stays readable across devices.

Tips For Effective Graphs & Charts Sections

Graph and chart sections work best when they make information easier to understand at a glance. Use these quick tips to keep your data visuals clean, useful, and easy to scan.

Keep The Main Takeaway Clear

Every chart section should communicate one primary idea. Use a strong heading, simple labels, and a clear visual hierarchy so visitors immediately understand what the data is showing.

Use Color With Purpose

Color can help separate categories, show progress, highlight growth, or call attention to the most important data point. Keep your palette focused so the chart remains easy to read.

Make Labels Easy To Scan

Readable labels make visual data more useful. Keep chart labels short, use consistent formatting, and make sure numbers, percentages, legends, and captions are easy to understand.

Keep Spacing Consistent

Charts need enough room to breathe. Keep spacing consistent between bars, cards, labels, legends, and supporting text so the section feels polished instead of crowded.

Check The Layout On Mobile

Graph and chart sections can change noticeably on tablet and phone screens as content stacks. Review your layout on smaller devices to make sure labels remain readable, chart elements still align, and the data is still easy to understand.

Start Building In Divi 5 Today!

These 17 Graphs & Charts sections give you a fast way to create polished visual data sections for landing pages, reports, dashboards, product pages, analytics highlights, case studies, service pages, and more. Swap in your numbers, update the labels, customize the styling if needed, and you’ll have a professional data-focused section ready in minutes with Divi 5’s Visual Builder.

The post 17 Graphs & Charts For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

The Loop Builder in Divi 5 takes a different approach. You design one post card with normal Divi elements, connect each part of that card to live post data, and Divi repeats it automatically for every item in your query.

In this tutorial, we’ll build a horizontal blog loop with one post card per row. Each card will have a featured image on the left, post content on the right, dynamic title, publish date, excerpt, and a linked arrow, plus pagination so visitors can move through the rest of your posts.

Why Build A Horizontal Blog Loop With The Loop Builder?

The Blog Module is useful when you need a blog feed quickly. For many sites, that is enough. But when you want to decide exactly how each post card is structured, where the image sits, how the meta line reads, how much space the excerpt gets, or what the read more element looks like, a fixed blog layout can start to feel limiting.

The Loop Builder is built for that situation. You choose the element that should repeat, turn on the loop option, define the query, and then build the card inside that looped element. Divi handles the repetition and swaps in the correct post data for each result.

Nothing inside the card has to follow a preset blog module structure. The image, title, date, excerpt, and arrow link are all regular Divi elements, which means you can style them the same way you would style the rest of your page.

This is especially useful for horizontal blog layouts. Instead of showing two or three compact cards per row, each post gets its own full row inside the content container. The result feels more editorial and gives every post enough space to stand on its own.

Learn Everything About Divi 5’s Loop Builder

What We’re Building

Before we get into the steps, here’s a quick look at the finished layout.

Each post appears as a horizontal card with the featured image on the left and the post content on the right. The content side includes the post title, publish date, excerpt, and a right-pointing arrow that links to the full post. Cards stack vertically down the page, and a Next → pagination link appears at the bottom when there are more posts to show.

Before you build the layout, make sure your posts have featured images. Manual excerpts are also helpful if you want tighter control over the preview text, although Divi can still pull an excerpt automatically.

Step 1: Set Up The Page Structure

Start by opening the page where you want your horizontal blog loop to live. If you are working from a blank page, click Use Visual Builder to launch the editor.

Click the blue + icon to insert a new section and choose Regular Section. A row is added automatically inside it.

Open the Section settings by clicking the section gear icon. Go to Design > Spacing and set the top and bottom padding to 60px. This gives the layout breathing room above and below the blog feed.

Inside the section, add a single-column row. This row is only for the page heading, so one column is all we need.

Inside the row, add a Heading module and type Blog as the heading text.

Open the Heading module settings and go to Design > Text. Set the Font Size to around 50px, choose a font weight that matches your site’s heading style, and keep the heading left-aligned.

Add enough bottom spacing after the heading so the first blog card does not sit too close to it. Once the heading looks right, move on to the row that will become the actual loop.

Step 2: Enable Loop On The Blog Row

Below the heading row, insert a new 2-column row. This row will become the repeated blog card. The left column will hold the featured image, and the right column will hold the title, publish date, excerpt, and link.

Open the Row settings and set the row’s Admin Label to Blog Nav. This label will make the loop easier to identify later when we connect the Pagination module.

With the same row settings still open, go to Content > Loop and toggle Loop Element on. Once enabled, this row becomes the repeating container. Everything built inside it will repeat for every post that matches the query.

Next, set up the query. Set Query Type to Post Type and Post Type to Posts. Set Posts Per Page to 3, Order By to Date, and Order to Descending so the newest posts appear first.

If you do not want sticky posts to override the normal date order, enable Ignore Sticky Posts as well.

The row will multiply in the Visual Builder to reflect the number of posts you set. The columns are still empty, but the loop is already active. Next, we’ll build the card structure inside the looped row.

Step 3: Build The Blog Card Structure

With the loop running, build the card inside the first looped row. We’ll start with the image column, then add the content elements on the right.

In the left column, click the + icon and add a Divider module. We’ll use this Divider as a background image container for the featured image.

In the right column, click the + icon and add a Heading module. This will become the dynamic post title once we connect it to loop data.

Below the Heading module, add a Group module. This Group will hold the meta line.

Open the Group settings, go to Design > Layout, and set the direction to Horizontal. Inside the Group, add a Text module and type Published on as the static label. Then add a second Text module next to it. This second Text module will pull the dynamic publish date in Step 5.

If you prefer an author-based meta line, add another Text module for the author and connect it to the loop author field before the date.

Below the Group, add another Text module for the post excerpt. This gives each card a short preview of the post before visitors click through.

Finally, add an Icon module at the bottom of the right column. Search for the → arrow icon and select it. This will become the read more link for each post.

Accessibility note: this tutorial uses the featured image as a background image so the card can keep a clean horizontal shape. If the image needs to carry important meaning, consider using an Image module connected to the featured image instead.

Step 4: Style The Blog Card

With the structure in place, style the card from the outside in.

Open the Row settings and go to Design > Border. Add a 1px solid border and set the color to a light gray such as #E0E0E0. This gives each card a subtle edge without making the layout feel heavy.

Still inside the Row settings, go to Design > Layout and set the Horizontal Gap to 0. This keeps the image column and content column flush against each other.

Open the right column settings and go to Design > Background. Add a soft off-white color such as #FAFAFA. This gives the text area a clean editorial feel and separates it from the image column.

Go to Design > Spacing and add 30px padding on all sides so the content does not sit against the card edge.

Go to Design > Layout and set the Horizontal Gap and Vertical Gap to 10px. This keeps the spacing between the elements inside the column consistent.

Open the Heading module and style the post title. A font size around 30px on desktop works well for this type of horizontal card, but adjust it to match your site. Keep the line height tight enough that longer titles still feel controlled.

Open the Group module settings and go to Design > Layout. Set the Horizontal Gap to a small value so the label and date sit on the same line without drifting apart. Then open each Text module inside the Group, go to Design > Text, set the Font Weight to Semi Bold, and make the font slightly smaller than the title.

Style the excerpt Text module so it reads clearly under the meta line. Keep the font size close to your body text size and use a comfortable line height.

For the Icon module, go to Design > Icon and set the color to match your site’s accent or link color. Set the size to around 30px, then align it to the right using Design > Alignment.

Step 5: Connect Dynamic Content

The card is built and styled. Now replace the placeholder content with live post data from the loop.

Open the Divider module inside the left column. Go to Content > Visibility and turn off Show Divider. This hides the divider line so only the background image shows.

Go to Content > Background and switch the background type to Image. Click the dynamic content icon on the image field and select Loop Featured Image. Each repeated card will now pull the featured image from its own post.

If the background image does not fill the image area, go to Design > Sizing and enable Grow to Fill. This helps the image container stretch with the card height.

Open the Heading module and go to Content > Text > Heading. Click the dynamic content icon and select Loop Post Title. The heading will now display the correct title for each post.

Still inside the Heading module, go to Content > Link. Click the dynamic content icon on the URL field and select Loop Post URL. This makes the title link to the correct post.

Open the second Text module inside the Group, the one next to the Published on label. Go to Content > Text, click the dynamic content icon, and select Loop Post Date.

Open the excerpt Text module and go to Content > Text. Click the dynamic content icon and select Loop Excerpt. If the excerpt feels too long for the card, adjust the dynamic content options so the preview stays short and balanced.

Open the Icon module and go to Content > Link. Click the dynamic content icon on the URL field and select Loop Post URL. The arrow now links to the correct post for each card.

Preview the page. Each card should now show its own featured image, title, publish date, and excerpt while keeping the same horizontal layout.

Step 6: Add Pagination

Once the loop is pulling live post data, add pagination so visitors can move through the rest of your posts. This matters because the query is set to show only three posts per page.

Inside the same section, add a new single-column row below the loop row. Keep this row outside the looped row. Search for the Pagination module and add it inside the row.

Open the Pagination module settings and go to Content > Target. Set the Target Loop to Blog Nav. This connects the Pagination module to the looped row we labeled earlier.

You can also customize the pagination labels. For this layout, a simple Previous and Next → style keeps the navigation minimal.

Save the page and preview it. If your site has more posts than the Posts Per Page value, the Pagination module will appear and move through the loop results.

Step 7: Optimize The Layout For Responsive Screens

The horizontal card works best on desktop, but smaller screens need a quick responsive pass. Switch to tablet and mobile view using the responsive toolbar and check how the cards stack.

On tablet and mobile, let the two columns stack so the featured image sits above the content. Then reduce the title size, tighten the excerpt if needed, and check the Divider height so the image does not collapse or take up too much space.

A good starting point is to keep the desktop title around 30px, reduce it on tablet, and reduce it again on mobile. For the image area, use a smaller minimum height on mobile so each card remains easy to scroll through.

Once the cards read well across desktop, tablet, and mobile, save the page and preview the finished layout.

Build A Horizontal Blog Loop With Divi 5’s Loop Builder Today!

You just built a custom horizontal blog loop in Divi 5 without editing theme files or writing custom code. Instead of forcing your posts into a preset Blog Module layout, you designed the card structure yourself, connected each element to loop data, and let Divi repeat the card automatically.

That is the strength of the Loop Builder. It gives you control over the layout while keeping the content dynamic. You can use the same approach for other post types too, including projects, products, events, resources, or team members. The structure stays the same: design one item, connect the dynamic fields, define the query, and let Divi handle the loop.

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