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

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

What’s New In Divi 5.11?

This is a quick follow-up to Divi 5.10. We implemented 18 bug fixes and improvements, along with four new modules!

Four New Modules

We released four new modules in Divi 5.11!

The charts module lets you build interactive charts in nine different formats and manage data using a brand new tabular data editor.

The Gravity Forms and Imagely modules add native modules for two of the most popular plugins in the WordPress ecosystem, making it easy to add and style custom forms and galleries inside the builder.

Finally, the payment button provides a simple way to configure PayPal and Stripe payment buttons.

Take the full tour. 👇

What’s Coming Next?

The Divi AI Agent is coming soon, and it will change everything.

With Divi 5, you will get the best of both worlds: an amazing visual interface and deep integration with the WordPress ecosystem, plus an AI-powered chat-based interface that allows you to orchestrate your own team of agents.

Divi’s AI agents have hundreds of skills and can work with you inside the builder just like a human.

Watch the latest sneak peek. 👇

Changelog

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

• Fixed Theme Builder Shop page templates not rendering on the frontend with WooCommerce 11.0.
• Added an Imagely Gallery module to Divi 5 with Visual Builder gallery selection and preview, full design controls, and Dynamic Assets-aware NextGEN resource loading.
• Added a native Divi 5 Gravity Forms module with Visual Builder preview, settings-driven form selection, and design controls for form output, validation, and paging controls.
• Fixed an issue where enabling Open in Lightbox on an Image Module with Grow to Fill sizing caused the image to shrink rather than fill its column.
• Fixed Visual Builder crashes caused by circular Global Color references and prevented those circular references from being created in the Variable Manager.
• Fixed an issue where the Link module displayed the link URL as visible text when Link Text was blank or reset, and fixed ET icon glyphs that were incorrectly HTML-escaped on the frontend for icon-only links.
• Fixed DevBot Slack notifications so pull request titles containing HTML tags or.
• Special characters now display correctly instead of breaking the message link.
• Fixed the first Blog loop post being converted to Divi Builder when a Theme Builder template with a Loop was saved from the page.
• Fixed the Return to Shop button not appearing on cart pages using Woo Notice and Woo Cart Products modules when the cart was emptied without refreshing the page.
• Fixed Global Link Variables rejecting SMS links that include a percent-encoded message body in the URL.
• Added a new Payment Button module with payment-specific settings while preserving Button design and behavior parity.
• Added a native Divi 5 Gravity Forms module with Visual Builder preview, settings-driven form selection, and design controls for form output, validation, and paging controls.
• Fixed Circle Counter module margin spacing issues when placed in flex containers without stretch alignment.
• Added CSS classes for flex alignItems property to Column, Section, Row, and Group modules, enabling better styling control for flexbox layouts.
• Added a new Charts module with table/CSV data input, multiple chart types, and comprehensive chart element styling controls.
• Fixed the desktop breakpoint being zoomed in by default when the widescreen breakpoint was enabled, instead of defaulting to 100% zoom.
• Fixed list items within text module rich-text fields; not inherited body text styles.

Jump Into Divi 5 Today

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

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

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

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

Now, in Part 9, we’re focusing on another common responsive layout question: how do you create flexible multi-column sections without reaching for CSS Grid every time? CSS Grid is still the right tool for true two-dimensional layouts, especially when you need precise row and column placement, overlapping items, or highly irregular grid patterns. But for many everyday layouts, such as card grids, split content sections, sidebar layouts, feature rows, and mixed-width columns, Divi 5’s Flexbox system gives you a faster, more visual workflow.

By combining Column Class, Layout Wrapping, Gap, Justify Content, Align Items, and Display Order, you can build responsive, grid-like column layouts directly inside the Visual Builder. In this post, we’ll show you how Column Class works, how it pairs with the Flexbox controls you’ve already learned, and how to create responsive column patterns that stay flexible across Desktop, Tablet, and Phone.

Let’s dive in.

Why You Often Don’t Need CSS Grid In Divi 5

Many designers assume that every multi-column layout needs CSS Grid. In Divi 5, that is not always the case. Flexbox is especially strong when you are building layouts that flow in one main direction, wrap onto new lines, and adapt naturally as space changes.

That covers many common website patterns, including:

• Equal-width feature grids
• Asymmetric content sections
• Card layouts with wrapped rows
• Content and sidebar combinations
• CTA sections with mixed column widths
• Responsive footer structures

There are several advantages to using Flexbox for these layouts:

• Cleaner alignment and spacing control: Justify Content, Align Items, and Gap let you manage alignment and gutters directly from the parent container.
• Easier responsive reflow: Column Class and Layout Wrapping let columns move onto new lines without duplicating sections or writing media queries.
• Flexible mobile hierarchy: Display Order lets you move important columns earlier or later at specific breakpoints.
• Simpler nesting: Module Groups, Nested Rows, and nested elements can each have their own layout context when part of a Flex structure.

That said, CSS Grid still has its place. Use Grid when your design needs precise two-dimensional control over rows and columns, offset placement, overlapping elements, or a layout that should follow a fixed grid map instead of a natural flex flow.

For many Divi layouts, though, Flexbox is enough. It keeps the structure visual, responsive, and easier to adjust inside the builder.

Understanding Column Class

Column Class is one of the most important sizing tools in Divi 5’s Flexbox system. It lets you choose how much horizontal space a Column should take inside a Flex row. Instead of setting fixed pixel widths, you choose a predefined fraction. Divi then uses that value as the Column’s width basis inside the Flex layout, while still working alongside Gap, Layout Wrapping, and other Flexbox controls.

What Column Class Actually Does

When you set a Column Class on a Column, you are defining how wide that Column should be within the Row’s Flex layout. For example:

• Fullwidth uses the full available row width.
• 1/2 creates a half-width column.
• 1/3 creates a third-width column.
• 1/6 creates a narrower column that can fit into denser multi-column layouts.

This makes it easier to create equal and asymmetric layouts without writing custom CSS.

You can choose from several predefined widths, including Fullwidth, 3/4, 2/3, 1/2, 1/4, and more. You can also choose No Column Class when you want the Column’s size to be determined by its content and other sizing behavior instead of a predefined fraction.

How Column Class Works With Layout Wrapping

Column Class becomes especially useful when combined with Layout Wrapping. When Wrap is enabled, Columns can sit side by side as long as there is enough available space.

When the combined Column widths and Gap values no longer fit on one line, the Columns can wrap onto the next line. Each Column still respects its Column Class value after it wraps.

This is the core pattern behind many responsive, grid-like layouts built with Flexbox.

Responsive Column Class

Column Class can be adjusted per breakpoint. That means a layout can use wider multi-column settings on Desktop, simpler two-column settings on Tablet, and a single-column stack on Phone.

For example, six Columns set to 1/3 on Desktop may work well in a wide layout, but that same structure may feel cramped on Tablet or Phone. In that case, you can adjust individual Column Class values at a lower breakpoint or apply a Structure Template from the Row’s Content tab to update multiple Columns faster.

This gives you responsive structure control without writing media queries or duplicating the same content for different devices.

Combining Column Class With Other Flexbox Controls

Column Class controls the width of the Columns, but the surrounding Flexbox settings control how those Columns align, wrap, space, and reorder. The strongest layouts usually combine several of these controls.

Layout Direction + Layout Wrapping

For column layouts, you’ll usually keep Layout Direction set to Row so Columns flow horizontally.

When you enable Layout Wrapping, Columns can move to the next line when they no longer fit side by side. This is what allows one Row to behave like a responsive multi-row layout.

Justify Content And Align Items

Justify Content controls how Columns are distributed along the main axis. Useful options include Start, Center, Space Between, and Space Evenly.

Align Items controls alignment along the cross axis. In a horizontal row, that usually means vertical alignment. Stretch is useful when you want Columns in the same line to share the available height.

Together, these controls help you refine how Columns sit within the Row after their widths are defined by Column Class.

Horizontal Gap And Vertical Gap

As we covered in Part 8, Gap is usually the cleanest way to control repeated spacing between related elements. Apply Horizontal Gap on the Row to create gutters between Columns.

Apply Vertical Gap on the Row to control spacing between wrapped lines of Columns. You can also apply Vertical Gap to individual Columns or Module Groups to control spacing between modules inside them.

Using Gap instead of repeated margins keeps spacing easier to adjust when Columns wrap on smaller screens.

Display Order

Display Order lets you change the visual order of Columns without moving them in the page structure. This is especially useful at Tablet and Phone breakpoints. For example, you can keep a text Column first on Desktop but move an image Column above it on Phone by giving the image Column a lower Display Order value, such as -1.

Use Display Order selectively. Since visual order can differ from source order, test keyboard focus and reading flow when reordering important interactive content.

Practical Examples

Now that you understand how Column Class works and how it combines with other Flexbox controls, let’s look at five layouts. Each example demonstrates a different responsive column pattern you can build with Flexbox, without switching to CSS Grid.

Example 1: Equal Multi-Column Grid

Layout: This Section uses two Rows: one wider intro Row with a Column set to Column Class > 2/3, and another Row with twelve equal items set to Column Class > 1/6. The item Row creates a responsive grid-like layout that can shift from six Columns on Desktop to fewer Columns per line on smaller screens.

Demonstrates: Equal Column Class values, Layout Wrapping, and Gap for consistent gutters.

Example 2: Content + Stats + Quote Bar

Layout: This layout pairs a visual card on the left with body text and three key stats on the right, using a Nested Row for the stats. A full-width quote bar sits underneath.

Demonstrates: Mixed Column Classes, Nested Rows, optional Display Order, and multi-level Gap control.

Example 3: Asymmetric Card Layout

Layout: This Section uses five Columns. The first and last Columns are set to Fullwidth, while the second, third, and fourth Columns use Column Class > 1/3.

Demonstrates: Fullwidth and fractional Column Class combinations, Layout Wrapping, Horizontal Gap, and Vertical Gap.

Example 4: Classic 3×2 Feature Grid

Layout: Six equal feature cards sit inside one Flex Row and wrap into multiple lines.

Demonstrates: Simple responsive Columns using Column Class, Gap, and Align Items.

Example 5: Split Content + Info Card

Layout: Large text and buttons sit in the top area, while a dark information panel or table-style card sits below.

Demonstrates: Asymmetric Column Class combinations, Fullwidth rows inside a wrapping Flex structure, and Justify Content > Space Between for distribution.

Step-By-Step Build: Creating A Flexible One-Row Layout

This example shows how to build a multi-column layout using one Flex Row, several Columns, Column Class values, Gap, and targeted alignment settings. On Desktop, the Columns create a balanced multi-line composition. On Tablet and Phone, the same structure reflows with responsive Column Class changes and a Structure Template.

Configure The Row Structure

Start by opening a page in the Visual Builder or adding a new Section to an existing page. Add a single-column Row to the Section.

