In this tutorial, we’ll use Divi 5 and its Interactions system to build exactly that: a layout where hovering over an image reveals additional content and shifts the surrounding text into a secondary state, all without custom code.

What We’re Building

The layout is a two-column book showcase. The left column displays a book cover image, and the right column contains the book’s core metadata: the author’s name and the book title. This is the default state visitors see first. It’s clean, simple, and easy to scan.

When someone hovers over the book cover, the right column reveals more content through a module group: a testimonial, a short description, and a Buy Now button. At the same time, the book title shifts into a smaller alternate preset so the new content has room to appear without crowding the layout.

Subscribe To Our Youtube Channel

When the cursor leaves the image, the layout returns to its default state. That reset is what makes the interaction feel polished instead of one-directional.

Why Use Divi 5 Interactions

Interactions is Divi 5’s built-in system for adding behavior to elements inside the Visual Builder without writing code. Divi 5’s Interactions system works through three parts: a trigger that starts the interaction, an effect that defines what happens, and a target that tells Divi which element should change.

That structure makes it easy to coordinate multiple changes from a single hover. In this build, one trigger reveals hidden content while a second target switches the title to an alternate preset. Small interaction, multiple coordinated responses.

Step-By-Step Tutorial

This build comes together in seven steps. We’ll create the two-column layout, add the book metadata, build the hidden content group, hide it on page load, create an alternate title preset, connect everything to the hover trigger, and then add the return-state interaction to reset the layout cleanly.

Step 1. Create The Book Showcase Layout

Start by adding a new Section to your page and inserting a Row with a two-column layout.

In the left column, add an Image Module and upload your book cover image.

Move to the right column and add a Module Group. In Divi 5, a Module Group lets you wrap multiple modules into a single unit so they can be styled and targeted as a single unit. Inside that group, add two Heading Modules, one for the author name and one for the book title.

Style them to match your layout. Once those two headings are in place, the base structure is ready.

Step 2. Create The Group For Additional Book Details

Add another Module Group below the title inside the right column. This second group will hold the content revealed on hover.

Inside it, add a Heading Module for the testimonial quote, a Text Module for the short description, and a Button Module labeled Buy Now.

Adjust the typography, spacing, and button styling until the new group visually connects with the metadata above it.

Right now, the group is fully visible. The next step hides it on load so it can be revealed by the hover trigger.

Step 3. Hide The Additional Content On Page Load

Select the second Module Group and open its Content settings. Scroll to Meta > Element Label and give it a clear name such as Radiance Meta. Labels make it much easier to identify the right target when you’re building interactions.

Now open the Interactions panel, add a new interaction, and set the trigger to Page Load with the effect set to Hide Element. This ensures the second group starts hidden as soon as the page loads. You could also hide the group through Advanced > Visibility, but using a Page Load interaction keeps the setup tied directly to Divi 5’s Interactions workflow.

With that in place, the layout returns to its default state: just the author and title, with the extra content waiting off-screen until the hover interaction triggers it.

Step 4. Create An Alternate Preset For The Book Title

In Divi 5, a preset is a saved style configuration for a module. Duplicating a preset lets you create a second visual state without overwriting the original. That’s exactly what we need here, because the title needs one look by default and another look when the hover reveal is active.

Select the Book Title Heading Module in the first group and open the Preset menu. Duplicate the current preset, then rename it to something recognizable like Heading Small.

With the new preset active, reduce the font size slightly and apply italics if you want the secondary state to feel more understated. The goal is not to completely restyle the title, but to make room for the revealed content.

The title now has two states ready to switch between during the interaction.

Step 5. Trigger The Reveal On Hover

Select the Image Module in the left column and open the Interactions panel. Add a new interaction and set the trigger to Mouse Enter. This fires as soon as the cursor moves over the book cover.

Add the first effect: Show Element, targeting the Radiance Meta group.

Add a second effect to the same hover interaction. Target the Book Title Heading, choose Add Preset, and select the Heading Small preset.

At this point, hovering over the book cover reveals the hidden content and simultaneously shifts the title to its alternate style.

Step 6. Add The Return-State Interaction

To make the effect feel complete, add a second interaction to the same Image Module and set the trigger to Mouse Exit.

For the first effect, target Radiance Meta and choose Hide Element. This hides the additional content when the cursor leaves the image.

For the second effect, target the Book Title Heading and choose Remove Preset if you’re removing the alternate state, or switch back to the original preset if that’s how your setup is configured. The result should be the same: the title returns to its original default styling.

This is the step that keeps the interaction from feeling stuck. The reveal is important, but the reset is what makes the pattern reusable across cards, showcases, and hover-driven layouts.

Step 7. Add A Fade-In Animation For A Smoother Reveal

Select the Radiance Meta module group and open the Design tab. Scroll to Animation and choose Fade.

Keep the duration short so the content eases in instead of snapping into place. That small change helps the reveal feel intentional and refined.

Preview

Here’s the finished layout in action.

Practical Tips Before You Publish

A hover reveal can look great in the builder but still feel awkward on a live page if the timing or spacing is off. Before you publish, review the details below to ensure the interaction feels smooth, readable, and intentional.

• Keep the hover target large enough that the interaction is easy to trigger.
• Make sure the revealed content does not push nearby elements into unstable positions.
• Keep the alternate preset subtle so the title still feels visually connected to its default state.
• Check tablet and mobile views and decide whether the interaction still makes sense on touch devices.
• Use short animation timing so the effect feels responsive instead of delayed.

Try Interactions in Divi 5 Today!

A layout like this shows why Divi 5 Interactions is so useful. A single hover can reveal new content, switch presets, and coordinate multiple elements without custom code. Once you understand that pattern, you can adapt it to product cards, portfolio items, team layouts, pricing tables, and content reveals across your site.

The book showcase is just one example. The real value is learning how triggers, effects, and targets work together so you can reuse the same logic in different designs.

The post Building An Image Hover Reveal Effect Using Divi 5’s Interactions appeared first on Elegant Themes Blog.

The result is a collection of polished sections that feel intentional and consistent while still being easy to customize. Change the base color variable, and the entire section updates with it. That’s what makes this pack especially useful for client work, fast prototyping, branded landing pages, and anyone who wants a more system-driven approach to design in Divi 5.

Preview

Here’s a quick look at the 4 color adjustment design examples included in the pack. The download is further down the post.

Download 4 Color Adjustment Designs For Divi 5

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

Download the Files

Download For Free

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

DOWNLOAD

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

What’s Included (6 Exports)

After you download and unzip the file, you’ll find 5 styled section exports, plus 1 file containing all designs.

Styled – Color Adjustments Section 1 → The first half of Example 1. This section is meant to be used together with Section 2 and introduces the layout system with a strong hero-style composition.
Styled – Color Adjustments Section 2 → The second half of Example 1. Add it directly below Section 1 to complete the full two-section design.
Styled – Color Adjustments Section 3 → A standalone section example built around the same variable-based color workflow.
Styled – Color Adjustments Section 4 → A standalone section example showing a different color direction using the same structure and adjustment system.
Styled – Color Adjustments Section 5 → A standalone section example demonstrating another variation based on a different global color variable.
Styled – Color Adjustment Sections (All) → Imports the full collection into your Divi Library at once.

How To Use The Color Adjustment Sections

Keep your download folder handy. We’ll import the files, add a section to a page, and then update the variable-based colors or content as needed.

1. Import Sections Into The Divi Library

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

In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON file.

Choose any Color Adjustment Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Color Adjustment Section To Any Page

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

In the Insert Section modal, click Add From Library and select a Color Adjustment Section layout.

Finally, click Use This Section.

3. Pair Sections 1 And 2 Together

The first example in this pack is split across two sections. Color Adjustments Section 1 and Color Adjustments Section 2 are designed to work together as one continuous composition, so place Section 2 directly below Section 1 on the page.

The remaining examples are standalone sections, so you can use them individually without pairing them with another export.

4. Swap The Content

Once the section is on the page, replacing the placeholder content only takes a few clicks. Start by updating the headline, supporting copy, buttons, links, and images so the layout matches your message.

Because these designs rely on a coordinated color system, it’s helpful to update the content first and then refine the color direction after the structure and messaging are in place.

5. Change The Base Color In Variable Manager

