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.

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.

Additionally, we recently added a toolip module that I haven’t had a chance to cover on the blog so I will do that today as well!

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

Let Useres Search, Filter, and Reorder Your Custom Loops

In Divi 5, anything can be a loop. You can enable looping on any element, including containers, and then plug in dynamic content from posts in the loop to create dynamic feeds. You can use loops to build custom blog feeds, product lists, testimonial sliders, and anything else.

The new post filter modules allow you to build custom forms that let users on your website’s front end query those loops. They can search, filter, and reorder the looped content to find what they are looking for.

The post filter module adds a whole new dimension to loops!

Build Custom Query Loop Forms

The post filter module is a form wrapper, and inside it, you can add one or more post field item modules:

1. Text – The text field allows users to input a search query and search the loop. You choose what post meta is queried in the search, such as the post title, content, and custom fields.
2. Select – Render post meta and taxonomies of your choosing in a select menu, allowing users to query specific content types in the loop.
3. Radio – Similar to the select menu, except the single-option UI is rendered as a list of items instead of as a menu.
4. Checkbox – Render post meta and taxonomies of your choosing in a series of checkboxes, allowing users to query specific content types using a combination of different data.
5. Button – Render submit and reset buttons that, when clicked, query the loop using the user’s configured form fields.
6. Order – Allow users to order the loop in ascending or descending order.
7. Order By – Allows users to choose how a loop is ordered, such as by price.

Easily Add Tooltips To Any Module

We also added a new tooltip module. You might have noticed this one show up a few weeks ago, but it was never officially announced.

The concept is simple: add a tooltip module inside any module, and when you hover over or click the parent module, the tooltip displays.

You have full control over the style, position, and content of the tooltip. You can nest any module inside tooltips, making them incredibly versatile.

You can even use them in loops, as shown below.

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 Grid Editor?

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

Recently, we took things a step further by introducing an interface to visualize, edit, and build advanced CSS grid layouts. It’s awesome!

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

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

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 Loop Filter Modules for Divi 5 appeared first on Elegant Themes Blog.

Magazine layouts avoid that problem by placing every image inside a fixed frame. The photos can be different, but the crop system stays consistent.

In Divi 5, you can build the same kind of system visually. The Loop Builder repeats one post card across the feed, Aspect Ratio and Framing keep every featured image inside the same crop, and Grid Offset Rules turn selected posts into full-width editorial features.

In this tutorial, we’ll build a magazine-style blog layout with a centered blog heading, one large featured post, a row of standard post cards, and a repeating full-width feature that returns every fifth post.

Understanding The Tools Behind The Layout

This layout depends on three Divi 5 tools working together: Loop Builder, Aspect Ratio and Framing, and Grid Offset Rules.

Each one solves a different part of the layout.

1. Loop Builder

The Loop Builder turns one design into a full dynamic feed. Instead of designing every blog card by hand, you build one card with an image, date, title, and excerpt. Then you enable the loop and point it at your posts.

Divi repeats that card for every post in the query and fills each card with dynamic content.

That means you design one card, not seven or twenty. Every item starts from the same structure, so every image has a consistent place to land.

In this layout, the looped card is used in two ways. Most posts appear as standard three-column cards. Selected posts use the same card structure but stretch across the full row, creating the large feature moments you see in the final design.

2. Aspect Ratio And Framing

A consistent image slot only works if the image inside it behaves. That is where Aspect Ratio and Framing come in.

Aspect Ratio defines the shape of the image frame. In this layout, we’ll use a 4:2 ratio so every featured image sits inside the same wide editorial crop. A portrait, square image, and landscape image can all fill the same image area without changing the card structure.

Framing controls how the image sits inside that frame. If a photo needs to be cropped to fit, Framing decides which part stays visible. You can center the crop, shift the focal point, or use Object Fit and Object Position to keep the most important part of the image in view.

Aspect Ratio sets the shape. Framing controls the crop.

3. Grid Offset Rules

A tidy grid is useful, but a magazine layout also needs movement. If every card has the same size forever, the feed can start to feel flat.

Grid Offset Rules add the editorial rhythm. They let specific loop items span more columns or rows without rebuilding the card or manually placing individual posts.

For this layout, we’ll make the first post stretch across all three columns as the lead feature. Then we’ll repeat that same full-width treatment every fifth post, so the layout moves from a large feature to standard cards, then back to another large feature.

The loop handles the repetition. Aspect Ratio handles the crop. Grid Offset Rules handle the magazine rhythm.

What We’re Building

We’re building a magazine-style blog layout that keeps its shape no matter which featured images get added to the site.

The final layout starts with a centered Our Blog heading. Under it, the first post spans the full row as a large featured card. The next posts appear as three standard cards across. Then the fifth post stretches full-width again, creating another featured row before the grid continues.

Every image uses the same 4:2 shape, including the full-width featured posts. That keeps the crops consistent across the feed, even when the source images are different sizes.

Once the system is built, new posts drop into the same structure automatically.

How To Build The Magazine-Style Blog Layout

We’ll build the layout in the same order Divi 5 works best. First, we’ll create the Theme Builder template. Then we’ll save the variables the layout uses. After that, we’ll create the grid, turn one column into a loop, build the post card, connect the dynamic content, lock the image crop, create the full-width featured rows, and make the layout responsive.

1. Assign A Theme Builder Template To The Blog

The feed needs a template, and the Theme Builder is where we create it. A Theme Builder template lets you design one layout and apply it to a specific part of the site.

Open Divi > Theme Builder from the WordPress dashboard. You’ll see the Default Website Template next to any templates that already exist. Click Add New Template to create a new one.

A settings panel opens and asks where the template should apply. Under the Posts section, select Blog. This points the template at the main blog feed.

If you want to use this layout on a standalone page instead, choose Specific Pages under the Pages section and select that page. For other template conditions, such as archives or categories, see Divi’s Theme Builder template guide.

Click Create Template to confirm. The template shows three editable areas: Header, Body, and Footer.

The blog feed belongs in the Body area. Click Add Custom Body, then choose Build Custom Body to open the builder on a blank canvas.

This is where the rest of the layout comes together.

One thing to keep in mind: the Theme Builder has its own Save Changes button. Saving inside the builder saves the body layout, but the template only goes live after you save changes in the Theme Builder.

2. Save The Variables The Layout Will Use

Before building the cards, set up the shared values the layout will use.

Spacing, colors, and fonts should come from variables and presets where possible. That way, one update can flow through the entire feed instead of forcing you to edit every module later.

Open the Variable Manager from the Builder Bar. It is sitewide, so the variables you create here can be used across the full website.

Start with spacing. Create a Number Variable for the space inside the card and set it to 5%. Give it a role-based name such as Group Spacing so its purpose is clear when you use it later.

With the spacing variable saved, create the font and color variables the layout needs. These can power the card backgrounds, text colors, and repeated typographic choices.

We won’t create a separate variable for every heading size. In this workflow, heading sizes come from heading presets, while variables handle shared values like color, spacing, and fonts.

Variables handle the reusable values. Presets handle the reusable style decisions. Together, they keep the blog feed connected to the rest of the site’s design system.

You can learn more about setting up that kind of system in Part 3 and Part 4 of our Divi 5 mastery series.

3. Prepare The Blog Page Structure

With the shared design values ready, we can prepare the page structure.

For this tutorial, we’re starting from a base layout that already includes surrounding page sections, including the centered blog heading. That is the Our Blog title you see at the top of the final layout.

If you are building from a completely blank body, add a Heading module above the feed first, type Our Blog, center it, and style it with your site’s heading preset. Then continue with the feed structure below.

The base layout currently uses the Blog module for the posts. Since we’re replacing that with a custom Loop Builder feed, delete the Blog module.

Now add a new Section to the canvas. Inside it, add a Row with a three-column structure.

Those three columns set the desktop rhythm: one full-width feature when a post spans all three columns, followed by standard cards that sit three across.

A row from the Grid layout options behaves as a CSS Grid. Open the row settings, go to Design > Layout, and confirm that Layout Style is set to Grid.

Set both Horizontal Gap and Vertical Gap to 30px. Equal gaps keep the spacing consistent between standard cards and full-width feature rows.

Then go to Design > Sizing and set the row Width to 90%. This keeps the feed away from the browser edges and gives the layout breathing room.

The section, grid row, and spacing are now ready. Next, we’ll turn one column into the repeating post card.

4. Turn One Column Into The Loop

The grid row has three columns, but we do not need to build three separate cards. We’ll design inside one column, enable the loop on that column, and let Divi repeat it across the feed.

Hover over the first Column and open its settings. Go to Content > Loop and switch Enable Loop on.

The column is now a loop container. Whatever you place inside it becomes the template for one repeated blog item instead of one static card.

Now point the loop at the content it should pull. Set Query Type to Post Type, then set Post Type to Posts.

The remaining query settings control things like how many posts appear and how they are ordered. Leave those at their defaults for now, then adjust the count and sorting once the card structure is finished.

With the loop enabled, the builder previews the repeated column. The cards are still empty, but the feed structure is working.

5. Build The Post Card

Now we’ll build the card that the loop repeats.

Start with the wrapper. Add a Group module inside the looped column. This outer Group is the card itself. It keeps the image and text together as one repeatable unit.

Inside that outer Group, add an Image module first. This will become the featured image at the top of every card.

Below the Image module, add a second Group module for the text block. This inner Group lets the image run edge to edge while the text area gets its own padding and background.

Inside the inner Group, add three modules in this order:

• A Heading module for the published date.
• A second Heading module for the post title.
• A Text module for the excerpt.

That gives the card its full structure: outer Group, Image module, inner Group, date, title, and excerpt.

This same card will power both visual states in the final layout: the compact three-column cards and the full-width featured cards. The difference comes later from the Grid Offset Rules, not from building a separate feature card by hand.

6. Style The Card

With the structure in place, we can style the card using the variables and presets set earlier.

Open the outer Group settings. Go to Design > Layout and set the Vertical Gap to 0. This removes the gap between the image and the text block, so the card reads as one connected unit.

Now open the inner Group that holds the date, title, and excerpt. Give it a white background so the text area feels like a clear card surface.

Then go to Design > Spacing and set the padding using the Group Spacing variable created earlier. Pulling that value from a variable keeps the card inset consistent and easy to update later.

Next, style the typography.

Open the first Heading module and apply the H5 preset for the date. Open the second Heading module and apply the H3 preset for the title.

Because those styles come from presets, the card typography stays connected to the rest of the site.

Then open the Text module for the excerpt and apply the body font. A future change to the body font can then flow through every repeated card.

Set the Vertical Gap of the inner Group to 10px so the date, title, and excerpt stack with tight, consistent spacing.

The card now has its structure, spacing, and type system. Next, we’ll connect it to real post content.

7. Loop The Content Into The Card

The card looks right, but the modules still show placeholder content. Now we’ll connect each module to a dynamic field so every repeated card pulls content from its matching post.

Start with the Image module. Open its image setting, switch to dynamic content, and choose Loop Featured Image. Each repeated card now displays its post’s featured image.

Move to the first Heading module, which serves as the date. Switch its content to dynamic and select Loop Published Date.