In the Row settings, go to the Design tab. Expand the Layout option group and apply a 25px Horizontal Gap and 25px Vertical Gap. Then enable Layout Wrapping > Wrap.

Configure The First Column

Open the Column settings, go to the Design tab, and expand the Sizing option group. Set Column Class to 2/3.

Next, expand the Layout option group in the Design tab. Set the Vertical Gap to 15px. Keep the remaining Flex settings at their defaults unless your design needs additional adjustments.

In the first Column, add two Text modules. Add your content and style it as needed.

Add A Second Column

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

Open the new Column’s Design tab, expand the Layout option group, and add a 15px Vertical Gap.

Next, expand the Sizing option group and assign Column Class > 1/2.

Add an Image, a Heading, and a Text module to the Column, then style them as needed.

In the Column’s Design tab, add a border, border radius, and spacing.

Add A Third Column

Add another Column to the Row and assign Column Class > 1/3.

Then right-click the second Column’s Border styles and copy them to the third Column. Add 25px Padding in the Spacing option group to give the Column breathing room.

While in the Design tab, expand the Layout option group. Set Justify Content to Space Between.

Next, add the content to the Column. Add a Heading, a Text module, and a Module Group, then style them as needed.

Inside the Module Group, add a Divider module and a Text module. Then open the Module Group’s Design tab, expand the Layout option group, and set a 5px Vertical Gap.

Configure The Fourth Column

Finally, add another Column to the Row and assign Column Class > 1/6.

Right-click the third Column and select Copy Attributes.

Then right-click the fourth Column, choose Paste, and use Select Design Attributes to paste the border attributes. Repeat the process for the spacing and layout attributes.

Next, add a Module Group to the Column. Place a Heading module and a Text module inside it. Open the Module Group’s Design tab, expand the Layout option group, and set the Vertical Gap to 0px.

Copy the Module Group twice and update the Heading and Text content for each Group.

Make Responsive Adjustments

Switch to the Tablet breakpoint. Keep the Gap and Flex settings the same as Desktop for now, but change a few Column Class values so the content flows more naturally.

Starting with the first Column, change the Column Class from 2/3 to Fullwidth.

Leave the second Column as is, but change the third Column’s Column Class to 1/2.

Change the fourth Column’s Column Class to Fullwidth and change its Layout Direction to Row. This places the Module Groups side by side inside the fourth Column instead of stacking them vertically.

Now switch to the Phone breakpoint. Instead of editing every Column Class manually, apply a Structure Template to resize the Columns for smaller screens. In the Row’s Content tab, expand the Elements option group and click Apply Structure Template.

Choose the Single Row template to apply it to all Columns in the Row.

Now, as you cycle through breakpoints, the same Flex section adapts to Desktop, Tablet, and Phone without rebuilding the layout from scratch.

Tips And Best Practices

Here are a few practical guidelines to help you get the most out of Column Class and Flexbox in Divi 5:

• Choose Column Class combinations carefully: Start with the simplest fractions that achieve your design, such as 1/2, 1/3, 1/4, and 2/3. Complex combinations can make responsive adjustments harder to track later.
• Use Layout Wrapping when one Row should become multi-line: If the layout contains related items, such as cards or stats, one wrapping Row can be easier to manage. If the content types are very different, multiple Rows may still be cleaner.
• Manage spacing with Gap at the right level: Use Row-level Horizontal Gap and Vertical Gap for spacing between Columns and wrapped lines. Use Column-level or Module Group-level Gap for spacing between modules inside each Column.
• Test with real content: Placeholder text can hide wrapping and alignment issues. Use realistic headings, paragraphs, button labels, and image dimensions before finalizing the responsive structure.
• Use Grow To Fill only when it solves a clear alignment problem: Grow To Fill can help equalize internal spacing in card-style layouts, especially when combined with Justify Content > Space Between, but it should not replace a clean structure.
• Avoid overcomplication: Column Class, Gap, and Layout Wrapping are enough for many responsive column layouts. Add Justify Content, Align Items, Display Order, or Grow/Shrink only when they solve a specific issue.

Download The Files

To help you explore responsive Columns in Divi 5, we’ve created a zip file with the layouts used in this post. To use them, go to Divi > Divi Library in the WordPress dashboard and click the Import & Export button.

The zip file includes seven files: one Flexbox Columns – ALL.json file, individual JSON files for examples 1-5, and one JSON file for the step-by-step example.

To import the files, select the Import tab, choose a file, and click Import Divi Builder Layouts.

Next, open a new or existing page in the Visual Builder. Click the blue + icon to add a new Section.

Click the Add From Library tab and select a layout to load it onto the Canvas.

Download the Files

Download For Free

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

DOWNLOAD

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

Build Responsive Columns In Divi 5

With Column Class and the Flexbox controls in Divi 5, you can create flexible multi-column layouts that adapt across breakpoints without reaching for CSS Grid in many common scenarios. You’ve now seen how to define Column widths, combine them with Layout Wrapping, Gap, Justify Content, Align Items, and Display Order, and adjust the same layout structure across Desktop, Tablet, and Phone.

In the final installment of the series, Part 10 Of Mastering Flexbox: Best Practices And Helpful Tips, we’ll bring everything together with practical recommendations, common pitfalls to avoid, and workflow tips for building cleaner Flexbox layouts in Divi 5.

Download the example layouts from this post, experiment with different Column Class combinations, and start applying these patterns to your own projects. Once you understand how Column Class, Gap, and Layout Wrapping work together, responsive Columns become much easier to build and maintain.

The post Part 9 Of Mastering Flexbox: Creating Responsive Columns Without CSS Grid appeared first on Elegant Themes Blog.

I’ve spent years writing about WordPress, and lately I’ve spent just as much time working with AI tools — including a fair bit of my own vibe-coding — so this question isn’t academic for me. My answer, if you want it up front: WordPress isn’t dying. What I think is happening is that it’s assimilating AI. Maybe slower than the loudest voices might like, but it’s assimilating it. The way I see it, AI isn’t really a competitor to WordPress — it’s closer to a utility. Like electricity, or like automation before it: something every platform plugs into, not something that replaces any one of them.

One thing to remember is that saying “WordPress survives” or “WordPress will survive” isn’t the same as “nothing changes.” There’s a real reshuffle coming, with genuinely exciting new products and incumbents nobody was watching two years ago. Even the tools I reach for — Divi AI among them — are part of that reshuffle, not outside of it.

Three Camps, One Question

Ask “is AI going to kill WordPress?” and you’ll basically get one of three answers.

Camp one says yes, outright — why hand-build a site when you can describe one to an AI and skip WordPress entirely. Camp two says we’ve heard this before — page builders, Wix, headless, every “WordPress killer” of the last decade — and WordPress, still powering something like 41.5% of the web, has remained. And camp three says WordPress capitalizes on AI and grows from it, bending with the trend instead of breaking under it.

That’s the easy version of this narrative: one thing dies, another comes out on top. I don’t think it’s wrong, exactly, but I do think it’s woefully incomplete.

What Vibe-Coding Taught Me About What Actually Lasts

Here’s where I’ll admit my own bias. The excitement lately has moved hard toward vibe-coded everything — describe what you want, watch an agent build it in front of you. The first time you do this, it’s a genuinely magic feeling. I’ve built a bunch of these myself: small tools, one-off apps, a to-do app or two (we’ve all built one, right?). Some I abandoned. A couple I finished, and no one cared about. That forced an uncomfortable realization: the magic of the generation is not everything you need for something to succeed.

Once you look at the list of things that actually pair well with AI to make a success story, it becomes obvious that AI is a key piece, but not the whole foundation. Nobody really wants to reinvent the wheel, and even fewer people want to maintain the wheel they just reinvented. Vibe too hard with nothing stable underneath you, and you can vibe a project straight into the ground (I’ve done it).

Mature products — WordPress, the mass-market page builders, the go-to plugins — are stable ground precisely because they’re mature yet actively developed. We don’t need to reinvent the ground to use today’s newest tools on top of it. We get to stand on the shoulders of a giant while doing genuinely novel things with AI. That’s much less dramatic than “WP dies, and something else replaces it,” but I think it’s the truer story.

AI Inside WordPress Isn’t One Thing — It’s Many Things

Part of why the either/or framing is so contentious is that AI isn’t cropping up in one place within WordPress. It’s showing up at every layer of the stack at once: content generation, inside the core of the CMS, design and page building, and dev/maintenance work underneath it all.

AI has been a tide that has lifted all boats, especially those in the WordPress waters.

WordPress core is treating AI as infrastructure and not a bolt-on — the Abilities API lets any plugin or theme register machine-readable functionality, and an AI agent (through an API) can discover and call tools they can actually reach in and use.

This might be happening more slowly than you’d like. There might be some drama associated with it. But this is WordPress and has always been WordPress. The AI wave is just the latest example of how WordPress adapts in its unique, quirky ways to external winds.

That’s the core layer, but there is more. Way more. Third-party developers are doing genuinely cool, novel things on top of it, and the major page builders are running their own AI race in parallel — Divi AI and Elementor’s Angie are bringing agentic capabilities to traditional page builders. Newcomers on the block, such as Builderius, Novamira, ZipWP, and countless others, are also making WordPress AI-fluent in their own ways.

None of this is one story. It’s several stories unfolding at the same time, each in different ways.

The Reshuffle: New Incumbents, Old Advice

Cloudflare’s EmDash made a splash earlier this year as an “AI-native” alternative built in Astro with its own MCP server baked in — the kind of thing that gets called “the next WordPress” before anyone knows if it’ll actually have legs. I’m not going to codify EmDash here as the successor to anything; time will tell whether it specifically sticks around, no less replacing WordPress. But it won’t be the only project making that pitch — expect more Astro-based, AI-first content platforms showing up with the same story.

What’s easy to miss is that WordPress saw this coming a while ago. Matt Mullenweg’s advice to “learn AI deeply” dates back to his State of the Word address in 2022, and was reinforced again in 2023 — years before AI website builders became mainstream, probably before you were even paying for ChatGPT. He and his comments back then aren’t special on their own because people across WordPress were experimenting with AI just as early, at every layer of the project.

I was an early adopter of ChatGPT and was still later than many in WordPress

Whatever you think of how quickly Core has shipped AI, it’s irrefutable that thousands have been developing AI in their own lanes within WordPress for a long time now. Worth remembering next time someone frames this situation as WordPress playing catch-up.

What We Don’t Know Yet

The market-share decline is a hot storyline, and it’s worth being honest about. WordPress sits around 41.2% of the web as of August 2026, down from a peak nearer 43.6% in early 2025 — a real slide of about 2.4 points. It could keep going. It could also level off, or it could partly be a measurement artifact: a wave of AI-generated static sites gets counted as “no CMS” in the tracking data, whether or not each one is actually pulling a comparable visitor away from a comparable WordPress site.

The decline is real — but it flattened over the summer, a reminder that this isn’t a straight line down and the narrative is running well ahead of the data. This is the nature of media. We want a story, and it might as well be spicy.