Each example is built around a global color inside Divi 5’s Variable Manager. In this pack, the examples are based on different variables such as mint, green, white, blue, black, and brown. Each design uses one of those variables as its foundation.

To change the overall look of a section, open the Variable Manager and edit the base color assigned to that example. Because the layout uses color adjustments derived from that variable, the design updates across headings, backgrounds, buttons, accents, and supporting elements while maintaining the same overall hierarchy.

This is what makes the pack especially useful: you’re not just changing one flat color. You’re updating a system of related tones that already work together.

6. Fine-Tune The Adjustments Inside The Design

After setting the base color, you can refine how it behaves inside the layout. The sections use Divi 5’s color controls and HSL-based adjustments to create softer backgrounds, darker cards, more subtle borders, and stronger call-to-action elements from the same source color.

For example, one section might use a pale version of the base color for the overall background, a deeper version for a card, and a stronger, more saturated version for headings or buttons. That gives the design contrast and depth without breaking visual consistency.

If you want the section to feel brighter, reduce darkness in the adjusted values. If you want more contrast, push the darker variations further. If you want a softer aesthetic, lower saturation and keep the tonal range closer together.

7. Use The Pack As A Starting Point

These sections are already styled, so you can use them as-is or treat them as a starting point for your own system-based layouts. Keep the structure and simply change the base variable, or study how the same layout logic produces a very different result depending on the source color.

This approach is especially helpful when building branded sites, client kits, or reusable design systems where color consistency matters across multiple sections and pages.

Tips For Working With Color Adjustment Sections

These layouts are simple to use, but they’ll work best when you treat the colors as a system rather than a collection of disconnected choices.

Start With One Strong Base Color

Each example begins with a single global variable. Choose a base color that reflects the brand or page’s mood, then let the design adjustments generate the supporting tones. This creates a more unified result than assigning separate colors everywhere by hand.

Use Contrast To Create Hierarchy

The most effective examples in this pack use tonal contrast deliberately. Lighter backgrounds help content breathe, while darker cards and stronger buttons draw attention to key areas. Keep that relationship in mind if you change the underlying variable.

Let The Variable System Do The Heavy Lifting

One of the biggest benefits of Divi 5’s variable workflow is speed. Instead of restyling individual modules, update the base variable and then make small adjustment tweaks only where needed. That keeps the process fast and the results more consistent.

Keep Supporting Elements In The Same Color Family

Buttons, text accents, backgrounds, and card treatments should all feel related. Even when there is strong contrast, the adjusted tones should still clearly come from the same base variable. That relationship is what gives these sections their polished, system-driven feel.

Check The Design On Mobile

Color contrast can feel different on smaller screens, especially when cards stack and background areas become more prominent. Review the section on tablet and phone views to make sure text remains readable and the tonal hierarchy still feels clear.

Start Building In Divi 5 Today!

These 4 color adjustment design examples are a great way to explore a more flexible, system-based design workflow inside Divi 5. Use them to build cleaner branded layouts, experiment with global variables, and see how far a single base color can go when the rest of the design is built around smart adjustments instead of one-off styling decisions.

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

In this tutorial, you’ll learn two practical ways to create a simple Woo category page in Divi 5. The first uses the Woo Products module to generate a dynamic product grid quickly. The second uses individual Woo modules to build a more custom product card layout for curated products or featured sections. We’ll also show when it makes more sense to use Divi 5’s Loop Builder for a fully dynamic custom archive.

What Are Woo Modules In Divi 5?

WooCommerce category pages work out of the box, but the default structure is restrictive. Product grids, card layouts, spacing, typography, and button styles are mostly controlled by WooCommerce and your theme, so deeper customization often means editing templates or writing CSS.

Divi 5 changes that by turning WooCommerce elements into visual building blocks. We released new Woo Product Modules for Divi 5, covering product and category page design while keeping compatibility with WooCommerce’s core functionality.

That means you can place product-related elements exactly where you want them and style them with the same design controls you already use throughout Divi.

Subscribe To Our Youtube Channel

You can use Woo Modules to customize product templates, category templates, and broader store experiences alongside Divi 5’s cart and checkout tools.

For category pages specifically, the most relevant options are the Woo Products module for quick dynamic grids and Divi 5’s Loop Builder when you want a fully custom repeating card layout that still updates automatically based on the current category.

Learn Everything About Woo Modules

Building A Simple Woo Category Page In Divi 5

There are two good ways to approach a simple category page in Divi 5.

• Use the Woo Products module when you want the fastest setup and a dynamic grid that automatically pulls products from a category.
• Use individual Woo modules when you want to design a custom product card for a few hand-picked items, featured products, or a category landing section.

If you want every product in a category to render automatically inside a fully custom card design, use the Loop Builder. That is the best option for a dynamic custom archive layout in Divi 5.

Set Up Your Theme Builder Template

Both approaches start in the Theme Builder. In Divi 5, Theme Builder lets you assign one template to a specific group of WooCommerce pages, including product categories.

Go to Divi > Theme Builder and click Add New Template, then choose Build New Template.

In the Use On settings, scroll to Products, then choose Products in Specific Categories and select the category you want to target, such as Decor. Click Create Template.

Add a new Custom Body and edit it with the Visual Builder.

Design 1: Build A Dynamic Category Grid With Woo Products

This is the simplest and most practical method for most category pages. The Woo Products module is designed to display a dynamic gallery of WooCommerce products, and it can filter by category.

Add a new Section and insert a single-column Row.

Open the Row settings and add 60px Padding to give the layout breathing room.

Apply an 8px Border Radius.

Set the background to Black.

Click the black plus button inside the Row, open Woo Modules, and insert the Woo Products module.

In the module’s Content tab, set Product Type to Product Category, then choose Decor under Included Categories. This makes the grid pull products from that category dynamically.

From there, style the module to match your brand. Go to Design > Overlay and set the Icon Color to #FB7248. Set the Overlay Background Color to #000000 at 50% opacity.

Under Image > Border, add an 8px radius to the product images.

Style the Title Text and set the title color to White so it stands out against the dark background.

Then style the Price Text using your primary accent color to create stronger visual contrast.

At this point, you have a dynamic category grid that updates automatically as products are added to or removed from that category.

Design 2: Build A Curated Product Section With Individual Woo Modules

This approach gives you more visual control, but it works differently. Instead of building a dynamic archive grid, you create a custom card for specific products by combining separate Woo modules.

That makes this method a better fit for featured products, editorial category landing pages, or a small curated section inside a category template. If you want a fully dynamic repeating layout for every product in the category, skip to the note about Loop Builder below.

Add a new Section and insert a four-column Row. Apply 60px Padding, 8px Border Radius, and a White Background.

In the first column, add these modules in order:

• Woo Product Image
• Woo Product Title
• Woo Product Price
• Woo Add To Cart Button

Open the Woo Product Image settings and add an 8px Border Radius to the Sale Badge. Change its color to #467040.

Then style the title, price, and button modules so the card feels consistent. Adjust typography, spacing, borders, and colors until the design matches your store.

Once the styling is finished, open the Content tab in each module and assign the same product to all four modules. In this example, use Wooden Chair Set. That connects the image, title, price, and button to one specific product.

Your first card is complete. Copy the entire column and paste it into the second column so all styling carries over.

Repeat the process for the other columns, then change the selected product inside each module so every card displays a different item.

Before publishing, switch to tablet and mobile views to confirm the spacing, stacking, and button alignment still work well.

When you’re done, save the layout and return to Theme Builder. Click Save Changes to publish the template.

Important: When To Use Loop Builder Instead

The manual card method above is not the best choice when you want a true product archive that automatically repeats a custom card for every product in the current category.

For that, use Loop Builder. In Divi 5, the Loop Builder is a better tool for custom dynamic category pages because you can design a single product card layout, query WooCommerce products, and have Divi repeat that layout automatically across the category page.

In other words:

• Use Woo Products for the fastest dynamic category grid.
• Use individual Woo modules for curated or hand-picked product sections.
• Use Loop Builder for a fully custom dynamic archive layout.

Practical Tips Before You Publish

A few final checks can make the difference between a category page that looks good in the builder and one that works well for shoppers on the front end. Before you publish, review these details to make sure your layout stays polished, readable, and easy to use across devices.