Open the second Heading module and set its content to the Loop Post Title. Then open the Text module and connect it to the post Excerpt.

Set the excerpt Word Count to 50 and add Read More after the excerpt. Keeping excerpt length under control helps the standard cards stay more even, especially when post summaries vary in length.

Now make the card clickable. Open the Image module, find the link setting, switch it to dynamic content, and choose the post’s Post Link. Do the same for the title Heading module and the excerpt Text module.

At this point, every card is dynamic. The image, date, title, excerpt, and links all come from the post represented by that loop item.

8. Lock The Image Crop With Aspect Ratio

Once real posts appear, the image problem becomes visible. Featured images come from different sources and are often different shapes: wide, tall, square, or somewhere in between.

Without a consistent crop, image heights jump from card to card, the titles stop lining up, and the grid loses its editorial structure.

Open the Image module and go to Design > Sizing. Find the Aspect Ratio control and set it to 4:2.

Every image in the loop snaps to that same shape. A portrait and a landscape image now sit inside the same wide frame, which brings the card heights back into alignment.

This matters for the full-width featured posts too. When the first card spans the full row later, it will grow wider, but the image still follows the same 4:2 crop. That is what keeps the large banner from feeling like a different design.

A fixed ratio creates a crop, so the next step is deciding how each image should fill the frame.

Go to Design > Framing. Set Object Fit to Cover so the photo fills the full frame without leaving gaps. Then set Object Position to Center so each crop uses the middle of the image as its default focal point.

If a specific post image has an off-center subject, you can adjust Object Position for that image treatment. But Center is a strong default for a mixed blog feed because it keeps the crop predictable without adjusting every post manually.

Next, enable Grow To Fill on the parent Group module under Design > Sizing. This helps the repeated cards fill their column space evenly.

With the ratio locked and the framing set, the feed reads as one system again. Every card shares the same image shape, titles line up across the row, and new posts drop into the same crop without extra image editing.

9. Create The Full-Width Featured Rows With Grid Offset Rules

The grid is consistent now, but consistency alone can feel flat. A magazine layout needs moments of emphasis.

This is where the one-row featured posts are created. We are not building a separate featured post module. We are taking the same looped card and telling certain items to span across the full grid row.

Select the Row, since the grid is controlled at the row level. Open Design > Layout. In the grid settings, click Add Grid Offset Rule.

For the first rule, target the lead post:

• Target Offset: First item
• Offset Rule: Column Span
• Offset Value: 3

Spanning all three columns turns the first post into the large full-width card at the top of the layout.

Now add a second rule for the repeating rhythm:

• Target Offset: Every fifth item
• Offset Rule: Column Span
• Offset Value: 3

A full-width feature now returns after the first group of standard cards. The final layout follows the pattern you see in the preview: one large lead post, three standard cards, another large featured row, then more standard cards below.

The same loop still drives every item. The offset rules simply tell selected cards to stretch across the grid. That gives the blog feed its magazine-style rhythm without manually placing posts or creating a separate layout for featured items.

10. Make The Layout Responsive

The desktop layout is now in place, but the feed also needs to hold up on tablet and phone.

Some of the work is already handled because the layout uses presets and variables. If your heading presets and body typography use responsive values or fluid sizing, the type can scale more smoothly as the screen narrows.

The grid still needs breakpoint adjustments.

Select the Row, switch to tablet view, and open Design > Layout. Change the Number Of Columns to 2. Then switch to phone view and set it to 1.

The feed now moves from three columns on desktop to two columns on tablet and one column on phone.

Now update the full-width featured rows for each breakpoint.

On desktop, the featured items span 3 columns. On tablet, the grid only has 2 columns, so the featured items need to span 2 columns. Add a responsive offset rule at the tablet breakpoint that uses a Column Span of 2 for the same featured items.

On phone, the grid has one column, so add another responsive rule that spans the featured items across 1 column. At that size, every post is full-width by default, but the rule keeps the offset behavior aligned with the single-column grid instead of letting the desktop span carry over.

With the columns reflowing and the offset rules adjusted at each breakpoint, the magazine-style feed holds from desktop down to phone.

Before leaving, save the layout and return to the Theme Builder. Then click Save Changes to make the template live.

Turn One Card Into A Feed With Divi 5

A strong blog layout does not come from cropping every featured image by hand or manually placing every post. It comes from building the right system once.

In this layout, one looped card controls the structure. Aspect Ratio gives every image the same frame. Framing decides how the image fills that frame. Grid Offset Rules turn selected cards into full-width featured rows. Responsive settings keep the whole feed working across desktop, tablet, and phone.

The next time you publish a post, it drops into the same system automatically: the right card, the right crop, the right pattern, and the right layout on every screen.

The post How To Create Magazine-Style Blog Pages With Consistent Image Crops appeared first on Elegant Themes Blog.

In Divi 5, the image system is more consistent across modules that display images. New Aspect Ratio and Framing settings, the consolidated gradient picker, Custom Attributes, reusable Image Presets, and tight integration with the Loop Builder change how images get placed, cropped, styled, and maintained across a site.

This guide covers the full image workflow in Divi 5: the Image Module, background images, aspect ratio and framing, choosing image ratios by scenario, gradient overlays, accessibility, SEO, loop behavior, presets, and file optimization before images ever reach the builder.

Images In Modules

Divi 5 has taken big steps toward making the builder feel consistent no matter which module you are working with. One of the clearest examples is how different modules handle images.

Of course, there is the Image Module, whose entire job is to display an image. Use it when the image is part of the content itself: a product photo, team portrait, portfolio thumbnail, screenshot, diagram, chart, or any image visitors need to understand the page. To add one, insert an Image Module, open the Content tab, and choose an image from the Media Library or upload a new one.

Other modules include images as part of a larger element. A Person Module has a portrait, a Blurb Module can include an image or icon, WooCommerce modules display product images, and Loop Builder templates can pull featured images, project thumbnails, product images, author photos, and other dynamic media.

In the Design tab, you will usually find an image-related option group for styling that image. Depending on the module, you may style it directly or inside a nested option group such as Image, Image & Icon, or a similar label. This is where you will typically manage sizing, framing, borders, shadows, filters, transforms, and presets.

Image Module Or Background Image?

Before styling an image, decide what job the image is doing. Use an Image Module when the image is content: a photo that carries meaning, a product image people need to inspect, a portrait that identifies a person, a portfolio image that represents a project, or an image that needs a link, lightbox, caption, or alt text.

Use a background image when the image acts as a surface for other content to sit on top of. A hero section with a heading and button layered over a photo is the clearest example. Decorative textures, abstract shapes, background patterns, and image washes behind CTA content also belong in this category.

A standard Section is an easy way to see the difference. Open the section’s Content tab, expand Background, choose the Background Image tab, and add a wide photograph. Then add a Heading Module and Button Module in the row above it. The photo supports the section visually, but the copy and button carry the actual message.

This distinction matters for accessibility. Background images are rendered through CSS and do not carry alt text. Screen readers ignore them, which is correct for decorative surfaces. But if an image communicates meaning, such as a product photo, diagram, portrait, or portfolio thumbnail, it should not live only as a background image.

Aspect Ratio And Framing

Two Divi 5 design controls solve the most common image-layout frustration: inconsistent upload sizes breaking an otherwise clean layout.

Aspect Ratio defines the frame. Framing controls how the image sits inside that frame.

Aspect Ratio lives in Design > Sizing. Enter a ratio in width-to-height format, such as 16:9 for widescreen, 1:1 for square, or 4:5 for portrait. Divi calculates the element’s height from its rendered width, so the shape holds as the element scales across breakpoints.

Aspect Ratio is especially useful for images because it stops uploaded file dimensions from controlling the layout. A wide image, square image, and portrait image can all sit inside the same frame. It also applies beyond images, including icons, containers, decorative shapes, cards, buttons, and other elements that expose the Sizing controls.

Framing controls how the image behaves inside the frame. On the Image Module, it appears as its own option group under the Design tab. On sub-element modules like Person or Blurb, you will usually find it under Design > Image > Framing. The core control is Object Fit:

• Fill: Stretches the image to fill the frame and can distort it.
• Contain: Scales the whole image inside the frame and may leave empty space.
• Cover: Fills the frame while preserving proportions, cropping the overflow.

For most image cards and grids, pair Aspect Ratio with Object Fit: Cover. This keeps the image proportional while filling the frame. Then use Object Position to control the focal point. Nine preset anchors range from Top Left to Bottom Right, and custom X/Y percentages let you fine-tune the crop more precisely.

One clarification is worth making because it trips people up: Framing changes how the image is displayed inside its frame. It does not permanently crop the image file, and it does not change which source file the browser downloads. Object Fit Cover can visually crop a 3:2 image into a tidy square, but the browser still downloads the full file unless WordPress responsive image sizes provide a smaller version to serve. Framing handles the display crop, while srcset and file optimization handle file weight.

Choosing Image Ratios By Scenario

The best image ratio depends on where the image appears and what it needs to do. Divi 5 makes it easy to enter almost any ratio, but that freedom works best when the choice is intentional.

For hero sections, start with 16:9 for a reliable wide layout, 21:9 for cinematic banners, or 3:2 when the image should feel large without becoming too shallow. On mobile, a hero may need a different crop, often closer to 4:5 or 1:1, especially when the subject needs more vertical room. Choose photos with enough calm space for copy, and avoid placing faces, products, or important details near the edges.

For blog featured images and blog grids, use ratios that can survive repeated uploads from different authors or sources. 3:2 is a strong default for general editorial grids. 4:3 works well when cards include titles, metadata, and excerpts below the image. 16:9 suits tutorials, video-led posts, and YouTube-style thumbnails. 1:1 works for social-style grids and roundups, while 4:5 gives food, fashion, lifestyle, and photography blogs a taller editorial feel.

For portfolio grids, let the work guide the ratio. Web design, branding, UI/UX, decks, and horizontal mockups usually work well at 3:2 or 4:3. Fashion, portrait photography, posters, and vertical editorial work often need 4:5 or 2:3. Mixed portfolios can use 1:1 to keep the grid neutral, while video-first portfolios should usually use 16:9.

For product grids, the category should drive the decision. 1:1 is a safe default for broad catalogs, electronics, books, accessories, and many white-background product shots. 4:5 works well for apparel, beauty, and taller product photography. 3:4 gives bottles, bags, shoes, and packaged goods more vertical room. 3:2 can work for furniture, bundles, and lifestyle product images with wider compositions. Use Contain instead of Cover when cropping would cut into the product itself.

For team photos and headshots, consistency and face protection matter most. Use 1:1 for avatars, author cards, and compact team grids. Use 4:5 or 3:4 for a more editorial portrait layout. Pair Cover with Object Position: Top Center when faces sit high in the frame.

For logo grids and icon-based images, avoid cropping. Use a consistent container shape such as 1:1, 4:3, or a shallow rectangle, then set Object Fit to Contain so the full logo, mark, badge, seal, or icon remains visible.

These are starting points, not rules. The ratio should support the content, protect the subject, and keep repeated layouts consistent.

Images In The Loop Builder