There’s a bigger open question underneath that one, and it’s the one I’m actually curious about: nobody’s really tracking the longevity of the businesses behind all these vibe-coded sites, not just the sites themselves. There is reason to believe that a lot of vibe-coded sites might be short-lived. I wonder about the businesses behind them, too.

Plenty of them are sitting on a free Vercel domain that costs nothing to keep alive long after the business behind it has quietly stopped mattering. A live URL isn’t the same as a living business. That part is genuinely open-ended — time will tell.

It matters most at the moment you’d actually act on it. Before you migrate a client off WordPress for something an AI spun up in an afternoon, it’s worth asking who maintains that site once the magic wears off. Every vibe-coded site is a bet that its owner wants to keep prompting forever — re-prompting it back to health every time something breaks, keeping every connected system wired together by hand. Some owners will genuinely want that. Plenty, once they realize maintenance is now their job, are going to want ground that’s maintained for them instead.

The U.S. has seen an uptick in new businesses, and economists are lauding AI as the impetus. We’ll see the long tail of all of this in time. Wouldn’t it be funny if these businesses wandered into WordPress because it offered them both AI and stability at the same time?

Or maybe not. This is the future, and nobody actually knows. Maybe AI gets so cheap that every visit generates a fresh arrangement in real time, and there’s no “website” in the sense we mean today. Who knows, it’s all speculative. That’s kind of the point.

The Story We’ll Be Telling In A Couple Years

Put it together, and here’s where I land: WordPress and AI are both too big to just cancel each other out. They’ll interface, because WordPress isn’t the sort of thing that goes away silently, and its stability — the same stability that makes it feel slow to some people right now — is exactly what lets it adapt without breaking.

The part I keep coming back to, probably because I work at Elegant Themes, is that many of the page builders that helped WordPress get this big in the first place are the same ones racing hardest on AI right now. If they run that race well, WordPress might just get something like a second life through them — not because core alone outshipped everyone, but because the entire ecosystem that made WordPress dominant the first time is doing it again. Page builders aren’t the only part of that, but they’re the ones with the most touchpoints with competing AI-native tools like Claude Design, Figma AI, and the whole lot.

That’s the story I think we’ll actually be telling in a couple of years, not “AI killed WordPress” and certainly not “nothing has changed with WordPress.”

If you want to see Divi 5‘s take on this develop in real time, subscribe to the blog — we’re pouring a lot of development and testing into Divi AI Agents over the next few months, and it’s only going to get better. For those who are in the habit of testing various AI tools, grab a month of Divi AI and see what it can already do and how it changes.

Get Divi AI

The post Is AI Going To Kill WordPress? appeared first on Elegant Themes Blog.

The charts module lets you build interactive charts in nine different formats and manage data using a brand new tabular data editor.

The Gravity Forms and Imagely modules add native modules for two of the most popular plugins in the WordPress ecosystem, making it easy to add and style custom forms and galleries inside the builder.

Finally, the payment button provides a simple way to configure PayPal and Stripe payment buttons.

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

Four New Modules for Divi 5

Our team is crushing it on the module front. Last week we released two new modules, and now we are back with four more!

Charts

The charts module makes it easy to add interactive charts and visually display data to your visitors.

There are nine chart types to choose from (Line, Area, Bar, Radar, Pie, Doughnut, Polar Area, Scatter, and Bubble), along with a full suite of design settings for customizing your chart design.

And with the charts module, there is more than meets the eye. Not only can you create a variety of interactive charts, but you can also manage tabular data using a brand new table editor. You can quickly populate charts by uploading a CSV file, or jump in and manage the chart’s data source at any time from within the builder using a sleek interface.

Gravity Forms

When you have Gravity Forms installed, you will find a new Gravity Forms module in Divi’s module list.

You can use it to embed any of your Gravit Forms forms and style them using Divi’s wide range of design settings.

With the addition of form field presets and pseudo-class editing, you now have full control over the default appearance of your website’s forms. When you add a form using the Gravity Forms module, it will automatically match your website’s design. Easy!

Imagely

Much like the Gravity Forms module, the Imagely module makes it easy to embed Imagely galleries and style them using all of Divi’s design settings and presets.

Imagely offers a variety of gallery types, including sliders, and the module gives you control over the elements of each.

Payment Button

The payment button module is very simple and lets you configure payment buttons for PayPal and Stripe. It makes it easy to accept payments directly without using a complex e-commerce plugin, assuming you don’t need to manage products and fulfillment on your WordPress site.

While this module is incredibly simple at the moment, it may serve as a base for better out-of-the-box ecommerce functionality in the future.

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 Divi 5’s New Loop Filter Modules?

We released new Loop Filter modules last week.

Divi 5 has a very powerful loop-building system, and today that system becomes even more versatile. Now, users can search, filter, and reorder loops on the front end. You can build custom forms that query post content, taxonomies, and custom fields, adding an entirely new dimension to loops.

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 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 Four New Modules for Divi 5 (Charts, Gravity Forms, Imagely & Payment Button) appeared first on Elegant Themes Blog.

In Part 8, we’re focusing on one of the biggest workflow shifts in Divi 5: controlling spacing with Gap instead of relying on margin for every spacing adjustment.

Many Divi users are used to spacing elements with individual margins. That habit can still work in specific cases, but it often creates extra cleanup when items wrap, stack, or change direction across breakpoints. In Divi 5, Horizontal Gap and Vertical Gap give you a cleaner way to control spacing between direct child elements from the parent container.

In this post, we’ll show you how Gap works, where to apply it, when margin still makes sense, and how to use Gap to create cleaner spacing systems for rows, columns, Module Groups, Nested Modules, buttons, cards, vertical lists, CTAs, and footers.

Let’s dive in.

Why Some Divi Users Struggle With Spacing In Flexbox

If you’ve ever built a layout in Divi 5 and wondered why spacing still appears after resetting margins or padding, the issue is usually not one single setting. Spacing can come from the parent container, the child elements, the layout direction, default gap values, or nested structures.

Many designers still add margins to individual modules, buttons, columns, or links out of habit. That can be useful for one-off adjustments, but it is not always the best way to create consistent spacing between a group of related items. When content wraps onto additional lines, margin-based spacing can create uneven gutters, extra edge spacing, or breakpoint-specific cleanup.

Another common source of confusion is where spacing should be applied. Should it go on the Section, Row, Column, Module Group, nested element, or module itself? If you apply Gap to the wrong container, nothing may appear to change because Gap only affects the direct children of the container you’re editing.

Headers, button groups, card grids, icon lists, tag clouds, and footer link groups make this especially noticeable. They often contain several nested layers, so the right spacing control depends on which elements need space between them.

How Gap Changes The Workflow

Divi 5’s Horizontal Gap and Vertical Gap controls let you add space between direct child elements at the parent container level. Instead of pushing each item away from the next item with margin, you define the spacing once on the container.

This gives you:

• Cleaner spacing logic: One parent setting controls the spacing between related items.
• More consistent wrapped layouts: Horizontal and Vertical Gap can handle spacing between items and wrapped lines.
• Easier responsive adjustments: You can adjust one parent value at a breakpoint instead of editing every child element.
• Fewer margin resets: You do not need to remove margin from the first or last item just to avoid extra edge spacing.

Gap does not replace margin in every situation, but it should usually be your first choice when the goal is to space items inside the same Flex container.

Understanding Gap Vs. Margin In Divi 5

To understand why Gap is so useful, it helps to separate two different spacing jobs. Margin creates space outside an individual element. It is useful when one specific module needs a custom offset, when you need space around the outside of a container, or when you want to create an intentional overlap or special effect.

Gap creates space between direct child elements inside a parent container. It is a container-level spacing control, which makes it ideal for button groups, card grids, vertical stacks, link rows, icon lists, and nested Module Groups. Horizontal Gap controls the horizontal spacing between items when they sit side-by-side.

Vertical Gap controls the vertical spacing between stacked items or wrapped lines, depending on the container and layout direction.

Gap does not add space to the outer edges of the container. It adds space between the direct children. That difference is what makes it cleaner for repeated elements: you get consistent spacing without first-child or last-child margin cleanup.

Key Differences Between Gap And Margin

Let’s use a row of buttons as an example. With margin, you might add a 20px right margin to each button except the last one. That can look fine on Desktop, but once buttons wrap or stack, you may need separate mobile rules to fix uneven spacing.

With Gap, you set a 20px Horizontal Gap and 20px Vertical Gap once on the parent container, such as a Column or Module Group. The buttons stay evenly spaced whether they remain on one line or wrap onto additional lines.

Where To Apply Gap

Gap only affects the direct children of the container you’re editing. That means the correct place to apply it depends on which elements you want to space. Use Gap controls on Sections when you want to control spacing between Rows inside that Section.

Apply Gap to a Row when you want to control spacing between Columns.

Apply Gap to a Column when you want to control spacing between modules inside that Column.

Apply Gap to a Module Group when a nested group of buttons, links, icons, or text elements needs its own spacing system.

Apply Gap to Nested Modules when the parent module contains nested elements that need their own spacing, such as a Text module nested inside a Heading module.

You can also use Gap inside modules that contain multiple internal elements, such as an Icon List, Blurb, Call To Action, or another module with multiple layout items.

Default Gap Behavior

When you add new Flex containers in Divi 5, some default Gap values may already be present. These defaults help create initial spacing, but you should adjust them based on the layout you are building.

When you add a new Flex Section to a page in the Visual Builder, the default is set to 60px for both Horizontal Gap and Vertical Gap. To change those values, open the Section’s Design tab, expand the Layout option group, and adjust the Gap controls.

New rows in Divi 5 start with a 5.5% Horizontal Gap and a 30px Vertical Gap.

At the Column level, 30px Horizontal Gap and 30px Vertical Gap are the defaults.

You can still use small, targeted margins when needed, such as when you want to create an overlap effect, offset one module, or fine-tune spacing outside a container. For repeated spacing between related items, Gap is usually cleaner and easier to maintain.

Divi 5 also supports Advanced Units, including values such as px, %, rem, vw, clamp(), and calc(). You can combine those with Design Variables to create more consistent spacing systems across a site.

Practical Examples

Now that you understand how Gap works and when it is usually better than margin, let’s put it into practice. Below are five layouts that show how to apply Horizontal Gap and Vertical Gap at different levels, from button groups and card grids to vertical lists, CTAs, and mixed-column footers.

Example 1: Hero Section

This is one of the most common layouts on modern websites. A hero section usually needs spacing between the main columns, spacing between stacked text elements, and spacing between CTA buttons. Gap lets you control each of those areas from the right parent container.

Using Margin: You might add right margins to buttons, bottom margins to headings or text modules, and separate responsive tweaks when the layout stacks. This can work, but it spreads spacing decisions across multiple child elements.

Using Gap: A two-column Row with an inner Module Group keeps spacing centralized. The Row controls spacing between columns, the Column controls spacing between text elements, and the Module Group controls spacing between buttons.