• Keep category templates simple first, then refine spacing and styling once the structure is in place.
• Use consistent image ratios to keep product cards balanced across the grid.
• Check hover states, sale badges, and Add to Cart buttons on mobile and desktop.
• Preview the template on a category with enough products to test line breaks, pagination, and spacing.
• If you use a dark background, verify the contrast of the title, price, and button for readability.

Try Divi 5 Woo Modules On Your Category Pages

Divi 5 gives you more than one way to build WooCommerce category pages. The Woo Products module is the quickest route to a clean dynamic grid, while individual Woo modules give you more control for curated featured-product sections. When you need a fully custom repeating archive layout, Loop Builder is the stronger option.

That flexibility is what makes Divi 5 so useful for WooCommerce stores. You can start simple, improve the layout visually, and choose the method that matches the type of category page you’re actually building.

The post How To Create A Simple Woo Category Page With Divi 5 appeared first on Elegant Themes Blog.

Divi 5’s Group Carousel module was built for layouts like this. Once you understand how Groups, carousel settings, and responsive controls work together, building a polished card carousel becomes much more straightforward. In this guide, we’ll go from setup to styling to responsive refinement, with a few best practices that will save time as your carousel grows.

What A Card Carousel Is

A grid shows everything at once, which can become unwieldy when you have a lot of information to display. A single-item slider goes the opposite direction, hiding too much behind one focal point.

A card carousel sits between those two patterns. It shows enough content to provide context while keeping the layout compact. In practice, it is a row of cards that visitors can move through using arrows, dots, drag, or swipe gestures.

Each card usually groups related content such as an image, a heading, supporting text, and a button. Only some of those cards are visible at a time, while the rest remain off canvas until the carousel advances.

The format also adapts well across screen sizes. A desktop layout might show three or four cards at once, while tablet and phone views often reduce that to one or two. That makes card carousels useful for product highlights, team members, portfolio items, services, testimonials, and post loops.

The Group Carousel Module In Divi 5

The Group Carousel module is Divi 5’s built-in way to create multi-item carousels and sliders. Each slide is a Group, and each Group acts like a flexible container that can hold the modules your card needs, such as an image, heading, text, button, icon, rating, price, or dynamic content.

Because each slide is just a Group, you are working with the same design system and modules you already use elsewhere in Divi 5. That means the card structure can follow the content instead of forcing the content into a rigid template.

That Group-based structure also shapes how styling works. In the carousel’s Design tab, you can style inactive Groups and Active Groups separately. This makes it easy to keep a consistent baseline style across all cards and then add extra emphasis to the card currently in focus using filters, transforms, shadows, borders, or backgrounds applied in one place.

Building A Card Carousel In Divi 5

A strong result starts with a few structural decisions early on. Once those are in place, the rest of the build gets faster and cleaner.

Set Up The Row And Insert The Group Carousel Module

Start with a single-column row, open the module panel, and add the Group Carousel module. Divi 5 inserts it into the column with one Group already inside. That Group becomes your first card, and the rest of the carousel builds from there.

There are two setting groups worth reviewing right away in the Content tab. Under Elements, you can toggle arrows and dot navigation on or off depending on how you want people to move through the carousel. If arrows are enabled, you can also choose a different icon when the default chevron does not fit the design.

Under Carousel Settings, set the interaction pattern for the carousel. You can enable Automatic Rotation if the design calls for movement, but use it deliberately. For content-heavy cards, manual navigation is often easier to scan. Slides to Show, Slides to Scroll, and Transition Speed should be chosen based on the amount of content in each card and how dense you want the layout to feel.

Center Mode keeps the active card centered, with adjacent cards partially visible on either side. It works well when you want to spotlight a single card and hint that more content is available.

If your goal is to show three full cards in a straightforward row, leaving Center Mode off usually makes more sense.

Build The First Card Carefully

The first card becomes the template for the rest of the carousel, so the time you spend here pays off across every duplicate. Add the modules your card needs inside the first Group: Image, Heading, Text, Button, or any other combination that suits the content.

A team card might only need a photo and a name. A product card may need an image, title, short description, price, and CTA. The structure should follow the job of the card.

As you style the modules inside the card, use Design Variables or Presets for colors, typography, spacing, and radius values instead of hardcoding them. That keeps the carousel aligned with the rest of your site and makes future changes much faster.

One practical tip: avoid over-styling the Group too early. Get the card content structure right first, then handle shared card styling at the carousel level.

Duplicate And Populate The Remaining Cards

Once the first card is built, duplicate that Group to create the rest of the carousel. Each duplicate keeps the structure and styling of the original, so you are only swapping content rather than rebuilding the layout from scratch.

Then open each duplicate and replace the image, heading, body copy, button text, and link as needed. That is the main advantage of getting the first card right.

If you are building a larger carousel, rename each Group using its Admin Label. Clear labels such as “Card 1: Feature” or “Card 3: Pricing” make it much easier to manage the carousel later.

Style The Carousel At The Group Level

Styling the carousel at the Group level is usually more efficient than opening each card individually for shared design changes. Inside the Group Carousel module, go to the Design tab and expand Groups. This is where you can apply shared styles to the inactive cards across the entire carousel.

Here you can set Background, Spacing, Sizing, Borders, Box Shadows, Filters, and Transforms for all Groups at once.

Use margin to control the space between cards and padding to control the internal spacing inside each card.

Borders and box shadows help create separation between cards, especially when your carousel sits on a busy background. As with the individual module styling, Design Variables are a better long-term choice than fixed values.

A useful best practice here is to standardize card height as much as possible. If one card has much more copy than the others, the carousel can look uneven. Keeping headlines, body copy, and button placement relatively consistent improves the visual rhythm.

Style Active Groups Separately

Groups define the baseline appearance of every card. Active Groups let you add emphasis to the card currently in focus.

Active Groups include many of the same styling controls as Groups, including Background, Filters, Transforms, Box Shadow, and Borders. Anything you set here only affects the active card, while the Groups settings continue to define the inactive cards.

A subtle scale increase, stronger shadow, full saturation, or higher contrast is often enough. The goal is to guide attention, not make the active card feel disconnected from the rest of the set.

Center Mode pairs especially well with Active Group styling because the focused card always sits in the visual center of the row.

Design Navigation Controls

Arrow styling lives under Design > Arrows, where you can adjust color, size, and position. Outside is often the cleanest placement for card carousels because it keeps the controls near the content without covering it.

Dot Navigation gives you controls for position, alignment, size, and color.

When both arrows and dots are enabled, keep them visually secondary to the cards themselves. They should support navigation, not compete with the content.

Make The Carousel Responsive

A card carousel may span the full row on desktop, but it nearly always needs adjustments at smaller screen sizes. Divi 5’s Responsive Editor makes this easier by letting you edit values by breakpoint from one interface.

Slides to Show is usually the first setting to revisit. A layout that looks balanced at three cards on desktop may need two on tablet and one on phone. You may also need to reduce spacing, adjust heading size, or shorten copy.

Divi 5 enables three breakpoints by default and supports up to seven customizable breakpoints when you need more granular control.

Card heading size, body copy, image ratio, and internal spacing are all worth checking at every breakpoint. Divi 5 also supports Advanced Units, including functions like clamp(), which can help create more fluid spacing and type scales.

Clamp() lets values scale fluidly between a minimum and maximum size as the viewport changes, instead of jumping between fixed values at each breakpoint. We cover that in more depth in our full clamp() guide.

One more practical tip: test swipe behavior and button taps on a real phone before publishing. A carousel that looks correct in the builder can still feel cramped if tap targets are too small or cards sit too close together.

Optional: Create A Dynamic Carousel

Static carousels work well when the content changes infrequently. But if you are displaying posts, products, listings, team members, or other repeatable content, building the carousel dynamically is the better long-term option.

Modules inside a Group can use dynamic content, which makes it possible to pull in post titles, featured images, prices, custom fields, and more.

The Group Carousel also works with Divi 5’s Loop Builder. Instead of building every card by hand, you create one card template and repeat it across posts, products, team members, or custom post types. The result is a carousel that stays current as your WordPress content changes.

If you want to take the carousel further, we cover the full setup in our custom post type carousel loop tutorial.

Try Building Carousels In Divi 5 Today!