Aspect Ratio and Framing become even more useful in dynamic layouts. The Loop Builder turns any element, or group of elements, into a query-driven repeating template. That means one image decision can reach every repeated blog post, product, project, author, event, or custom post type in the loop.

Images can appear in a loop in two main ways: as dynamic content inside an Image Module, or as dynamic background images on containers such as Sections, Rows, Columns, or Groups. If the image is content, use an Image Module and set the ratio in Design > Sizing. Then use Framing to set Object Fit and Object Position. If the image is decorative or part of a card surface, apply the ratio to the container and use the background image controls to position it.

In the loop, set your image to a shared aspect ratio, such as 16:9, 3:2, 4:5, or 1:1, then pair it with Object Fit Cover. Every card follows the same frame regardless of the source image dimensions.

This is one of the strongest uses for image ratios in Divi 5. A single loop template can keep a blog archive, portfolio grid, product feed, or author directory visually consistent as new content is added.

Image Presets For Reusable Styling

If you repeat the same image treatment across a site, save it as an Image Preset. Image Presets let you reuse styling from the Image option group instead of rebuilding it manually on every module.

A preset can include repeated image styling such as Aspect Ratio, Object Fit, Object Position, border radius, border styles, box shadow, filters, and other image-related design settings. This is useful for image treatments that should stay consistent across a build.

Examples include:

• Blog Card Image: 3:2 ratio, Object Fit Cover, slight radius.
• Product Grid Image: 1:1 or 4:5 ratio, Object Fit Cover or Contain, clean border.
• Team Portrait: 4:5 ratio, Object Fit Cover, Top Center position.
• Portfolio Thumbnail: 3:2 ratio, Object Fit Cover, subtle shadow.
• Logo Tile: 4:3 frame, Object Fit Contain, generous padding.

The preset keeps the styling connected. If the site’s image treatment changes later, update the preset instead of editing each image module one by one.

Background Images And Gradient Overlays

Background images often need help because text sits on top of them. A photo can look beautiful on its own and still fail inside a hero section if the headline becomes hard to read. The most reliable fix is an overlay. In Divi 5, the consolidated gradient picker makes it easier to combine background images with gradients that improve contrast, add depth, or guide attention toward the copy.

Common overlay patterns include:

• Dark-to-transparent gradient: Good for hero sections with text on one side.
• Soft color wash: Good for brand-heavy landing pages.
• Top or bottom fade: Good when text sits near one edge of the section.
• Radial glow: Good for spotlighting a product, portrait, or CTA.
• Gradient Variable overlay: Good when the same brand treatment repeats across several sections.

Do not rely on the image alone for text contrast. Test the section with real copy, real buttons, and responsive views. A strong background image should support the message, leave enough calm space for copy, and preserve contrast across desktop and mobile. If the image fights the text, reposition it, add an overlay, or choose a quieter photo.

Accessibility: Alt Text, Captions, And ARIA

Accessibility in Divi 5 is handled through the Attributes option group on the Advanced tab, which now manages HTML attributes for an element.

For images, the Image Module can pull alt and title attributes from the WordPress Media Library when they are defined there and not overridden in Divi. That makes the Media Library the practical source of truth: add descriptive alt text on upload, and Divi can use it wherever that image appears in a module.

Alt text should describe the image’s purpose in context. A product image might need the product type and a visual detail. A diagram should describe what the diagram explains. A decorative image should not be described at all. For purely decorative images, use an empty alt attribute instead of adding unnecessary text. Decorative icons or visual-only elements can also be marked with attributes such as aria-hidden=”true” when appropriate.

For images that need a visible caption or attribution, use the figure and figcaption HTML elements. The figure element wraps content that stands on its own, while figcaption ties a caption to it semantically. Alt text and figcaption serve different purposes: alt describes the image to screen readers and search engines, while figcaption adds visible context that users can read on the page.

Use captions when they genuinely add context, such as source credits, team names and titles, diagram explanations, portfolio project notes, or editorial image attribution.

Image SEO

Image SEO starts with the same fundamentals as accessibility: accurate alt text, useful captions where needed, and images that support the surrounding content. Alt text helps search engines understand what an image depicts, but it should still be written for people first. Keep it specific, accurate, and free of keyword stuffing.

Background images are different. Because they are rendered through CSS and not as image elements, they are not the right place for meaningful SEO imagery. If an image is important to the content, use an Image Module or another semantic image output instead of relying on a CSS background.

The next biggest SEO lever is performance. WordPress generates multiple image sizes on upload and uses srcset so browsers can choose a file that fits the visitor’s screen. With responsive images enabled, your job is to upload a source that is large enough for the biggest place it needs to appear, then let WordPress and your optimization workflow handle smaller versions.

For important above-the-fold images, especially the image most likely to become the Largest Contentful Paint element, you can add fetchpriority=”high” through Advanced > Attributes. Use this carefully. It is not a setting for every image on the page, but it can help the browser prioritize the most important image in the initial viewport.

File Types And Saving Space

Some of the most consequential image decisions happen before Divi. A beautiful layout can still feel slow if the images are too large, poorly compressed, or exported in the wrong format.

The method matters less than the process. Resize and compress images before uploading, or use a reliable optimization plugin to handle compression and modern-format generation at upload time. See our guides on optimizing images for web performance and the best WordPress image optimization plugins for a deeper breakdown.

Use these file type rules as a starting point:

• JPEG: Good for full-color photos when modern formats are not available.
• PNG: Good for transparency, UI graphics, logos, and screenshots with sharp edges, but heavy for photos.
• WebP: A strong modern default for most web images because it often reduces file weight while preserving quality.
• AVIF: Useful when your optimization workflow supports it and can provide proper fallbacks.
• SVG: Best for logos, icons, and simple vector artwork when the file is clean, trusted, and properly prepared.

Do not upload full camera originals unless the project truly needs them. Start with the largest size the image needs to display. Hero images often need larger sources than card thumbnails, and lightbox images need enough resolution to look good when opened at a larger size.

As a practical baseline, full-width hero images often land around 1600–2400px wide, full-width content images around 1200–1800px, and blog, portfolio, or product card images around 800–1200px. These are not fixed rules. A retina-heavy portfolio site may need larger sources, while a simple blog may not. The point is to avoid uploading far more pixels than the layout can use.

File-weight targets should also stay flexible, but a useful goal is to keep thumbnails small, standard content images lean, and large hero images compressed enough that they do not dominate the page load. Do not crush images so much that faces, product labels, gradients, or screenshots become blurry. The goal is the smallest file that still looks right in context.

Image Workflow Best Practices In Divi 5

A good image workflow is part design system, part content process. Set the foundation early so every new image has a clear role, ratio, crop, file size, and accessibility treatment.

Use these habits to keep image-heavy layouts consistent:

• Decide the image role first. Content images belong in Image Modules. Decorative images can be backgrounds.
• Choose one ratio per repeated grid. Blog cards, product cards, and portfolio cards should usually share a consistent image shape.
• Pair Aspect Ratio with Object Fit Cover. This prevents stretching when uploaded images vary.
• Use Object Fit Contain for logos and sensitive product images. Do not crop marks, labels, or product edges unless the crop is intentional.
• Use Object Position to protect the subject. Top Center often works for faces. Center often works for products and general blog images.
• Save repeated image treatments as presets. Reuse common crops, borders, shadows, filters, and framing styles.
• Add alt text in the Media Library. Treat it as part of the upload process, not an afterthought.
• Prepare product images with enough padding. A little whitespace around the subject gives Object Fit more room to work.
• Test responsive views. A crop that works on desktop can fail on mobile.
• Optimize before or during upload. Display settings do not solve file weight on their own.

The best image systems are predictable in the right places. The ratios are consistent, the crops are intentional, the files are not oversized, and the meaningful images have useful alt text.

The Full Picture In Divi 5

Every section of this guide points back to one idea: images should support the design, not fight it.

Divi 5 gives you the tools to control that system directly inside the builder. Aspect Ratio defines the frame. Framing controls the crop. Loop Builder repeats the rule across dynamic content. Image Presets keep repeated treatments consistent. Gradient overlays improve readability over background images. Custom Attributes help with accessibility and performance details when you need more control.

Start with the image’s role, choose the right ratio for the scenario, frame the subject carefully, and optimize the file before it slows the page down. Once those decisions are in place, Divi 5 makes it easier to keep images consistent across standalone pages, dynamic loops, product grids, team sections, portfolios, and every layout that depends on strong visual content.

The post The Ultimate Guide To Using Images In Divi 5 appeared first on Elegant Themes Blog.

Divi 5 already gives users more control over accessibility-related details through its Custom Attributes system. You can add attributes such as roles, labels, titles, and ARIA values directly from the builder, which gives Divi users a stronger foundation for semantic structure and assistive technology support.

The Accessibility Bundle from Divi-Modules builds on that foundation with a more complete accessibility workflow for Divi websites. It combines three plugins: Accessibility Attributes, Accessibility Tweaks, and Accessibility Sidebar.

Together, these tools help you add accessibility attributes inside the Visual Builder, apply site-wide improvements for navigation and focus behavior, and give visitors front-end tools to adjust the website experience for themselves.

The bundle is compatible with both Divi 4 and Divi 5, making it useful for existing client sites as well as new builds. At the time of writing, it is available on the Divi Marketplace for $72 with unlimited website usage, 1 year of support and updates, and a 30-day money-back guarantee.

In this product highlight, we’ll walk through each plugin in the bundle, look at the most important settings, and show how the bundle can improve a real Divi page without rebuilding the design from scratch.

Overview Of The Accessibility Bundle

The Accessibility Bundle combines three plugins into one package:

1. Accessibility Attributes: Adds accessibility-related controls to Divi elements so you can apply ARIA roles, labels, descriptions, hidden states, details, and other attributes from the Visual Builder.
2. Accessibility Tweaks: Applies site-wide improvements such as focus rings, keyboard navigation support, skip links, menu behavior settings, reduced motion support, duplicate ID cleanup, and module-level accessibility tweaks.
3. Accessibility Sidebar: Adds a visitor-facing toolbar with profiles and tools for text, navigation, reading, graphics, contrast, motion, screen reading, and more.

Each plugin solves a different part of the accessibility workflow. Attributes gives you precise control over individual elements. Tweaks handles broader site and module behavior. Sidebar gives visitors their own controls once the site is live.

The bundle is fully compatible with both Divi 4 and Divi 5, so you can use it on older Divi sites, current client projects, and new Divi 5 builds.

Accessibility Attributes

Accessibility Attributes is the foundation of the bundle. It lets you add important accessibility attributes directly inside Divi, so screen readers and other assistive technologies can better understand the purpose of specific elements.

After activation, go to Accessibility > Attributes in the WordPress dashboard.

You’ll find two main tabs: Modules and Elements.

Modules Tab

The Modules tab controls which accessibility attribute groups appear inside Divi module settings.

The available module attribute groups include:

• ARIA Hidden: Hides decorative or repeated elements from assistive technologies when they do not add meaning. This is useful for icons, background-style images, decorative visuals, and repeated elements that would clutter the screen reader experience.
• ARIA Role: Assigns a semantic role to an element when its purpose is not obvious from the HTML alone. For example, you might clarify whether an element is acting as a button, navigation item, list, dialog, or another interface pattern.
• ARIA Label: Adds a short accessible name for elements that need a clearer spoken label. This is especially useful for icon-only buttons, repeated links, buttons with vague visible text, or interactive elements where the visual design carries meaning that screen readers cannot see.
• ARIA Description: Adds longer explanatory context when a short label is not enough. This can help describe complex cards, repeated service blocks, or grouped content that needs more explanation.
• ARIA Details: Connects an element to more detailed information elsewhere on the page. This can be useful when a button, link, or card points to supporting content lower in the layout.

There is also a Compatibility section where you can exclude specific modules by slug if you do not want the Accessibility Attributes controls to appear on them. This keeps the builder interface cleaner when certain modules do not need those options.

Elements Tab

The Elements tab lets you apply common accessibility attributes across the site using CSS selectors. Instead of editing one Divi module at a time, you can target theme elements, menus, footers, third-party plugin output, or other elements that are not built as standard Divi modules.

The available element settings include ARIA Main, ARIA Hidden, ARIA Link, ARIA Button, ARIA Required, and Tab Index.

The ARIA Main section identifies the primary content area of the page.

The ARIA Hidden settings let you hide decorative content site-wide.

The ARIA Link option can mark custom elements as links when the markup or behavior needs clarification.

The ARIA Button option can mark custom elements as buttons.

The ARIA Required setting identifies required form fields.

The Tab Index setting helps control whether selected elements can be reached through keyboard tab navigation.

For each selector-based attribute, you can define where the attribute should be added and where it should be removed. This makes the Elements tab useful for broad site-level adjustments that would be tedious to apply one element at a time.

Using Attributes Inside The Visual Builder

Once configured, Divi elements gain new Accessibility Attributes groups in the Advanced tab.

This is where the plugin becomes useful during normal Divi work. You can label an icon-only button, hide a decorative image, add a role to a custom interactive element, or describe a complex card without leaving the Visual Builder.

The key is to use attributes intentionally. More ARIA is not automatically better. The goal is to add meaning where it is missing, remove noise where it does not help, and make the page easier for assistive technologies to interpret.

Accessibility Tweaks

Accessibility Tweaks works quietly at a broader level. Instead of requiring you to edit every element manually, it applies improvements across menus, links, supported modules, website behavior, and focus states.

Go to Accessibility > Tweaks in the WordPress dashboard.

There are two main tabs: Tweaks and Links.

Tweaks Tab

The Tweaks tab includes settings for navigation, website behavior, supported modules, and menu behavior.

Navigation Settings

The Navigation settings let you enable a focus ring with customizable color and behavior.

A visible focus ring helps keyboard users see which element is currently active. This is one of the most important accessibility improvements on interactive pages because keyboard navigation becomes frustrating when focus is hard to track.

You can style the focus ring so it fits the site’s brand instead of relying on a browser default that may look inconsistent or be too subtle.

Website Settings

The Website settings include improvements for keyboard navigation, menu behavior, search forms, social media icons, duplicate menu IDs, scaling, and reduced motion.

Reduced motion is especially useful on pages that use animated counters, scroll effects, moving backgrounds, GIFs, or transition-heavy sections. Visitors who prefer reduced motion should not have to fight through animation to use the page comfortably.

The Website section also includes duplicate menu ID cleanup. Duplicate IDs can interfere with labels, descriptions, form controls, and ARIA relationships, so cleaning them up helps assistive technologies interpret the page more reliably.

Modules Settings

The Modules settings apply targeted accessibility tweaks to supported Divi modules.

This can help with modules such as Accordions, Blog, Contact Forms, Group Carousel, and other interactive or content-heavy modules where missing labels, ARIA states, or keyboard behavior can make the experience harder to use.

Menu Settings

The Menu settings give you more control over tab navigation, arrow key behavior, and submenu handling.

Navigation is one of the first places keyboard users feel accessibility problems. A menu that opens, closes, and moves predictably from the keyboard feels much better than one that only works smoothly with a mouse.

Links Tab

The Links tab handles skip links and styling.

You can enable links such as Skip To Navigation, Skip To Content, and Skip To Footer. If Accessibility Sidebar is active, you can also add a link that opens the sidebar.

Skip links help keyboard users bypass repeated areas and move directly to the part of the page they need. You can also style the links with colors, borders, and shadows so they look intentional when they appear on focus.

Used together, the Tweaks settings can improve keyboard usability, focus visibility, menu behavior, skip navigation, and module-level accessibility with very little ongoing work.

Accessibility Sidebar

Accessibility Sidebar is the visitor-facing part of the bundle. It adds a front-end toolbar that lets visitors customize parts of the website experience to better fit their needs.

Go to Accessibility > Sidebar in the WordPress dashboard.

The plugin’s dashboard is split across several tabs, including General, Appearance, Features, and Statement.

General Tab

The General tab controls the sidebar’s default behavior.

You can set the default language, control sidebar visibility, choose which post types it appears on, configure keyboard shortcuts, manage fonts, and decide whether visitor preferences should be remembered.

You can also control whether the sidebar appears on smaller screens. That matters because a floating accessibility toolbar should not crowd mobile CTAs, menus, or other important interface elements.

Appearance Tab

The Appearance tab controls how the sidebar and toggle button look.

You can choose the toggle icon, set its position and size, adjust colors, borders, and shadows, and customize the sidebar’s size, placement, toggle behavior, and highlight colors.

This matters because accessibility tools should not feel like an afterthought. A styled toggle button that uses the site’s own visual language is more likely to feel like part of the design.

Features Tab

The Features tab controls the visitor-facing tools available inside the sidebar.

The available feature groups include Accessibility Profiles, Screen Reader, Navigation Tools, Reading Tools, Text Tools, Graphics Tools, and Accessibility Statement options.

Accessibility Profiles

Accessibility Profiles give visitors a starting point based on common needs.

Profiles include options for Blindness, Color Blindness, Visual Impairment, Motor Impairment, Cognitive Disability, Seizures and Epilepsy, Dyslexia, and ADHD.

Profiles are helpful because visitors do not have to understand every individual tool before making the site more comfortable for them. They can choose a profile first, then adjust individual tools afterward.

Screen Reader Tool

The Screen Reader tool converts on-page text to speech.

You can configure defaults such as reading speed, voice, and starting content selectors. This gives visitors another way to consume page content when reading visually is difficult or tiring.

Navigation Tools

Navigation Tools include options such as Large Cursor, Focus Ring, and Page Structure.

These tools help visitors locate the cursor, track focus, and understand the structure of the page. Page Structure is especially helpful on longer pages because it can give visitors a clearer overview of headings, landmarks, and links.

Reading Tools

Reading Tools include Tooltip, Reading Guide, and Reading Mask.

These tools can help visitors focus on one line or section of content at a time. That can be useful on service pages, pricing pages, long blog posts, documentation pages, or any layout where dense text is part of the experience.

Text Tools

Text Tools let visitors adjust the text font, size, line height, spacing, and alignment.

These controls can make dense pages easier to read without requiring visitors to zoom the entire browser or use external tools.

Graphics Tools

Graphics Tools let visitors adjust color saturation and contrast, hide images, and stop different kinds of animation, including Divi animations, GIFs, CSS animations, and transitions.

These controls are useful for visitors with sensory sensitivities, color vision deficiencies, motion sensitivity, or difficulty reading low-contrast sections.

Accessibility Statement

The sidebar can also include an accessibility statement or link to a dedicated accessibility statement page.

The Statement tab gives you a dedicated place to manage that content.

An accessibility statement can show visitors where to find accessibility information, how to contact the site owner about barriers, and what steps the site is taking to improve access.

Applying The Accessibility Bundle To A Divi Page

Now let’s look at how the bundle works on a real Divi page.

The example page is a marketing agency homepage with a hero section, calls to action, a stats bar, service cards, testimonials, and pricing tiers. This kind of page has several accessibility needs: clear button labels, decorative visuals that should not be announced, usable keyboard navigation, reduced motion support, skip links, and visitor controls for reading and contrast.

Step 1: Add Meaning With Accessibility Attributes

With Accessibility Attributes active, Divi elements gain new ARIA groups in the Advanced tab.

Before adding attributes, decide where they actually help. You do not need to fill out every option on every module.

Use attributes where they add real value:

• ARIA Role: Use when the element’s purpose is not clear from the HTML alone.
• ARIA Label: Use for buttons, icons, or links that need a clearer accessible name.
• ARIA Description: Use when a card, section, or repeated element needs more context.
• ARIA Hidden: Use for decorative or duplicated content that should not be announced.
• ARIA Details: Use when an element should be connected to deeper information elsewhere on the page.

A good workflow is to start with interactive elements, then review repeated cards, decorative icons, image modules, and complex sections.

Adding ARIA Role And Label Attributes

Start with a hero CTA button. Open the Button module and expand ARIA Role. In the ARIA Role: Type dropdown, select Widget Role.

Then choose the appropriate role value. For this example, select Button.

Next, expand ARIA Label and add a clear label, such as Book a free strategy call with our team.

The visible button text may be short, but the ARIA Label can give assistive technologies a clearer description of the action. This is especially useful when a page has multiple CTAs with similar visible labels.

Adding ARIA Description Attributes

For service cards, add a description at the Column or Group level when that container wraps the full card.

A short description can summarize what the whole card offers. That is often more useful than forcing screen reader users to interpret several separate inner modules without context.

For example, a paid advertising card might use a description such as Learn how we manage full-funnel paid campaigns with weekly optimization.

Adding ARIA Hidden Attributes

For decorative icons or images, use ARIA Hidden when the element does not add meaningful information.

If an icon is purely visual and repeats information already provided by the heading or text, hiding it can reduce noise for screen reader users.

The same can apply to decorative images.

Use this carefully. If an image communicates information, identifies a product, explains a concept, or supports the page’s meaning, it should not be hidden. If it is purely decorative and repeats information already available in the text, hiding it can make the experience cleaner.

Adding ARIA Details Attributes

ARIA Details can connect an element to more detailed information elsewhere on the page.

For example, if a See our services button scrolls to the services section, first give the services section a unique CSS ID through Divi’s Attributes settings.

Then open the button settings, expand ARIA Details, and enter that ID.

This creates a relationship between the button and the section it points to, giving assistive technologies more context about where the action leads.

Step 2: Improve Navigation And Focus With Accessibility Tweaks

Accessibility Attributes works element by element. Accessibility Tweaks handles broader page and site behavior.

Activate Accessibility Tweaks in the Accessibility Bundle settings, then go to Accessibility > Tweaks.

You do not need to configure every setting at once. Start with the improvements that make the biggest difference on the page.

Setting Up The Focus Ring

In the Navigation settings, enable the Focus Ring and choose a color that matches the site’s palette.

With the Focus Ring enabled, tabbing through the hero buttons clearly outlines each active element. You can also choose how the ring behaves, such as whether it appears for keyboard navigation only.

This small setting can have a large impact because keyboard users need a visible way to know where they are on the page.

Enabling Website-Wide Improvements

Next, move to the Website settings.

Turn on keyboard navigation improvements for menus, search forms, and social icons when your site uses those elements. This helps common interface pieces respond more predictably to keyboard input.