Settings Used: The parent Row has both Horizontal Gap and Vertical Gap set to 0px. Inside the left Column, a 25px Vertical Gap creates consistent rhythm between the headline, supporting text, and button group. The Module Group wrapping the two buttons uses Layout Direction > Row with a 10px Horizontal Gap and 10px Vertical Gap for spacing between the CTAs.

Example 2: Feature Card Grid

Feature cards are a great use case for Gap because they need consistent gutters between cards and predictable spacing inside each card.

Using Margin: You might start with a prebuilt three-column row and then add margins inside each card to adjust the space between the icon, heading, body text, and button. When the cards stack or wrap, those margins can become harder to manage across breakpoints.

Using Gap: A single Row with Horizontal Gap and Vertical Gap controls the gutters between cards. Inside each card, Column-level Gap controls the vertical rhythm between the internal modules.

Settings Used: The parent Row uses a 30px Horizontal Gap and 30px Vertical Gap. Each Column has a 20px Vertical Gap to control spacing between the icon, heading, text, and button inside the card. The Heading module nests a Text module through the Elements option group in the Content tab, with a 15px Vertical Gap to control the space between the heading and supporting text.

Example 3: Vertical Feature List

Many sections use a vertical list of features or benefits. This example shows how row-level and column-level Gap can work together in a split layout.

Using Margin: You might add bottom margins to each module and then use additional margins inside each Blurb to adjust the relationship between icons, headings, and text. That approach becomes tedious when the layout changes across breakpoints.

Using Gap: Row-level Gap controls the spacing between the main columns, while Column-level and module-level Gap controls the rhythm of the feature list.

Settings Used: The parent Row uses a 25px Horizontal Gap and 25px Vertical Gap. The right Column uses a 60px Vertical Gap on Desktop, reduced to 25px on smaller breakpoints. Each Blurb module in the right Column uses Layout Direction > Row with a 20px Horizontal Gap to control the spacing between the icon and text.

Example 4: Call To Action

This pattern is useful when you want to present multiple action options while keeping one button visually prioritized.

Using Margin: You might place several Button modules in a row and manually add right margins to each one except the last. When the buttons wrap or stack, those margins often need breakpoint-specific adjustments.

Using Gap: A single Module Group with Layout Direction > Row and Gap creates consistent spacing between buttons. On Phone, you can adjust button widths in the Sizing option group and use Display Order if the primary action needs to appear first.

Settings Used: The parent Module Group uses Layout Direction > Row with a 20px Horizontal Gap and 20px Vertical Gap. The primary Book A Demo button uses a solid fill for emphasis, while the other buttons use a quieter outlined style. This creates visual hierarchy while keeping spacing controlled by the parent group.

Example 5: Footer With Mixed Columns

This footer combines a wider branding and CTA area with several narrower link columns, which makes it a strong example of spacing at multiple layout levels.

Using Margin: You might start with a prebuilt row template, adjust gutter width, add margins inside each column, and use extra rows for the lower footer content. That can make the structure harder to maintain as the footer changes.

Using Gap: A single Flex Row can use row-level Gap for spacing between columns, while individual Columns use Vertical Gap for their internal content. This keeps the spacing system easier to understand.

Settings Used: At the Row level, apply a 40px Horizontal Gap and a 30px Vertical Gap on Desktop and Tablet.

Then reduce the Horizontal Gap to 25px at the Phone breakpoint.

The footer contains six columns with different Column Class settings. The first Column uses Column Class > 2/5 and has a 15px Vertical Gap on all breakpoints.

Columns two, three, and four use Column Class > 1/5 and a 10px Vertical Gap on all breakpoints.

The final two columns use Column Class > 1/2 and a 15px Vertical Gap.

These examples show how Gap solves common spacing challenges in Divi 5. The main principle is simple: control spacing from the parent container whenever you are spacing a group of related child elements.

Common Issues And Best Practices

Even with Gap, a few common issues can still come up. Here’s what to check first:

• Gap is not appearing: Make sure the container is set to Layout Style > Flex. Gap applies to the direct children of the container you’re editing. Nested elements deeper than one level need Gap applied to their immediate parent.
• Spacing feels too large on mobile: Check the Tablet and Phone breakpoints. Reduce Horizontal Gap and Vertical Gap values when stacked content starts to feel too spread out.
• Borders or box shadows feel too separated: Gap creates space between elements, while borders and shadows stay attached to the elements themselves. If the design feels too loose, reduce the Gap or adjust internal padding.
• Content still looks uneven: Gap keeps spacing consistent, but content length still affects visual balance. Test with realistic headlines, button labels, descriptions, and link counts.

Pro Tip: Start with Gap for spacing between related items. Use small, targeted margins when you need outside spacing, an intentional overlap, a single-module adjustment, or a special effect that Gap cannot create on its own.

Download The Files

Want to explore these layouts yourself? Download the pre-built Divi 5 layouts used in this post and open them in the Visual Builder to see how the Gap settings are applied. There are six files in total, including individual section JSON files and a Spacing With Gap – All.json file that contains all sections.

To use them, navigate to Divi > Divi Library in the WordPress dashboard and click the Import & Export button.

Click the Choose Files button, upload the Spacing With Gap – All.json file, and select Import Divi Builder Layouts.

Next, create a new page or open an existing one in the Visual Builder. Hover over the Canvas and click the blue + icon to add a new section.

Choose the Add From Library tab and select a layout to load it onto the Canvas.

Download the Files

Download For Free

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

DOWNLOAD

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

Build Cleaner Layouts Start With Flexbox Gap In Divi 5

Gap is one of the most useful spacing tools in Divi 5‘s Flexbox system. By moving spacing control to the parent container, you can avoid uneven gutters, last-item margin resets, and many of the responsive spacing issues that come from using margin for repeated layout patterns.

Whether you’re building button rows, feature card grids, vertical lists, CTA groups, or mixed-column footers, Gap gives you a cleaner way to manage spacing between related elements.

In the next installment, Part 9 Of Mastering Flexbox: Creating Responsive Columns Without CSS Grid, we’ll show you how to combine Flexbox with Column Class to create responsive column layouts without leaving the Visual Builder.

Download the files from this post, experiment with the Gap controls, and start applying them to your own layouts. Once you start moving repeated spacing decisions to the parent container, your Divi 5 layouts become easier to adjust, reuse, and maintain.

The post Part 8 Of Mastering Flexbox: Controlling Spacing With Gap (Not Margin) appeared first on Elegant Themes Blog.

Each design uses gradient backgrounds, layered blocks, soft transitions, bold color contrast, imagery, typography, and clean spacing to create modern sections that feel vibrant without becoming overwhelming. Import a section, replace the content, adjust the colors, and you’re ready to go.

Preview

Here’s a quick look at the 7 Creative Gradients included in the pack. The download is further down the post.

Download 7 Creative Gradients For Divi 5

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

After you download and unzip the file, you’ll find 7 styled Creative Gradient section exports, plus 1 file containing all layouts.

Styled – Creative Gradients Section 1 to 7 (7) → Seven fully styled gradient section layouts with layered color treatments, modern backgrounds, image areas, text blocks, buttons, strong contrast, and flexible structures that you can use as-is or customize.

Styled – Creative Gradients Sections (All) → Imports all 7 designs into your Divi Library at once.

How To Use The Creative Gradients

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

1. Import Sections Into The Divi Library

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

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

2. Add A Creative Gradient 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 Creative Gradient sections.

3. Swap The Content

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

Because gradient sections rely on color balance, contrast, readability, and spacing, it’s best to replace content one area at a time. This helps preserve the relationship between the gradient background, text blocks, images, buttons, and supporting layout elements as you customize the design.

If your new images or copy change the balance of the section, review the layout immediately after editing. Gradient-heavy layouts can shift quickly when image brightness, text length, or color contrast changes. Adjust background colors, overlay intensity, spacing, or text color as needed to keep the section readable.

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

4. Adjust Styles (Optional)

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

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

To refine the gradient styling, open the section, row, column, group, or module you want to adjust and use the Contetn and Design tabs to tweak Background, Gradient, Gradient Stops, Gradient Type, Gradient Direction, Border Radius, Box Shadow, Sizing, and Spacing settings.

If your section uses soft color fades, dark gradient overlays, neon accents, layered image blocks, gradient cards, split backgrounds, or abstract light effects, keep those relationships in mind as you edit so the layout remains cohesive and easy to read.

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

Tips For Effective Gradient Sections

Gradient sections work best when the color treatment supports the message instead of competing with it. Use these quick tips to keep your sections vibrant, polished, and easy to customize.

Keep Text Contrast Clear

Gradients can move from light to dark quickly. Make sure headings, body text, buttons, and labels remain readable across the full background, especially when text sits directly on top of a gradient.

Use Gradients To Create Depth

Gradients can help a section feel layered and dimensional. Use them to guide attention, create atmosphere, separate content areas, or add depth behind images and calls to action.

Choose A Focused Color Palette

A strong gradient does not need too many colors. Start with a focused palette, then use subtle transitions, darker overlays, or accent tones to keep the design cohesive.

Balance Bright Effects With Space

Bright gradients, glows, and color overlays need room to breathe. Use spacing and simple content blocks to keep the section feeling polished instead of crowded.

Check The Layout On Mobile

Gradient sections can change noticeably on tablet and phone screens as content stacks and background areas resize. Review your layout on smaller devices to ensure text remains readable, images still align, gradients stay intentional, and calls to action are easy to tap.

Start Building In Divi 5 Today!

These 7 Creative Gradients give you a fast way to build vibrant, modern sections for hero areas, landing pages, SaaS websites, data platforms, portfolio layouts, product highlights, creative agencies, tech sections, and more. Swap in your content, customize the styling if needed, and you’ll have a polished gradient-based section ready in minutes with Divi 5’s Visual Builder.

The post 7 Creative Gradients For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

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

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

What’s New In Divi 5.10?

We implemented 85 bug fixes and improvements, along with two brand new loop filter modules.

Our main focus over the past month has been on stability and on creating additional automated tests to help spot regressions that our human testers miss. Divi 5 already had tens of thousands of automated tests, but the more the merrier.

We added additional coverage for common hotspots and filled a few gaps in recently released features, ensuring fewer bugs will be introduced as Divi continues to evolve rapidly.

Loop Filter Modules

We released Loop Filter Modules in Divi 5.10!

Divi 5 has a very powerful loop-building system, and it’s now even more versatile thanks to Divi’s new loop filter modules. Now, users can search, filter, and reorder loops on the front end. You can build custom forms that query post content, taxonomies, and custom fields, adding an entirely new dimension to loops.

Take the full tour. 👇

What’s Coming Next?

The Divi AI Agent is coming soon, and it will change everything.

With Divi 5, you will get the best of both worlds: an amazing visual interface and deep integration with the WordPress ecosystem, plus an AI-powered chat-based interface that allows you to orchestrate your own team of agents.