A card carousel can solve layout problems that a static grid or single-slide slider cannot. With Divi 5‘s Group Carousel module, you can build the structure natively, style inactive and active cards separately, refine the layout responsively, and connect the whole thing to your design system using Variables and Presets.

And if the content needs to stay fresh, pairing the Group Carousel with dynamic content and the Loop Builder turns it into more than a visual pattern. It becomes a maintainable part of your site architecture. Get started with Divi 5 and build card carousels that look polished, stay flexible, and scale cleanly.

The post How To Create A Card Carousel In Divi 5 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.2 update notification today.

What’s New In Divi 5.2?

We implemented 69 bug fixes and improvements, and a new feature: Composable Settings.

With Divi 5 hot off the presses, we are still focused on bug fixing and overall stability. However, after 8 months of doing nothing but fixing bugs, we are slowly transitioning back to feature development.

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

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

Composable Settings

We released Composable Settings in Divi 5.1.1 🎉, allowing you to enable any of Divi’s design options for any module sub-element.

This update completely harmonizes the available settings for Divi modules, which means you’ll never have to use CSS to fill the gaps; enable sizing options for buttons, animation options for titles, and everything in between.

Upcoming Divi 5 Features

We have many plans for Divi 5. We’re listening. We’re building. As each upcoming feature reaches a demoable state, I’ll give you a sneak peek.

Here’s what we are working on right now. 👇

Focus Editing, Field Presets & New Form Modules

Forms are an essential part of every website.

Soon, Divi’s form field styling options will be completely overhauled, allowing you to style forms site-wide using form field presets. Additionally, hundreds of new options will be unlocked thanks to the introduction of focus editing mode.

With better form options in place, new form-based modules will soon arrive!

Changelog

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

• Fixed a fatal error that occurred when a third-party module with a non-string content value was saved and rendered as a Global Module.
• Fixed an issue where the Responsive Editor displayed incorrect default values for the Section and Row gap fields.
• Fixed Contact Form basic math captcha missing an associated label, which triggered accessibility warnings for the captcha field on the front end and in the Visual Builder.
• Fixed the Visual Builder color picker not responding when using an ACF Color Picker field as dynamic content (including in Theme Builder), after a recent global color opacity improvement.
• Added AI Agent UI tools for preview mode and light/dark mode controls, including tested toggle parity and idempotent state-setting behavior.
• Fixed entity-encoded page titles appearing in Portability and Page Settings title fields.
• Fixed a compatibility issue that could cause fatal errors when third-party plugins passed nullable values through WordPress translation hooks.
• Fixed an issue where global module visibility changes could not be saved because the Save button remained disabled.
• Fixed color fields rejecting non-global CSS variables when entering custom colors.
• Fixed an issue where Layers could show empty or incorrect content while editing non-main off-canvas canvases in Theme Builder contexts.
• Added a New chat control and conversation title toolbar to the Divi AI Agent modal so users can start a fresh chat while keeping the modal open, including when the modal is pinned.
• Fixed docked sidebar modal tabs overflowing the sidebar when many modals were open in one row; the tab strip now scrolls horizontally within the sidebar instead of overlapping the canvas.
• Fixed button icon not displayed on hover when a custom icon was selected and the icon position was set to right.
• Fixed an issue where button animation settings could be incorrectly applied to unrelated nested elements (such as contact form labels/icons) during interaction-triggered animation replay.
• Fixed speculative “Edit With Divi” prerendering so it only runs for posts that already have Divi enabled.
• Enabled custom attributes for the cart quantity element in the menu module.
• Enabled custom attributes for the captcha element in the contact for module.
• Fixed missing CSS selector for composable settings output for the captcha and cart quantity elements.
• Fixed duplicate composable settings group options in several Woo module button groups.
• Fixed missing composables settings CSS selectors for various style-only module elements that resulted in composable setting CSS not targeting the desired module element.
• Fixed broken CSS on pages with loops if a paginated page was visited prior to the main loop page.
• Fixed Divi 4 -> Divi 5 selective-sync conversion for global modules by restoring migrator post-context and correctly mapping wildcard style paths to localAttrsMap (attrName + subName), preserving unsynced fields after migration.
• Fixed an issue where custom CSS containing inline comments in Module Elements fields was removed during migration from Divi 4 to Divi 5.
• Fixed an issue where Conditional Display based on Custom Field values would not work correctly on Category and Archive pages.
• Fixed header and footer layouts appearing blank in Wireframe view when editing in the Theme Builder.
• Fixed an issue where setting the module global color opacity to 100% could still render the module transparent when the source variable’s opacity was 0.
• Fixed the Slide module Content Alignment control not working when the custom Content Width is set.
• Fixed the global elements confirmation modal to properly prevent all outside interactions when unsaved changes exist, eliminating multiple popups and console errors.
• Fixed Lottie module preset interactions not updating animation speed and playback settings on the frontend.
• Fixed Image (and other modules with similar quirks as Image Module) Sizing and Spacing option groups are not being correctly copied or extended due to attrsMaps cache collisions.
• Fixed SVG hover/sticky paint transitions for 3PS modules.
• Fixed an issue where the Preset Manager settings modal would immediately close after clicking “Add New Preset” for the Heading Text option group, and ensured the correct preview module (Text with h1-h6 content) and settings group (FontHeaderGroup with h1-h6 tabs) are displayed.
• Fixed button icons not appearing on the frontend for the WooCommerce Checkout Payment module when using non-default icons.
• Fixed an issue where responsive editor indicators did not appear at the static module level when responsive values came from applied module or option group presets.
• Fixed-block layout columns inside flex rows were rendered as flex containers, causing incorrect module spacing.
• Fixed a Blurb issue where custom attributes targeted to Image or Icon were not applied when the module was using an icon.
• Fixed element attributes not loading on the frontend when Loop Builder returns no results, ensuring CSS classes, IDs, and custom attributes are preserved to match the Visual Builder preview.
• Fixed a security issue in Divi 5 Contact Form redirects by blocking unsafe redirect URLs while preserving valid redirects.
• Security Updated Fixed a stored XSS vulnerability that made it possible for users with the Contributor role or above to insert JavaScript code onto the page via the Video Slider module’s shortcode.
• Added AI-agent Context, Module, and UI tool sets to Divi 5 with Builder-contract-compatible behavior and integration tests.
• Prevented unsafe remote requests when resolving video thumbnail URLs to mitigate SSRF risk.
• Fixed border styles expanding to full column width on small Image modules in Divi 5 flex layouts. Borders now wrap tightly around the image regardless of image size.
• Fixed an issue where featured images displayed the same image on all paginated pages in Theme Builder layouts on taxonomy archive pages. This was a regression from issue #47541 that occurred when the original fix was reverted during a merge.
• Fixed Divi 4 to Divi 5 migration regressions for library-backed tab spacing assets and free-form custom CSS conversion.
• Fixed a Visual Builder parity issue where Divider alignment inside flex columns could hide the divider.
• Fixed ACF taxonomy archive background images so Dynamic Content custom fields now resolve correctly for Image URL, Image ID, and Image Array return formats.
• Fixed double slashes in es6-promise script URLs that were causing issues with 3rd party asset offloading plugins.
• Fixed background gradients with global colors using opacity filters, not rendering on the frontend when parallax background images were enabled. The fix resolves CSS sanitization issues with nested gradient functions and prevents the generation of invalid CSS syntax.
• Fixed the Image module drag-and-drop functionality so it can be dragged from its center area when the settings panel is open, consistent with other Divi modules.
• Customer-friendly, past-tense one-liner describing the fix.
• Fixed a Visual Builder issue where typed settings could be applied to the next clicked element when switching modules before pending field commits were completed.
• Fixed Group Carousel rotation could stop working after sections hidden on load were revealed via Visibility or Interaction settings.
• Fixed Woo Checkout Payment button styling in Visual Builder so toggling the button icon no longer changes button text color or border appearance.
• Fixed sticky elements not working correctly in Safari when section dividers are enabled by moving the Safari-specific perspective CSS from the section container to the divider elements themselves.
• Fixed a logic bug in internal helpers that determine whether a string starts or ends with a given substring, which could return the wrong result.
• Fixed a security issue where legacy Dynamic Content JSON could keep raw HTML enabled for users without unfiltered_html.
• Fixed responsive icons not displaying correctly when set to different icons per breakpoint in Group Carousel modules.
• Fixed Email Optin forms connected to AWeber not showing an error when an already-subscribed email is submitted again.
• Fixed Contact Form “Letters Only” validation to correctly support international characters and multi-byte UTF-8 names.
• Fixed Global Variables Manager modal crashing with “Maximum call stack size exceeded” when Heading and Body text colors reference each other.
• Fixed Pagination preset link text color precedence so primary accent fallback no longer overrides preset/global variable link colors.
• Fixed the Woo module product selector so that This Loop Product appears correctly in Theme Builder current-page loop contexts for Woo archives.
• Fixed Blog module pagination, Font Weight, Text Size, and Text Alignment not applying when the WP-PageNavi plugin is active.
• Fixed PHP 8.5 deprecation warnings when saving in Visual Builder and rendering the frontend.
• Fixed Group Carousel autoplay timing so configured transition cadence applies consistently across all slide transitions, including high transition-speed setups.
• Fixed Free-Form Custom CSS in the Visual Builder, not showing an error when a closing brace was missing at the end of the stylesheet.
• Fixed a Divi AI authentication flow issue where missing credentials could trigger invalid-credentials behavior and block inline recovery in the Visual Builder.
• Fixed the issue where opening the Module Elements tab would automatically jump to CSS fields that had content.
• Fixed an issue where newer standard HTML attributes, including fetchpriority, popover, popovertarget, elementtiming, command, and commandfor, were incorrectly rejected as invalid in the Custom Attributes panel.

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.2 Release Notes appeared first on Elegant Themes Blog.