This section is also where Reduced Motion lives.

On a marketing page, counters, service cards, and scroll animations can add polish. But for visitors with motion sensitivity, too much animation can make a page uncomfortable. Reduced Motion lets the page respect visitors who prefer less motion.

The Website settings also include duplicate menu ID cleanup.

Duplicate IDs can create issues when assistive technologies rely on unique IDs to connect labels, descriptions, and controls. Cleaning them up helps prevent confusing or incorrect relationships.

Fixing Native Modules Automatically

The Modules tab applies supported fixes to Divi modules.

This is useful on pages that use interactive modules such as accordions, tabs, sliders, testimonials, or contact forms. If the page grows later, module-level tweaks can help keep common interactive patterns more usable without requiring a separate setup for every instance.

Refining Menu Behavior

If the page includes navigation, use the Menu settings to fine-tune tab order, arrow key behavior, and submenu handling.

For example, you can adjust how dropdown submenus open, how arrow keys behave, and how menus close. Those details may feel small visually, but they make navigation much more predictable for keyboard users.

Adding Skip Links

Finally, open the Links tab and enable the skip links your layout needs, such as Skip To Content and Skip To Navigation.

Use short, clear labels such as Skip to main content. You can set skip links to appear on focus so they do not change the page’s look for mouse users, while still giving keyboard users a fast way to bypass repeated areas.

Style the link background, border, and shadow so the skip link looks intentional when it appears.

Step 3: Empower Visitors With Accessibility Sidebar

The last plugin gives control directly to visitors. Instead of making every accessibility decision for them, the Sidebar lets visitors choose the adjustments that help them use the site.

Enable Accessibility Sidebar in the Accessibility Bundle settings.

Configuring Sidebar Settings

Start with the sidebar’s general behavior. Visitors can configure the sidebar’s size and placement, and you can set defaults such as language, visibility, and where the sidebar appears.

This helps keep the sidebar from interfering with important page elements such as CTAs, logos, or fixed navigation.

Choosing Accessibility Profiles

In Accessibility > Sidebar > Features, start with the ready-made Accessibility Profiles.

For a text-heavy marketing page, profiles such as Visual Impairment, Motor Impairment, Dyslexia, and Cognitive Disability can give visitors a useful starting point. Enabling a profile activates relevant tools, so visitors do not need to know which specific setting they need before they begin.

Visitors can then adjust individual tools further or hide the sidebar when they do not need it.

Layering In Individual Tools

Profiles are useful, but individual tools give visitors more precise control. Enable the Screen Reader tool for text-to-speech reading.

On a marketing page, this can be useful for longer testimonial quotes, service descriptions, or pricing details.

Enable Navigation Tools such as Large Cursor, Focus Ring, and Page Structure.

Large Cursor can make the pointer easier to track. Page Structure can give visitors a navigable outline of headings, landmarks, and links, helping them jump to sections such as pricing or testimonials without scanning the whole page.

Enable Reading Tools such as Tooltip, Reading Guide, and Reading Mask.

These tools help visitors focus on one line or section of the page at a time, which can be useful on text-heavy service pages, pricing tables, documentation pages, or long landing pages.

Enable Text Tools so visitors can adjust text font, size, line height, spacing, and alignment.

For dense pricing tables, service descriptions, or blog content, these controls can make reading more comfortable without requiring visitors to zoom the whole browser.

Enable Graphics Tools for saturation, contrast, image visibility, and animation control.

These tools can help visitors who need stronger contrast, lower visual intensity, fewer animations, or less image-heavy browsing.

Matching The Sidebar To Your Brand

Open the Appearance tab to style the sidebar, toggle button, position, size, icon, and highlight colors.

A well-styled toggle button tucked into the corner of the site can feel like a natural part of the interface instead of a plugin bolted onto the design.

Most visitors may never open the Sidebar. But for visitors who need larger text, stronger contrast, reduced motion, line-by-line reading help, or a clearer page structure, those controls can make the site much easier to use.

Who The Accessibility Bundle Is For

The Accessibility Bundle is a strong fit for Divi users who want a more structured way to improve accessibility without managing several unrelated tools.

It is especially useful for:

• Freelancers and agencies who build client websites and need repeatable accessibility tools across projects.
• Site owners who want to improve usability without writing custom code for every accessibility enhancement.
• Businesses and organizations with content-heavy pages, service pages, pricing tables, forms, and navigation patterns that need better usability.
• Divi 4 users who want accessibility tools for existing sites.
• Divi 5 users who want to expand on Divi’s built-in Custom Attributes workflow.
• Teams managing multiple sites who need a consistent accessibility setup they can apply again and again.

The bundle does not replace careful design, semantic structure, content review, accessibility testing, or legal guidance when compliance matters. But it gives Divi users a practical toolkit for improving many common accessibility gaps from one ecosystem.

Get The Accessibility Bundle

Make Accessibility Easier In Divi

The Accessibility Bundle brings three accessibility-focused plugins into one workflow.

Accessibility Attributes helps you add meaning to specific Divi elements. Accessibility Tweaks improves navigation, focus behavior, skip links, menu behavior, and supported modules at a broader level. Accessibility Sidebar gives visitors front-end tools to adjust the website for their own needs.

Because the bundle is compatible with both Divi 4 and Divi 5, you can use it on existing sites as well as new builds. It also pairs well with Divi 5’s Custom Attributes system, giving you both native attribute control and a more specialized accessibility toolkit.

If you build Divi websites for clients, run a content-heavy site, manage an ecommerce store, or simply want your pages to work better for more visitors, the Accessibility Bundle is worth exploring.

Get the Accessibility Bundle from the Divi Marketplace and start building Divi websites that are easier for more visitors to use.

The post Divi Product Highlight: Accessibility Bundle appeared first on Elegant Themes Blog.

Each design uses circular shapes, image masks, layered content, strong color contrast, typography, and structured spacing to create modern sections with a distinct visual rhythm. Import a section, replace the content, update the images, and you’re ready to go.

Preview

Here’s a quick look at the 8 Circular Element Designs included in the pack. The download is further down the post.

Download 8 Circular Element Designs For Divi 5

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

After you download and unzip the file, you’ll find 8 styled Circular Element section exports, plus 1 file containing all layouts.

Styled – Circular Elements Section 1 to 8 (8) → Eight fully styled circular element section layouts with circular image treatments, bold shape compositions, layered text areas, buttons, strong contrast, structured spacing, and flexible visual layouts that you can use as-is or customize.

Styled – Circular Elements Sections (All) → Imports all 8 designs into your Divi Library at once.

How To Use The Circular Element Designs

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

1. Import Sections Into The Divi Library

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

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

2. Add A Circular Element 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 Circular Element sections.

3. Swap The Content

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

Because circular element designs rely on shape, cropping, image placement, and negative space working together, it’s best to replace content one area at a time. This helps preserve the balance between circular shapes, typography, imagery, buttons, and supporting layout elements as you customize the design.

If your new images have different proportions from the originals, review the circular areas after swapping them in. Circular masks and shape-based layouts can change quickly when focal points, cropping, or contrast shift. Adjust image positioning, sizing, spacing, or background settings as needed to keep the composition intentional.

If you want to expand or simplify a section, duplicate or remove existing rows, columns, groups, image modules, text modules, buttons, shape 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 Circular Element Designs are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, backgrounds, circular shapes, image treatments, borders, 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 circular styling, open the section, row, column, group, image module, or shape-based element you want to adjust and use the Content and Design tabs to tweak Background, Border Radius, Border Width, Border Color, Box Shadow, Sizing, Spacing, and Position settings.

If your section uses circular image masks, half-circle overlays, repeated rings, split backgrounds, bold color fields, large shape accents, or layered text areas, keep those relationships in mind as you edit so the layout remains balanced and easy to scan.

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

Tips For Effective Circular Element Designs

Circular element designs work best when the shapes feel intentional instead of decorative. Use these quick tips to keep your sections polished, modern, and easy to customize.

Use Circles To Create Focus

Circular shapes naturally pull attention. Use them to highlight an image, frame a key visual, support a headline, or guide visitors toward the most important part of the section.

Balance Shape With Negative Space

Large circles, rings, and curved elements can make a section feel dynamic, but they need room to breathe. Leave enough negative space around circular elements so the layout feels clean instead of crowded.

Choose Images With Clear Focal Points

Circular crops can hide the edges of an image. Choose visuals with strong central focal points so the image still works when placed inside a circle or partially covered by a shape.

Keep Text Blocks Focused

Shape-heavy sections can become busy if the content is too long. Keep headings short, supporting text concise, and buttons easy to spot so the circular composition remains clear.

Check The Layout On Mobile

Circular element designs can change noticeably on tablet and phone screens as columns stack and shapes resize. Review your layout on smaller devices to ensure circles remain balanced, images crop well, text stays readable, and calls to action stay easy to tap.

Start Building In Divi 5 Today!

These 8 Circular Element Designs give you a fast way to build modern, shape-driven sections for hero areas, landing pages, portfolios, product highlights, interaction design sections, creative studios, travel layouts, and more. Swap in your content, customize the styling if needed, and you’ll have a polished circular composition ready in minutes with Divi 5’s Visual Builder.

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

Divi 5 now includes Text Direction settings that let text flow vertically with one click. The text remains real text, the typography controls still work, and the layout can be adjusted visually inside the builder.

In this post, we’ll cover where the Text Direction settings live, what each direction mode does, and what changes once text starts flowing vertically. Then we’ll build a full vertical text header step by step and look at two more layout examples that use the same setting at different scales.

What Are Text Direction Settings In Divi 5?

Text Direction is a typography setting in Divi 5 that controls the axis your text follows. By default, text runs horizontally from left to right. Switch the setting to one of the vertical modes, and the same text flows along a vertical axis instead.

Only the rendering changes. Your content is still text underneath, not an image and not a rotated screenshot. That means you can still style it with normal typography settings such as font, size, color, capitalization, letter spacing, stroke, and line height.

You’ll find Text Direction inside the typography option groups in the Design tab. Open a module’s settings, go to the Design tab, and expand the option group that controls the text you want to change.

For a Heading module, open Heading Text and look for Heading Text Direction. For body text in a Text module, open the Text option group and look for Text Direction. The setting appears as a row of three icon buttons.

The three options work like this:

• Standard Horizontal: The default option. Text reads left to right, and new lines stack below the previous line.
• Vertical (Right To Left): Text displays vertically from top to bottom, and each new line starts to the left of the previous one.
• Vertical (Left To Right): Text displays vertically from bottom to top, and each new line also starts to the left of the previous one.

The difference between the two vertical modes matters most when text wraps onto multiple lines. With a short heading, the main visible change is the direction the word reads. With longer text, line wrapping becomes part of the design, so test both modes and choose the one that fits the layout best.

Applying the setting is quick once you know where it lives. Add a Heading module, type your text, open the Heading Text option group, and choose one of the two vertical direction icons. The heading changes direction directly on the canvas.

Vertical text works best as a supporting design element. A thin vertical label running along the edge of a section can give the layout structure without competing with the main headline. That is why the pattern appears often in editorial layouts, agency sites, portfolio pages, product launches, and poster-style hero sections.