Divi’s AI agents have hundreds of skills and can work with you inside the builder just like a human.

Watch the latest sneak peek. 👇

Changelog

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

• Fixed Woo Product Gallery Grid pagination so Image Count controls items per page across builder and frontend, and fixed mobile grid overflow after pagination by improving gallery reinit and equal-column grid sizing.
• Fixed migrated text headings losing module-level regular weight when presets are set bold.
• Fixed an issue where the Image module Size controls were unavailable in grid-based Column and Group containers.
• Fixed Visual Builder left toolbar icons not all showing as active for open panels after reloading a saved workspace.
• Fixed an issue where the Divider module rendered taller than expected in the Visual Builder when a height smaller than 10px was set, causing a mismatch with the front-end layout.
• Fixed migrated Image module responsive height handling in both FE and VB: empty tablet/phone values now reset to height: auto, preventing desktop height from cascading to smaller breakpoints.
• Fixed the Gradient Picker preview staying blank when adding a gradient background while editing an Option Group preset in the Visual Builder.
• Fixed the Social Media Follow module so the X icon link title correctly displays “Follow on X” instead of “Follow on Facebook” on default layouts.
• Fixed an issue where a Toggle module placed inside an Accordion module was missing its close icon when opened on the frontend.
• Fixed an issue where SVG text content could disappear in the SVG module by restoring safe text tag support in sanitizer allowlists.
• Fixed premade layout gradient migration in mixed shortcode/text content by preserving nested child migration traversal while keeping raw content output intact.
• Fixed a PHP memory exhaustion error that could occur on large Divi 5 pages when the dynamic assets scanned module attributes during rendering.
• Added a filter that allows skipping dynamic assets detection on specific requests.
• Fixed the Image module outputting invalid empty margin and padding CSS rules on the frontend.
• Fixed Gallery and other modules failing D4 to Divi 5 migration when layouts contained legacy {font}_all_caps attributes such as caption_all_caps.
• Fixed Theme Builder layout custom CSS not outputting on search results pages.
• Fixed missing modules when importing Divi 4 layouts that contain global module instances with nested content.
• Added a new product updates panel in Visual Builder that lists recently added features.
• Added options in the workspace panel to disable each icon in the sidebar, such as the new product updates icon.
• Fixed incorrect column sizing in the Visual Builder when the row horizontal gap uses a global variable.
• Fixed save-after-reload in Theme Builder layout editing, dark workspace on Theme Builder admin, missing right-click menu pointer on Theme Builder admin, and related layout detection edge cases.
• Fixed the Divi Dashboard Documentation card so that “Browse All Divi Docs” opens the Divi 5 documentation collection instead of Divi 4.
• Internal documentation only; no customer-facing product change for this pull request.
• Dynamic Assets generation-off requests now stop cached feature hydration, frontend detection, and related script enqueue while keeping the rendered page on the static CSS path and preserving preview-aware fallback behavior.
• Dynamic Assets generation-gate evaluation is now memoized for the request, so render-time detection callbacks reuse one filtered decision instead of re-running the generation filter on every block or shortcode.
• Fixed Blog Module crashing in the Visual Builder when the fitVids plugin was unavailable.
• Fixed Gallery Module appearing blank in the Visual Builder after selecting images.
• Fixed empty loop results not showing for Button modules when Loop Builder injects a no-results message.
• Fixed an issue where paginated Theme Builder loops could show the first page of results on all pagination pages after layout migration.
• Improved PHP test reliability by reusing cached WordPress and Composer dependencies and extending the PHPUnit job timeout.
• Added comprehensive automated test coverage for Theme Builder-specific module behavior.The
• Fixed Post Content module would inherit unwanted margin-bottom and width styles from the parent Theme Builder.
• Added Theme Builder Playwright regression coverage for #50525.
• Fixed #50380 where absolutely positioned Mini Cart canvas sections could disappear after layout width changes.
• Fixed the Image module’s Column Class option not applying to Tablet and Phone views inside the Visual Builder.
• Breadcrumb module child pages of a static homepage now show a single Home link at the start of the trail.
• On-load Hide Element with Force Visible = Never stays hidden in the Visual Builder after reload.
• Deleting an On Load -> Hide Element interaction restores that module in the Visual Builder.
• Custom Attributes that declare the same class or style name more than once for one target now merge those values on module wrappers without dropping earlier entries or emitting malformed empty-side style output, and the Visual Builder preview keeps the same merged result without the duplicate-row runtime error.
• Added frontend markup contract tests for Gutenberg layout block public render wrappers.
• Fixed the interaction effect action resetting when selecting Parent, Root, or Children as the target module.
• Fixed an issue where the Timeline Module’s Card Background Image set to Dynamic Content (Featured Image) was not displaying in the Visual Builder when the module was used inside a Loop.
• Added Layer 2 preset snapshot and integration coverage: shared scenario fixtures, PHP dual-channel CSS snapshots, and Visual Builder harness utilities for blurb, button, text, section, slide (including child-under-slider), and S11 cross-module portable OG resolution. Includes PHP frontend parity so module presets with styleAttrs-only styling emit preset-class CSS on the frontend.
• Fixed an issue where interactive modules (Circle Counter, Number Counter, Countdown Timer, Lottie, Map, Post Carousel, Toggle, Accordion, Video Slider, etc.) would not initialize or expand correctly in the Visual Builder.
• Fixed Woo Products pagination showing the same products on every page when Product Offset is set.
• Fixed a fatal error that occurred when activating the Mercado Pago payments for WooCommerce plugin with Divi 5.
• Fixed Accordion Item default flex direction to keep Visual Builder and frontend layouts in sync.
• Fixed an issue where enabling parallax on the Post Slider or Fullwidth Post Slider background caused the background image to disappear.
• Added lazy loading/deferral for below-the-fold videos, sliders, and maps, so they load only when scrolled into view rather than on initial page load.
• Refined below-the-fold detection to be row-granular within a section (lazy loading only) so tall single-section layouts defer correctly.
• Fixed deferred local MP4/WebM videos not loading or playing when placed below the fold.
• Fixed below-the-fold deferral for modules stacked in a single row/column (intra-row lazy-load offset tracking; Generic test page trailing MP4 no longer loads on initial page view).
• Post Slider now resolves inherited Dark/Light text color and overlay-tint output for widescreen, Tablet Wide, and Phone Wide states, so the frontend and Visual Builder stay in sync across explicit and inherited breakpoint values.
• Post Slider Dark/Light rules now cover the full breakpoint ladder, including widescreen and ultraWide content and overlay output, keep enough cascade specificity to win over overlapping tablet selectors at Tablet Wide, Phone Wide, and Phone, and use compound module-root selectors so arrows, controllers, and post-meta follow the same effective Dark/Light treatment.
• The Visual Builder now uses CSS-contract default breakpoint mins in visual-builder/packages/app-ui/src/store/states/index.ts (desktop 1025, tabletWide 981, tablet 861, phoneWide 768), derives zoom from the target breakpoint band, keeps page-bar width updates tied to the largest enabled breakpoint, and keeps selected desktop plus larger fluid breakpoints inside the correct styling band.
• Builder Settings, command-based view changes, and add-module modal positioning now follow the same corrected, fluid breakpoint-sizing model.
• Added icon/image alignment option in the Blurb module.
• Fixed Background Gradient settings modal being cut off on small viewports or high browser zoom, so the picker now resizes to fit the screen and scrolls when needed.
• Added dedicated Theme Builder migration test coverage for D4-to-D5 layout conversion.
• Fixed duplicate Target Module dropdown entries when editing TB layouts and duplicate global canvas rendering when a canvas is both appended and targeted by an interaction.
• Fixed page off-canvas canvases rendering in the wrong position and breaking Theme Builder header preset styles when append-below canvases were used alongside a TB header.
• Internal test coverage only; no customer-facing changelog.
• Added comprehensive third-party module test fixtures and snapshots (L1–L5) for Divi 5 third-party module registration, conversion, rendering, presets, dynamic content, and custom modal coverage. Fixed D4→D5 conversion module-discovery cache so third-party modules registered after the first conversion pass convert to native D5 blocks instead of falling back to shortcode-module.
• Fixed Place Order button background color not applying in Theme Builder Visual Builder for the Woo Checkout Payment module.
• Body text lists now retain nested unordered list markers when a parent ordered list uses a custom ordered style.
• Breadcrumbs on Theme Builder author archive templates now show a plain author name instead of a literal tag.
• Fixed Theme Builder layout IDs failing to resolve during Visual Builder settings bootstrap on REST requests when the current request context had no template assignments.
• Added tests for dynamic content and fixed the Post Title module showing the wrong title, and the author archive dynamic titles showing the wrong post’s author.
• Fixed an issue where Theme Builder Visual Builder loops using the Current Page query type could display one more post than the Posts Per Page setting.
• Fixed Portfolio Current Category filtering on Project Category archive pages when projects belong to multiple categories.
• Fixed a front-end fatal error when the Icon List icon size used a complex size value in Theme Builder layouts.
• Fixed a front-end fatal error when a Menu module logo URL was stored as a complex value instead of a string.
• Fixed a Visual Builder regression where legacy button option-group presets could still show icons on hover when preset icon visibility was disabled.
• Fixed variation swatches showing the same images for every product when the wishlist or compare plugins were active on Theme Builder product category templates.
• Fixed Theme Builder search header layout breaking when the first search result was a Divi Builder custom post type.
• Fixed Tooltip modules closed via Interactions so they can be reopened by clicking the trigger again.
• Fixed Tooltip modules so that open tooltip content paints above later page modules instead of being covered by them.
• Fixed a frontend fatal error that could occur when the border radius was stored as a simple value instead of the expected corner settings.
• Fixed Theme Builder History entries that appeared blank when removing header or footer template parts.
• Fixed an issue where background color opacity changes on hover were not saved when the desktop color had 0% opacity.
• Added the Post Filter and Post Filter Item modules, providing site visitors with a configurable filter form that refines Divi Loop Builder results in real time via

Jump Into Divi 5 Today

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

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

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

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

Tooltips sit right in that gap. They let you keep the page clean while still making extra context available when someone needs it.

Divi 5 now includes a dedicated Tooltip module that makes this workflow native. You can add a tooltip to an icon, button, text element, pricing feature, image, or any other element that needs a little more explanation. The tooltip stays tied to its parent element, and you control the trigger, movement, position, arrow, timing, content, and styling visually.

In this tutorial, we’ll look at what tooltips are, where they work best, and how to create them with Divi 5’s Tooltip module.

What Are Tooltips?

Screen space is limited, and not every detail needs to sit directly on the page. A tooltip is a small floating panel that appears near an element to provide extra context.

You have probably seen them around icons, form fields, pricing tables, dashboards, and app interfaces. Hover over an icon, and a short explanation appears. Click a small information marker, and a note opens beside it. That is the basic idea.