One of the most useful tools for this kind of custom component is Module Groups. Groups let you bundle multiple modules into one manageable unit, which makes it easier to build repeatable UI elements such as badges, review summaries, pricing callouts, and custom star ratings.

In this post, we’ll walk through how to create a custom star rating module in Divi 5 using Groups and Flexbox. By the end, you’ll have responsive, reusable star rating designs that you can save and use throughout your site.

Let’s get started.

What Are Module Groups?

Groups are one of the most useful structural additions in Divi 5. A Group is a container element that lets you bundle multiple modules into a single, cohesive unit inside a column. Once modules are placed inside a Group, you can move, duplicate, style, and manage them together far more efficiently.

That makes Groups especially useful for building custom, repeatable components without needing extra Nested Rows.

Here are a few of the most useful things Groups bring to this workflow:

• Built-in Flexbox controls: Groups work especially well with Divi 5’s Flexbox-based layout system, giving you visual control over direction, alignment, justification, wrapping, and gap spacing across breakpoints.
• Nesting support: You can place Groups inside other Groups to build more advanced structures while keeping the layout organized.
• Group-level styling: Apply backgrounds, borders, shadows, spacing, sizing, transforms, and other design settings at the container level.
• Reusable design patterns: Once a Group-based component looks the way you want, you can save and reuse it across your site.

In short, Groups make it much easier to build polished, reusable components like star ratings while keeping your page structure lean and manageable.

Step-By-Step Guide For Creating A Star Rating Module

In this section, we’ll build two custom star rating designs using Groups and Divi 5’s native Flexbox controls. The first example is more decorative and layered. The second is much simpler and works well for compact rating displays.

While Nested Rows could also be used for certain custom layouts, they are unnecessary here. Groups and Flexbox provide enough control to handle spacing, alignment, and responsiveness with fewer layers and less overhead.

Star Rating Module Example 1 (Layered Design)

Set Up The Group Structure

Start by creating a new page or opening an existing one in the Visual Builder. Add a new three-column row to the page.

In the first column, add a Group. This will be the Main Group.

Inside that Group, add another Group. This will be the Circle Group.

Next, use Layer View to add another Group inside the Main Group.

Hover over the Main Group in Layer View, open the menu, choose Add Element, and place another Group inside it. This will be the Star Group.

Now select the Main Group, go to Design > Layout, and set Layout Direction to Row. This places the Circle Group and the Star Group next to each other.

Size The Groups

Now set the sizing for each nested Group. Select the Circle Group, go to the Design tab, and open Sizing. Set the Width to 25%.

Use the Responsive Editor to adjust the width at smaller breakpoints. Keep it at 25% for larger screens, then set Phone Wide and Phone to 20%.

Repeat the process for the Star Group, setting the Width to 75% on larger breakpoints and 80% on Phone Wide and Phone.

Next, select the Main Group, go to Design > Layout, and set the Horizontal Gap to 0px.

Then set Align Items to Center.

Add Design Elements To The Circle Group

With the structure in place, click into the Circle Group and add a Text module. Set a Background Color in the module settings.

Go to the Design tab and open Layout. Set both Justify Content and Align Items to Center so the rating number stays centered inside the circle.

In Sizing, set both Width and Height to 60px.

Use the Responsive Editor to reduce those values at smaller breakpoints if needed.

Next, open Border and set the Border Radius to 50%. Add a 2px border and choose a border color.

Finally, go to Advanced > Position and set the Z Index to 15. This allows the circle to overlap the Star Group cleanly.

Style The Star Group

Select the Star Group and assign a background color in the Content tab.

In Design > Layout, set the Horizontal Gap to 15px. Then use the Responsive Editor to adjust it for smaller devices as needed.

Open Spacing and add a -35px left margin, 10px top and bottom padding, and 30px left padding. Tweak those values by breakpoint if your design needs more room on smaller screens.

Next, open Border, set the Border Radius to 10px, add a 2px border, and choose a border color.

Finally, in Transform > Transform Skew, set the X-axis skew to -10deg.

Add The Star Icons

Now click inside the Star Group and add an Icon module.

Choose a Star icon in the Content tab.

Then go to Design > Icon and set the Icon Color and Icon Size. Use the Responsive Editor to fine-tune the size at different breakpoints.

Because the parent Group is skewed, the icon will also inherit that visual distortion. To counter it, open the Icon module’s Transform settings and apply a 10deg skew on the X-axis. This counter-transform keeps the star visually straight while preserving the skewed container shape.

Using Layer View, duplicate the Icon once.

Change the color on the second icon to create contrast.

If the icons stack vertically, select the Star Group, go to Design > Layout, and set Layout Direction to Row.

Then duplicate the second Icon three more times until you have a five-star row.

At this point, your star rating module should look like this:

Once the module is complete, give the Group a clear Admin Label such as 1-Star Rating, then save it for reuse in your library.

To create variations, duplicate the saved version, adjust the rating number, swap colors, rename it, and save each version as its own reusable item.

A practical best practice here is to decide early whether you want the component to show only full-star values or support partial ratings visually. If you need half-star or decimal-style ratings, build that variation intentionally from the start so your saved versions stay consistent.

Apply The Module To An Existing Layout

Once saved, you can add the star rating module anywhere on your site by loading it from your saved items when inserting an element.

For example, you can place it in a product section, adjust the width as needed, and use z-index settings to create a layered composition.

Star Rating Module Example 2 (Basic Design)

Using a simpler version of the same approach, you can also create a minimal star rating with a single Group. This style works well for product cards, short reviews, and compact content areas.

Add a new three-column row, place a Group in the first column, and add one star Icon module inside it.

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

Set a background color on the Icon module, then choose a white icon color and an Icon Size of 20px.

In Spacing, apply 5px padding on all sides.

Then add a 5px border radius to the Icon.

Finally, duplicate the icon until you have a five-star row.

From there, save it for reuse and insert it into other layouts as needed.

A small but helpful improvement for this simpler version is to save multiple color variants up front, such as gold, dark, muted, and brand-colored versions. That gives you more flexibility when dropping the module into different design contexts later.

Download The Files

In addition to the two examples above, there are five more variations you can use in your own projects. Download them below, import the JSON files into your library, save them as individual reusable items if needed, and place them throughout your site.

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!

Start Building In Divi 5 Today!

Creating custom star rating modules in Divi 5 is straightforward once you use Groups and Flexbox together. They give you enough structural control to build reusable, responsive components without needing custom CSS, extra plugins, or unnecessary layout layers. From a layered badge-style design to a simple five-star strip, the same workflow scales well across different use cases.

The biggest advantage is reusability. Once you build one version cleanly, you can save it, duplicate it, create variations, and use it anywhere you need rating visuals across your site. That makes star ratings faster to maintain and much easier to keep consistent.

The post How To Create Custom Star Rating Modules In Divi 5 appeared first on Elegant Themes Blog.