At smaller sizes, vertical text can handle quiet jobs: a date stamp on an event card, a category label on a portfolio tile, a client name beside a testimonial, or a brand label along the side of a product section. In each case, the vertical element carries secondary information while the primary message stays horizontal and easy to read.

How Vertical Text Behaves With Longer Content

A short heading only shows part of the behavior. Longer text reveals what really changes when you switch from horizontal to vertical flow.

Think of the normal horizontal rules, then rotate them. In horizontal mode, lines wrap downward and paragraphs stack from top to bottom. In vertical mode, each line becomes a vertical column, wrapped lines stack to the left, and a new paragraph starts beside the previous one instead of below it.

That means vertical text grows differently. A horizontal text block usually gets taller as content wraps. A vertical text block can get wider as content wraps because new vertical columns are added beside the first one.

Plan your containers with that in mind. If you place a long sentence in vertical mode with no height limit, it can keep running down the page. If you want the text to stop at a specific height, place it inside a Group or another container and set a max height. The text will wrap once it reaches that limit, similar to how horizontal text wraps when it reaches the edge of its container.

One more clarification matters if you have worked with vertical text in CSS before. CSS writing-mode includes related controls that can affect whether letters rotate with the line or stay upright. Divi 5 keeps the builder setting simple and exposes the three direction modes only. For English text, the rotated vertical look is usually easier to read and more useful for graphic layouts.

The same general behavior applies whether you use the setting inside Heading Text or Text. The difference is the type of content you are styling, not the way the direction setting works.

How To Build A Vertical Text Header In Divi 5

Now that you know how the setting behaves, let’s use it in a real header design.

This header uses two outlined vertical headlines at different scales. The body text stays horizontal in the top corner and along the bottom edge, so the layout keeps its poster-like structure without making every piece of copy harder to read.

The dark background creates contrast, while the stroked vertical text sits inside the composition instead of covering it. Along the way, you’ll also see how to handle the alignment behavior that appears when a vertical heading sits inside a flex column.

Step 1: Set Up The Section

Start with a fresh page in the Visual Builder. Divi adds a Section automatically, so open the Section settings by clicking the gear icon.

Go to the Design tab and expand Sizing. Set the Height to 100vh. This makes the section fill the full height of the browser window and gives the vertical headlines enough room to run through the design.

Next, expand Spacing. Set the Top Padding and Bottom Padding to 2% each. Divi sections include default padding, but a full-height hero needs more available vertical space. Smaller padding keeps a thin buffer at the top and bottom without shrinking the main layout too much.

Now add the background image. Go to Content > Background > Image and choose your image.

For this layout, the background image matters. Choose an image with a calm area where the vertical headline can sit. If the subject, light source, or busiest part of the photo sits directly behind the text, the outlined heading will become harder to read.

Step 2: Add A Two-Column Row

Add a new Row inside the section and choose a two-column structure. The first column will hold the main vertical headline and the bottom paragraph. The second column will hold the supporting vertical headline and the top paragraph.

Open the Row settings and go to the Design tab. Expand Layout and set the Horizontal Gap to 0.

This design does not need extra space between columns. The vertical headlines and body text need to sit close together around the center of the layout, and removing the gap prevents the columns from pushing the composition apart.

Step 3: Add The First Vertical Heading

Click the plus icon inside the first column and add a Heading module. Type Conquer as the heading text.

Open the Design tab and expand Heading Text. Keep the heading level set to h1, since this is the main headline of the page. Then apply these settings:

• Heading Text Font: Anton
• Heading Text Font Weight: Thin
• Heading Text Size: 24vh
• Heading Text Capitalization: Uppercase
• Heading Text Stroke Width: 10px
• Heading Text Stroke Color: #9f0000

The stroke creates the outlined look, which lets the headline become part of the image instead of covering it with a solid block of text. Anton works well here because its condensed letterforms hold their shape at large sizes.

The size uses vh instead of pixels because the heading will run vertically through a section set to 100vh. Sizing the text against the viewport height helps the headline stay proportional to the space it occupies.

Step 4: Turn The Heading Vertical And Fix The Alignment

With the heading styled, stay inside the Heading Text option group and find Heading Text Direction. Select Vertical (Left To Right). The heading now runs vertically through the design.

You may notice that the module takes up more horizontal space than the letters need. The vertical word is narrow, but the module box can still stretch across the column. Margins and padding will not fully solve that because the issue comes from the column layout.

The column’s Flexbox Align Items setting defaults to Stretch. Stretch forces modules inside the column to fill the column’s available width. A horizontal heading hides this behavior because the text naturally uses horizontal space. A vertical heading makes the stretched box more obvious.

To fix it, open the Column settings, go to the Design tab, and expand Layout. Change Align Items from Stretch to End.

The Heading module now shrinks closer to the text. Since End aligns the module to the column’s right edge, the vertical headline moves toward the center of the layout, right where the second headline will sit.

Finally, open the Heading module again, expand Spacing, and set the Right Padding to 8px. This adds a small buffer between the two vertical headlines so they do not touch.

Step 5: Add The Body Text Below The Heading

The first column also holds the paragraph that sits along the bottom of the header. Click the plus icon inside the column, below the Heading module, and add a Text module. Add your paragraph in the Content tab. Then go to the Design tab, expand Text, and apply these settings:

• Text Font: Abel
• Text Font Weight: Semi Bold
• Text Size: 16px
• Text Color: #FFD4D8
• Text Line Height: 1.2em
• Text Alignment: Right

The soft pink text color stays readable against the dark image without competing with the red stroke of the headline. Right alignment lines the paragraph edge up with the vertical heading above it, so both elements share the same axis.

Finally, expand Spacing and set the Right Padding to 15px. This gives the paragraph a little breathing room near the center column edge.

Step 6: Add The Second Vertical Heading

Move to the second column and repeat the same general setup. Add a Heading module, type Every Match, and use the same heading styling as before with two changes:

• Heading Text Size: 18vh
• Heading Text Stroke Width: 4px

Then set Heading Text Direction to Vertical (Left To Right).

The smaller size and thinner stroke make this second heading feel like a supporting layer instead of another main headline. It creates depth without splitting attention.

Step 7: Add The Paragraph Beside The Second Heading

The second column also holds the paragraph that sits in the upper-right area of the design. Click the plus icon inside the column, below the Heading module, and add a Text module. Use the same text styling from Step 5, but keep Text Alignment set to Left.

By default, the paragraph stacks below the heading. This design needs the two elements to sit side by side, with the paragraph starting near the top of the column. That is a Flexbox adjustment. Open the Column settings, go to the Design tab, and expand Layout. Apply these settings:

• Layout Direction: Row
• Horizontal Gap: 0
• Vertical Gap: 3px
• Align Items: Top

Setting Layout Direction to Row places the vertical heading and paragraph next to each other. Align Items: Top pins them to the top of the column, which places the paragraph in the upper-right corner while the vertical heading runs beside it.

Step 8: Adjust The Design For Tablet And Mobile

The final step is responsive cleanup. Vertical headlines depend on available horizontal room, so tablet and phone layouts need different treatment.

Start with the tablet breakpoint. The vertical layout can still work here, but the desktop sizes may feel too large for the narrower screen. Open each Heading module and reduce the Heading Text Size until the two vertical headlines sit comfortably side by side. Then open the Row settings and lower its top padding if the layout crowds the top of the section.

Next, switch to the phone breakpoint. Two large vertical headlines side by side will usually become too narrow to read on a phone. Instead of forcing the effect to work everywhere, turn the phone layout into a clean stacked header.

Open each Heading module, go to Heading Text, and set Heading Text Direction back to Standard Horizontal on the phone breakpoint.

Divi applies the change only to the phone breakpoint, so the desktop and tablet versions stay vertical. Then reduce the Heading Text Size on both headings so they fit the narrow screen without awkward wrapping.

With the headings horizontal again, the layout becomes a standard stacked header: main headline, supporting headline, and body text. Check the paragraph alignment at this breakpoint and switch it to left if the previous alignment no longer fits the flow.

The design loses the poster effect on mobile, and that is the right trade. A readable simple header is better than a broken vertical one.

2 More Vertical Text Layout Examples

The header we just built is one way to use Text Direction, but the same setting can support several layout styles. Here are two more examples built around the same core idea: use vertical text for framing, labels, and visual structure while keeping the main readable content horizontal.

Design 2: Editorial Fashion Header

This design frames a photo with vertical headlines on both sides, creating the layered look of an editorial magazine spread.

The layout uses a three-column row. The left column holds a horizontal heading, a paragraph, and a second heading stacked below it. The middle column holds a full-height Image module. The right column holds two vertical Heading modules side by side, both set to Vertical (Right To Left) with the same Align Items adjustment used in the main tutorial.

The structure suits fashion sites, editorial brands, portfolio pages, and visual landing pages. The vertical headlines act as a frame for the photo, so visitors experience them as part of the composition before reading them as words. The horizontal text on the left carries the details, and the vertical text on the right balances the image.

Swap the photo, background color, and copy, and the same three-column skeleton can work for many editorial layouts.

Design 3: Product Launch Header

This design uses vertical text as a brand label along the edge while keeping the main focus on the video in the center.

The layout uses two rows. The top row has three columns: a vertical Heading module on the left with the brand name set to Vertical (Right To Left), a Video module in the middle, and a column of horizontal text on the right. The bottom row holds a full-width Heading module styled with a transparent fill and a stroke, sized large enough to run edge to edge.

This structure works well for product launches, feature announcements, and landing pages where one word or brand label needs to create atmosphere without taking over the main content. The vertical brand name labels the page, the video carries the attention, and the horizontal text explains the offer.

Best Practices For Vertical Text In Divi 5

Vertical text is powerful because it changes the shape of a layout. That also means it can become distracting if too much of the page depends on it.

Use these guidelines when working with Text Direction in Divi 5:

• Use vertical text for secondary information. Labels, categories, brand names, dates, and decorative headlines usually work better than long paragraphs.
• Keep the main message horizontal. Important copy should stay easy to scan, especially on landing pages and mobile layouts.
• Watch the container size. Vertical text can grow wider as it wraps, so plan the column, group, or row around that behavior.
• Use calm backgrounds. Vertical text needs contrast and breathing room, especially when placed over an image.
• Fix stretched module boxes with Align Items. If a vertical heading creates too much empty horizontal space, adjust the parent column’s layout settings.
• Test both vertical directions. Short labels may work in either mode, but longer text behaves differently once it wraps.
• Switch back to horizontal on mobile when needed. A strong desktop effect should not come at the cost of phone readability.

The best vertical text layouts have a clear hierarchy. The vertical element gives the design structure, while the horizontal text handles the reading.

Get Creative With Text Directions In Divi 5!

Every design in this article follows the same rule: vertical text works best when it supports the layout instead of carrying the whole message. Use it for a brand label, section marker, decorative headline, date stamp, or editorial frame. Keep the primary message horizontal, then let the vertical text shape the composition around it.

Divi 5’s Text Direction settings make that effect much easier to create. You no longer need to rotate modules, fake vertical words with images, or rely on custom CSS for a simple vertical label. Choose the right text group, switch the direction, adjust the parent layout, and refine the design across breakpoints.