Tooltips are useful because they support progressive disclosure. The page stays simple by default, but extra information remains available when it becomes relevant.

That does not mean every hidden explanation should become a tooltip. Tooltips work best when the content is short, helpful, and supplementary. If visitors need the information to complete a task, it usually belongs in visible page content instead.

Where Tooltips Work Best

The best places for tooltips are the small moments where visitors might pause, hesitate, or need one extra piece of context. Common use cases include:

• Icons: Icons save space because they remove visible labels. A tooltip can bring the label or explanation back on hover or click.
• Pricing tables: Short phrases like “priority support” or “advanced reporting” may need a little more explanation before someone chooses a plan.
• Jargon and acronyms: A short definition can keep visitors from leaving the page to look up unfamiliar terms.
• New features: A tooltip can point out something new or easily missed without adding a permanent block of text.
• Form hints: Short guidance can help explain a field, format, or optional input when the visible label is not enough.
• Image or product details: A tooltip can reveal a caption, specification, or small note without interrupting the visual layout.

Each of these examples earns a tooltip for the same reason: something on the page raises a small question, and a few words of extra context can answer it.

Build Tooltips Natively With The Divi 5 Tooltip Module

The Tooltip module is a native Divi 5 content container. It is added inside the element it describes, and that parent element becomes the tooltip’s anchor. For example, if you add a Tooltip module inside a button, the button becomes the anchor. If you add it inside an icon, the icon becomes the anchor. The tooltip then floats beside that anchor and appears based on the trigger you choose.

What makes the Tooltip module more flexible than a basic browser tooltip is what it can contain. You are not limited to plain text. The Tooltip module can include rich text, nested modules, icons, images, buttons, and other Divi content. That means a pricing tooltip can include a short explanation and an icon, while a product tooltip can include a small image, label, or supporting action.

The module settings cover the full tooltip experience:

• Trigger: Show the tooltip on hover, click, or always.
• Movement: Keep it anchored to the element or let it follow the cursor.
• Position: Place it above, below, left, right, or along different alignment points.
• Spacing: Use Skid and Distance to control the exact placement.
• Timing: Add open and close delays.
• Arrow: Show a pointer back to the anchor and style its placement.
• Design: Style the panel with sizing, spacing, background, border, box shadow, and text controls.

Everything happens in the Visual Builder, using the same Divi tabs and option groups you already use elsewhere.

How To Create A Tooltip In Divi 5

The steps below follow a practical build order: choose the trigger element, nest the Tooltip module, add content, preview it in the builder, set the behavior, position the panel, and style the result.

Step 1. Nest The Tooltip Module Inside A Trigger

The Tooltip module should be nested inside the element it describes. That placement tells Divi what the tooltip should attach to. Open the trigger element’s settings. This could be a Button module, Icon module, Text module, Blurb module, pricing feature, or any other element that needs extra context.

Go to Content > Elements and click Add New Element.

Then select the Tooltip module.

Once the Tooltip module is nested, the parent element becomes the anchor. The tooltip will position itself relative to that parent element.

Step 2. Add Tooltip Content

With the Tooltip module open, use the Content tab to add the content visitors will see. For a simple tooltip, use the Text option group and add a short line of helpful copy.

Keep the copy direct. A tooltip should answer a quick question, not become a second paragraph hidden inside the interface. For a richer tooltip, use the Elements option group to add nested Divi content inside the tooltip panel.

You can add elements such as an Icon, Image, Button, or another small piece of content. Use this carefully. Rich content is useful for mini cards, product notes, or onboarding hints, but most tooltips should still stay compact.

Step 3. Force The Tooltip Visible While Designing

Tooltips are usually hidden until a visitor hovers, clicks, or triggers them. That can make them harder to style while you are working in the Visual Builder. Use the module’s visibility or preview-related settings to keep the tooltip visible while designing. That lets you see the panel on the canvas as you adjust its position, spacing, background, border, and text.

Once the design is finished, return the tooltip to the trigger behavior you want visitors to experience.

Step 4. Set The Trigger, Movement, And Timing

Open the Design tab and expand the Tooltip option group.

Start with Show Tooltip On. Divi gives you three main choices:

• Hover: Shows the tooltip when a cursor passes over the trigger.
• Click: Shows the tooltip when the visitor clicks or taps the trigger.
• Always: Keeps the tooltip visible without requiring hover or click.

Hover works well for desktop icon labels and quick explanations. Click is often better for mobile and touch-heavy audiences. Always can work for guided callouts, feature highlights, or small notes that should remain visible.

Next, set Tooltip Movement. Anchored keeps the tooltip in place beside the trigger element.

Follow Cursor lets the tooltip move with the cursor over the trigger.

Anchored is the safer choice for most content because the panel stays predictable. Follow Cursor can feel more interactive, but it is better for lightweight labels than rich content. Then set the timing.

Tooltip Open Delay controls how long Divi waits before showing the panel. A short delay prevents the tooltip from flashing every time a cursor passes over the trigger by accident.

Tooltip Close Delay controls how long the tooltip stays visible after the trigger becomes inactive. This is especially useful when the tooltip contains a link or button, because visitors need enough time to move into the panel.

Step 5. Position The Tooltip

Tooltip position depends on the space around the trigger.

A tooltip above a centered button may have plenty of room. A tooltip attached to an icon near the top of the viewport may need to open below. A tooltip inside a narrow pricing card may need a smaller width, shorter distance, or different alignment so it does not collide with nearby content.

Use the position grid inside the Tooltip option group to choose where the panel appears relative to the trigger.

Choose the side with the most available room: above, below, left, or right. Then choose the alignment along that side. After choosing the general position, refine it with Tooltip Skid and Tooltip Distance.

Tooltip Skid shifts the panel along the edge you selected. For tooltips above or below the trigger, it moves the panel horizontally. For tooltips on the left or right, it moves the panel vertically.

Tooltip Distance controls how far the panel sits from the trigger. Lower values feel more connected. Higher values create more breathing room.

Together, Skid and Distance help you fit the tooltip into tight layouts without changing the trigger element itself.

Step 6. Add Or Style The Tooltip Arrow

The arrow visually connects the tooltip panel back to the element it describes. Use Show Tooltip Arrow to enable or disable it. Then adjust the arrow’s color, side, position, and size.

Arrows are helpful when the tooltip floats farther from the trigger or when several nearby elements could be confused as the anchor. If the tooltip already sits very close to the trigger, you may not need an arrow. Keep it only when it makes the relationship clearer.

Step 7. Style The Tooltip Panel

A newly added tooltip can be simple by default, which is often enough for short labels. But if you want the tooltip to feel like part of the design, style it the same way you would any other Divi element. Start with Sizing. Tooltips can become too wide when the content is long, so setting a max width usually gives the panel a cleaner shape.

Then open Spacing and add padding inside the panel. Even a small amount of padding makes tooltip text easier to read.

Use Border for rounded corners, Box Shadow for depth, and Body Text for typography. Then set the background. The Background group supports colors, gradients, images, and video. For most tooltip designs, a solid color or subtle gradient works best because the content needs to stay readable.

If your site uses Design Variables, use a Color Variable for the tooltip background or text color. That keeps the tooltip tied to the rest of the design system.

Once the tooltip style works, save the relevant design settings as an Option Group Preset. That way, future tooltips can use the same background, spacing, border, shadow, and text treatment without rebuilding the style manually.

Best Practices For Using Tooltips

Tooltips work best when they solve a small user problem. They become frustrating when they hide information people actually need, repeat what is already visible, or appear in places where the visitor cannot easily trigger them. Keep these best practices in mind.

Keep Tooltip Content Supplementary

Do not hide essential instructions inside a tooltip.

Password rules, form errors, required field instructions, pricing limitations, and legal details should usually be visible on the page. A tooltip can add clarification, but it should not be the only place visitors can find information required to complete a task.

Use tooltips for helpful context, not critical content.

Do Not Repeat The Label

A tooltip should not repeat what the visitor can already see. If a button says Delete Account, a tooltip that also says Delete Account adds nothing. A better tooltip might explain what happens next, such as whether the action is permanent or whether the visitor will see a confirmation step.

The same applies to icons. If the icon already has visible text beside it, the tooltip should add context rather than duplicate the label.

Keep The Copy Short

Tooltips are small by design. Keep the copy short enough to scan in a second or two.

Use direct language. Avoid long paragraphs, multiple ideas, and dense explanations. If the tooltip needs more than a sentence or two, the information may belong in visible page content, an accordion, a modal, or a dedicated help section.

Choose The Trigger Based On The Device

Hover works well on desktop but is not always reliable on touch screens. If a tooltip needs to work well on mobile, consider using Click instead of Hover.

Click also works better when the tooltip contains interactive content, such as a link or button, because visitors have more control over when the panel opens and closes.

Check The Position In Context

Do not position tooltips in isolation. Check them inside the actual layout.

Look for clipping near the viewport edge, overlap with nearby cards, crowded pricing rows, and mobile layouts where the panel may take up too much space. Adjust the position grid, Skid, Distance, width, and trigger behavior until the tooltip feels intentional at each breakpoint.

Make Tooltips Accessible

Tooltips should not be available only to mouse users. If the tooltip supports an interactive element or important explanation, test the experience with keyboard navigation and screen readers. Make sure visitors can reach the trigger, understand what it does, and access the information without relying only on hover.

Divi 5’s Custom Attributes system can help when a tooltip needs additional HTML attributes. For example, you may use attributes such as role, aria-label, or aria-describedby where the markup needs clearer meaning. Use ARIA carefully. Native labels and visible helper text are often better for essential instructions. Attributes should clarify the experience, not patch over content that should have been visible in the first place.

Adding Context Should Not Mean Adding Clutter

Tooltips are small, but they can make a layout feel much more considered. A good tooltip answers a question at the exact moment someone has it. It explains an icon, clarifies a pricing feature, defines a term, introduces a new feature, or adds a small note without forcing more text into the main layout.

Divi 5’s Tooltip module gives you a native way to build that experience visually. Add the module inside the element it describes, choose the trigger, control the movement and timing, position the panel, style the design, and save the result as a reusable preset when it becomes part of your system.

Use tooltips where they add real context, keep them short, and make sure they work for more than just mouse users. That is how a page stays clean without leaving visitors guessing.

The post How To Create Tooltips With Divi 5 appeared first on Elegant Themes Blog.

A brand color on its own is rarely enough for a full website. You need lighter versions for backgrounds, darker versions for hover states, muted versions for borders, and transparent versions for overlays or shadows. Guessing those values by eye can make the design feel inconsistent fast.

Design Variables let you store reusable colors in Divi 5, but the Color Scale Generator inside Divi 5’s Variable Generator helps you create the supporting colors first. Starting from one source color, it can generate tints, shades, tones, and transparencies that stay relative to the original brand value using relative HSL filters.

This walkthrough covers that exact workflow: taking the brand colors you already have and turning each one into a usable Color Scale in Divi 5.