The classic Menu module is still available for simple setups, while the new Link and Dropdown modules act as building blocks for fully custom menus. Paired with updated Loop Builder capabilities and selector-based Interactions, they let you design everything from simple dropdowns to full-screen overlays, slide-ins, and mega menus using native Divi 5 modules and settings.

In this post, we’ll look at these new features, walk through creating a simple desktop and mobile menu with them, and share a few practical tips to help you get started.

Let’s dive in.

Building Menus In Divi 5

Divi 5 rethinks navigation by moving to a modular system. Instead of being locked into a single Menu module, you can now combine Link and Dropdown modules as building blocks. This gives you far more creative control directly within the Visual Builder while letting these elements work alongside native features like the Loop Builder and Interactions.

You can keep things simple by styling individual Link modules with custom text.

For menus that change frequently, Menu Loops are often the better option. By enabling looping for a menu item pattern and using Link modules with menu-based dynamic content, Divi can pull your navigation structure directly from a WordPress menu. That lets you keep your custom design in Divi while managing the actual menu items in WordPress.

For more complex navigation, the Dropdown module provides the structure for dropdown menus, nested layouts, and mega menus.

You can choose between Hover or Click triggers and use the Interactions panel to target specific elements, such as the parent, root container, or child elements.

Because these are native modules, you can nest Rows, Images, Buttons, and other modules inside Dropdown modules to build more advanced navigation patterns.

What Is The Link Module?

In earlier versions of Divi, a menu item was just a line of text inside the Menu module. In Divi 5, each menu item can be its own standalone module. That means you get the same design control over a single menu link that you would over a Button, Blurb, or CTA.

Key Features

One of the most useful aspects of the Link module is its integration with Dynamic Content. When used inside a menu loop, a Link module can automatically receive the correct menu text and URL from the current menu item. This means if you rename a page or update a menu item in WordPress, your custom menu can stay in sync.

Modern navigation often uses visual cues, such as icons that indicate a dropdown or call attention to a link. The Link module includes native icon support, letting you place an icon next to your text and style it independently in the Design tab.

Using the built-in state controls, you can style hover states for your links, such as changing color, weight, borders, or spacing.

Because the Link module is a standalone element, you aren’t forced into a one-size-fits-all menu style. One link can remain simple text while another can be styled more like a button, all within the same navigation row.

What Is The Dropdown Module?

The Dropdown module is a container module whose content can remain hidden until a user interacts with its trigger. This makes it the parent structure for building everything from classic dropdown menus to more complex mega menus.

Key Features

With built-in trigger logic, you can control how your menu reveals itself. You can set the dropdown to open on Hover for a traditional desktop experience or on Click for a more deliberate, touch-friendly interaction.

Navigation doesn’t always have to drop down. Divi 5 lets you choose where the menu appears relative to its trigger, with options such as Above, Below, Left, and Right. That makes it easier to build slide-out sidebars or other custom navigation layouts.

Alignment controls are built in too, with options for Start, Center, and End relative to the parent element.

The Dropdown Offset also supports Divi 5’s Advanced Units, giving you precise control over the spacing between the trigger and the dropdown content.

Finally, you can choose how the dropdown behaves in the layout. A Floating dropdown overlays the page content, while an Inline dropdown pushes surrounding content down when opened.

Because the Dropdown module is a native container, you aren’t limited to links alone. You can place Rows, Columns, Images, Buttons, Contact Forms, or even Video modules inside it.

Understanding Menu Loops

The Loop Builder is one of Divi 5’s most powerful features. It allows you to design a repeatable template item and tell Divi to output that design for every item in a specific data source. In this case, that data source is a WordPress menu.

Key Features

Within the loop settings, you can choose Menu as the query type. This is a specialized loop source for navigation.

Once the Menu source is selected, Divi looks at the WordPress menu you’ve chosen and repeats your linked design for each item in that menu.

This gives you the best of both approaches. You get the design flexibility of Divi modules, but you can still manage menu items centrally in WordPress. If you add or remove an item later, your custom Divi 5 menu can update without rebuilding the layout.

Using Menu Loops also improves consistency. Rather than styling each menu item separately, you can design the pattern once and let Divi repeat it.

New Features In Interactions

In Divi 5, the Interactions tab in the Advanced tab is the control center for triggers and effects. Interactions were released during the beta, and newer additions include selector-based targeting plus breakpoint-based triggers such as Breakpoint Enter and Breakpoint Exit.

Selector-Based Targeting

There are several useful targeting options beyond selecting only an individual module:

• Parent targets the containing element of the trigger module. This is useful when a child element needs to control something higher in the structure.
• Root Container targets the top-level element in the current component hierarchy.
• Child targets child elements inside the trigger container, allowing one trigger to affect multiple items at once.

In practice, these work together with triggers such as hover, click, viewport entry, and breakpoint changes, plus effects such as showing, hiding, or transforming elements. In Divi 5, the Dropdown module already ties its visibility to its parent trigger, but Interactions let you extend that behavior further, such as closing an off-canvas menu via a child icon that targets the parent or showing a mobile menu only at certain breakpoints.

How To Create A Desktop And Mobile Menu

To show how these features work together, we’ll build a simple responsive menu using the Link and Dropdown modules, Menu Loops, and Interactions. By the end, you’ll have a desktop menu and a mobile menu that can be shown and hidden without third-party plugins or custom CSS.

Start by creating a new Global Header in the Theme Builder.

When the Visual Builder loads, click the green + icon to add a new Row.

Select a single-column Flex Row.

Before adding modules to the Row, adjust the Flex settings. In the Design tab, expand the Layout settings at the Column level. Set Layout Direction to Row, Justify Content to Space Between, and Align Items to Center. This places the modules side by side and vertically centers them within the container.

Now click into the Section, go to the Design tab, expand the Spacing settings, and assign 15px of padding to the top and bottom.

Create The Top-Line Navigation

With the Section and Row ready, start by adding an Image module for your logo. In the Design tab, open the Sizing settings and set the Width to 7%.

Use the Responsive Editor to define different widths for smaller screens. Activate it by hovering over the field and clicking the Edit Responsive Values icon.

Click each breakpoint in the Responsive Editor to assign the appropriate value.

Next, add a Module Group to hold the desktop version of your navigation links.

Ensure that the Group’s Layout Direction is set to Row in its Layout settings.

Now add a Link module inside the Group.

In the Link module’s Content tab, enter the Text value.

Then add the destination. Expand the Link settings and hover over the Link URL field to reveal the Insert Dynamic Content icon.

Choose Page Link from the available options.

Use the dropdown to select the page you’d like the link to point to, then click Apply.

From there, switch to the Design tab to style your link. Use hover and responsive controls as needed for color and spacing.

Duplicate the Link module to add the rest of the links in your menu, and update the text and destination for each one.

You’ll also add a Button and an Icon module. Style them however you like. The Icon module will act as the trigger for launching the mobile menu in the next section.

Create The Dropdown Menu

Now that the top-level navigation is in place, create a dropdown menu for one of the links. Click the Link module you want to attach it to. In the Content tab, open the Elements settings and click + Add Element.

When the Insert Module Or Row dialog appears, choose a Dropdown module.

Add Link modules inside the Dropdown by clicking + Add Element in the Elements settings of the Dropdown module.

For extra visual clarity, you can add icons to those Link modules.

Add as many links as you need, then style the Dropdown module’s background and layout settings to match the rest of your navigation.

In the Design tab, open the Dropdown settings. For this example, keep the defaults and set Dropdown Alignment to Center.

Once finished, save the template.

Create The Mobile Menu

Next, create the mobile menu. We’ll use a new Canvas to house it. Click the Canvas Grid View button in the builder’s top bar.

When the Canvas window opens, click + Add Canvas.

Give the Canvas a name such as Mobile Menu and assign a high Z-Index, such as 999999, so it can sit above the rest of the page content. Click Add Canvas to open it in the builder.

Add a single-column Row to the Canvas, select the Column, and open the Layout settings in the Design tab. Set the Vertical Gap to 15px.

Add Modules To The Mobile Menu

Now add the modules for the mobile menu. Add an Icon module for closing the menu, followed by a Link module and a Button module. Style them as needed.