Try it on a page you already have. Add a vertical label along the edge of a section, test how it changes the structure, and save the module as a preset if the pattern earns a place in your design system.

The post How To Create Vertical Text Layouts With Divi 5’s Text Direction Settings appeared first on Elegant Themes Blog.

Divi 5 gives you the tools to build that workflow visually. With Canvases, the updated form modules, Interactions, Design Variables, and form field focus styling, you can create email popups without relying on a separate popup plugin or writing custom JavaScript.

In this tutorial, we’ll look at why email popups work, which Divi 5 features make them possible, and how to build two popup styles from scratch: a centered modal popup and a minimalist corner popup.

Why Are Email Popups Effective?

Popups have a bad reputation, and some of that reputation is earned. A popup that covers the entire screen before someone has read a single line, hides the close button, or interrupts the page without a clear offer creates friction. It makes visitors trust the site less, not more.

That is a design and timing problem, not a format problem. A good email popup appears when the visitor has enough context to care. It presents one clear offer, keeps the form simple, and makes dismissing it obvious.

The reason email capture still matters is simple: an email list is a channel you own more directly than social reach or paid traffic. Social platforms can change distribution overnight, and ads stop the moment the budget stops. A subscriber list gives you a direct line to people who already raised their hand.

That does not mean every popup will perform well. The offer, timing, audience, and site context all matter. But a well-built popup can create a clean path from visitor interest to subscriber growth.

The popup is just the start of that relationship. Build it with care, and the rest of the email funnel has a better foundation.

The Divi 5 Tools Behind Building A Popup

Building an email popup used to mean installing a third-party popup tool or forcing popup content into the main page layout. Divi 5 gives you a cleaner way to handle the structure, form, styling, and behavior directly in the Visual Builder.

The three main pieces are Canvases, form modules, and Interactions.

Canvases

A popup should not have to live inside the normal page structure. If it does, it becomes something you have to work around while editing the page, and the page becomes something you have to work around while editing the popup.

Canvases solve that by giving you separate design spaces inside the Visual Builder. The Main Canvas holds the page content, while additional Canvases can hold popups, off-canvas menus, slide-ins, notices, overlays, and other hidden interface elements.

That separation matters for maintenance. Your email popup gets its own workspace, its own section, and its own modules. You can design and update it without cluttering the page you are building. Use a Global Canvas when the popup should be available across the site. Use a Local Canvas when the popup only belongs to one page or template.

For this tutorial, a Canvas lets us build each popup as its own interface layer, then reveal it with Interactions when the timing is right.

Email Optin And Form Styling

A popup lives or dies on two things: the offer and the form. For most email popups, the Email Optin module is the right starting point because it is built for subscriber capture. It can connect directly to email marketing providers, so new signups can land in the list you choose.

The design side is just as important. Divi 5’s updated form field options make form styling more consistent across form-based modules. Instead of one limited field group, form modules now use more complete design groups for inputs, checkboxes, and radio buttons where they apply.

That gives popup forms the same level of visual care as the rest of the design. You can style input backgrounds, labels, placeholder text, borders, spacing, focus states, buttons, and more.

Focus states are especially useful in a popup. When someone clicks or tabs into the email field, the field can respond visually, confirming that the form is active and ready.

If your site already uses Contact Form 7 for a specific workflow, Divi 5’s Contact Form 7 module can bring those existing forms into the builder and style them visually. But for a standard newsletter or lead magnet popup, the Email Optin module is usually the cleanest choice.

Interactions

Canvases handle where the popup lives. Form modules handle the signup. Interactions handle the behavior. Every Interaction has three parts:

• Trigger Event: What starts the Interaction, such as Load, Click, or Viewport Enter.
• Effect Action: What happens after the trigger, such as Show Element or Hide Element.
• Target Module: The element that receives the effect.

For an email popup, Interactions decide when the popup appears and how it disappears. You can show a popup after a delay, reveal it when someone scrolls to a specific section, or hide it when they click the close icon. You can also stack Interactions when needed. For example, a close icon can hide the popup and, in a more advanced setup, write a cookie so the popup does not show again after the visitor dismisses it.

For this tutorial, we’ll use Interactions to reveal each popup at the right moment and close it on click.

What We’re Building

We’ll recreate two layouts inspired by our free Divi 5 email popup pack.

The first design is a centered modal popup. It uses a dark full-screen overlay, a compact signup card, an offer headline, an Email Optin form, a product image, and a close icon. It appears after a short page-load delay. The second design is a minimalist corner popup. It sits in the bottom-right of the screen without an overlay, uses a lighter footprint, and appears when the visitor reaches a specific section of the page.

Both use the same general pattern: build the popup in a Canvas, hide it by default, show it with an Interaction, and close it with another Interaction.

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!

Design 1: Stacked Email Popup

The first layout leads with a bold discount offer, stacks the signup form underneath, and closes with a product image below the form. This design works as a centered modal with a dark overlay behind it. The overlay dims the page, the popup card becomes the clear focus, and the close icon sits in the top-right corner so visitors always have an obvious way out.

1. Add A New Canvas

Open the Visual Builder and find the Canvas dropdown at the top of the interface. It should currently show Main Canvas.

Select Add New Canvas. In the dialog that appears, give the Canvas a clear name, such as Stacked Popup. A descriptive name matters because you will need to target this popup later when setting up Interactions.

Set the Z Index to 999, then click Add Canvas. Divi opens the new Canvas as a separate workspace with a blank section ready to style.

2. Style The Overlay Section

The section inside this Canvas becomes the full-screen overlay. Open the section settings and go to the Design tab. Set the minimum height to 100vh and the width to 100vw. This lets the section cover the full viewport.

Next, use the section’s layout settings to center the popup card. Set Justify and Align Content to Center.

Now add the overlay background. Go to Content > Background and set a dark background color, such as #000000, with around 30% opacity.

The overlay should be dark enough to push attention toward the popup, but not so dark that visitors feel trapped. The page behind it can still be visible, but the card should clearly own the moment. Open the section’s Meta option group and add a clear element label, such as Popup Section. This label will make it easier to find the section when choosing the Interaction target.

Finally, go to Advanced > Position. Set Position to Fixed, set Offset Origin to Center, and use a high Z Index, such as 9999, so the popup appears above the rest of the page.

3. Build The Popup Card

The popup card sits inside the overlay section as a row. Add a single-column row and style it as the visible card. A light background gives the card its own visual plane against the dark overlay. Set the row width to 450px so it reads as a compact popup rather than a full layout.

Add padding of 20px on the top and bottom and 30px on the left and right.

Set the row border radius to 15px so the card feels softer and more modern.

Then add a background color to the row.

Inside the row, add three main modules:

• A Heading module for the offer.
• An Email Optin module for the signup form.
• An Image module for the product visual.

That order matters. The visitor sees the offer first, then the action, then the product visual that supports the offer.

4. Style The Popup With Design Variables

A popup should feel like part of the site, not something pasted on top of it. Design Variables help with that. Use the Variable Manager to pull from the same colors, spacing values, border radius values, and typography choices used across the rest of the site. That keeps the popup connected to your design system.

For example, use color variables for the button and accent colors, number variables for spacing and radius, and font variables for the headline and form text.

This makes future updates easier. If the brand color, radius, spacing, or typography changes later, the popup can follow the same system as the rest of the site.

5. Style The Email Field Focus State

The form is the reason the popup exists, so its interaction state matters. The focus state controls how the email field looks when someone clicks, taps, or tabs into it. Without styling, the browser’s default focus treatment may not match the popup design. With Divi 5’s focus editing, you can style that active state visually.

Open the Email Optin module settings and find the field styling group. Use the state selector at the top of the group header to switch from Default to Focus.

If you do not already have brand tints and shades available, the Variable Generator can help. Open the Variable Manager, hover over the Colors group, click the palette icon, and generate tints, shades, and transparency variants from your brand colors.

In the Focus state, add a subtle brand tint to the active field background.

Then style the border for extra confirmation.

The goal is not to make the field loud. The goal is to make it obvious where the visitor is typing.

6. Add A Close Button

A popup always needs a clear exit. Add an Icon module above the popup content. Open the icon picker and search for close or times, then select an X icon.

In the Design tab, adjust the icon size, alignment, and color so it fits the card. Then use spacing or positioning to place it comfortably in the top-right corner. In this design, negative margins of around -30px on the bottom and -10px on the right help tuck the icon into place without crowding the content below it.

7. Hide The Popup By Default

Before wiring the Interactions, hide the popup section so it does not appear immediately on the page. Open the popup section settings, go to Advanced > Visibility, and hide the section across all devices. The section will stay hidden until an Interaction reveals it.

8. Wire The Close Interaction

The close icon needs an Interaction that hides the popup section when clicked. Open the Icon module settings, go to Advanced > Interactions, and add a new Interaction. Set it up like this:

• Trigger Event: Click
• Effect Action: Hide Element
• Target Module: Popup Section
• Time Delay: 0

A close button should respond immediately, so a delay is not needed here.

9. Wire The Page Load Interaction

The show Interaction belongs on the Main Canvas, because that is where the page load event fires. Switch back to the Main Canvas using the Canvas dropdown. Choose an element on the page to hold the Interaction. A hero section works well because it loads with the page.

Open that element’s Advanced tab, go to Interactions, and add a new Interaction. Set it up like this:

• Trigger Event: Load
• Effect Action: Show Element
• Target Module: Popup Section from the Stacked Popup Canvas
• Time Delay: 5 to 8 seconds

The delay matters. A popup that appears the instant the page loads can feel abrupt. Waiting a few seconds gives visitors time to orient themselves before the offer appears.

The first email popup is now ready.

Design 2: Minimalist Email Popup

The second design strips the popup back to a headline, one line of supporting copy, an email field, a subscribe button, and a close icon. Instead of taking over the screen, it appears as a fixed card in the bottom-right corner. The page stays visible behind it, so the popup feels more like a timely prompt than a modal interruption.

This design will appear when the visitor reaches a specific section of the page.

1. Add A New Canvas

The setup starts the same way as the first design. Open the Canvas dropdown at the top of the Visual Builder, select Add New Canvas, and name it something clear, such as Minimalist Popup.

2. Build The Popup Structure

Design 1 needed a full-screen overlay because the popup appeared as a centered modal. This second design does not need that treatment. Because it sits in the corner while the page remains visible, the section itself becomes the popup card. There is no separate overlay section or inner card row to build.

Set the section width to 500px, add 40px of padding, and set the border radius to 20px. This creates a compact card that feels polished without taking over the page.

Because there is no dark overlay behind this popup, the card needs enough separation from the page. Add a subtle border and box shadow so it does not blend into the content behind it.

Then go to Advanced > Position. Set Position to Fixed, set Offset Origin to Bottom Right, and add bottom and right offsets of around 20px. Set the Z Index to 9999 so the card appears above the page content.

3. Add And Style The Email Optin Module

The Email Optin module handles the core content: the email field, placeholder text, and subscribe button. Add the module inside the section, remove any content you do not need, connect your email provider in the Content tab, and style the module in the Design tab.

Just like in Design 1, use Design Variables where possible. Pull in your shared colors, spacing values, radius values, and typography choices so the popup feels connected to the rest of the site.