If you are starting from a single color and still need to create the broader palette around it, read starting from a single color and still need to create our tutorial on how to turn one brand color into an entire Divi 5 color palette first.

When The Full Palette Generator Isn’t The Right Starting Point

Divi 5 includes a broader palette generator for a different situation: when you are starting from one color and need to create a full set of primary, secondary, and accent colors, each with its own supporting variations.

That workflow is useful for greenfield projects where the brand palette is still being defined as part of the website build.

This tutorial is for the opposite situation. The client’s brand colors already exist. You do not need to generate new base colors or rethink the palette. You need lighter, darker, muted, and transparent variations of the exact colors you were given.

That is what the Color Scale Generator is for.

The same Variable Generator panel also includes Color Harmony, which can help if the client’s palette is missing a functional color you still need, such as a success, warning, or notice color. But when the source colors are already locked in, skip Color Harmony and start with Color Scales.

Opening The Color Scale Generator

Open the Variable Generator from the Design Variable Manager in the persistent left sidebar. Then use the Variable Type dropdown and choose Color Scales.

Once Color Scales is selected, click the generator icon to open the Color Scale Generator.

Two fields drive everything else on the panel: Source Color and Color Prefix.

Source Color is the exact brand color you were handed. Paste in the hex value from the client’s style guide, logo file, or an existing Color Variable already saved on the site. Every shade, tint, tone, and transparency generated afterward is calculated relative to this value.

Color Prefix labels the entire family of variables created from that color. Divi can default to the hex code, but a role-based name is much easier to use later. Names like primary-, secondary-, accent-, or brand-blue- make the variable list easier to scan inside the builder.

Tints, Shades, Tones, And Transparencies

The Color Scale Generator creates four types of variations from one source color. Each one has a different job in a real website design.

Tints are lighter versions of the source color. Use them for backgrounds, cards, callouts, badges, and areas where you want a subtle hint of the brand color without making the section feel too heavy.

Shades are darker versions of the source color. They are useful for hover states, active states, darker buttons, emphasized links, and text that needs more contrast against a lighter color from the same scale.

Tones are muted, desaturated versions of the source color. They work well for borders, dividers, secondary text, form outlines, and UI details that should feel related to the brand without competing with the main color.

Transparencies are alpha variants of the source color at different opacity levels. Use them for overlays, image scrims, shadows, glows, and layered background effects that should pick up the brand color instead of using flat black or white.

Setting The Count And The Intensity

For each of the four variation types, two controls shape the final scale: count and intensity.

Number Of Tints, Number Of Shades, Number Of Tones, and Number Of Transparencies set how many steps Divi creates in each progression.

Four is a practical starting point for most builds. It gives you enough range for backgrounds, hover states, borders, and overlays without creating a long list of variables you may never use.

Tint Intensity, Shade Intensity, Tone Intensity, and Alpha Intensity control how far each progression moves away from the source color.

If the intensity is too low, the generated colors may look almost identical. If it is too high, the scale may jump too quickly to near-white, near-black, or very muted values. The useful range usually sits in the middle, where each step is visibly different but still connected to the source color.

Lower-numbered steps in the tint, shade, and tone progressions sit closest to the source color. Higher-numbered steps move further away from it. That means the highest tint is the lightest, the highest shade is the darkest, and the highest tone is the most muted.

Count and intensity work together. Count controls how many steps exist. Intensity controls how far the full progression stretches. More steps with the same intensity create smaller jumps between colors. Fewer steps create larger jumps.

Transparencies follow the opposite convention: the lowest-numbered alpha step is the most transparent, while the highest-numbered step approaches full opacity.

Naming Each Variation

Below the count and intensity controls, four more fields control the naming for each variation type: Tints Prefix, Shades Prefix, Tones Prefix, and Alpha Suffix.

Divi defaults these to labels like tint-, shade-, tone-, and alpha-. Those defaults work well, but you can rename them to match your team’s language. For example, you might use light-, dark-, neutral-, and transparent-.

The important part is consistency. If you generate scales for a primary, secondary, and accent color, use the same naming pattern for each one.

Combined with the Color Prefix field, the final variable name follows a predictable pattern:

Color Prefix + Variation Type + Step Number

For example, a primary color set to generate four tints creates primary-tint-1 through primary-tint-4. An accent color set to generate four transparencies creates accent-alpha-1 through accent-alpha-4.

Checking The Result Before Committing To It

The right side of the Color Scale Generator shows a live preview of every variation before you add it to the site. Each row shows the variable name it will create, along with a swatch that updates as you adjust the source color, count, intensity, and naming fields.

Use this preview to check whether the scale is useful before committing it to the Design Variable Manager. The tints should be light enough to use as backgrounds. The shades should be dark enough for hover states or contrast. The tones should feel muted but still related to the source color. The transparencies should give you enough range for overlays and shadows.

Show CSS reveals the CSS behind each generated variation, including the relative HSL values and calculations. This is useful as a reference, but it is not a required workflow step. Divi handles the calculations for you, so you do not need to copy, edit, or maintain that CSS by hand.

Adding The Variables To Your Site

When the preview looks right, click Add Variables To My Site.

Divi writes every variation currently shown in the preview into the Design Variable Manager, using the Color Prefix and naming pattern you defined. The new variables are then available throughout the Visual Builder.

Repeat the process for every brand color the client provided.

A typical handoff might include a primary color, a secondary color, and an accent color. Run each one through the Color Scale Generator separately and give each color family its own prefix. That keeps the generated variables organized by source color.

Using The Generated Colors In Your Designs

Once the Color Scale variables exist in the Design Variable Manager, they appear in color-enabled fields across the Visual Builder.

Open a Background Color, Text Color, Border Color, Box Shadow Color, or button color field, and select the generated color from the variable picker instead of typing a new hex value.

For example, a button can use the source primary color at rest and switch to primary-shade-3 on hover. A card can use primary-tint-1 as its background and primary-tone-2 for its border. A hero image can use primary-alpha-2 as an overlay.

These variables also work inside Option Groups and Element Presets. That means a border, shadow, background, or hover treatment built from a generated Color Scale variable can be saved once and reused across the site instead of rebuilt by hand.

A few places these variations are especially useful:

• Hover and active states: Use a darker shade for buttons, links, tabs, or interactive cards.
• Soft backgrounds: Use tints for cards, callouts, pricing blocks, and feature sections.
• Box shadows: Use a transparency variant of the brand color instead of defaulting to black.
• Overlays and scrims: Use alpha variants over images or video backgrounds to keep text readable.
• Borders and dividers: Use tones when you want separation without using full-strength brand color.
• Disabled or inactive states: Use muted tones to communicate reduced emphasis while staying inside the brand palette.

Turn Brand Colors Into Usable Color Scales

Brand colors handed down from a client do not always include the supporting range a real website needs. You may have the approved source colors, but you still need lighter backgrounds, darker hover states, muted borders, branded transparencies, and subtle UI details.

The Color Scale Generator solves that exact problem. It starts from the approved brand color, generates tints, shades, tones, and transparencies, previews the full scale, and stores the result as Design Variables ready to use across Divi 5.

Instead of guessing supporting hex values by eye, you get a structured Color Scale that stays tied to the source color and remains easier to reuse across the whole site.

The post Creating Color Variations From Brand Colors In Divi 5 appeared first on Elegant Themes Blog.

You can use each one on its own, but they become more powerful when you combine them. A variable font can make a heading thick enough for a gradient to show clearly. A transparent fill and stroke can turn a word into a hollow outline. A wide, heavy letterform can hold an image pattern without losing readability.

There is no single recipe. Each design below uses the same three ingredients differently. The first layers outlined and solid text around a cutout photo. The second uses a gradient-filled number with a light stroke. The third fills a full-width heading band with an image pattern.

Along the way, we’ll look at how variable font axes, Text Fill, Text Stroke, Gradient Variables, and presets work together so you can build more intentional typography effects directly inside Divi 5.

Understanding Variable Fonts, Text Fill, And Text Stroke

These settings live in the Design tab of text-based modules and text option groups, including Text, Heading Text, and Title Text. Variable font controls appear near the font selection when the selected font supports them. Fill and stroke settings appear in the text effects area of the same text group.

We covered each fill type in our guide to Divi 5’s text fill options. In this tutorial, we’ll focus on how the settings affect each other once you start combining them.

Variable Fonts

Apply a supported variable font to an element, and Divi 5 shows the axes available for that font. Each axis changes part of the letterform.

Weight controls how heavy the strokes are. Width controls how narrow or expanded the letters feel. Depending on the font, you may also see axes such as Slant, Grade, Thin Stroke, Thick Stroke, or other font-specific controls.

For this tutorial, the important part is the surface area inside each letter. Heavier and wider settings usually give fills more room to show. Lighter and narrower settings leave less room for gradients, images, and strokes to work.

The open areas inside letters like e, a, o, and g are called counters. If a stroke is too thick or a font weight is too tight, those counters can start to close up. Keep that in mind as we build the examples.

Text Fill

Text Fill controls what appears inside the letter shape.

Set Fill Type to Gradient, and the letters are filled with a gradient. Set it to Image, and the letters become a mask for an image. Set it to Transparent, and the inside of the letters becomes see-through, which works well when paired with a stroke for outlined text.

The fill only has the inside of the letter to work with. A heavy heading gives the fill a wide surface. A light heading gives it a thin strip. That is why a gradient can look rich inside a bold heading but almost flat inside a thin one.

Text Stroke

Text Stroke draws a line around the edge of the letters. The most important controls are Stroke Width, Stroke Color, and Stroke Position.

Stroke Position matters because it changes how much of the fill stays visible. A centered stroke sits partly inside the letter and partly outside it. The inner part covers some of the fill. An outside stroke protects more of the fill because the outline sits beyond the letter shape.

For example, a centered 3px stroke can work nicely on a large, heavy heading because there is still plenty of fill visible inside the letters. On a smaller or lighter heading, that same stroke can take over too much of the letter and make the fill harder to see.

When you want a stroke to define the edge without cutting into a gradient or image fill, use an outside stroke position where available. When you want the stroke to feel more integrated with the letterform, a centered stroke can still work, especially at large sizes.

How The Three Affect Each Other

The font decides the letter shape. The fill sits inside that shape. The stroke defines the edge. That order matters. Set the variable font axes first so the letters have the right weight, width, and counters. Then choose the fill. Then decide whether the stroke should be subtle, bold, centered, or outside.

A gradient needs enough letter surface to show movement. An image fill needs enough surface to show detail. A stroke needs enough letter width to avoid crowding the fill. Once you understand that relationship, you can combine the settings more freely and still keep the heading readable.

Design 1: A Layered Hero With Outlined And Solid Text

The first design puts two headings on top of each other. The back word is hollow, using a transparent fill and a white stroke. The front word is solid white and sits over the cutout photo.