Instead of adding multiple links manually, use the Loop Builder to create a menu loop for the rest of the menu. Click the Link module and open the Loop settings in the Content tab. Enable looping or place the Link module inside the menu loop structure used in your layout.

In the Query Type dropdown, select Menu and choose the menu you want to use.

Then make sure the link text is populated automatically. Open the Text settings in the Content tab, hover over the Text field to reveal the Insert Dynamic Content icon, and select Loop Menu Text.

For the link destination, also use dynamic content for the URL so each looped item points to the correct menu target.

Configure Interactions

To launch the mobile version of the menu and close it again, configure Interactions for the close Icon, the mobile menu canvas content, and the hamburger Icon in the main header.

While inside the Mobile Menu Canvas, select the close Icon module. Go to the Advanced tab, open the Interactions settings, and click + Add Interaction.

Choose Click as the trigger.

When the interaction editor opens, give the interaction an Admin Label such as Hide Menu, choose Hide Element as the Effect Action, and set the Target Module to Root Container. This closes the mobile menu when the user clicks the close icon.

Now hide the mobile menu by default so it doesn’t appear until triggered. In the Visibility settings for the mobile menu content, disable its visibility by default, then use Interactions to show it when needed.

Save the Canvas. Before heading back to the Main Canvas, use Divi 5’s Customizable Responsive Breakpoints to fine-tune the mobile layout if needed.

Click Canvas Grid View and switch back to the Main Canvas.

Configure The Main Canvas Interactions

On the Main Canvas, configure the desktop and mobile visibility behavior. Start by selecting the Group that contains the desktop Link modules. In the Advanced tab, open Interactions and add a new interaction. Give it an Admin Label such as Hide On Tablet And Below, set the Trigger Event to Breakpoint Enter, choose the relevant breakpoint, set the Effect Action to Hide Element, and target the Group.

Repeat that approach for any other desktop-only elements, such as the Button module.

For users resizing their browser windows, it’s a good idea to add another interaction for the desktop-only elements to reveal these elements as the browser window increases in size. For example, when resizing from smaller to larger breakpoints, the menu displays the mobile version instead of the Desktop version.

To correct this, we’ll create Interactions to restore the Desktop Menu as the browser resizes. Create an Interaction for the Group and Button using Breakpoint Enter as the Trigger Event, Breakpoint set to Desktop, Show Element as the Effect Action, and choosing the appropriate Target Module.

Now select the hamburger Icon module. In the Advanced tab, open the Visibility settings and hide it by default.

Then create two interactions: one to show the Icon when entering the tablet breakpoint and another to show the mobile menu on click. For the first, use Breakpoint Enter with the desired breakpoint, Show Element as the effect, and the hamburger Icon as the target.

For the second, create a Click interaction with Show Element as the effect. Set the target to the mobile menu section in the Mobile Menu Canvas.

Save the template and preview the menu on the front end. Resize the browser to confirm that the desktop links are hidden at smaller breakpoints, the hamburger icon appears, and the mobile menu opens and closes correctly.

Tips And Best Practices

Building a complex navigation system is only half the job. Maintaining it is the other half. To get the most out of Divi 5’s menu features, keep your menus organized, responsive, and easy to update.

Use Layer View And Admin Labels

Because custom menus often involve Links, Dropdowns, Groups, and Nested Modules, the canvas can get crowded quickly. Use Admin Labels consistently and rely on Layer View to keep the structure easy to manage.

Use Responsive Editing Early

A navigation layout that looks great on a large monitor can break down quickly on a smaller device. Use Divi 5’s Customizable Responsive Breakpoints and the Responsive Editor early in the process rather than waiting until the end.

Use Variable Manager For Design Consistency

Before styling your Link and Dropdown modules heavily, open the Variable Manager.

Define your brand colors, fonts, spacing, and other reusable values as Design Variables. That way, if your design system changes later, you can update it from one place instead of editing many individual modules.

Use Presets To Reduce Repetitive Styling

If you find yourself applying the same padding, shadows, border radius, or spacing repeatedly, use Option Group Presets. They let you save a reusable group of settings and apply it across different module types.

You can take this further by using an Option Group Preset inside an Element Preset. For example, you might create a Primary Button preset that includes a reusable spacing preset. If that spacing changes later, updating the underlying preset can update every module that depends on it.

Plan For Accessibility

Because you’re building menus from modular pieces, remember to check the final output, not just the visual design. Make sure links remain clear, hover-only behaviors have touch-friendly alternatives where needed, and mobile menu triggers are easy to identify and operate.

Download The Files

If you’d like to see these features in action, download the working files from this post. To use them, import them into the Divi Library, create a new Global Header Template in the Theme Builder, and load the sections into the 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!

Build Custom Menus In Divi 5 Today!

The new menu features in Divi 5 let you combine the Link and Dropdown modules with Menu Loops and Interactions to build custom menus directly inside the Visual Builder. Whether you’re building a simple header, a mobile overlay, or a more advanced mega menu, these tools give you far more flexibility than the classic all-in-one approach.

Try them on a staging site or in a new header template and experiment with the combinations. Start simple, then layer in loops, dropdowns, canvases, and interactions as needed. That’s the fastest way to get comfortable with Divi 5’s new approach to navigation.

The post Everything You Need To Know About Divi 5’s New Menu Features appeared first on Elegant Themes Blog.

Preview

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

Download 6 Collages For Divi 5

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

After you download and unzip the file, you’ll find 6 styled Collage Section exports, plus 1 file containing all designs.

Styled – Collage Section 1 to 6 (6) → Six fully styled collage section layouts for creative headers, product features, portfolio blocks, and layered content presentation that you can use as-is or customize.
Styled – Collage Sections (All) → Imports all 6 designs into your Divi Library at once.

How To Use The Collage Sections

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

2. Add A Collage Section To Any Page

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

In the Insert Section modal, click Add From Library and select a Collage Section layout.

Finally, click Use This Section.

3. Swap The Content

Once the section is on the page, replacing the placeholder content takes only a few clicks. Start by updating the heading, supporting copy, buttons, and links so the section matches your message. Then replace the placeholder images with your own.

Because these collage layouts use multiple overlapping or offset images, it’s best to swap one image at a time and check the composition as you go. This helps preserve the balance between text, whitespace, and imagery.

If you’d like to adjust the number of visual elements, duplicate or remove existing image modules rather than rebuilding the layout from scratch. That’s the easiest way to preserve spacing and alignment while expanding or simplifying the collage.

4. Adjust Styles (Optional)

These collage sections are already styled, so you can use them immediately or refine them to better match your brand. Update typography, colors, spacing, border radius, shadows, and image treatment 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, and Text Color.

To refine the visual card or image blocks, open the row, group, or module controlling the collage area and use the Design tab to tweak Border Width, Border Color, Border Radius, Box Shadow, and Padding.

If your version uses rounded image masks, soft corners, or overlapping image stacks, keep those relationships in mind as you resize or replace assets so the collage still feels intentional.

Use Divi’s responsive editing tools to adjust spacing, alignment, and stacking behavior on smaller screens so the composition remains balanced across devices.

Tips For Effective Collage Layouts

Collage sections work best when the arrangement feels deliberate and the content is easy to scan. Use these quick tips to keep the designs clean, balanced, and effective.

Use A Clear Focal Point

Every collage should have one element that grabs attention first. That might be the headline, a hero image, or a standout product photo. Once the focal point is clear, the supporting images can reinforce it rather than compete with it.

Keep Image Treatment Consistent

If one image uses rounded corners, soft shadows, or muted tones, the surrounding images should feel like part of the same system. Consistency makes the whole section look more intentional.

Balance Text And Visuals

Collages are visual by nature, but they still need clear messaging. Make sure your headline, body copy, and buttons have enough breathing room and don’t get crowded out by the image composition.

Use Whitespace Intentionally

The empty space around a collage is part of the design. Resist the urge to fill every gap. Whitespace helps the overlapping elements feel cleaner and gives the eye room to move through the section.

Check The Composition On Mobile

On smaller screens, overlapping images and layered layouts can stack differently than expected. Review each section on tablet and phone views to make sure the headline stays readable and the collage still feels balanced.

Start Building In Divi 5 Today!

These 6 Collage Sections give you a fast way to add polished, image-forward layouts to creative headers, product features, portfolio intros, landing pages, and more. Swap the content, keep the styling or adapt it to your brand, and you’ll have a refined section ready in minutes with Divi 5‘s Visual Builder.

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