Add an Icon module above the Email Optin module, choose an X icon from the icon picker, and style it as the close button. Use spacing or positioning to place it neatly in the corner of the card.

Once the content is in place, add a clear label to the popup section and hide it across all devices in Advanced > Visibility, just like we did in the first design.

4. Wire The Close Interaction

The close button uses the same setup as Design 1. Open the close Icon module, go to Advanced > Interactions, and add a new Interaction:

• Trigger Event: Click
• Effect Action: Hide Element
• Target Module: Minimalist Popup section
• Time Delay: 0

5. Wire The Scroll-Based Show Interaction

The show Interaction is different for this popup because the timing is different. A Load trigger appears based on time. A Viewport Enter trigger appears based on behavior. Instead of showing the popup immediately after someone lands on the page, it waits until they reach a chosen section.

Switch back to the Main Canvas and select a section far enough down the page to suggest real engagement. A pricing block, feature breakdown, blog section, product section, or testimonials row can work well. Open that section’s Advanced tab, go to Interactions, and add a new Interaction:

• Trigger Event: Viewport Enter
• Effect Action: Show Element
• Target Module: Minimalist Popup section from the Minimalist Popup Canvas
• Time Delay: 0, or around 500ms if the entrance feels too abrupt

This approach usually feels less intrusive because it waits for a signal of interest. The visitor has already moved through the page, so the signup prompt appears with more context. The second popup is now ready.

Email Popup Best Practices In Divi 5

The technical build matters, but the strategy matters just as much. A popup should support the visitor’s experience, not fight it. Use these guidelines when building email popups in Divi 5:

• Lead with one clear offer. A discount, guide, checklist, early access invite, or newsletter promise is easier to understand than a vague “subscribe” request.
• Keep the form short. For most email popups, the email field is enough. Add names or extra fields only when the offer truly needs them.
• Delay disruptive popups. A centered modal should usually wait a few seconds or appear after a scroll signal.
• Use smaller prompts for earlier moments. A bottom-corner popup can appear with less friction than a full modal.
• Make the close button obvious. Visitors should never have to hunt for a way out.
• Style focus states. The email field should clearly respond when someone clicks, taps, or tabs into it.
• Use Design Variables and presets. Keep popup colors, spacing, typography, buttons, and fields connected to the rest of the site.
• Test on mobile. A centered popup may need different sizing, spacing, or timing on smaller screens.
• Avoid showing the same popup too often. Use Display Conditions and cookies when repeat views would feel annoying.

The best popup feels deliberate. It appears at the right moment, asks for one clear action, and respects the visitor’s control.

Build A Better Email Popup In Divi 5

A strong email popup is not just a card with a form. It is a small conversion flow: the offer, the layout, the form styling, the trigger, and the close behavior all work together.

Divi 5 makes that flow easier to build visually. Canvases give the popup its own workspace. The Email Optin module connects the form to your list. Form field controls let the input match the rest of the site. Interactions decide when the popup appears and disappears. Design Variables and presets keep the styling maintainable.

In this tutorial, we built two versions. The centered popup creates a focused moment with an overlay. The minimalist corner popup waits for engagement and stays lighter on the page. Both use the same Divi 5 logic: build the popup separately, hide it by default, reveal it intentionally, and give visitors a clear way to close it.

Start with the popup style that matches your offer, then refine the timing until it feels helpful instead of interruptive.

The post How To Build An Email Popup In Divi 5 appeared first on Elegant Themes Blog.

Divi 5 changes that with new pseudo-class editing modes for form fields. You can visually customize states like :focus and :checked directly inside the builder, using the same design controls you already use for the default state.

In this tutorial, we’ll build a modern project inquiry form and use both states to add visual feedback across text fields and checkbox selections. A focused field will become easier to track while the visitor types, and checked options will respond clearly when selected.

A Quick Look At :focus And :checked

Before jumping into the build, it helps to understand what these two states do.

Both live inside Divi 5’s pseudo-class editing modes. You can access them by hovering over a supported design option and clicking the small state icon. From there, you can switch between states such as Default, Hover, Focused, and Checked, depending on the field type and option group you are editing.

:focus State

The :focus state activates when a visitor enters a form field. That can happen by clicking into the field, tapping it on a touch device, or tabbing into it with a keyboard. It stays active while the visitor is interacting with that field.

This matters for usability and accessibility. Visitors should always know which field is active, especially when moving through a form with a keyboard. In this tutorial, we’ll use the focus state to switch active fields to a white background with black text so the current field stands out clearly from the rest of the form.

:checked State

The :checked state applies to selectable fields, such as checkboxes and radio buttons. It activates when a visitor selects an option and clears when that option is deselected.

In our form, each checked service option will grow slightly, become bolder, and use a #CBFF00 background. That gives visitors a clear signal that their selection registered.

Learn Everything About Focused And Checked States In Divi 5

What We’re Building

Here’s a look at the finished form before we start building it.

The form uses a dark default design with strong borders and bold typography. When a visitor clicks, taps, or tabs into a text field, the :focus state switches the field background to white and the text to black. The :checked state handles the service checkboxes, making selected options larger, bolder, and brighter so each choice feels deliberately confirmed.

Build The Contact Form Structure

We’ll set up the form structure first before touching any interaction states. The :focus and :checked states only become useful once the right field types are in place.

1. Add The Main Contact Form Module

Start by adding a single-column Row inside the section and set the Max Width to 950px.

Click the black plus icon and add a Heading Module. Set the text to Get in touch using DM Sans, Bold, All Caps, Center Alignment, #FFFFFF font color, and 14px font size.

Add a second Heading Module directly below for the main title. Use Space Grotesk, Bold, Center Alignment, #FFFFFF font color, and 52px font size.

Now add the Contact Form Module below the headings. Divi will automatically generate a few default fields once the module loads.

The default fields won’t match our layout yet, so we’ll rename and adjust each one to fit the project inquiry form we’re building.

Open the first field settings and rename the Title to Full Name, keeping the field type set to Input Field.

Open the Email field next and rename it to Company Email, keeping the field type set to Email.

Add one more field for Project Details and set the field type to Textarea so visitors have enough room to describe what they need.

Now add the checkbox field. Inside the Contact Form Elements settings, click Add Element and choose Field. Set the field type to Checkboxes, change the title to What Do You Need Help With?, and add the following options one by one, starting with Website Redesign.

• Landing Pages
• SEO Strategy
• Brand Identity
• Conversion Optimization

Save the field and return to the main Contact Form settings. The form structure is now ready, with text fields for the :focus state and checkbox options for the :checked state.

2. Style The Default Form Design

With the structure in place, we can style how the form looks before any interaction happens. This default design becomes the baseline that the focused and checked states build on top of.

Open the Contact Form Module settings and move to the Design tab. Open the Fields settings group and set the field background color to #1C1B2D.

Open the Border settings and set the border width to 5px with a white border color.

Scroll down to the Placeholder Text settings. Change the font to Space Grotesk, set the font weight to Semi Bold, use white text, and set Letter Spacing to 2px.

Apply those same typography settings to the Input and Label Text settings so the form reads consistently across fields.

Open the Checkbox settings group and repeat the same baseline styling. Use #1C1B2D for the background, a 5px white border, and Space Grotesk Semi Bold with white text. Keeping the checkboxes visually aligned with the input fields gives the form a cohesive default state before any interaction styling is added.

3. Customize The :focus And :checked States

With the default styling done, we can move into the interactive states. This is where the form starts to feel responsive instead of static.

Customize The :focus State

Switch from the Desktop state to the Focused state using the state selector at the top of the settings panel.

Open Fields > Background and change the color to #FFFFFF.

Then open the Input, Placeholder Text, and Label Text settings and change the text color to black.

That is all we need to change for the focused state. Everything else, including border size, typography, and spacing, carries over from the default state. This is the main benefit of pseudo-class editing in the builder: you only adjust the properties that need to change during interaction.

Now whenever a visitor clicks, taps, or tabs into a field, that field switches to a white background with black text, making it easy to see exactly where they are in the form.

Customize The :checked State

Click the state icon again and switch to the Checked state.

Inside Checkbox > Input Field, increase the font weight to Heavy and raise the text size from 16px to 18px.

Then open Checkbox > Background and change the color to #CBFF00.

Open the Spacing settings and add 5px padding on all sides. This gives each selected option a little more breathing room so it feels visually distinct from the unchecked items around it.

With those changes in place, selecting a service option expands the item slightly, bolds the text, and swaps in the bright accent color. It is a small interaction detail, but it makes the form feel like it is actively responding to the visitor’s choices.

4. Style The Submit Button

Switch back to the Desktop state before making button changes. Open the Button settings group inside the Contact Form Module and change the button background color to #CBFF00.

Set the text color to black, change the font to Space Grotesk, and enable All Caps text styling. This keeps the button consistent with the rest of the form and gives the final action enough visual weight to read clearly.

5. Optimize The Form For Responsive Devices

Switch to the responsive preview modes and work through tablet and mobile adjustments. Depending on your layout, you may need to tweak heading sizes, field sizing, spacing, row width, or checkbox spacing to keep the form readable on smaller screens.

Once the layout feels right across breakpoints, test both states in responsive preview mode. Tap into the text fields to confirm the :focus styling still reads clearly, then select and deselect the checkbox options to make sure the :checked styling still feels balanced on smaller screens.

Here’s how the finished form looks across the full flow.

Best Practices For :focus And :checked Editing

The example above uses strong contrast and a bright accent color, but the same workflow can fit many different form styles. The key is to make each state useful, not just decorative.

Use these guidelines when styling form states in Divi 5:

• Keep focus states obvious. A focused field should be easy to see for mouse, touch, and keyboard users.
• Do not remove visual focus feedback. If you change the default focus style, replace it with something equally clear or better.
• Use checked states as confirmation. A selected checkbox or radio option should feel unmistakably selected.
• Change only what needs to change. Let the default state handle the base design, then edit only the background, text, border, spacing, or weight that needs to respond.
• Test keyboard navigation. Tab through the form and make sure the focused field is always visible.
• Test on mobile. A checked state that feels balanced on desktop can become too large or crowded on small screens.
• Save repeated field styles as presets. If you use the same form styling across multiple forms, use form field presets to keep inputs, checkboxes, and radio buttons consistent.

Pseudo-class editing is most powerful when it becomes part of your design system. A focused input, selected checkbox, or chosen radio button should use the same visual logic wherever that form pattern appears.

Use Pseudo-Class Editing In Divi 5 To Style Form Interactions

Styling interactive form states used to mean stepping outside the builder, writing selectors, and checking whether the result worked on the front end. With Divi 5’s pseudo-class editing modes, that detour is no longer necessary. You can style :focus and :checked states visually, in context, and with the same controls you use for the default design.

The form we built here is a straightforward example, but the approach scales to many form layouts. A focused field that clearly lights up, a checkbox that responds when selected, and a submit button that matches the interaction style can make the whole form feel more intentional.

Those details are small, but they change how the form feels to use. And now, they are well within reach directly inside Divi 5.

The post How To Use :focus And :checked Editing In Divi 5 appeared first on Elegant Themes Blog.