This combination works because each layer has a different job. The outlined word creates the scale and structure of the hero. The cutout photo adds depth. The solid word carries the main message. Nothing here needs a gradient or image fill. The effect comes from the font axes, one transparent fill, one stroke, and careful stacking.

Step 1. Set Up The Section And Row

Add a new section and open its settings. Under Background, set the section background to your dark base color. If you already use Color Variables, pull in the dark color from your palette instead of typing the value manually. The rest of the design uses white text and a white outline, so the hero needs a dark surface behind it.

Next, set the section height. Under Sizing, set Min Height to 100vh so the hero fills the screen. Then open Spacing and set Padding Top to 0px so the large outlined heading can sit closer to the top edge.

Add a one-column row inside the section and open the row settings. Under Spacing, set Padding Top to 5%. This gives the heading some space without creating a fixed gap that feels too large or too small on different screens.

Step 2. Add The Outlined Heading

Add a Heading module to the row and type DIGITAL. This is the back layer of the hero. It needs to be large enough to anchor the section, narrow enough to fit across the layout, and thick enough for the stroke to stay open and readable.

Open the Design tab and go to Heading Text. Set the Heading Level to H1 and choose Roboto Flex as the Heading Font. Roboto Flex works well here because it gives you several useful axes. Use these settings:

• Variable Font Weight: 592
• Variable Font Width: 38
• Variable Font Grade: 56
• Variable Font Thin Stroke: 69

The narrow width lets a seven-letter word stretch across the section without overflowing. Grade and Thin Stroke give the letterforms enough body to support a thick outline.

Now set the size. Use clamp(11rem, 40vw, 38rem) for Heading Text Size. This lets the heading scale with the viewport while keeping it from becoming too small or too large. Set Heading Letter Spacing to 5px and Heading Text Alignment to center.

Now turn the word into an outline. Set Heading Fill Type to Transparent. Then set Heading Stroke Width to 8px and Heading Stroke Color to #FFFFFF.

The transparent fill makes the inside of the word see-through, while the stroke draws the letter edges. Because the variable font settings give the letters enough structure, the 8px stroke stays readable instead of closing up the counters.

If your stroke starts to crowd the inside of the letters, either lower the stroke width, increase the font weight, increase width slightly, or move the stroke outside if that option fits the design. Next, set the stacking order. Open the column settings, go to Design > Position, and set Z Index to 0. Then open the outlined Heading module, go to Position, and set its Z Index to 1.

The outlined word now has its place in the stack. The image and the solid heading will sit above it.

Step 3. Place The Cutout Photo Over The Outline

Add an Image module below the outlined heading and upload your cutout photo. Use an image with the background already removed so the subject can sit between the two text layers cleanly.

Open the Design tab and go to Sizing. Set Width to 100% so the image fills the column. Then open Spacing and set Padding Bottom to 300px. This keeps enough space below the cutout for the solid heading layer.

Now lift the image out of the normal layout flow. Go to Position and set Position to Absolute. Set Vertical Offset to 100px, then adjust the value until the subject sits where you want it inside the outlined word.

Set the image Z Index to 2. The outlined heading is on 1, so the photo now sits above it. The outline remains visible behind the subject and disappears wherever the image overlaps it.

Step 4. Add The Solid Heading

Add a second Heading module below the image and type CREATIVE. This is the front layer. It uses the same font as the outlined word, but different axis values so the two words feel related without looking identical.

Open the Design tab and go to Heading Text. Set the Heading Level to H2 and set the Heading Font to Roboto Flex. Use these variable font settings:

• Variable Font Weight: 550
• Variable Font Width: 25
• Variable Font Grade: -63
• Variable Font Thin Stroke: 69
• Variable Font Thick Stroke: 103

The width is narrower than the outlined word so the longer word can still fit across the section. Grade moves in the opposite direction from the outlined heading, trimming the letters slightly without changing the overall width as much as weight would.

Set Heading Text Size to clamp(11rem, 25vw, 34rem), Heading Line Height to 1em, and Heading Letter Spacing to 5px. Set Heading Text Alignment to center and Heading Text Color to #FFFFFF.

Leave Heading Fill Type on None and do not add a stroke. The front word should stay simple because the back word is already carrying the outline effect. Now place it in the stack. Go to Position and set Position to Relative. Set Z Index to 3 so it sits above both the outlined word and the photo.

Set Vertical Offset to -222px to pull the word into the lower half of the outlined heading. Adjust that value based on your final image position and text size.

Step 5. Add The Tagline And Link Row

The main type effect is finished. Now add the supporting text and link. Add a new row below the hero row and choose a two-column structure. If the row conflicts with the layered content above it, add top margin until the spacing feels balanced.

Place a Text module in the left column for the tagline and a second Text module in the right column for the link. Set the right column text to right alignment so it sits at the opposite edge of the section.

Keep these supporting text elements simple. Use small uppercase text, white color, and no fill or stroke. If you already have presets for small text and links, apply those instead of styling the modules manually.

Step 6. Check The Smaller Screens

Most of this design is responsive by design. The headings use clamp(), the section uses vh, the row padding uses a percentage, and the image width is set to 100%. The fixed pixel values need review.

Switch to tablet and phone views and check the Vertical Offset on the CREATIVE heading. The desktop value may place the heading too high or too low once the text scales down. Set responsive values for tablet and phone until the overlap looks intentional at each breakpoint.

The image module’s Vertical Offset and Padding Bottom may need the same treatment.

Then check the bottom row. On desktop, the tagline and link sit across from each other. On phone, the columns stack, and the space between the heading and tagline can get too tight. Add responsive top margin to the row on phone if the layout needs more breathing room.

Two More Heading Variations With Gradient And Image Fill

The next two designs use the same three settings in different combinations.

The first fills a large number with a gradient and adds a light stroke. The second fills a full-width heading band with an image pattern. Both rely on variable font axes first, because the fill only works when the letters are wide and heavy enough to show it.

Variation 1: A Gradient Fill On An Oversized Number

Numbers are a strong surface for gradient fills. Digits like 2, 5, and 0 create wide shapes, so the gradient has room to move across the letterform instead of getting squeezed into a narrow stroke.

Before styling the number, build the gradient once and save it as a variable.

Open any gradient field, create the gradient you want, then right-click the gradient field and choose Convert To Variable. Give it a role-based name such as Brand Gradient. The gradient now lives in the Variable Manager and can be reused anywhere gradients are supported, including text fills.

The layout uses two rows.

The first row has three columns, with the middle column set wider so the large number has enough room. The left column holds the section heading and supporting text. The middle column holds the large number. The right column holds the icon and description.

The second row has three equal columns. Each column contains a nested two-column row so a smaller number can sit beside its label and text.

Each number is a Heading module with Fill Type set to Gradient. The large number uses the saved Brand Gradient variable and a thin white stroke. The smaller numbers use gradient fills without strokes so the fill stays visible at their smaller size.

For the large number, use a Heading module set in Roboto Flex with these settings:

• Variable Font Weight: 615
• Variable Font Width: 49
• Heading Text Size: 500px
• Heading Fill Type: Gradient
• Heading Gradient Fill: Brand Gradient
• Heading Stroke Width: 6px
• Heading Stroke Color: #FFFFFF

The weight and width make the 6px stroke workable. If the number were lighter or narrower, the stroke would take too much space away from the gradient. Since the number is large and heavy, the fill still has enough room to show the blend.

For the smaller numbers, use gradient fills without stroke. At smaller sizes, even a thin outline can crowd the fill and make the gradient harder to read.

One detail to remember: the gradient maps to the text box, and the letters act like windows onto it. A wide text box shows more of the gradient. A narrow one compresses the visible part of the blend. If two gradient-filled numbers look different, check both the gradient settings and the size of the module box.

Variation 2: A Pattern Fill On A Full-Width Band

The last design runs one large line of text across the full width of the section and fills the letters with an image pattern. This kind of band works well as a footer-style closing mark, campaign signoff, or visual divider.

The layout uses two rows. The first row holds the closing content on the left: an eyebrow, heading, short paragraph, and link. The second row is a one-column row holding the full-width heading band. Remove extra section padding around the band so the letters can run closer to the section edges.

The band is a Heading module set in Roboto Flex. Use these settings:

• Variable Font Weight: 766
• Variable Font Width: 25
• Variable Font Grade: -200
• Heading Text Size: 14vw
• Heading Fill Type: Image
• Image Fill Position: Top Left
• Heading Stroke Width: 3px
• Heading Stroke Color: #e68110

The width axis does most of the layout work. At 25, the letters are narrow enough to fit across the section. The weight at 766 keeps each letter thick enough to show the pattern. Drop the weight too far and the image fill becomes thin strips of color. Increase the width too much and the band may no longer fit cleanly across the section.

A pattern works better here than a detailed photograph. A photo often has one strong focal area and a lot of quieter areas, which means some letters may show the interesting part while others show filler. A repeating pattern gives every letter a similar level of detail.

The stroke helps hold the edges together. Since the pattern has light areas and the background is also light, a 3px orange outline keeps the word readable no matter which part of the pattern appears inside each letter.

If the stroke starts to hide too much of the image fill, reduce the stroke width or move the stroke outside. If the image fill starts to lose its detail, increase the font weight or choose a pattern with stronger contrast.

Save The Treatment As A Preset

The gradient number uses several settings: a specific font, axis values, a large text size, a gradient fill, a saved Gradient Variable, and a stroke. Instead of rebuilding that combination every time, save it as a preset. Open the Heading module that holds the large number. Hover near the top of the settings panel, click the Preset icon, choose New Preset From Current Styles, and name it something clear, such as Gradient Number.

The preset now stores the styling decisions for that Heading module, including the variable font settings, text size, gradient fill, and stroke. Apply Gradient Number to another Heading module and the same treatment appears immediately.

If the gradient fill uses the Brand Gradient variable, the preset keeps that variable connection. Edit the gradient variable later and every heading using that variable can update with it.

You can also separate responsibilities with presets. Let one preset handle the typography effect, and let your existing spacing, color, or layout presets handle the surrounding structure. That keeps the effect reusable without making every heading on the site behave exactly the same way.

Get Creative With Text Inside Divi 5

Variable fonts, Text Fill, and Text Stroke in Divi 5 work best when you think of them as a sequence.

First, use the variable font axes to shape the letters. Make them heavy enough, wide enough, narrow enough, soft enough, or condensed enough for the design. Then choose the fill that belongs inside those letters: solid color, gradient, image, or transparent. Finally, add a stroke when the edge needs definition.

Each example in this tutorial applied the same idea in different ways. The layered hero used transparent fill and a white outline. The oversized number used a gradient fill with a light stroke. The full-width band used an image pattern with an orange outline.

Once you understand how the font shape, fill, and stroke affect each other, you can create your own combinations without relying on fixed formulas.

The post How To Use Text Stroke, Text Fill, And Variable Fonts Together In Divi 5 appeared first on Elegant Themes Blog.