This update completely harmonizes the available settings for Divi modules, which means you’ll never have to use CSS to fill the gaps; enable sizing options for buttons, animation options for titles, and everything in between.

It opens up hundreds of new possibilities.

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

Every Option For Every Element

Many Divi modules are comprised of nested elements. For example, the blurb modules consist of an image, title text, and body text.

Traditionally, each module sub-element has come with a suite of design options specific to that element. The title text element came with font options; that makes sense!

But Divi offers many other options: backgrounds, borders, transforms, and much more. Those could always be used to style the module wrapper, but not its sub-elements.

With Composable Settings, you can compose your own suite of design options for any sub-element, toggling on whatever you need. Add a width to your button, a border to your title, an animation to your image; there are no limits!

How To Toggle Design Settings

When hovering over an option group that represents a module sub-element, you’ll notice a new icon to “Toggle Options.” Click the icon, enable your desired options, and they will appear instantly as nested option groups.

That’s it! Enable the settings you need and then get to work.

Enabling Default Settings Using Presets

Composable settings work with presets. If you enable specific settings within a preset, then those option groups will appear automatically when editing an element that uses the preset.

If you want specific settings to be enabled by default, simply toggle them on in your default presets. Instead of crowding the settings panel with infinitely nested options, Divi lets you enable only what you need.

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 Complete Site Editing Divi 5?

In case you missed it, we recently released Complete Site Editing for Divi 5.

Now, you can edit your header, footer, body layouts, and page content at once. Your entire site, from top to bottom, can be edited in a single step. You don’t have to exit to the Theme Builder.

It’s really convenient and saves a ton of time!

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

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

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

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

The post Composable Settings for Divi 5 (Hundreds of New Options) appeared first on Elegant Themes Blog.

Divi has offered built-in animation controls for years, but Divi 5 makes this workflow cleaner thanks to its rebuilt Visual Builder, improved attribute management, and flexible design controls. Combined with a single CSS property, Divi’s built-in Animation options can produce smooth, continuous floating motion directly inside the builder. No plugins. No JavaScript. Just Divi’s native tools and one line of Custom CSS.

This tutorial walks through the full build: layout, card styling, animation, staggered timing, and a frosted-glass text treatment that ties the composition together. By the end, you’ll have a reusable section that looks polished and works well across devices.

What We’re Building

Our target is a three-column section with image cards on a dark background. Each card has a subtle glass-like treatment—a semi-transparent background, a thin border, and a generous border radius. Inside each card, an image drifts vertically in a slow, continuous loop. The key detail: each image moves on a different timeline, preventing the rigid, synchronized bobbing that can make animations look mechanical.

To finish the composition, we’ll add oversized heading text above and below the cards using a frosted-glass CSS technique that lets the images show through the letterforms as they float.

Building The Section

Start with a new Regular Section. Inside the Section, add a Row using a three-column structure.

If you started from a larger grid preset, keep only the three columns you need for the image cards.

Open the Section settings and set a dark background color. The dark treatment makes the floating cards pop and gives the section a modern, dimensional feel. A deep navy color (#0f172a) works well, though any dark tone can suit this layout.

Give the Section generous top and bottom padding (10rem) to isolate it visually from surrounding content. This extra space helps the floating motion breathe so the images do not appear cramped against the section edges.

Adding The Image Modules

Drop an Image module into each column. Upload or select the images you want to use. The images should share a consistent aspect ratio—it’s easiest to crop and size them before uploading them to your site. A vertical or square ratio (roughly 4:5 or 1:1) works best for this card layout because it gives the floating motion room to breathe vertically.

For each Image module, in Design > Border, set a border radius to round the corners (17px works well). Extend Attributes makes it easy to apply this across all image modules.

Right-click the Image from the Layers Panel or in the Visual Builder to select Extend Attributes

Styling The Cards

The card effect lives on each Column, not the Image module. Open the Column settings and configure the following:

Under Design > Spacing, add equal padding on all sides so the image floats inside the card with some breathing room.

Under Design > Background, set a semi-transparent background color. White at very low opacity (3–5%) creates the glass-panel effect against the dark section background.

Under Design > Border, add a thin border (1px) using white at low opacity (8–10%). This subtle edge helps define the card boundary. Set the border radius to a value larger than the Image module’s radius to create the inset-frame look, where the image sits inside a larger rounded container.

Once you finish one column, apply those design settings to the other columns using Extend Attributes or Extend Styles. The result is three glass-like cards sitting side by side on a dark field. Even before animation, the layout should already look clean and intentional.

Adding The Float Effect

Apply The Base Animation

Select the first Image module and open its settings. Navigate to Design > Animation and configure the following:

• Animation Style: Slide
• Animation Direction: Bottom
• Animation Duration: Around 4000ms
• Animation Intensity: Low, around 3–5%
• Animation Starting Opacity: 100%
• Animation Repeat: Loop

These settings create the basic vertical motion. A longer duration keeps the effect calm and intentional, while a low intensity prevents the image from traveling too far inside the card.

Create A Smooth Loop

Now switch to the Advanced tab. Open the Custom CSS option group and add the following to the Main Element field:

animation-direction: alternate;

That single line makes the animation play forward and then backward on each loop, creating a smoother back-and-forth drift instead of a noticeable reset at the start of every cycle.

Extend these Image Design Attributes to the other images so you can fine-tune each one in the next step.

Staggering The Motion

Applying identical animation settings to all three images creates synchronized movement, which usually looks too uniform. The fix is to give each image a different combination of duration and delay.

On the second Image module, increase the Animation Duration by 500–1000ms relative to the first and set an Animation Delay of 1000–2000ms. On the third Image module, use a different Duration and Delay so all three modules stay offset from one another.

For reference, here’s one combination that works well:

• Image 1: Duration 4000ms, Delay 0ms, Intensity 3%
• Image 2: Duration 5500ms, Delay 1500ms, Intensity 2%
• Image 3: Duration 3500ms, Delay 800ms, Intensity 3%

You can adjust these values to taste, but keep enough variation between the modules to avoid a mirrored rhythm.

Going Further With Text

Add Overlapping Headings

The floating images work better when they are anchored by text.

Add two Rows—one above and one below the image row—using a single-column structure.

In each of those rows, add a Heading Module. Style the first heading with a color of White (#ffffff) at 10% opacity, a text size of 15rem, and a font weight of Ultra Bold.

Create A Frosted-Glass Text Effect

Go to the Advanced tab and open the CSS option group. In Module Elements > Main Element, paste in this custom CSS:

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
-webkit-mask: linear-gradient(#000 0 0) text;
mask: linear-gradient(#000 0 0) text;
color: rgba(255, 255, 255, 0.1);

This creates a frosted-glass knockout effect—the text becomes a translucent window that blurs whatever sits behind it, including the floating images as they drift through the letterforms.

Extend the design attributes of the first Heading Module to all Heading Modules in the parent Section so the same settings apply to the heading below.

Position Headings Around The Cards

On the top row, in Design > Spacing, set the bottom margin to -8rem. On the bottom row, set the top margin to -8rem.

Then set the bottom Heading Module’s alignment to Left.

Finally, set the top Row’s z-index to 1. This brings the row and its Heading Module above the images it overlaps.

Performance Notes

This effect is relatively lightweight because Divi’s animation settings rely on CSS animation, and movement-based effects are generally efficient in modern browsers. Still, performance depends on the number of animated elements, image sizes, device capability, and any additional visual effects layered on top.

The floating motion here should perform well in most cases, but it’s still smart to keep image file sizes optimized, test the section on mobile, and avoid overusing continuous animations throughout the same page. The blur-based text effect can also be more demanding on some devices and browsers than the image movement itself, so test that carefully if you plan to use it prominently.

Start Building Website With Divi 5 Today!

Floating images are a great example of how Divi 5’s design controls, Animation options, and Custom CSS fields can work together without third-party dependencies. The built-in Slide animation plus animation-direction: alternate; handles the drifting motion, while Custom CSS adds the frosted-glass text treatment. Everything stays inside the builder, which makes the effect easy to reuse and refine.

The post How To Build A Floating Image Animation In Divi 5 appeared first on Elegant Themes Blog.