Built specifically for Divi 5, the extension adds more than 14,000 icons directly to Divi’s native icon picker, with more than 30,000 variations when its thin, regular, and bold line weights are counted. The library combines familiar open icon collections with custom, industry-focused sets designed for more specific business use cases.

In this Product Highlight, we’ll look at what Divi Sensei Icons includes, how its native Divi 5 integration works, how the library stays manageable at this scale, and how to start using the icons inside the Visual Builder.

Why A Larger Icon Library Can Be Useful

Icons are a practical way to add visual cues without adding more copy. They can help visitors scan a service grid, distinguish features, recognize actions, understand navigation, and move through a page more quickly. When the icon style stays consistent across a website, it can also become part of the wider visual system alongside typography, color, spacing, and imagery.

Divi 5 already gives designers a native icon picker and dedicated Icon Module, along with icon controls inside modules such as Blurbs and Buttons. Divi Sensei Icons builds on that existing workflow by dramatically increasing the number and variety of symbols available from the same picker.

That becomes especially useful on industry-specific websites. A generic symbol may work for broad ideas such as email, location, or settings, while a financial services site, bakery, medical practice, construction company, florist, or legal firm may need much more specific visual language.

Instead of introducing a separate icon workflow, Divi Sensei Icons keeps those additional choices connected to the way icons already work inside Divi 5.

Built Specifically For Divi 5

Divi Sensei Icons was developed for Divi 5 and integrates directly with its native icon system. Once the extension is installed and activated, its icons become available anywhere the Divi icon picker is supported rather than living inside a separate proprietary module.

That means you can use the library in modules such as Blurbs, Buttons, Accordions, Toggles, the Icon Module, and other elements that expose Divi’s icon picker. Divi Sensei also states that the library works with compatible third-party modules that use the same native icon system.

The benefit is mostly about continuity. You browse and select the icon where you would normally choose one, then use Divi’s existing design controls to style it. There is no shortcode to insert and no separate icon module required simply because the icon came from the expanded library.

The Marketplace listing currently marks Divi Sensei Icons as compatible with Divi 5 and not compatible with Divi 4, so this is specifically a Divi 5 extension.

You can explore the live demo to browse the collection before adding it to a project.

What Is Included With Divi Sensei Icons?

Divi Sensei Icons currently includes more than 14,000 icons. Its line-style icons are available in three matching weights, thin, regular, and bold, bringing the total number of available icon variations to more than 30,000.

A major part of the library is its collection of 40+ custom icon sets designed around real industries and use cases, including accounting, banking, bakeries, cafés, cleaning, construction, medical services, legal services, weddings, florists, and more.

Alongside those original collections, the library includes established open icon sets such as Material, Phosphor, and Lucide. That gives you recognizable general-purpose iconography alongside more specialized designs when a project needs something specific.

The combination is useful because not every part of a website needs specialized iconography. Common interface actions can use familiar symbols, while service sections, feature grids, menus, and industry-specific content can draw from more focused collections without switching icon systems.

Key Features Of Divi Sensei Icons

The size of the library is the obvious headline feature, but the way those icons are organized and integrated matters just as much. A 14,000-icon collection is only useful if designers can find what they need quickly and use it without disrupting the rest of their workflow.

14,000+ Icons Inside The Native Picker

The library gives you a much wider range of choices while keeping them available through Divi’s existing icon interface. For client work, that can make it easier to find symbols that accurately represent individual services instead of repeatedly using the same broad collection of generic icons.

A feature grid for a medical practice, for example, can use symbols designed around healthcare. A construction website can draw from icons made specifically for that industry. The same applies to hospitality, professional services, retail, fitness, food businesses, and the other categories included in the library.

That variety also makes it easier to keep a project stylistically consistent. Instead of mixing icons collected from unrelated sources, you can choose one compatible family or weight and use it across the site.

Native Integration Across Divi Modules

Divi Sensei Icons does not require a dedicated module to access its library. Once active, the additional icons appear wherever a module uses Divi’s native icon picker.

That keeps the workflow familiar when moving between different parts of a design. You can select an icon in a Blurb, Button, Accordion, Toggle, Icon Module, or another compatible element without opening a separate library or rebuilding the design using a specialized icon module.

The same integration can extend to third-party Divi 5 modules that use Divi’s native icon picker, which makes the library useful beyond the core module set as the Divi 5 ecosystem continues to grow.

Search, Filtering, And Library Management

A library this large needs more than a long scrolling picker. Divi Sensei Icons includes search and filtering tools to help narrow the collection, along with a management dashboard for controlling which icon sets are active.

You can search icons by name and filter the collection by style or category. The dashboard also lets you enable only the sets you want available in the Visual Builder, keeping the working library more focused when a particular project only uses a few collections.

A larger modal view is available when you want more room to browse and compare icons visually. Together, these controls make it more practical to work with thousands of options without treating the library as one enormous list.

Three Consistent Line Weights

Line-style icons are available in thin, regular, and bold variations. The global weight control lets you establish the line treatment used throughout the design instead of manually choosing a different version every time.

That gives the icon system another way to align with the rest of the brand. A lightweight editorial design might lean toward thin icons, while a stronger UI or high-contrast layout may work better with regular or bold strokes.

More importantly, the three weights belong to the same icon families, so you can change the visual emphasis without introducing a completely different drawing style.

Load-On-Demand Architecture

Divi Sensei Icons is designed so the size of the complete library does not mean the complete library has to be delivered to every visitor. On the front end, the extension loads the icons actually being used on the page rather than loading thousands of unused icons alongside them.

The management dashboard complements this by letting you disable icon sets you do not need in the Visual Builder. One controls what you work with while designing, and the other keeps the front-end delivery focused on what is actually present in the layout.

This is a more useful way to think about performance than the overall library count. The plugin can offer tens of thousands of available variations without requiring every one of those assets to be sent with a page that only displays a handful of icons.

How To Use Divi Sensei Icons

Once Divi Sensei Icons is installed and activated, its library becomes part of Divi’s native icon picker. You do not need to add a special Divi Sensei module first. For this example, we’ll use a Blurb Module, but the same general workflow applies anywhere the native picker is available.

Add a Blurb Module to an existing page or create a new layout in the Visual Builder.

Open the Blurb settings, make sure the Content tab is selected, and expand Image & Icon. Enable Use Icon to open the icon options.

The expanded Divi Sensei collection appears in the same picker. Use Search when you know what you’re looking for, or use the available filters to narrow the results by category or style.

When you want more room to browse, click the Expand Modal control above the filter options to open the larger icon-selection interface.

For line icons, choose between thin, regular, and bold to match the visual weight of the surrounding design.

Once the icon is selected, you style it through the same Divi controls you would use with a native icon. Depending on the module, that can include icon color and size along with alignment, spacing, backgrounds, borders, box shadows, filters, transforms, animations, responsive values, and hover states.

The important part is that the source of the icon does not create a separate styling workflow. Divi Sensei expands the choices available in the picker, while the rest of the design process continues through the Visual Builder.

Who Is Divi Sensei Icons For?

Divi Sensei Icons makes the most sense for designers who use iconography frequently and want a larger library available without sourcing files individually.

Agencies and freelancers can benefit from the industry-specific collections when moving between clients in very different sectors. Instead of maintaining separate icon packs for restaurants, medical practices, construction companies, financial services, and other industries, those options can remain accessible from one Divi library.

Business website designers can use the specialized sets to make service grids, pricing sections, process steps, contact information, navigation, feature comparisons, and calls to action more closely reflect what the company actually does.

Design-system-focused users can also benefit from the consistent line weights. Choosing a primary icon family and weight gives iconography the same kind of repeatable visual logic you would normally establish for typography, colors, buttons, and other recurring design elements.

And because the icons use Divi’s existing picker and styling controls, the extension is particularly suited to users who want more icon choices without adding another design interface to their workflow.

Expand Divi 5’s Icon Library With Divi Sensei Icons

Divi Sensei Icons adds a substantial icon collection to Divi 5 while keeping the workflow centered around the native Visual Builder. More than 14,000 icons, three line weights, custom industry collections, familiar open libraries, search and filtering, library management, and load-on-demand delivery all work together to make the larger collection practical to use.

Its strongest feature is the integration. The icons appear through Divi’s existing picker, can be used across compatible modules, and continue to use the design controls you already know. The extension expands the available visual language without asking you to rebuild the rest of your workflow around it.

Divi Sensei Icons is currently available in the Divi Marketplace for $39. The Marketplace license includes unlimited website usage, one year of support and updates, and a 30-day money-back guarantee. The current listing is specifically compatible with Divi 5.

You can also browse the live icon library before deciding which collections fit your projects.

Get Divi Sensei Icons

The post Divi Product Highlight: Divi Sensei Icons appeared first on Elegant Themes Blog.

Divi 5’s Aspect Ratio and Framing settings solve that directly inside the builder. You define the frame once on the card, decide how images should fill it, and every featured image pulled into the loop follows the same visual rules without changing the original files in your Media Library. We’ll build the blog loop with the Loop Builder first, then apply the image settings that keep the finished grid consistent.

Why Loop Images Break A Grid

Nobody uploading a featured image is necessarily thinking about the proportions of your archive grid. A writer grabs the screenshot that illustrates their point, a contributor sends a portrait straight from their phone, and a designer exports a square from the brand kit.

Product catalogs run into the same problem when photos arrive from different suppliers, each using a different setup. The loop pulls all of those files into the same card design, so without a shared image frame, the layout inherits whatever shape each upload happened to have.

Manually preparing every image can work while the archive is small, but it becomes another maintenance task as the site grows. More importantly, if the layout changes later, a crop that was prepared specifically for the old design may need to be recreated.

The loop gives us somewhere better to manage that decision. We design one card, Divi repeats it for every item returned by the query, and the settings applied to that card repeat with it. Aspect Ratio and Framing let us define the image treatment at the template level instead of fixing each source image individually.

What Aspect Ratio And Framing Do

The two settings solve different parts of the same problem. Aspect Ratio lives in the Sizing option group and defines the proportions of the element. Framing controls how an image behaves inside the rendered frame. Once both are configured, the original upload dimensions no longer determine how much space each image occupies in the loop.

Aspect Ratio Sets The Frame

Aspect ratio describes the relationship between width and height. A 16:9 element is 16 units wide for every 9 units tall, giving it a widescreen shape. A 1:1 element is square, while 3:4 creates a portrait-oriented frame.

By default, an image follows the proportions of its source file. The Aspect Ratio setting gives the module a defined shape instead. Set every loop image to 4:3, for example, and a portrait photograph, square graphic, and wide screenshot all occupy the same proportional space in their respective cards.

Because Divi calculates the element’s height from its rendered width, the proportion continues to hold as the layout gets wider or narrower.

Object Fit Decides How The Image Fills The Frame

Once the frame has a defined shape, the image itself has to fit inside it. If the source image already matches the chosen ratio, there is very little to resolve. When the source and frame have different proportions, Object Fit determines how the two interact.

You’ll find Object Fit under Design > Framing. In modules where the image is a sub-element, such as Person or Blurb, the same controls appear inside the corresponding Image option group. Five values are available:

• Fill: The default. The image stretches to fill the frame exactly, which can distort it when the source and frame use different proportions.
• Cover: The image scales until the frame is completely filled while preserving its original proportions. Anything that extends past the frame is cropped. This is usually the most useful option for blog thumbnails and other photographic loop images.
• Contain: The complete image remains visible and keeps its proportions, but unused space may appear along two sides of the frame. This works well for logos, diagrams, and product imagery where cropping would remove important information.
• None: The image displays at its intrinsic size without being scaled to fit. Depending on the relationship between the image and frame, it may be cropped or leave empty space.
• Scale Down: Behaves like None when the image is already smaller than the frame and like Contain when the image needs to be reduced to fit.

Object Fit only produces a visible change when the image’s rendered dimensions differ from its intrinsic dimensions. Setting an Aspect Ratio is one common way to create that difference, as is defining both a Width and Height.

Object Position Chooses What Survives The Crop

Cover solves distortion by cropping, but the default crop starts from the center. That works well when the subject is centered and less well when important content sits toward an edge. Portraits are an obvious example: when a tall portrait enters a wide frame, the top and bottom are likely to be trimmed, and the person’s face may sit higher than the center.

Object Position lets you decide which part of the source image receives priority. The nine-point selector includes Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, and Bottom Right. You can also enter custom horizontal and vertical values when one of those anchors is not precise enough.

For a loop, remember that the same Object Position repeats across every image using that template. Top Center might be ideal when most featured images contain people, while Center is often safer for a mixed editorial archive. Test the setting against several posts rather than judging it from only the first card.

All of this happens at display time. The source image in the Media Library remains untouched, so you can change the Aspect Ratio, Object Fit, or Object Position later and let the entire loop adopt the new treatment.

Build The Blog Loop

Now we’ll put those controls into a real dynamic layout. We’ll build the grid, design one post card, connect it to live post data, and let Divi repeat it. Our Loop Builder tutorial goes deeper into the query system, so we’ll keep this part focused on the structure needed for the image workflow.

1. Add A Grid Row

Open your blog template in the Divi Builder and add a new Section. The Row picker includes familiar structures alongside Grid layouts. Choose the structure closest to what you want, or select Build Custom Grid when you want to define the tracks yourself.

With the Row selected, click Open Grid Editor. The Grid Editor gives you a visual view of the container’s columns, rows, gaps, and item placement. You can add or remove tracks, resize them, adjust gaps, and create more advanced arrangements using Grid Offset Rules while the underlying layout remains stored on the parent container.

Delete every Column except the first. We only need one card structure because the Loop will repeat that Column for every post returned by the query.

2. Enable Loop

Select the remaining Column and open its Content tab. Find the Loop option and enable it. Divi now treats that Column as the repeating item and places each generated instance into the Grid according to the parent Row’s layout.

The query settings appear beneath the Loop option. For this blog listing, we’re using:

• Post Type: Posts
• Posts Per Page: 10
• Order By: Date
• Order: Descending
• Post Offset: 0

Those settings determine which posts Divi returns and in what order. The design we create inside the Column determines how each result looks.

3. Build The Post Card

Add a Group inside the Column to hold the complete card. Place an Image module inside it for the featured image, then add another Group below the image to contain the post information.

Inside the second Group, add three modules: a Heading for the post title, another Heading for the published date, and a Text module for the excerpt.

Style The Groups

Open the outer Group and set Vertical Gap to 0. Removing the gap lets the image and text area read as one continuous card.

Open the inner Group and set its background to #1e1e1e. Set Vertical Gap to 10px, then add 25px of top and bottom Padding and 20px on the left and right.

Style The Text

For the post title, set the Heading Level to H2 and use Roboto at a Weight of 700, Width of 87.5, and Size of 26px in white.

Set the date to Heading Level H4 using Archivo at Weight 700, Width 93.5, and Size 18px. Use #ECC600 for the color.

Give the excerpt the matching supporting typography used in the design so the date and summary sit cohesively beneath the title.

4. Connect The Dynamic Content

The card is designed, but its contents are still placeholders. Dynamic Content is what connects each module to the post represented by that Loop item. Hover over the field you want to populate, click the Dynamic Content icon, and select the corresponding Loop value:

• Image: Loop Featured Image
• First Heading: Loop Post Title
• Second Heading: Loop Published Date
• Text: Loop Post Excerpt

While configuring the excerpt, set its Word Count to 50 so unusually long summaries do not dominate individual cards. You can also add Read More text to make the destination clearer. If its link styling uses one of your Design Variables or Presets, the card remains connected to the wider design system rather than relying on another one-off value.

Finally, use Loop Post Link for the relevant link fields on the Image, title, and supporting content. Visitors can then reach the post from the main parts of the card instead of depending on one small link.

5. Set The Aspect Ratio And Framing

Now the real featured images are flowing into the Loop, which means their source dimensions are visible in the grid. Portraits create tall cards, wide screenshots create short ones, and the carefully structured rows begin to lose their rhythm.

Open the Image module and go to Design > Sizing. Set Aspect Ratio to 1:1. The Image module now reserves a square frame for every repeated post, regardless of whether the source image is landscape, portrait, or square.

The grid may initially look worse because Fill is the default Object Fit value. The images are being stretched into those square dimensions. Open Framing in the same Design tab and set Object Fit to Cover. The images now preserve their proportions while filling the complete square, and Divi crops only the portions that extend outside the frame.

Cover begins from the current Object Position, which is centered unless you change it. Scroll through several real posts while testing the available positions. One setting applies across the repeated Image module, so the best choice is the one that works reliably across the collection rather than perfectly framing a single featured image.

If most of the site’s imagery follows a consistent composition, such as portraits with faces near the top, Top Center can be a stronger default. For mixed editorial photography, Center is often more forgiving.

Optional: Save The Crop As An Image Preset

If this same image treatment will appear in other loops, save it as an Image Preset instead of rebuilding the ratio and framing settings each time. Image option groups in Divi 5 support Presets, so a reusable Blog Card Image preset could contain the Aspect Ratio, Object Fit, Object Position, Border, Box Shadow, Filters, and other shared image styling.

That also gives the crop system a central place to change later. Update the Preset and the connected images follow.

6. Level The Cards

The featured images are consistent now, but the overall cards may still end at different heights because the amount of text varies from post to post. There are two ways to approach that depending on whether the card should follow a fixed proportion or adapt more naturally to its contents.

For a deliberately proportioned card, open the outer Group and go to Design > Sizing. Set an Aspect Ratio that fits the overall design, such as 3:4 or 4:5. Because Aspect Ratio is available in the Sizing controls beyond images, the container itself can maintain a proportional frame as its width changes.

You can apply a ratio to the inner text Group as well when the design calls for a tightly controlled image-to-content relationship.

A fixed card ratio means the available height is decided by the width of the card, so always test it with the longest realistic title and excerpt in the Loop. If the content needs more room than the proportion provides, a rigid ratio can become counterproductive.

For a more content-driven alternative, use Grow To Fill. When the loop items sit inside a layout that gives each grid row a shared available height, Grow To Fill lets the card’s Group expand into that space. Applying it thoughtfully to the outer card and the inner content Group can help the cards align while allowing their final height to respond to the content rather than a fixed ratio.

The two approaches solve slightly different problems. Use Aspect Ratio when a fixed card silhouette is part of the design. Use Grow To Fill when equal alignment matters more than forcing every card into one predetermined shape.

7. Adjust The Grid For Smaller Screens

Three columns work comfortably on a desktop but become cramped as the available width decreases. Select the Row, switch to the Tablet breakpoint, and open the Grid Editor. Reduce the layout to 2 columns, then move to Phone and set it to 1 column.

If you keep the same image Aspect Ratio at each breakpoint, the frame maintains that proportion as the cards change width. The image still scales with the layout, and Cover continues to crop the source consistently inside the frame.

That is a useful default, but it is not the only option. Aspect Ratio, Object Fit, and Object Position can also receive responsive values, which gives you room to change the crop when the card itself changes dramatically.

Picking A Ratio That Fits The Layout

We used 1:1 because square thumbnails work well in this compact three-column design and give every post similar visual weight. The best ratio depends on the layout, the subject matter, and the images your contributors actually publish.

• 16:9: Works well for wide feature rows, editorial previews, video-oriented content, and single-column lists where the image stretches across most of the card.
• 4:3: A versatile choice for multi-column blog and portfolio grids. It gives photographs more vertical room than 16:9 while cropping less aggressively than a square.
• 1:1: Useful for compact grids, related post sections, directories, and card layouts where consistent visual weight matters. Because the crop is stronger, check images with important details near the edges.
• 3:4 And 4:5: Work naturally for portraits, editorial photography, team members, products, and other vertically composed imagery.
• 9:16: A much taller treatment that makes sense when the image itself is a major part of the content experience rather than a compact thumbnail.

You can also mix ratios intentionally when the layout contains distinct content treatments. A separate featured-post Loop, for example, might use a wide 16:9 image while the standard archive grid beneath it uses 4:3 or 1:1.

Inside a single shared Loop template, however, the same Image module settings repeat across each item. If one particular position needs a different crop, treat it as a deliberate layout variation rather than manually changing one repeated card.

None of these choices lock you in. The ratio lives in the design settings, so you can change it later and preview the new crop across the actual posts before committing to it.

Set A Different Ratio Per Breakpoint

Keeping one ratio across every screen size is often the cleanest option, but some layouts benefit from a responsive change. A square image that feels balanced inside a three-column desktop card can become very tall once the card expands to nearly the full width of a phone.

Aspect Ratio is responsive in Divi 5. Switch to the Phone breakpoint in the Image module and try a wider frame such as 16:9 or 3:2. The mobile card becomes shorter, which lets visitors see more of the title, excerpt, and surrounding posts without scrolling past a large square image first.

Object Fit and Object Position can be adjusted responsively too. You do not need a different Object Position simply because the ratio changed, so keep the shared value when it still frames the collection well. If the mobile ratio introduces a genuinely different crop problem, however, a responsive Object Position override is available.

The important part is to test the setting against several representative posts. Just like the desktop crop, one responsive value is being repeated across the whole Loop.

Common Issues And Fixes

When a loop grid looks wrong, the cause is usually one of a handful of settings. Start with what you can see and work backward.

• The Images Look Stretched: You set an Aspect Ratio but Object Fit is still on Fill. Change it to Cover to preserve the image proportions while filling the frame.
• Faces Are Being Cropped: Cover is working, but the current Object Position does not match the composition of the images. Try Top Center for portrait-heavy content or another shared anchor that works across the collection.
• The Card Background Shows Beside The Image: Object Fit is probably set to Contain. Contain preserves the complete source image and may leave unused space when its ratio does not match the frame. Use Cover when filling the frame matters more than preserving every edge.
• One Image Looks Soft While The Others Look Sharp: The source image may be smaller than the rendered frame, and Cover is scaling it beyond its intrinsic dimensions. Establish a sensible minimum featured image size for contributors.
• Nothing Changes When You Switch Object Fit: Object Fit needs a difference between the image’s rendered dimensions and intrinsic dimensions. Confirm that the Aspect Ratio saved correctly, or that both a custom Width and Height are constraining the image.
• The Crop Works On One Post But Fails On Another: The Loop repeats one Object Position. Test Center, Top Center, or another shared position against a wider sample of images. If one outlier consistently fails, fixing that source image may be better than compromising every other card.
• The Cards Still Finish At Different Heights: The images may be consistent while the content is not. Review the excerpt length, fixed card Aspect Ratio, or Grow To Fill approach depending on how rigid you want the card silhouette to be.

Build A Cleaner Blog Grid In Divi 5

Aspect Ratio and Framing are small settings with a much larger effect once they sit inside a Loop. You define the image frame once, Divi 5 repeats that decision across every card, and a collection of unrelated source images starts behaving like one visual system.

The workflow also stays flexible. Change the ratio later and the repeated cards follow. Adjust Object Position and the crops update without touching the uploads. Save the treatment as an Image Preset and the same image system can move into other blog feeds, portfolio grids, product loops, or related-post sections.

The Loop Builder handles the repetition. Aspect Ratio defines the shape. Framing decides how the images live inside it. Together, they let the layout stay consistent even when the content feeding it is not.

The post Using Aspect Ratio To Design Cleaner Loops in Divi 5 appeared first on Elegant Themes Blog.

Then you get to the blog.

The rules change without warning. You are not designing a page anymore. You are designing something that has to work with fifty posts you may not have written yet, and there is no single page to build it on. This is where a lot of people get stuck — not because it’s an impossible task, but because it’s simply different than page building.

What you’re doing at this point is called theme building, and every serious WordPress theme and page builder has a way to handle it. Here, we dive into what a theme builder is, what it controls, and how you will know when you need it.

What Is A Theme Builder?

A theme builder is what you use to build all the repeatable parts of a website.

Headers and footers are the obvious ones. Every page needs them, and you want to design them once rather than rebuild them on every page you publish. The more interesting half is templates: the layout for a single blog post, the archive that lists those posts, search results, and a 404 page.

Those templates map to your site’s content structure. WordPress already knows the difference between a blog post, a page, and a product. A theme builder is what lets you design the pages that the structure turns into. WordPress stores and organizes your content; the theme builder decides what a visitor sees.

That relationship matters more as a site grows. Plugins like ACF, Pods, Meta Box, and ACPT let you extend WordPress with your own content types and fields. Think of a Products type for a shop, a Classes type for a workshop schedule, or a Projects type for a portfolio. They handle the data. The theme builder determines how that data appears on the dynamic pages your visitors land on.

How Theme Building Differs From Page Building

A page builder designs one page at a time. You open a specific page, you build it, and what you built lives at that one URL. Homepages, about pages, contact pages, landing pages — all page-building work, and all of it unique by design.

Theme building covers what repeats across similar types of content. You are no longer building on a specific URL. You are building something that gets applied by rule: to every post, or to every product. Headers and footers go further still, applying to every page on the site.

Here is the question that trips people up: Can I not just build a header with my page builder? You can build something that looks like a header on one page. Then you build it again on the next page, and again on the one after that, and when something needs to change, you get to edit all of them.

Also, why would you want to do it the static way when your page builder probably already has a way to do theme building? Every major WordPress page builder ships theme building alongside it. They could not really compete without it. When you compare page builders, you are comparing design tools, editor speed, the modules on offer, and price. Theme building comes with whichever one you choose.

Dynamic Content Works Like A Form

Dynamic content is the idea that makes theme building click, and it is simpler than the name suggests.

Think of a blog post as a form. To publish one, you fill in a title, an excerpt, a featured image, and the content itself. Each new post is a new submission to that same form. The form decides what every entry has in common. All of them carry a title, content, and a featured image.

Once the shape is identical from one entry to the next, a template can be built around it. You place the title here, the featured image there, the content below — and because every post fills in those same fields, one design handles all of them. WordPress and your theme builder wire up the connections between stored content and your layout for you.

The same logic scales up. A product is a form too, just with different fields: a price, a product image, and a stock status. A class may have a date and an instructor. Each content type brings its own fields (called custom fields), so each one gets its own template because it has different data available to it.

Two more ideas come with the territory:

• Dynamic data is how a template says, “put the current post’s title here” instead of you typing a title. In Divi, this is the Current Post source (Post for Current Page), and it is what lets one layout serve every entry.
• Loops are how a template lists many entries instead of showing one. An archive page is a loop: repeat this card design for each post, in this order, this many at a time.

Pagination is the part that catches people out. It is the Previous and Next links at the bottom of a list, or the numbered version, and it belongs to the loop rather than to the page. Nothing in page building works that way.

The Templates Almost Every Site Needs

Theme building sounds open-ended until you notice that most sites need the same handful of templates. You are not inventing a list. You are working through a known one.

In the order people usually build them:

• Header and footer. Always first. They apply everywhere, and you see the result immediately.
• Single blog post. The layout every post pours into. Dynamic data, no loop.
• Blog archive. The list of posts, and usually the same template that handles your category, tag, and author listings. This one is a loop where pagination appears.
• 404 page. What visitors get at a broken link. Quick to build, but an important component.
• Search results. A loop again, listing whatever matched.

Add a custom post type, and you build its single and archive templates the same way: a single template for one product, an archive template for the shop listing. Add another type, and you do it again. Older themes may also have a sidebar or widget area, which is the same idea from an earlier era of WordPress.

Where To Find The Theme Builder

Theme building lives in a different part of the interface than page building, and where it lives depends on which tool you use.

You will not find it under Pages, which is where you have spent all your time so far. It sits in its own area, because it is not attached to any single page. WordPress’s own Site Editor refers to these as templates and template parts. Divi calls it the Theme Builder. Elementor has one under its own menu. Different names, different click paths, same underlying concept.

WordPress does this natively. Full Site Editing is Core’s own theme building: free, already installed, and capable of headers, footers, archives, and single templates. Plenty of people use it, and many extend it with plugins to cover what it does not do well. Others swap it for a dedicated theme builder so they are never held back.

The clearest difference shows up when you build a loop. In Full Site Editing, you work inside the Query Loop block, using the specific blocks made to nest within it. In Divi, you set any container or element as a loop, and any module inside it can pull dynamic content. There is no special loop module to learn: anything can be a loop, and anything can go inside one.

If you are weighing specific tools, our roundup of the best WordPress theme builders compares the main options side by side.

One thing holds true whichever you pick. Whatever a tool is like to design pages with, it will be like to build templates with, and the strengths and limitations carry straight over. If you find the block editor limiting for design, it is going to be limiting when you are editing templates in the theme area, too.

How Divi Does It

In Divi 5, all this lives in the Theme Builder. You build templates with the same visual editor you already used for your pages, so the tool is not new — only the job is.

The first thing you do with a new template is tell Divi where to use it. That is the Use On setting, and its labels are worth translating, because they are the part people misread:

• All Posts — every single blog post, which is your single post template.
• Blog — the page that lists your posts, not the posts themselves.
• All Archive Pages — the category, tag, date, and author listings, all at once.
• All Author Pages — just the listings of posts grouped by who wrote them.
• Search Results and 404 Page — exactly what they say.

The pattern to hold onto: labels that begin with All cover a whole class of pages, and the singular names point at one specific page. A template assigned to All Posts is the design every post uses; a template assigned to Blog is the one page that lists them.

In a template, you pull in content using Current Post dynamic data and list many entries with a loop. Because any module can sit inside a loop, you design the card once, and Divi fills it from each entry.

Divi 5 also softens the split this article has been drawing. With editable Theme Builder areas, the header and footer assigned to a page can be edited from inside that page in the Visual Builder. There is no trip back to the Theme Builder. When a homepage or landing page revision needs a matching header change, you make both in one sitting. You can switch the areas off when you would rather focus on page content alone.

In Divi’s Page Editor, you can also edit the assigned Header and Footer. No context switching!

You do not have to start from a blank canvas, either. Divi Quick Sites are prebuilt starter sites you import: pages, Theme Builder templates, and a design system. It all arrives configured and ready to edit inside Divi. The templates land in the Theme Builder like any other, so you can open them and change whatever you want.

If you would rather generate something for your own brief, Divi’s AI can do that instead, templates included.

Get Divi

Do You Need A Theme Builder Yet?

Sooner than most people expect. Even a small brochure site has a header and a footer, and building those once in the theme builder beats rebuilding them on every page. That alone is worth the trip.

Where it stops being optional is structured content: a blog, a shop, a portfolio, a staff directory. Anything you publish more than once, and want to look consistent without designing each entry by hand.

You will still page-build your homepage, your about page, and every one-off you make. Theme building just takes over the parts you would otherwise repeat.

If you are still working out the layer underneath this one, start with what a page builder is and come back.

Frequently Asked Questions

The post What Is A Theme Builder? Site Building With WordPress appeared first on Elegant Themes Blog.

The new CSS Grid Editor adds a visual layer to that workflow. Instead of shaping an advanced grid through settings alone, you can open a live grid canvas, drag tracks to resize them, reposition items, change gaps, and pull corner handles to create row and column spans while watching the structure take shape.

In this tutorial, we’ll use the Grid Editor to build an asymmetric twelve-photo gallery across four columns. Along the way, we’ll also connect the layout to Grid Offset Rules, Number Variables, Presets, Extend Attributes, Aspect Ratio, and Image Framing so the finished gallery is reusable and responsive.

What The CSS Grid Editor Actually Does

CSS Grid is a two-dimensional layout system. You define columns and rows on a parent container, then the child elements flow into that structure. Individual positions can span multiple columns or rows, which makes Grid especially useful for galleries, editorial layouts, feature cards, product collections, and other designs where horizontal and vertical alignment need to work together.

Flexbox is designed primarily around one axis at a time, while Grid handles rows and columns together. A layout with one large image beside two smaller stacked images, with the surrounding edges remaining aligned, is a natural use case for Grid.

Divi 5’s CSS Grid system already exposes the underlying layout controls in the Visual Builder, including columns, rows, track sizing, gaps, alignment, and Grid Offset Rules. The Grid Editor gives you another way to work with that same system by translating the structure into a visual canvas.

Open it and you can see the grid as a collection of tracks and preview items, then shape those tracks directly. Changes made on the canvas are reflected in the corresponding Grid settings and Offset Rules, so the visual editor and the settings panel remain two views of the same layout.

The Grid Lives In The Container, Not The Items

One of the most useful parts of Divi 5’s Grid implementation is that the layout is stored at the container level. Grid Offset Rules target positions using pseudo-classes rather than placing layout settings directly on the child modules themselves.

That means resizing a preview item in the Grid Editor changes the container’s rules rather than modifying the Image, Text, Group, or other module occupying that position. You can replace the content, add or remove children, and reuse the structure with the Loop Builder while keeping the grid logic separate from the content.

Things You Can Do Inside The Editor

Six core actions cover most of the visual grid-building workflow.

Drag The Corner Anchors To Resize An Item. Every preview item has draggable handles on its four corners. Pull one outward to make that position span additional columns, rows, or both. This is how we’ll create the larger feature cells in our gallery.

Drag And Drop An Item To Reposition It. Move a numbered preview item into a different cell to change its position within the grid. Divi records that placement through the container’s Grid Offset Rules.

Adjust The Gaps. Horizontal and vertical gaps can be changed numerically or dragged directly between tracks. A live value appears as you adjust them, making it easy to explore spacing visually and then settle on an exact value.

Drag Column And Row Edges. Drag a grid line to resize the tracks on either side. This gives you a visual way to create uneven columns and rows instead of relying only on equal-width structures.

Add Placeholder Grid Items. The Grid Items control adds sample boxes to the editor so you can preview a longer layout before every real module has been added. These are visualization aids only; they do not create actual modules or content in the Row.

See Offset Rules Highlighted. Grid Offset Rules are displayed on the canvas, including which positions they affect. That makes an existing advanced grid easier to understand because you can connect each rule to the part of the layout it controls.

Grid Offset Rules

Grid Offset Rules tell positions inside a Grid to behave differently from the base structure. A rule can target a specific position, the first or last item, odd or even items, repeating intervals such as every third item, or a custom nth-child pattern.

You manage them under Grid Offset Rules in the container’s Design tab. Depending on what the layout needs, a rule can control values such as Column Span, Column Start, Column End, Row Span, Row Start, and Row End.

Repeating targets are especially useful for dynamic or longer grids. For example, a rule targeting every fourth item can create a repeated visual rhythm without styling each child separately. We cover those patterns in more depth in this guide to Divi 5’s Grid Offset Editor.

The new Grid Editor makes the same system more visual. When you move or resize a preview item on the canvas, Divi automatically creates the corresponding rule for that targeted position. You can then open the generated rule and fine-tune its placement values or change its target if you want the pattern to repeat.

How To Build A Grid Visually With Divi 5’s CSS Grid Editor

We’re building a twelve-photo gallery with four columns and a mix of large, tall, wide, and single-cell positions. The first image acts as the opening focal point, while the remaining spans create a staggered rhythm further down the gallery.

We’ll shape the structure visually first, then connect repeated design values to Number Variables and Presets. Finally, we’ll adjust the image crops and responsive Grid settings so the gallery keeps its intended hierarchy at smaller breakpoints.

Step 1: Add A Grid Row And Open The Editor

Open a blank page in the Divi Builder and add a Section. When you insert a new Row, you’ll see Build Custom Grid alongside Divi’s premade structures. Choose it when you want to begin with the Grid Editor rather than a predefined layout.

You can also start with an existing structure. Open the container settings, go to Design > Layout, set Layout Style to Grid, and click Open Grid Editor. This route works well when a premade Grid structure already gets you close to the design you want.

For this tutorial, choose Build Custom Grid. The Grid Editor opens as a floating tool panel, where you can configure the grid and continue working in the builder while it stays open.

If you are working with an existing element and cannot find the Open Grid Editor button, check its Layout Style first. The Grid Editor becomes available once that element is using Grid.

Step 2: Build The Grid Structure

Start by setting Grid Items to 12. Remember that these are preview placeholders inside the editor, not actual Image modules. Showing all twelve lets us see the complete pattern while we shape the layout.

Back in the actual Row, add twelve Image modules and upload the photographs you want to use. The Grid Container controls where those child modules land.

The four columns appear across the Grid Editor, with their current track sizes visible above the canvas. Use the plus and minus controls when you need to add or remove tracks, and leave the row heights on Auto for this gallery so their final size can respond to the content and image proportions.

Now shape the first feature position. Grab a corner handle on item 1 and drag it right and down until it spans two columns and two rows. Items 2 and 3 occupy the remaining positions in the first row, while items 4 and 5 continue the structure below them.

Move further down the grid and give items 6 and 7 taller positions by extending each one across two rows. Then expand item 8 across the two columns beside them, creating a larger feature block opposite the tall cells.

For the final part of the gallery, expand item 9 across columns 1 and 2 and down through the next row. Let item 10 span the remaining two columns above items 11 and 12, which stay as single positions.

As you resize items, rule labels appear in the editor. Those labels connect the visual spans to the Grid Offset Rules being generated on the container.

Preview the page and the Image modules now occupy the structure you created. The Grid rules belong to the parent container, so replacing an image or changing the child content does not require rebuilding the grid itself.

Step 3: Set The Horizontal And Vertical Gaps

The cells are currently sitting directly beside each other, so add some breathing room. Set Horz. Gap and Vert. Gap to 30px. You can type those values directly or drag the gaps on the Grid Editor canvas and watch the layout update.

Using the same value in both directions gives the gallery a consistent rhythm while still allowing the differently sized cells to create the visual interest. Because this spacing value may be useful elsewhere on the site, save 30px as a Number Variable and reference that variable in both Gap fields.

Step 4: Style The Images And Save The Design

The grid structure is finished, so now we’ll give the photographs a shared visual treatment. Open the first Image module, go to the Design tab, and open Border. Set Border Width to 10px, Border Color to #FFFFFF, keep Border Radius at 0, and use a Solid border on all four sides.

Next, open Box Shadow and select the second preset. Set Box Shadow Vertical Position to 1px, Box Shadow Blur Strength to 7px, leave Horizontal Position and Spread Strength at 0, and set the shadow to #000000 at 30% opacity with Outer Shadow selected.

The white frame defines each photograph against the gallery background, while the soft shadow creates enough separation to keep the borders from blending into lighter areas.

Save the completed image styling as an Element Preset. Because the border and shadow belong to the same gallery-image treatment in this example, keeping them together makes the preset quick to apply.

If you expect to reuse the border and shadow independently elsewhere, save them as separate Option Group Presets instead and combine those reusable decisions within an Element Preset. That gives you more flexibility when another image or module only needs one part of the treatment.

Now right-click the styled Image module and choose Extend Attributes. Extend its Design Attributes to the other Image modules in the Row so they receive the same preset and styling without copying the source image content.

Extend Attributes lets you choose which attribute category to propagate, so selecting Design Attributes here keeps each photograph’s unique content intact while distributing the shared design treatment.

Step 5: Match The Image Ratios To The Grid

The Grid defines the layout proportions, but the source photographs still have their own intrinsic shapes. To make the larger and taller positions feel intentional, give those Image modules ratios that match the intended visual proportions of their cells.

Open the first Image module, go to Design > Sizing, and set Aspect Ratio to 1:1 for the large opening image.

Continue through the feature positions using the proportions designed for this gallery. Set items 6 and 7 to 1:2, item 8 to 1:1, and item 10 to 2:1. The remaining single positions can keep the ratio that works for their source photographs and available grid tracks.

When a ratio differs from the source photograph, open Framing and set Object Fit to Cover. Cover fills the defined frame without stretching the image, while Object Position lets you control which part of the photograph remains visible when cropping occurs.

Pay particular attention to portraits, faces, architecture, or other images with an obvious focal point. The Grid gives each image a shape, but Framing is what lets you protect the part of the photograph that matters inside that shape.

Step 6: Adjust The Grid For Tablet And Phone

The desktop gallery uses four columns and larger gaps, so the final step is adapting the structure for smaller screens. Grid settings are responsive in Divi 5, which means you can simplify the layout at each breakpoint without changing the desktop design.

Switch to Tablet view, open the Row settings, and go to Design. In Sizing, set Width to 88% and Max Width to None. Then open the Grid Editor and reduce both Horz. Gap and Vert. Gap from 30px to 10px, giving the images more room at the narrower width.

Switch to Phone and simplify the Grid to 1 column. Because the desktop layout contains Grid Offset Rules with multi-column and multi-row spans, review those rules at the phone breakpoint as well and override any spans that no longer belong in the single-column version. The goal on phone is a clean vertical gallery where every image can use the available width instead of trying to preserve the more complex desktop pattern.

Divi’s responsive values cascade from larger breakpoints into smaller ones until you override them, so always inspect Tablet and Phone after changing the desktop Grid. In this example, the 10px tablet gaps can continue into phone, while the column count and Offset Rules receive their own mobile treatment.

Build Your Grids Visually In Divi 5

The CSS Grid Editor gives Divi 5‘s existing Grid system a much more visual workflow. Columns, rows, gaps, track sizes, item placement, and Grid Offset Rules are still part of the same underlying layout system, but you can now see and manipulate that structure directly instead of working through settings alone.

Our finished gallery is a good example of why that matters. The twelve photographs can change, the modules can be replaced, and the same container could eventually be connected to the Loop Builder, but the asymmetric structure remains defined at the parent level.

That separation makes the Grid Editor useful beyond galleries. You can use the same approach for portfolio layouts, team directories, product collections, feature sections, editorial feeds, and dynamic loops: build the shape visually, let the container own the structure, and then decide what content should fill it.

The post Build Grids Visually With Divi 5’s New CSS Grid Editor (New Feature) appeared first on Elegant Themes Blog.

Each design uses square-based content blocks, imagery, typography, color, negative space, and varied visual hierarchy to turn a simple grid into a polished page section. Import a section, replace the content and images, customize the styling, and you’re ready to go.

Preview

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

Download 7 Square Grids For Divi 5

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

Download the Files

Download For Free

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

DOWNLOAD

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

What’s Included (8 Exports)

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

Styled – Square Grids Section 1 to 7 (7) → Seven fully styled square-based layouts featuring different combinations of imagery, text blocks, stats, color panels, supporting content, and structured grid compositions that you can use as-is or customize.

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

How To Use The Square Grids

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

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. Select any individual Styled – Square Grids Section JSON file if you only want one design. To import every layout at once, choose Styled – Square Grids Sections (All).json instead.

Click Import Divi Builder Layouts and wait for the import to complete.

2. Add A Square Grid Section To Any Page

Open a page in the Visual Builder and add a new Section where you want the layout to appear.

Click Add From Library and select one of the Square Grid sections you imported.

The complete design will be added to the page with its original images, text, colors, spacing, and square-based composition intact.

3. Replace The Content

Start by replacing the placeholder headings, body copy, labels, numbers, project details, calls to action, and other supporting text with your own content.

Next, replace the placeholder imagery with your own photos, project visuals, product images, team photos, architectural photography, or other content that fits the section.

Because these layouts depend on multiple blocks working together, replace the content one area at a time and review the overall composition as you go. This makes it easier to preserve the balance between larger focal areas, smaller supporting blocks, imagery, color, and negative space.

Some layouts combine large text areas with smaller square content blocks, while others use a denser visual grid. Keep the original hierarchy in mind when deciding which content should receive the most emphasis.

4. Adjust The Grid Content

You can adapt each layout to the amount of content you need. If you want another image, stat, feature, or supporting block, duplicate an existing element and replace its content.

If you need a simpler section, remove unnecessary blocks and adjust the remaining content so the composition still feels balanced.

When adding or removing content, pay attention to the relationship between neighboring blocks. Square grid designs work best when widths, heights, gaps, alignment, and visual weight feel intentional across the whole section.

5. Customize The Styling

These Square Grids are already styled, but you can customize them further to match your website. Update backgrounds, colors, typography, imagery, borders, spacing, and other design settings directly in the Visual Builder.

To customize the text, open the relevant Text or Heading module and use the Design tab to adjust Font, Font Weight, Text Size, Text Color, Line Height, Letter Spacing, and alignment.

You can also update individual content blocks with different backgrounds, image treatments, borders, or accent colors to bring the layout in line with your brand.

If the original section uses contrasting squares, dark and light blocks, statistics, image tiles, or intentionally empty areas, keep those relationships in mind so the grid retains its visual rhythm after customization.

6. Check The Grid On Smaller Screens

Square-based layouts can change noticeably when they adapt to narrower screens. Use Divi’s responsive editing tools to review the design on desktop, tablet, and phone before publishing.

Pay particular attention to stacking order, image crops, block heights, gaps, text size, and alignment.

If necessary, adjust spacing, sizing, or the order of individual elements at smaller breakpoints so the layout remains easy to follow and the visual hierarchy still makes sense.

Tips For Effective Square Grid Layouts

Square grids work best when each block has a clear purpose within the larger composition. Use these tips to keep the designs structured, balanced, and easy to scan.

Create A Clear Focal Point

Not every square needs equal visual weight. Let one image, headline, stat, or content area lead the composition, then use the surrounding blocks to support it.

Mix Content Types

Square grids are especially effective when they combine different types of information. Mix imagery with text, numbers, icons, labels, project details, or simple color blocks to create more visual variety.

Keep The Spacing Consistent

Consistent gaps help separate individual blocks while making the full section feel cohesive. If you adjust the spacing, repeat those values throughout the grid wherever possible.

Use Color To Organize The Layout

Background colors can help distinguish stats, text, imagery, and supporting content without adding unnecessary decoration. Use a focused palette so the individual blocks still feel like part of the same system.

Choose Images That Crop Well

Images may appear inside compact square or rectangular areas, so choose visuals with clear focal points. Review the framing after replacing each image to make sure important details remain visible.

Leave Room For Whitespace

A square grid does not need every available area to feel busy. Simpler blocks and open areas can give detailed images and text more breathing room while making the overall composition easier to scan.

Check The Visual Order On Mobile

When a multi-column grid stacks vertically, the reading order becomes more noticeable. Review the mobile layout and make sure related text, images, stats, and calls to action still appear in a logical sequence.

Start Building In Divi 5 Today!

These 7 Square Grids give you a fast way to create structured, contemporary sections for agency websites, portfolios, business pages, project showcases, services, landing pages, and more. Import your favorite design, swap in your own content, customize the styling, and build a polished grid-based section with Divi 5’s Visual Builder.

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

Divi Carousel Module by DiviGear brings a dedicated carousel-building workflow into the Divi Visual Builder, with multiple layouts, flexible navigation, responsive controls, animation effects, detailed item styling, lightbox support, ratings, social links, and the ability to place additional Divi elements inside individual Carousel Items.

It is compatible with both Divi 4 and Divi 5, so the same module can be used across existing websites and new Divi 5 builds. In this product highlight, we’ll explore its main features and then build a polished team member carousel from start to finish.

Overview Of Divi Carousel Module

Divi Carousel Module is a third-party Divi extension from DiviGear designed specifically for creating highly customizable carousels inside the Visual Builder.

Instead of limiting the carousel to one type of content, the module gives you a flexible Carousel Container with individual Carousel Items inside it. Those items can contain images, headings, supporting text, buttons, social links, ratings, lightbox content, and additional Divi elements.

That makes the module useful for a wide variety of layouts, including:

• Team member carousels
• Testimonials
• Portfolio projects
• Image galleries
• Logo carousels
• Service or feature cards
• Video carousels
• Promotional content

The module also includes several ways to change how those items move and appear, from traditional horizontal sliders to Coverflow-style presentations and centered layouts.

Its settings stay inside Divi’s familiar Content, Design, and Advanced tabs, so the carousel can be configured and styled visually alongside the rest of the page.

The result is a purpose-built carousel workflow with granular control over the Carousel Container, individual Carousel Items, responsive behavior, navigation, motion, and styling.

Key Features And Settings

Before building our example, let’s look at the main areas of the module.

Flexible Content Management

A carousel begins with the main Carousel Container and the individual Carousel Items inside it. Each item can hold common carousel content such as an image, title, subtitle, body copy, button, social links, and ratings.

The Elements tab expands that further by letting you add additional Divi elements inside a Carousel Item.

Carousel Items can also be reordered, duplicated, or removed as the content changes.

That child-item structure is useful because you can establish the carousel’s overall behavior at the container level while still customizing individual slides when a specific item needs a different treatment.

Multiple Carousel Types And Layouts

The module offers several ways to change the presentation of the carousel. You can create traditional horizontal scrolling layouts, emphasize a centered item, use Coverflow-style effects, and adjust how many Carousel Items remain visible at once.

Those settings can be configured separately for desktop, tablet, and phone.

Spacing and alignment controls let you refine the relationship between the visible items so the same carousel can move from a wide desktop presentation to a more focused mobile layout.

Navigation And Interaction

Navigation can be configured around the way you want visitors to browse. Available options include arrow navigation, dot navigation, autoplay, pause on hover, keyboard controls, mouse wheel controls, looping, dragging, and timing settings.

You do not need every interaction enabled at once. A testimonial carousel may benefit from simple arrows and dots, while a more visual image carousel might use autoplay and dragging. Choose the controls that make the content easiest to browse, then test the finished interaction across keyboard, mouse, touch, and responsive layouts.

Detailed Styling Controls

The Carousel Container and individual Carousel Items both include extensive design settings. You can control images, titles, subtitles, body text, navigation, backgrounds, borders, shadows, overlays, spacing, and other visual details.

Individual Carousel Items also have their own settings, which lets you establish a consistent base design at the container level and then make targeted adjustments where needed.

That can be useful when one testimonial, service, team member, or promotional card needs to stand out without redesigning the entire carousel.

Advanced Carousel Options

The module also includes settings for more specific carousel behavior. These include lazy loading, RTL support, z-index controls, custom spacing, transforms, custom CSS, autoplay, looping, and desktop dragging behavior.

The workflow we build below does not require custom CSS, but the option remains available when a project needs a more specialized treatment.

How To Use The Divi Carousel Module

The easiest way to understand the module is to build something practical with it. For this example, we’ll create a team member carousel with responsive item counts, navigation controls, equal-height cards, Coverflow motion, custom styling, and individual team member content.

We’ll first configure the Carousel Container, then style it, build one complete Carousel Item, and duplicate that finished item to populate the rest of the carousel.

Step 1: Add The Divi Carousel Module

Open an existing page or create a new one in the Visual Builder. Add a single-column Row where the carousel should appear, then click Add Module and choose Divi Carousel.

The module starts with five placeholder Carousel Items. Think of the outer module as the Carousel Container and each slide inside it as a Carousel Item.

The placeholders give you an immediate preview of the carousel structure while you configure the main settings.

Step 2: Configure The Carousel Container

Start with the main Carousel Container before editing the individual team members. These settings determine how many items visitors see, how the carousel moves, and which navigation controls are available.

Open Slider Settings in the Content tab. Set the number of visible items using Show Item Desktop, Show Item Tablet, and Show Item Mobile.

This is one of the first settings worth handling because it establishes the basic rhythm of the carousel across breakpoints. A multi-card desktop layout can become a more focused one-item or two-item experience on smaller screens without rebuilding the carousel.

Next, configure the movement and navigation. For this team carousel, enable Autoplay and Pause On Hover. That lets the carousel advance automatically while giving visitors time to stop and read an individual profile. Enable Arrow Navigation and Dot Navigation as well.

Choose the Dots Alignment that works with the layout and enable Large Active Dot if you want the current position to stand out more clearly. Finally, adjust Item Spacing to control the gap between team member cards.

For a card-based design, enable Equal Height Item so profiles with different amounts of text can still align consistently. You can also enable Lazy Loading and Start Loading Before Transition Start to manage how carousel media is loaded as visitors move through the items.

Keyboard Control provides another way to navigate the carousel, while Mouse Wheel Control can be enabled when that interaction fits the page experience.

Test optional interaction controls on the finished page rather than enabling everything automatically. The carousel should remain predictable alongside the rest of the page’s scrolling and keyboard behavior.

Add A Coverflow Effect

For a more dimensional presentation, open Advanced Slider Settings. Choose Coverflow from the Slider Effect field.

This places more emphasis on the active Carousel Item and creates stronger visual separation between the current profile and the surrounding items. With the carousel behavior established, move to the Design tab.

Step 3: Style The Main Carousel Container

The Carousel Container’s Design tab establishes the shared visual language for the items inside it. Start here whenever multiple Carousel Items should use the same image, typography, navigation, spacing, or container styling.

Overlay Settings

If your carousel uses an image or video lightbox, the Overlay controls let you design the interaction that appears over the media. You can enable an image overlay, show it on hover, choose the overlay background, and add an animated overlay icon.

Available animated icon treatments include None, Ripple, and Pulse Border. Depending on the effect, additional controls become available for properties such as ripple color, border width, border color, and icon background.

Style The Images

The Image, Image Border, and Image Box Shadow option groups control the shared presentation of Carousel Item images. Inside Image, adjust properties such as alignment, full-width behavior, and maximum width.

Use Image Border to set the border radius, width, style, and color.

If the design needs more separation from the background, use Image Box Shadow to add depth.

Style The Title, Subtitle, And Body Text

Open the Title, Subtitle, and Body Text groups to establish typography for the Carousel Items.

Alongside familiar font, weight, size, color, line-height, and letter-spacing controls, the Divi 5 version exposes additional text styling options in these groups. Depending on the selected font and text type, these include Variable Font controls and options such as Line Wrap Style, Text Direction, Hyphenation, Text Columns, Fill Type, and Stroke Width.

This lets the carousel typography follow the same visual system as the rest of a Divi 5 design rather than feeling like a separate component.

Customize Arrow And Dot Navigation

Next, open the Next & Previous Button settings. Navigation arrows can be positioned in several locations, including:

• Middle & Inside the container
• Middle & Outside the container
• Top
• Bottom

Additional controls let you show middle-position arrows only on hover, adjust their alignment, choose custom Previous and Next icons, change the icon size, and control the spacing around each button.

Then open the color settings to define the Arrow Color, Arrow Background Color, Dots Color, and Dots Active Color.

Use enough contrast that navigation remains easy to find against the surrounding carousel content.

Differentiate Active And Inactive Items

The Active and Inactive Slide settings let you apply different backgrounds to the current Carousel Item and the items around it.

For card-style designs, a subtle color or gradient difference can reinforce which item is currently in focus without needing a dramatic animation.

Add Container Fade Effects

The Container Style group includes fade controls that can soften the edges of the visible carousel. Choose primary and secondary colors and adjust the fade spacing to control where the effect transitions.

This can be especially effective with Coverflow or centered layouts because it draws attention toward the middle of the carousel.

Control The Z-Index

The Z-Index settings control how the image and content containers stack relative to other carousel effects. For example, increasing the Image Container and Content Container z-index values can keep the profile image and text above fades, overlays, or other styling applied around them.

Only increase these values when the design actually needs a different stacking order.

Fine-Tune The Spacing

The Custom Spacing controls let you adjust both the overall Carousel Container and the elements inside its Carousel Items.

Inside the Container settings, you can control spacing for areas such as the main carousel, inner wrapper, Carousel Items, image container, content container, social media container, and ratings.

The Content controls go more granular, with spacing for images, titles, subtitles, text, buttons, and social media elements.

Social links and ratings are configured on individual Carousel Items through their Meta settings, so those spacing controls become relevant once the corresponding elements have been enabled.

Style The Carousel Item Borders

Use Item Border to define the overall frame around each Carousel Item. Controls include border radius, width, color, and style.

Because this applies to the complete Carousel Item rather than only its image, it works especially well for card-based team, testimonial, service, and portfolio carousels.

Step 4: Add Content To The First Carousel Item

With the shared carousel styling in place, build one finished team member card before populating the remaining items. Open the first Carousel Item. In Main Content, enter the team member’s Title, Subtitle, and supporting text.

If the copy needs to remain compact, use Content Limit to restrict how much text appears in the Carousel Item.

Next, open Title & Image Link if either element should lead somewhere when clicked. You can also add a button for a dedicated call to action.

Then open Image Settings, upload the team member image, and configure the lightbox behavior if needed. The image can open in an Image Lightbox or Video Lightbox when the design calls for expanded media.

Add Social Links Or Ratings

The Meta group adds optional supporting information. Enable Use Social Media when the team member card should include social links, or Use Rating for carousel types that benefit from a rating.

When social media is enabled, additional fields appear for Facebook, Twitter (X), LinkedIn, Instagram, and email links, along with link-target controls.

For our team member example, these fields provide a straightforward way to add relevant profile links without creating separate icon modules for every item.

Add Additional Divi Elements

A Carousel Item does not have to stop at its built-in content fields. Open the Elements tab and click + Add Element to insert additional Divi elements, a Row, or saved content from the Divi Library.

This is useful when the carousel needs a more custom card structure than the default image-and-text layout.

Additional groups such as Link, Background, Loop, and Element Label provide controls for the overall Carousel Item, including linking the container, adding background treatments, using Divi’s Loop functionality where appropriate, and keeping items easier to identify inside the Builder.

Step 5: Fine-Tune The Carousel Item Design

Most shared styling belongs at the main Carousel Container level. The individual Carousel Item Design tab is useful when you need additional control over the contents of a specific card.

Choose The Image Position

Open Image Styles to change where the image appears relative to the Carousel Item content. Available positions include Top, Bottom, Left, Right, and Inside Content.

This makes it possible to create several card structures from the same underlying Carousel Item.

Apply Image Filters

The Image Filter group includes familiar image controls such as hue, saturation, brightness, and opacity. Blend modes such as Multiply, Screen, and Color Burn are also available when you want the image to interact more strongly with the Carousel Item background.

Override Text And Button Styles When Needed

The Title Style, Subtitle Style, Content Style, and Button groups provide item-level versions of the shared styling controls.

For a consistent team carousel, keep most typography at the main Carousel Container level. Use the individual controls when a particular Carousel Item intentionally needs to stand apart, such as a featured testimonial, promoted service, or highlighted profile.

Style Social Media Icons

When social links are enabled, the Social Media Style group controls their presentation. You can adjust alignment, vertical position, icon color, background, border radius, border width, border color, border style, and box shadow.

Style Ratings

If Use Rating is enabled in the Meta group, the Rating Style settings appear in the Design tab. These include alignment, vertical position, icon size, rating color, and the color used for unfilled rating icons.

Finish With Additional Design Controls

The remaining groups include familiar Divi controls for Spacing, Item Border, Box Shadow, Filters, and Transform.

Use these for final refinements rather than creating unnecessary differences between every item.

Step 6: Build The Remaining Carousel Items

Once the first team member card is complete, use it as the template for the remaining Carousel Items. First, remove any unused placeholder items with the Delete Item control.

Then duplicate the finished Carousel Item.

Replace the image, title, subtitle, copy, links, and other item-specific information in each duplicate. Because the base item was already styled before duplication, every new team member begins with the same structure and design.

Continue duplicating and replacing content until the carousel is complete.

At this point, preview the carousel at each breakpoint and test arrows, dots, autoplay, hover behavior, keyboard controls, dragging, links, and any lightboxes you enabled.

Who Is Divi Carousel Module For?

Divi Carousel Module is a good fit for Divi users who frequently build content that benefits from a scrollable, card-based presentation.

• Agencies and freelancers can use it to create reusable carousel patterns for team members, testimonials, services, portfolios, and client-specific content.
• Portfolio and creative websites can use image-focused layouts, Coverflow effects, and lightboxes to present projects more visually.
• Business websites can organize teams, services, testimonials, logos, and other repeated content without taking up as much vertical space.
• Content-heavy sites can use additional Divi elements inside Carousel Items when the standard image-and-text structure is not enough.

And because the module is compatible with both Divi 4 and Divi 5, it can be used across a mixed portfolio of existing client sites and newer builds.

Build More Flexible Carousels With DiviGear

Divi Carousel Module gives Divi users a purpose-built carousel workflow with a broad range of content, layout, navigation, responsive, motion, and design controls.

The main Carousel Container handles the shared experience, while individual Carousel Items give you granular control when a specific slide needs something different. Add lightboxes, social links, ratings, additional Divi elements, custom navigation, responsive item counts, Coverflow effects, or detailed card styling depending on what the project calls for.

Everything we built in this tutorial stays inside the Visual Builder, making the module feel integrated with the rest of the Divi workflow.

Divi Carousel Module is currently available in the Divi Marketplace for $29. The license includes unlimited website usage, one year of support and updates, and a 30-day money-back guarantee. It is compatible with both Divi 4 and Divi 5.

If carousels are a recurring part of the websites you build, DiviGear’s module gives you a dedicated toolkit for creating them while staying inside Divi.

Get Divi Carousel Module

The post Divi Product Highlight: Divi Carousel Module appeared first on Elegant Themes Blog.

Instead of choosing only from fixed stops such as Regular, Medium, and Bold, a variable font can give you continuous control over supported axes such as weight, width, slant, optical size, Grade, and other font-specific characteristics.

Divi 5 brings those controls directly into the Visual Builder and connects them to the rest of its design system. Pair Variable Fonts with Font Variables, the Variable Generator, Number Variables, and Presets, and you can turn individual typography choices into a reusable sitewide framework.

In this tutorial, we’ll build that framework from the ground up. Think of it as a blueprint: choose the right variable font, establish the font family globally, generate a responsive type scale, define how each typographic role uses the font’s axes, and save those decisions as Presets that can be reused throughout the site.

What Are Variable Fonts And How Do They Help?

A variable font is an OpenType font that can store a range of typographic variations inside one font family. Instead of the type designer committing only to separate fixed styles, such as Regular at 400 and Bold at 700, the font can define a continuous range between supported extremes.

Weight is the clearest example. A static font family might provide separate files for Regular, Medium, Semi Bold, and Bold.

A variable font with a weight axis can instead expose a continuous range, such as 100 through 900. If you choose 520, you are using a point within the range defined by the typeface rather than being limited to the closest named weight.

Other axes can work the same way. A variable font might include width, slant, optical size, Grade, or more specialized controls alongside weight. Fonts such as Recursive and Roboto Flex are good examples of how much variation can live inside one family. That gives you more room to create hierarchy without automatically reaching for another typeface. Body copy, section headings, buttons, labels, and display text can all feel distinct while still sharing the same underlying font family.

A variable font can also replace several separate static font files when served appropriately, although the exact loading behavior depends on the font and how it is delivered. For a design system, however, the bigger benefit is flexibility: you gain more usable typographic values without multiplying the number of font families you have to manage.

Introducing Variable Fonts In Divi 5

A variable font may contain several axes, but those controls are only useful if your design tool can expose them. Divi 5 supports variable fonts through its Google Fonts integration. When you select a supported variable font, Divi reads the available axes and displays the relevant controls directly inside the text settings.

The exact controls depend on the font. A simple variable font might give you Weight and Optical Sizing. Another might also support Width, Slant, Grade, Roundness, or several custom axes. That means the Visual Builder adapts to the font you select instead of presenting the same generic variable-font controls for every typeface.

More importantly, these controls can become part of Divi 5’s broader design system. Font Variables can manage the typeface, Number Variables can manage the size scale, and Presets can store the specific axis values and typography settings for each role. That is where a flexible font becomes a reusable typography system.

The Blueprint: Build The Typography System In Layers

Before changing settings, it helps to separate the system into layers. The finished typography system will have six:

1. Font Family: Choose the variable font and store the main typefaces as Font Variables.
2. Size Scale: Use Divi 5’s Variable Generator to create reusable Font Size Variables for headings and supporting text.
3. Variable Font Axes: Decide how Weight, Width, Optical Sizing, Slant, Grade, and any other supported axes should behave.
4. Typography Roles: Turn those controls into intentional recipes for body copy, headings, buttons, and other text types.
5. Option Group Presets: Save those recipes so the same typography can be used across compatible modules.
6. Element Presets: Combine typography with the other design decisions that define complete modules.

This order matters because each layer depends on the one beneath it. The font family gives you the available axes. The Variable Generator provides the sizing scale. The role definitions decide how those values work together. Presets then distribute those decisions throughout the site.

If you later change the font family or the generated size scale, you can update the foundation instead of rebuilding every heading manually.

Building A Variable Typography System In Divi 5

Now let’s build the system. The goal is not simply to make one heading look good. We want a structure that can carry typography consistently across pages, modules, templates, and future content.

1. Find The Right Variable Font

Start with the font itself.

Divi 5 includes Google Fonts in its font picker, including supported variable fonts. If you want to research the available axes before choosing one, the Google Fonts website is useful because you can filter the library to variable fonts and inspect individual typefaces in more detail.

Use the Variable filter to narrow the collection to fonts with variable data.

Pay attention to the axes each font supports. Two variable fonts can offer very different levels of control. One might vary only by weight. Another might include weight, width, slant, Grade, optical size, and additional custom axes.

More axes are not automatically better. For a straightforward corporate site, a wide Weight range may be all you need. An editorial, portfolio, or experimental design may benefit from Width, Optical Size, Slant, Grade, or more expressive custom axes.

Open the font’s detail page and test its available controls.

Look at both the number of axes and their ranges.

If you want a single-family typography system, make sure the font can create enough contrast between the roles you need. A wide weight range, useful width controls, and optical sizing can often do more for a system than a long list of decorative axes you may never use.

2. Set Up The Font In Divi

Once you’ve chosen the typeface, decide whether you are still testing it or ready to make it part of the system.

Use Font Variables For The System

For a finished typography system, start in the Variable Manager. Design Variables store reusable values that can be referenced throughout the site. For typography, Font Variables handle the font family while Number Variables can handle font sizes and related measurements.

Open the Variable Manager and switch to the Fonts section. Divi includes Heading and Body font variables that you can use as the foundation for the site. Set your chosen variable font for the Heading variable, Body variable, or both depending on the system you want to create.

A single-family system can use the same variable font for both Heading and Body, then create hierarchy with size, Weight, Width, Grade, and other supported controls. You can also create additional Font Variables for special roles such as display text, quotations, or accent typography.

Once a Font Variable is referenced in your typography settings or Presets, changing its typeface later updates those connected instances.

To use one of your additional Font Variables, click the variable icon beside a compatible font field and select it from the list.

This is why the font family belongs near the bottom of the blueprint. A direct font value can work on one module. A Font Variable gives the rest of the system something reusable to reference.

Use The Font Directly While Testing

Direct assignment still has a place when you’re evaluating a typeface. Open any module with text settings, go to the relevant text option group in the Design tab, and choose the font from the font picker.

Divi displays the supported variable font controls for that typeface, allowing you to test its range before committing it to your Font Variables and Presets. Once you know the font belongs in the system, move the family choice into a Font Variable rather than repeating the direct value throughout the site.

3. Generate Your Font Size Scale With The Variable Generator

The font family is only one part of typography. The next layer is size. You could create H1, H2, H3, body, small text, and supporting sizes manually as Number Variables. Divi 5’s Variable Generator gives you a faster way to establish that scale. Open the Variable Manager and find the Numbers group. Hover over it and choose Generate Fluid Sizing Variables.

Inside the generator, select Font Size as the variable type. The Variable Generator can create three useful kinds of typography scale:

• Fluid: Generates clamp()-based values that scale smoothly between minimum and maximum sizes as the viewport changes.
• Fixed Responsive: Generates separate values for Divi’s responsive breakpoints.
• Fixed Single: Uses one fixed value across screen sizes.

For a fluid typography system, choose Fluid. Divi will generate a series of Number Variables that you can use for your typography roles. Depending on how many steps your system needs, those can become values such as:

• Display
• H1
• H2
• H3
• H4
• Body Large
• Body
• Body Small

The exact names are up to you. What matters is that the scale is intentional. A generated font-size variable controls size. It does not automatically determine the variable font’s Weight, Width, Slant, Grade, or other axes. We’ll define those separately in the next layers of the blueprint and combine everything inside Presets. That separation is useful.

Your H2 size can change globally without changing its Weight. Your font family can change without rebuilding the scale. And a button can use the same body-size variable while applying a completely different axis recipe. If you later decide the whole site feels too large or too compressed, adjust the generated variables rather than visiting every typography preset one by one.

4. Explore The Variable Font Axes

Now we have the font family and the size scale. The next layer is deciding how the font itself should behave. When you apply a supported Google variable font in Divi 5, additional controls appear beneath the normal typography settings. The exact selection depends on the axes contained in that font.

Some typefaces expose only a few axes. Others give you a much wider set. Before creating presets, test the useful range of each axis and decide which ones actually contribute to the system.

Variable Font Weight

Standard font weight controls are usually organized around familiar named values such as Regular, Medium, Semi Bold, and Bold. The Variable Font Weight control lets you work between those fixed stops when the typeface supports a continuous weight axis.

The available range depends on the font. A typeface may span 100 through 900, while another uses a narrower range. A value such as 550 can give a heading more presence than Medium without pushing it all the way to Bold.

That precision becomes especially useful when nearby typography roles need hierarchy without looking like completely different styles.

Optical Sizing

Some variable fonts include an Optical Size axis. Optical sizing lets the typeface adapt details of its letterforms for different display sizes. Depending on the font, this can influence characteristics such as proportions, spacing, stroke treatment, or contrast.

In Divi 5, enable Optical Sizing when the chosen font supports it.

This is useful in a system where one font needs to cover both small body copy and large display headings. Always check that the typeface actually includes an optical-size axis before making it part of your typography recipe.

Variable Font Width

Width changes how condensed or expanded the letterforms appear without requiring a different font family. This can be one of the most useful axes in a single-family typography system. A narrower heading can carry strong visual weight without taking over the entire line. A wider subheading can create contrast against the level above it even when both use similar font sizes or weights.

The neutral value depends on the typeface, so treat the font’s default as your reference point and test both narrower and wider values around it. Width is particularly useful for:

• Large hero headings
• Section headings
• Navigation
• Buttons
• Compact cards
• Editorial display text

Variable Font Slant

Slant and italic are related, but they are not the same thing. A Slant axis tilts the existing upright letterforms when the font supports that variation. An italic design may instead use alternate glyph shapes specifically drawn for the italic style.

Use Slant when a controlled lean supports the typography role, such as a pull quote, accent heading, or label. If the design specifically depends on true italic letterforms, choose a font that provides the appropriate italic behavior rather than treating Slant as a replacement for it.

Variable Font Grade

Grade changes the visual density of a typeface with less impact on the space occupied by the text than changing its Weight.

That makes Grade useful for fine-tuning text in different visual contexts. For example, a heading may feel slightly heavier against a dark background than it does against white. A small Grade adjustment can change its visual density without requiring you to rebuild the rest of the typography recipe.

Divi displays this control only when the selected font provides the relevant Grade axis.

5. Turn The Same Font Into Different Typography Roles

This is where the blueprint starts looking like a system instead of a collection of controls. The same variable font can perform several jobs by combining the generated size variables with different axis values.

For this example, we’re using Roboto Flex and creating three common typography role groups: body copy, section headings, and button text. The exact values are not universal rules. They are starting points that demonstrate how the roles can relate to each other.

Body Copy

Body copy should support reading rather than compete for attention. A Weight around 360–400 can provide a useful starting range for Roboto Flex, depending on the background, font size, and content.

If Optical Sizing is available, leave it enabled so the font can use its size-aware behavior.

Pair that axis recipe with the Body Number Variable generated earlier. Now body text has two separate system references:

• The Font Variable controls the family.
• The Number Variable controls the size.

The preset we’ll create later will hold those variables alongside the Weight, Optical Sizing, line height, and other role-specific decisions.

Section Headings

Section headings are where the single-family approach becomes much more interesting. Instead of introducing another typeface just to create contrast, use the same family with a different combination of Weight, Width, Size, and Grade.

For our H2, set the Weight to 660 and Width to 100.

Apply the H2 Number Variable from the size scale as the text size. For the H3, keep a similar Weight but increase Width to around 150 in this particular font, creating a more expanded shape that separates the level from the H2 above it.

You can also test a small Grade adjustment, such as +10, when the heading needs slightly more visual density without substantially changing its dimensions. The important part is the relationship.

H2 and H3 still belong to one family, but the combination of generated size variables and variable-font axes gives each level its own role.

Button Text

Buttons need enough visual emphasis to communicate action without competing with headings. Open the Button module’s Design tab and find Button > Text. For this example, set Variable Font Weight to 580.

Then set Variable Font Width to 90, which makes the text slightly more condensed than the font’s neutral width in this example.

Set Letter Spacing to 0.06em.

You can then connect the button to an appropriate Number Variable from the typography scale. The resulting button belongs to the same font family as the rest of the site but has its own recognizable recipe. That is the core advantage of this approach: hierarchy comes from coordinated values instead of isolated styling.

6. Standardize The Typography With Option Group Presets

At this point, the system has all the ingredients:

• Font Variables for the typeface
• Number Variables for the sizing scale
• Axis values for each typography role
• Line height and letter spacing decisions

Now we need a reusable layer that combines them. That is where Option Group Presets come in. Imagine you’ve finished an H2 recipe:

• Heading Font Variable
• H2 Font Size Variable
• Variable Font Weight
• Variable Font Width
• Optical Sizing
• Line Height
• Letter Spacing

Instead of rebuilding those settings on every H2, save the relevant Heading Text option group as a Preset.

Open the Heading Text option group on a module, hover over the group title, and click the Preset icon.

Click New Preset From Current Styles and give the preset a clear role-based name, such as:

• Heading – H1
• Heading – H2
• Heading – H3
• Body – Default
• Body – Small
• Button – Default

To use the style elsewhere, open the same compatible option group, click the Preset icon, and select the preset.

Start with one typography preset for each role that actually repeats. For headings, that will often mean H1 through H6. Body text may need Default, Large, and Small. Buttons may need one standard style and perhaps a smaller variation.

Each Preset can reference the Number Variables generated by the Variable Generator, so the size scale stays connected to the system rather than being copied as static values. Set a Preset as the default when you want compatible elements using that option group to inherit that typography treatment automatically. And because the Presets themselves are global, editing a shared Preset updates the connected instances throughout the site.

Text Element Presets And The Full System

Option Group Presets handle individual groups of design decisions. Element Presets let you bring those groups together into a complete module configuration. For example, a Text module Element Preset could combine:

• Your heading typography presets
• Your body typography preset
• Text color presets
• Spacing presets
• Other repeated Text module settings

That makes the Element Preset the top layer of the blueprint: a reusable component built from smaller shared decisions underneath it. To create an Element Preset, click the Element Preset icon at the top of the module settings panel.

The relationship between the layers now looks like this:

Font Variables → Font Size Variables → Option Group Presets → Element Presets → Pages

The Variable Generator strengthens the second layer by giving the size system a mathematical structure. Variable Fonts give the typography recipes more range. Presets distribute those decisions. That is what turns a collection of font settings into a typography system.

Best Practices For Variable Font Systems

Once the structure exists, the main goal is keeping it intentional. Variable fonts can expose a lot of controls, but more choices do not automatically create a better system.

• Generate The Scale Before Styling Every Heading: Use the Variable Generator to establish the font-size system first. This gives your H1 through H6 and supporting roles a shared mathematical relationship before you start fine-tuning Weight, Width, Grade, and other axes.
• Keep Size And Axis Decisions Separate: Let Number Variables control font sizes and let Presets control how the variable font behaves. This makes the system easier to update because changing the scale does not require rebuilding every axis recipe.
• Use Only The Axes That Have A Job: A font may expose ten controls, but your system might only need Weight, Width, and Optical Sizing. Repeating three intentional values is more useful than creating random variations just because the controls exist.
• Audit Grade Against Different Backgrounds: If your font supports Grade, test important typography on both light and dark surfaces before saving the Preset. A subtle Grade variation can help adjust visual density without rebuilding the rest of the role.
• Don’t Use Slant As A Substitute For Italic: Slant changes the angle of upright forms. If your design needs true italic glyphs, use a font that provides the appropriate italic forms or axis.
• Test Presets With Real Copy: A Weight of 580 may look balanced on a two-word heading and feel much heavier on a three-line title. Test short headings, long headings, buttons, paragraphs, and wrapping states before making the Preset part of the system.
• Name Everything By Role: Names such as H2, Body Small, Button Default, and Display Large are easier to maintain than names based on isolated values such as 52px or Weight 660. The values may change later. The role stays the same.
• Change The System From The Lowest Useful Layer: If every heading is too large, adjust the size variables. If only H2 feels too heavy, update the H2 Preset. If the entire brand typeface changes, update the Font Variable. Make the change at the layer that actually owns the decision.

A Divi 5 Typography System You Can Keep Building On

Variable fonts in Divi 5 give you range, but range alone is not a system. The system comes from deciding where each value belongs. Store the font family in Font Variables. Generate the sizing scale with Divi 5’s Variable Generator. Use supported variable font axes to give each typography role the right character. Save those combinations as Option Group Presets, then bring them into complete modules with Element Presets.

Once those layers are connected, your typography becomes much easier to manage. If the heading scale needs more contrast, adjust the Number Variables. If an H2 needs more presence, change its axis recipe. If the brand switches typefaces, update the Font Variable. Each decision has a clear place to live. Variable fonts have always contained this flexibility. Divi 5 exposes the controls visually, and its Variables, Variable Generator, and Presets give you the structure to use that flexibility consistently across an entire website.

That is the difference between finding typography settings that look good and building a typography system you can keep using.

The post How To Create A Typography System With Variable Fonts In Divi 5 appeared first on Elegant Themes Blog.

A workspace saves a particular Visual Builder setup so you can return to it later. Instead of using the same interface for every stage of a project, you can create one setup for working on your design system, another for assembling pages, and a cleaner one for editing content.

In this post, we’ll first walk through the interface options that Workspaces can save. Then we’ll use them to create three practical workspaces for different stages of a Divi 5 project.

What A Workspace Controls

A workspace is a saved configuration of the Divi 5 Visual Builder. You arrange the interface the way you want, save that setup under a name, and switch back to it whenever that working environment makes sense. Importantly, a workspace changes the builder around the page, not the page itself. Your sections, rows, modules, content, Design Variables, and Presets stay exactly where they are when you switch workspaces. A workspace primarily remembers two types of information.

The first is the builder layout. That includes which panels are open, where they are positioned, whether they are docked or floating, their size, tabbed panel groups, sidebar dimensions, and the current builder view and breakpoint. The second is your builder preferences. These include settings such as Interface Mode, Color Scheme, Builder Default View Mode, Settings Modal Default Position, Page Bar Icons, and other options that affect how the Visual Builder behaves.

Switch workspaces, and Divi restores that saved environment together. You’ll find the Workspaces icon in the left sidebar.

Global, Personal, And Premade Workspaces

There is one useful distinction to understand before creating your own. Divi organizes workspaces into three groups:

• Website Workspaces: This includes the Global workspace. Global is stored site-wide and is available to users editing the website.
• Your Workspaces: These are the custom workspaces saved to your WordPress user account. Your personal setups do not rearrange the builder for another editor.
• Premade Workspaces: Divi includes Builder and Minimal as built-in starting points. These are read-only, but you can activate one, customize the interface, and save the result as a new workspace.

Out of the box, Global is the default workspace. You can set another workspace as your default later.

Learn Everything About Divi 5 Workspaces

Customizing The Builder Interface

Before creating task-specific workspaces, it helps to understand the interface adjustments that can become part of them. Open any page in the Visual Builder and try the options below.

Open, Close, And Dock Panels

Start with the panels. Open Layers and the Inspector from the left sidebar. These are useful examples because they make it easy to see how a workspace can rearrange larger interface tools.

Panels can be docked to either side of the builder. Drag a panel by its header, move it toward the left or right edge of the screen, and drop it into the sidebar. You can also stack multiple panels in the same sidebar.

Resize a docked panel by dragging the divider between it and another panel. You can also change the overall sidebar width by dragging its inner edge. A wider Layers panel can make deeply nested page structures easier to read, while a narrower sidebar leaves more room for the canvas.

Float Panels Over The Canvas

A panel does not have to remain docked. Drag it away from a sidebar and release it over the canvas to turn it into a floating panel. You can then resize and reposition it wherever it fits your workflow.

Floating works particularly well for panels you want available without permanently taking width away from the page preview. For example, you might keep Layers docked during a complex build but float the Inspector closer to the area you are currently reviewing.

Floating panels can also be useful on smaller screens. A docked sidebar reduces the width available to the canvas, while a floating panel can sit temporarily over the layout and be moved away when you need to see the full design.

Because Workspaces remember panel layout, you can create a setup specifically for that screen size rather than rearranging everything each time.

Combine Panels Into Tabbed Groups

If you want several tools available without giving each one its own section of the sidebar, combine them into a tabbed group. Drag one panel onto the header of another and release it. Both panels will share the same space, and you can switch between them using tabs.

You can add additional panels to the same group in the same way.

Tabbed groups are particularly useful on laptops or anywhere canvas width matters. Layers, the Inspector, and another frequently used panel can share one sidebar rather than competing for separate space.

Choose Your Page Bar Icons

The Page Bar at the top of the Visual Builder provides quick access to common builder actions. Open Workspace Settings from the Workspaces area and find the Page Bar Icons controls. From here, you can decide which actions remain visible in the bar.

There is no need to show every available icon in every workspace. A workspace intended for focused content editing might use a minimal Page Bar. A workspace for heavy page building can keep more actions visible.

The point is not simply to remove controls. It is to keep the ones that support the task you are doing.

Customize Workspace Settings

Workspace Settings also stores preferences that change how the Visual Builder behaves.

The available options include:

• Builder Default View Mode: Choose whether the workspace opens in Desktop, Tablet, Phone, or Wireframe View.
• History State Interval: Control how frequently Divi records actions in the History panel.
• Settings Modal Default Position: Choose where element settings appear by default, such as a fixed sidebar or floating position.
• Page Creation Flow: Choose what happens when you start working with a new page, including building from scratch, opening the premade layout library, or building with Divi AI.
• Page Bar Icons: Choose which controls stay visible in the top bar.
• Show Disabled Modules At 50% Opacity: Decide whether modules hidden through Visibility settings remain partially visible while editing.
• Group Settings Into Closed Toggles: Start option groups collapsed instead of displaying every group open at once.
• Add Placeholder Content To New Modules: Decide whether newly added modules start with sample content.
• Speed Up The Builder With Prerendering: Enable or disable Divi 5’s speculative prerendering behavior.
• Interface Mode: Switch between Light and Dark mode.
• Color Scheme: Change the accent color used throughout the builder interface.
• Show Theme Builder Layouts: Choose whether assigned Theme Builder areas are visible and editable while working on the page.
• Enable Admin Bar: Show or hide the WordPress admin bar while the Visual Builder is active.

A workspace can combine these preferences with its panel arrangement. That is what makes Workspaces more useful than simply rearranging the builder once.

Saving Your Setup As A Workspace

Once the builder looks and behaves the way you want, save the setup before changing anything else. Open the Workspaces panel and click Save as New Workspace.

Enter Design Optimized in the Workspace Name field. Enable Set As Default if you want this configuration to load automatically when you enter the Visual Builder, then click Save.

The workspace now appears under Your Workspaces. Switch to another workspace and return to Design Optimized. Divi restores the saved interface configuration, including its relevant layout and preferences. Two additional actions are useful as your setup evolves.

Update Active Workspace saves the builder’s current configuration into the active workspace. Reset Active Workspace returns the workspace to its stored baseline configuration when you want to discard interface changes.

You can also rename, duplicate, delete, and set eligible workspaces as the default from the same area. Now that the save-and-switch workflow is clear, we can build workspaces around actual tasks.

Let The Interface Follow The Workflow

There is no single workspace configuration that is best for every stage of a website project.

A system-focused session may revolve around the Variable Manager and Preset Manager. Page assembly relies more heavily on Layers and the Inspector. Content editing can benefit from a cleaner canvas with fewer interface elements competing for attention.

For this tutorial, we’ll create three practical examples:

• Design System: For Design Variables and Presets.
• Page Build: For structure, layout, and assembling pages.
• Content Editing: For writing, images, and ongoing content updates.

These are starting points rather than rigid rules. The value of Workspaces is that you can adapt each setup to the way you actually build.

Workspace 1: Design System

The first workspace is built around design system work. This is where you might create or refine color, typography, and sizing variables, then connect those values to Option Group Presets and Element Presets. Two of the most useful tools for that workflow are the Variable Manager and Preset Manager.

You do not necessarily need Layers or the Inspector taking up permanent sidebar space while focusing on sitewide design decisions, so close them for now. Open the Variable Manager and give it enough width to make variable names and values easy to scan. Open the Preset Manager as well. You can dock the two separately or combine them into a tabbed group if you want both tools to share one sidebar.

Because these are sitewide systems, this workspace can be useful whenever you need to step away from an individual layout and adjust the underlying design language. Next, open Workspace Settings. Set Builder Default View Mode to Wireframe View if you prefer a more structural canvas while working on the design system. If seeing the finished page while adjusting variables is useful to you, Desktop View is equally valid.

For this example, we’ll use Wireframe View to reduce visual distractions. Turn on Group Settings Into Closed Toggles as well. When you are moving through several settings groups while creating or refining presets, collapsed groups make longer settings panels easier to scan.

Once the setup feels comfortable, save it as Design System.

You can return to this workspace whenever a project needs a new variable, a preset adjustment, or a broader design system change.

Workspace 2: Page Build

The second workspace focuses on assembling layouts. At this stage, Design Variables and Presets can already do much of the styling work, so the interface can prioritize page structure and style inspection. Open Layers and dock it in the sidebar. Layers gives you a structured map of the page and becomes especially useful once Sections, Rows, Columns, Groups, and nested modules start adding depth to the layout.

Then open the Inspector. The Inspector helps you trace the styles affecting an element, including values coming from Presets and Design Variables. That makes it useful when checking whether an element is following the design system or has accumulated individual styling.

If Layers and Inspector consume too much horizontal space, combine them into a tabbed group.

The Command Center is also particularly useful during page building. Press Cmd+K on Mac or Ctrl+K on Windows to open it. From there, you can add elements, open builder tools, jump to settings, switch views, navigate pages, apply Presets, and run other commands without searching through the interface.

Unlike Layers and Inspector, the Command Center does not need a permanent place in the workspace. Open it when needed and close it when the command is complete. In Workspace Settings, set Builder Default View Mode to Desktop if you prefer designing visually from the start. You can also use Wireframe View if your normal workflow begins with structure before moving into the styled page.

For this example, we’ll use Desktop. Turn on Add Placeholder Content To New Modules as well. When real copy has not arrived yet, placeholder content makes the shape and hierarchy of newly added modules visible immediately.

If you work on a smaller screen, try floating Layers instead of docking it. That leaves the canvas at a wider working size while keeping the page structure close at hand. Save the completed setup as Page Build.

One useful habit pairs naturally with this workspace: when an element needs styling, check whether an existing Preset or Design Variable already handles it before adding a new individual value. That keeps page assembly connected to the design system you created earlier.

Workspace 3: Content Editing

The third workspace strips the interface back for writing, replacing images, reviewing content, and making routine page updates. Start by closing panels that are not necessary for those tasks. Layers and Inspector are still available whenever you need them, but they do not have to occupy permanent screen space while someone is moving through the page and editing content directly on the canvas.

With the sidebars clear, more of the page itself remains visible. Next, adjust a few preferences in Workspace Settings. For this example, switch Interface Mode to Dark. The darker builder chrome gives the workspace a noticeably different visual context from the Design System and Page Build setups while keeping the page itself prominent.

Interface Mode is personal preference, so Light mode works just as well if that is more comfortable for your environment. Turn off Show Theme Builder Layouts if the person using this workspace only needs to edit the current page. Divi 5 can display and edit assigned Theme Builder areas such as headers and footers directly alongside the page. Hiding them here simply keeps global template areas out of view when the task is limited to page content.

That can be particularly useful for writers, editors, or clients who do not need to interact with those global areas during routine updates. Turn off Add Placeholder Content To New Modules as well. Placeholder content is helpful while planning structure, but during a content pass it can create unnecessary sample copy that later needs to be replaced. Starting with an empty module makes it clearer that real content still needs to be added.

Save the setup as Content Editing.

If a client will use a setup like this, remember that a workspace controls the interface, not permissions. Closing a panel or hiding Theme Builder layouts can simplify what is visible, but it does not remove a user’s underlying capabilities. Use Divi’s role management controls when you need to restrict which features or areas a particular user can access.

These three examples cover several common stages of a Divi workflow, but they do not have to be your entire workspace collection. You might also create a workspace for responsive review, for example. Set its default view to the breakpoint you inspect most often and arrange the builder around testing rather than construction. There is usually no need for a separate workspace for every breakpoint. Workspaces are most useful when each one represents a meaningfully different way of working.

Switching Workspaces As You Work

Once several workspaces are saved, switching between them is where the feature starts to become part of the workflow. First, choose a useful default. Out of the box, Divi uses the Global workspace as the default. You can set one of your custom workspaces as the default instead if there is a configuration you want the builder to open with most often.

For a design-system-heavy project, that might be Design System. During active page production, Page Build may make more sense. For a site that mostly receives copy and image updates, Content Editing may be the setup you want to see first. Open the Workspaces panel, select the workspace, and use Set as Default Workspace.

For faster switching during an active session, use the Command Center. Press Cmd+K on Mac or Ctrl+K on Windows and start typing the name of the workspace you want. Choose it from the results, and Divi switches the Visual Builder to that saved configuration.

The Command Center also includes workspace commands for updating and resetting the active workspace. That makes it possible to move between working environments without navigating back through the Workspace Settings panel every time.

A Practical Workspace Switch

Here’s what that can look like during a real build. Imagine you are assembling a page in the Page Build workspace and realize that a CTA needs a background color that does not exist in your current palette. You could add a one-off color directly to the Section, but if that color belongs to the site’s broader design language, adding it as a Design Variable keeps the system more reusable.

Open the Command Center and switch to Design System. Your saved Variable Manager and Preset Manager setup appears. Add the new color to your Design Variables, then switch back to Page Build and apply the variable to the CTA. The important part is not the number of clicks saved. It is that each workspace puts the tools for that type of decision back in front of you. The interface starts reinforcing the workflow instead of staying identical regardless of what you are doing.

Tips For Keeping Workspaces Useful

A few habits can keep a workspace collection useful instead of letting it turn into another thing to organize.

• Name Workspaces By Purpose: Names such as Design System, Page Build, and Content Editing immediately explain when a workspace is useful.
• Update Intentional Changes: If you rearrange a workspace and decide the new setup is better, use Update Active Workspace so the new configuration becomes part of it.
• Use Reset When An Experiment Does Not Work: If you move panels around and want to return to the workspace’s stored configuration, use Reset Active Workspace rather than manually rebuilding the layout.
• Check Workspace Settings When An Icon Disappears: Page Bar Icons are saved with the workspace, so a missing top bar control may simply be disabled in the active setup.
• Duplicate Before Making A Major Variation: Divi lets you duplicate a workspace, which is useful when two workflows share most of the same interface but need a few different panels or preferences.
• Keep The Collection Intentional: Divi lets you create multiple workspaces, but each one should represent a genuinely different workflow, screen setup, or use case.

Divi’s current Workspace management controls cover actions such as editing, duplicating, updating, resetting, deleting, and setting a workspace as the default. If you use Workspaces across several sites, keep the setups straightforward enough that they are easy to recreate where needed.

Let The Divi 5 Builder Match Your Workflow

Workspaces turn Divi 5‘s customizable interface into something you can reuse. Instead of choosing one builder arrangement and forcing it to fit every task, you can save different environments for different parts of your workflow. Keep the Variable Manager and Preset Manager close when working on your design system. Bring Layers and the Inspector forward when assembling pages. Strip unnecessary panels away when the job is primarily content.

Then switch between those setups as the work changes. The examples in this tutorial are only a starting point. As you use them, you may find that Layers belongs on the other side of your screen, that the Inspector works better as a floating panel, or that one Page Bar icon matters more than you expected.

When a change consistently improves the workflow, use Update Active Workspace and make it part of the setup. Over time, each workspace becomes less about customizing the interface and more about opening Divi 5 with the right tools already waiting for the job. If you are building a system-first workflow, start with Design Variables, then shape your workspaces around the way you use that system.

The post How To Customize The Divi 5 Builder Interface With Workspaces appeared first on Elegant Themes Blog.

Divi Essential by Divi Next expands the Divi toolkit with a large collection of specialized modules, extensions, and layouts built directly into the Visual Builder.

One of its modules, Divi Vertical Menu, gives you a dedicated way to create vertical menus, accordion navigation, collapsible sidebars, flyouts, and mobile drawers while keeping the entire workflow visual. The module is compatible with both Divi 4 and Divi 5, making it useful for existing websites as well as new Divi 5 builds.

In this product highlight, we’ll take a closer look at Divi Essential, explore the Vertical Menu module’s key features, and build an expandable vertical navigation menu from start to finish.

Overview Of Divi Essential

Divi Essential is an all-in-one toolkit that extends the Visual Builder with modules, site-wide extensions, and ready-made design layouts. It is built to work inside the familiar Visual Builder workflow and is fully compatible with Divi 4 and Divi 5.

The collection includes more than 109 Divi modules, 28+ extensions, 720+ section layouts, 40+ starter templates, and 8 pre-built websites. Together, these tools give freelancers, agencies, and site owners a large set of building blocks for content, animation, navigation, forms, and more, without leaving Divi.

New modules and extensions continue to expand the collection, including the Divi Vertical Menu module we’ll focus on later in this post.

109+ Modules

Divi Essential adds more than 109 modules that sit alongside Divi’s native modules in the Visual Builder. The collection covers everyday content needs, motion and interactive effects, carousels, team and social layouts, form styling, and navigation tools such as the Vertical Menu. You can enable all or only the modules you need, which helps keep the site lean while still giving you a much wider range of design options. Everything is built to feel native inside Divi and works with both Divi 4 and Divi 5.

28+ Extensions

Beyond individual modules, Divi Essential includes 28+ extensions that add functionality across your entire website. These tools enhance menus, interactions, visual effects, and workflow site-wide rather than living as a single-page module. Examples include an animated gradient, preloader animation, advanced popup builder, card, cursor, and particle effects, text animations, video backgrounds, and utilities such as live copy paste, cache clearing, and more. The result is a set of tools you can layer onto existing Divi pages without stacking extra plugins.

720+ Section Layouts

Divi Essential comes with more than 720 pre-built section layouts. These sections cover common page areas from heroes, features, testimonials, pricing, CTAs, galleries, and more, so you can build polished pages faster instead of starting every section from scratch. Each layout remains fully editable inside the Builder and is designed to work with the plugin’s modules.

40+ Starter Templates

In addition to individual sections, Divi Essential includes 40+ starter templates and 8+ full pre-built websites. These give you solid, industry-ready foundations you can import, brand, and refine. They’re especially useful when you need a complete structure quickly for a client, prototyping,, or sites that rely on clear navigations and organized content. Everything stays editable inside Divi, and new templates continue to be added over time.

Among the newer additions to this growing toolkit is the Divi Vertical Menu module. It brings dedicated vertical navigation options directly into the Visual Builder, giving Divi users a more flexible way to organize complex or content-heavy sites. In the sections below, let’s take a close look at what the module offers and how to build with it.

Introducing The Divi Vertical Menu Module

The Divi Vertical Menu module is built for creating vertical navigation directly inside Divi. You can use it for sidebar menus, expandable category lists, account navigation, dashboards, documentation menus, flyouts, collapsible sidebars, and responsive drawers.

One of its strengths is the variety of menu sources it supports. You can generate navigation from WordPress menus, taxonomy terms, or post type pages, then control how many nested levels appear.

The module includes four layout types:

• Classic List
• Accordion
• Collapsible Sidebar
• Flyout

Each layout gives the same navigation a different presentation, making it easier to match the menu to the type of website you are building. Submenu behavior can be customized as well. Depending on the layout, you can open nested items on click or hover and decide whether one or several submenu groups can remain expanded.

Default states, icons, badges, and submenu carets provide additional ways to make the hierarchy clear.

The module also includes dedicated responsive controls. The mobile layout can inherit the desktop version, switch to an Accordion, or become an off-canvas drawer. You can define the breakpoint, drawer side, hamburger label, external trigger, and other responsive behavior from the same module.

Styling is similarly flexible. Menu items, submenus, icons, badges, carets, backgrounds, interaction states, and the off-canvas drawer can all be customized to match the rest of the site.

Key Features And Settings

Once the Vertical Menu module is added to a page or Theme Builder template, its settings are organized into the familiar Divi interface. Here are the controls that make the biggest difference.

Menu Source And Depth

The Menu Source settings determine what content generates the navigation. Available source types include WordPress menus, taxonomy terms, and post type pages. The Max Depth setting controls how many levels of nested navigation appear.

That flexibility lets the same module work with very different types of websites. A simple sidebar might only need one nested level, while a documentation structure can expose a deeper hierarchy.

Four Layout Types

The module offers four ways to present the navigation.

• Classic List displays the links in a straightforward vertical stack. It works well for simple sidebars and secondary navigation.
• Accordion lets visitors expand and collapse sections, keeping larger menus more compact.
• Collapsible Sidebar can condense the navigation into a smaller state, making it a natural fit for dashboard-style interfaces.
• Flyout keeps the main menu narrow while revealing nested navigation in an adjacent panel.

The Layout group also includes options for Alignment, Item Spacing, Submenu Indent, and Sticky behavior.

Submenu Behavior And Visual Cues

The module gives you control over how nested navigation responds. Depending on the chosen layout, the submenu Trigger can use Click or Hover. The Open Behavior can keep one submenu open at a time or allow several sections to remain expanded.

You can also define the starting Default State, including collapsed, expanded, or first-open configurations.

The Elements group provides additional visual cues. Enable icons to make top-level destinations easier to identify, badges to highlight selected items, and submenu carets to communicate which links contain additional navigation.

Responsive And Accessibility Options

The module includes a dedicated responsive workflow so the menu can adapt to smaller screens. Set the Mobile Layout to inherit the desktop version, switch to an Accordion, or use an off-canvas drawer.

The Accessibility group also includes an ARIA Label field, allowing you to provide an accessible name for the navigation where appropriate.

As with any navigation system, test the finished menu with keyboard controls and across the relevant breakpoints to make sure expandable states, focus indicators, labels, and drawers remain clear.

Detailed Styling Controls

The Vertical Menu module gives you individual design controls for the major parts of the navigation. These groups include familiar controls for typography, colors, spacing, sizing, backgrounds, borders, shadows, and other visual details.

Everything remains editable and previewable directly inside the Visual Builder.

How To Build A Vertical Menu With Divi Essential

Now let’s put those controls to work. For this example, we’ll create an expandable sidebar menu with nested pages, icons, responsive behavior, and clear active states. Before opening the Visual Builder, make sure Divi Essential is installed and activated.

If you plan to use a WordPress menu as the source, create that menu under Appearance > Menus. Add the pages you need, arrange the parent and child relationships, and configure the menu-specific icon options you want to use.

1. Add The Vertical Menu Module

Open the page or Theme Builder template where the navigation should appear. Add a Section and Row if needed, then click Add Module. Open the Divi Essential collection and choose Vertical Menu.

The menu appears directly on the canvas, ready to configure.

2. Choose The Menu Source

Open the Menu Source group in the Content tab. For this example, choose WordPress Menu as the Source Type, then select the menu you created earlier.

You can use one of the other source types when the navigation should be generated from taxonomy terms or post type pages instead. Set Max Depth based on how much of the hierarchy you want to expose.

3. Select The Layout

Open the Layout group. For a straightforward vertical menu, choose Classic List. For navigation with several expandable sections, choose Accordion.

We’ll use Accordion for this example so visitors can reveal nested links as they move through the menu. Adjust Alignment, Item Spacing, Submenu Indent, and Sticky behavior from the same group as needed.

4. Configure The Submenu Behavior

Next, choose how nested navigation should behave. For layouts that support both options, the Trigger can be set to Click or Hover. Accordion and Collapsible Sidebar layouts use Click-based expansion.

Use Open Behavior to decide whether several sections can remain expanded or whether opening a new group closes the previous one.

Then choose the initial Default State. Depending on the structure, you can begin with everything collapsed, everything expanded, or the first section already open.

5. Add Icons, Badges, And Carets

Open the Elements group to add visual cues. Enable Show Icons and choose their position if your navigation uses icons. You can also enable Show Badges for specific menu items and Show Submenu Caret for expandable parent links.

Use these elements to reinforce the hierarchy rather than decorate every item equally. Carets are especially useful for making expandable menu items immediately recognizable.

6. Configure The Mobile Experience

Open the Responsive group. Choose how the vertical menu should adapt at smaller widths. You can inherit the desktop layout, switch to an Accordion, or use an off-canvas drawer.

For this example, we’ll use the off-canvas option so the navigation can stay available without occupying the main content area on smaller screens. Set the Mobile Breakpoint, choose the Drawer Side, customize the Hamburger Label, and configure any external trigger settings the design requires.

7. Add An ARIA Label

Open the Accessibility group and enter an ARIA Label when the navigation needs an accessible name. For example, a documentation sidebar could use Documentation Navigation, while an account area could use Account Navigation.

Once the menu is complete, test the navigation with a keyboard and on the relevant device sizes to make sure the complete interaction remains clear.

8. Style The Menu Items

Switch to the Design tab and open the Menu Items group. Use the typography controls to set the font, weight, size, color, line height, and any supported variable font settings.

Use the Spacing controls to adjust the margin and padding around each item.

Then style the different interaction states. The module includes controls for regular, hover, and active text and background colors, giving visitors clear feedback as they move through the navigation.

Active states are particularly helpful in longer navigation structures because they make the visitor’s current location immediately visible.

9. Style The Icons, Badges, And Carets

Open the Icon, Badge, and Caret groups. Adjust their size, color, padding, background, border radius, and other available design settings.

Keep each cue tied to a clear purpose. Icons can make top-level categories easier to identify, badges can highlight important destinations, and carets communicate expandable structure.

10. Style The Submenus

Open the Submenu group to style the nested container. Set its background, spacing, border, and box shadow.

Then use the Submenu Items group to control the nested links themselves. Set their typography, spacing, item gap, normal text color, hover state, active state, and background colors.

A slight difference in indentation, size, color, or background helps distinguish the submenu hierarchy from the parent navigation.

11. Fine-Tune The Animation

Open the Animation settings to control how expandable elements move. Use Expand Duration to control the timing and choose the easing style of your choice.

Keep navigation animations responsive enough that the interface reacts immediately while still giving the expansion a polished transition.

12. Finish The Menu Container

Finally, style the overall container. Use the Background group to create a distinct navigation surface when the design calls for one.

Additional Border, Box Shadow, Spacing, and Sizing groups help refine the overall shape and placement.

The module also includes Divi’s familiar Advanced tab, giving you access to settings such as Attributes, Custom CSS, Conditions, Position, Scroll Effects, Transitions, and Visibility.

The Result

With the settings in place, the result is a structured vertical navigation system with clear parent and child relationships, expandable sections, responsive behavior, active states, and styling that fits the rest of the website.

The same module can then be adapted for category navigation, knowledge bases, documentation, membership areas, dashboards, store categories, or any other layout where vertical navigation suits the content.

Who Is The Vertical Menu Module For?

The Vertical Menu module can fit a wide range of Divi projects.

• Agencies and freelancers can use it to create repeatable navigation patterns for different client requirements.
• Documentation and knowledge base sites can use expandable menus to organize larger information hierarchies.
• Membership sites and dashboards can use the Collapsible Sidebar layout to keep account navigation accessible while preserving space for the main content.
• Bloggers and publishers can use menu or taxonomy sources to organize categories and sections.
• WooCommerce stores can create vertical category structures that make larger catalogs easier to browse.

And when the navigation needs to change shape across devices, the module’s Accordion and off-canvas options give you a responsive workflow inside the same set of settings.

Build Smarter Navigation With Divi Essential

The Divi Vertical Menu module gives you a focused way to create structured vertical navigation while staying inside the Divi 5 Visual Builder. Choose where the menu content comes from, control its depth, switch between Classic List, Accordion, Collapsible Sidebar, and Flyout layouts, configure submenu behavior, add visual cues, define the mobile experience, and style each part of the navigation from one module.

As part of Divi Essential, the Vertical Menu module joins a collection of more than 109 modules, 28 extensions, 720 section layouts, 40 starter templates, and 8 pre-built websites. Divi Essential is compatible with both Divi 4 and Divi 5, so the same toolkit can support existing sites and new Divi 5 projects. The Unlimited license is regularly listed at $79 and includes unlimited website usage, one year of support and updates, and a 30-day money-back guarantee. Marketplace promotions may reduce the current purchase price.

For Divi users who regularly build sidebars, dashboards, documentation menus, category navigation, or responsive drawers, the Vertical Menu module adds a polished and highly configurable navigation workflow to the Divi toolkit.

Get Divi Essential

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

Over the course of this series, you’ve learned the core Flexbox controls, built equal-height cards with aligned buttons, explored Wrap vs. No Wrap, aligned content without spacers, reordered content for better mobile flow, applied key responsive techniques, created flexible button, menu, and link rows, switched repeated spacing from margin to Gap, and built responsive column patterns with Flexbox.

Now it’s time to bring those techniques together. In this final installment, we’ll turn the most useful lessons from the series into a practical set of best practices. These habits will help you keep your Divi 5 layouts easier to understand, more consistent across breakpoints, and simpler to maintain as content changes.

Let’s dive in.

Why Best Practices Matter In Divi 5 Flexbox

If you’ve spent years building with Divi, some older layout habits can be hard to break. Adding margins to individual modules, using extra Divider modules for spacing, writing custom CSS for equal heights, duplicating sections for different devices, or relying on fixed layout workarounds may have been useful in older builds.

Divi 5’s Flexbox Layout System gives you native controls for many of those layout jobs. Gap, Layout Direction, Justify Content, Align Items, and Layout Wrapping work at the container level to control direct children. Other controls, such as Display Order, let you adjust the behavior of individual Flex items when needed.

The goal is not to use every Flexbox setting on every layout. It is to build a clear parent-child structure, apply each control at the right level, and add responsive overrides only where the design actually needs them.

What Are The Benefits Of A Strong Flexbox Workflow?

When spacing and alignment are handled from the appropriate parent container, related elements are easier to adjust as a group. One change to a Gap, alignment, or wrapping setting can affect multiple children without requiring the same edit on every module.

You can also reduce duplicated layout structures and avoid custom CSS for many common alignment, spacing, equal-height, wrapping, and responsive ordering patterns.

Just as importantly, reusable Flexbox sections become easier to understand when you revisit them later. A Row controls its Columns, a Column controls its modules, and a Module Group controls the related items inside it.

Best Practices And Tips For Flexbox

The controls you’ve learned throughout this series become much more useful when you apply them consistently. Here are the practices worth carrying into future Divi 5 builds.

1. Use Gap For Repeated Spacing Between Related Items

One of the biggest workflow shifts in Divi 5 is moving repeated spacing decisions to the parent container. As we covered in Part 8, use Horizontal Gap and Vertical Gap when you want consistent spacing between direct child elements.

Apply Gap to the container that directly owns the items you want to space. That might be a Section, Row, Column, Module Group, or another element acting as a Flex container.

Gap creates spacing between the children instead of adding spacing to the outer edges of the group. This is especially useful when items wrap because you can control horizontal and vertical spacing from one parent.

Margin still has valid uses. Reach for it when you need outside spacing on one specific element, an intentional overlap, a one-off offset, or another effect that Gap cannot create on its own.

2. Confirm The Parent Uses Flex Before Adjusting Flexbox Controls

New Divi 5 containers use Flex as their default Layout Style, but legacy Divi 4 elements and migrated layouts may still use Block. If a Flexbox setting appears to have no effect, open the element’s Design tab, expand the Layout option group, and check the Layout Style first.

Just as important is choosing the correct container. Flexbox controls affect the direct children of the element you’re editing.

Apply them on a Row to control its Columns.

Apply them on a Column or Module Group to control the modules inside it.

Use them on a Nested Module when you want to control its nested children.

If a Gap or alignment setting is not affecting the elements you expect, ask one question first: Which element is the direct parent of the items I want to control?

3. Use Align Items > Stretch For Equal-Height Cards

When several cards sit on the same Flex line and need to share a consistent height, set Align Items > Stretch on their parent container. Stretch is the default Align Items value in Divi 5, but it is worth checking when an imported or customized layout behaves differently.

In a Row with a horizontal Layout Direction, Stretch works across the vertical cross axis. When the children’s sizing allows it, eligible Columns can expand to share the available height within the same Flex line.

This lets you avoid custom equal-height CSS and manual height values for many common card layouts.

When the Row wraps onto multiple lines, remember that each Flex line can have its own height. Stretch aligns items within their respective line rather than forcing every card across every wrapped line to match one universal height.

4. Use Space Between, Then Add Grow To Fill When Needed

For cards with a CTA that should sit near the bottom, start by making the card itself a vertical Flex container. Set its Layout Direction to Column, then apply Justify Content > Space Between.

With a Column direction, the main axis runs vertically. Space Between can keep the upper content near the top while moving the final button or CTA toward the bottom of the card.

For straightforward cards, that may be enough. When variable-length content still creates uneven internal spacing, use Grow To Fill on the Text module or Module Group that should absorb the available space.

Grow To Fill is a supporting tool, not a requirement for every card. Use it when a specific content area needs to expand so the elements below it align more consistently.

5. Build Responsive Grid-Like Layouts With Layout Wrapping + Column Class

For many card grids and repeated column patterns, one Flex Row can handle multiple lines. Enable Layout Wrapping > Wrap on the Row.

Then assign simple Column Class values such as 1/2, 1/3, 1/4, or 2/3 to the Columns inside it.

Columns remain on the same Flex line while their widths and Gap values fit within the available space. When they no longer fit, Wrap allows them to move onto additional lines while retaining their Column Class values.

This is a useful pattern for responsive card grids, feature sections, statistics, logo groups, and other layouts that need a natural one-dimensional flow across multiple lines.

6. Keep Column Class Combinations Simple

Column Class gives you plenty of flexibility, but simple fractions are usually easier to manage across breakpoints. Start with values such as 1/2, 1/3, 1/4, 2/3, or 3/4 when they suit the design.

More complex combinations can still be useful, but they also create more relationships to reconsider when the layout moves to Tablet or Phone.

Starting with the simplest structure that achieves the design makes responsive adjustments easier to understand later.

7. Use Structure Templates For Faster Responsive Column Changes

When several Columns need the same structural change on Tablet or Phone, you do not always need to edit every Column Class individually.

Switch to the target breakpoint, open the Row’s Content tab, expand the Elements option group, and click Apply Structure Template.

A Structure Template can update the Column Class arrangement for that breakpoint in one workflow. This is especially useful when a multi-column Desktop Row needs to become a simpler two-column or single-column structure on smaller screens.

Use Structure Templates when the Columns share a clear responsive pattern. If individual Columns need different sizing behavior, adjusting their Column Class values separately may still make more sense.

8. Use Fluid Gap Variables Or Reduce Gaps At Smaller Breakpoints

Spacing that feels balanced on Desktop can feel too generous after a layout wraps or stacks on Tablet and Phone. Review both Horizontal Gap and Vertical Gap as part of your responsive workflow.

You can reduce Gap values manually at individual breakpoints, but Divi 5’s Variable Generator gives you another option. Generate a fluid Gap sizing system and save the resulting clamp-based values as Design Variables.

Assign those variables to Horizontal Gap or Vertical Gap, and the spacing can scale between defined minimum and maximum values as the viewport changes.

You can also enter your own clamp() values through Divi 5’s Advanced Units when you need a custom fluid relationship.

Fluid sizing can reduce repetitive breakpoint overrides, while structural changes such as Column Class, Layout Direction, or Display Order can still be adjusted independently when necessary.

9. Reorder Content With Display Order Only When Necessary

A Desktop layout may not always produce the best visual sequence on a smaller screen. Divi 5’s Display Order control lets you visually reposition Flex items at specific breakpoints, including by using values such as -1 to move an item earlier.

Use Display Order selectively. Start with a source order that already makes sense as a reading and interaction sequence, then add responsive ordering only where the visual hierarchy genuinely benefits from it.

Remember that visual Flexbox reordering does not necessarily change the document or keyboard navigation order. If interactive elements are reordered visually, test the live page with the keyboard to make sure focus still moves in a logical sequence.

10. Use Nested Modules For Tight Content Relationships

For closely related elements, such as a heading followed by supporting text, Nested Modules can give you another way to control their internal layout without introducing an additional outer container.

Open the parent module’s Content tab, expand the Elements option group, and add the child module inside it.

Once nested, open the parent module’s Design tab and use its Layout controls to manage the children. For example, a small Vertical Gap can control the relationship between a Heading and nested Text module from one place.

Nested Modules are useful when the elements genuinely belong together. Avoid unnecessary nesting when a simple Column or Module Group already provides the structure you need.

11. Start With A Logical Structure, Then Refine Across Breakpoints

Build the clearest source-order layout first. Keep the content hierarchy logical, the parent-child relationships understandable, and the initial Flexbox settings as simple as possible.

Then review the layout at Tablet and Phone and add responsive overrides only where the smaller viewport needs different behavior.

Fluid values from Advanced Units or the Variable Generator can reduce the number of breakpoint-specific adjustments needed for spacing and typography. Structural settings, such as Column Class, Layout Direction, Layout Wrapping, or Display Order, should still be adjusted when the layout needs a genuine structural change.

This keeps responsive behavior intentional instead of accumulating overrides simply because they are available.

12. Test Every Layout With Real, Variable-Length Content

Placeholder copy can hide layout problems. Short headlines, long headlines, multi-line descriptions, different button labels, and varied image dimensions can all expose wrapping, alignment, and spacing issues.

Test your Flexbox layouts with realistic content of different lengths before finalizing them. Pay particular attention to card heights, CTA alignment, wrapping, mobile stacking order, and whether longer text changes the intended hierarchy.

When variable content creates extra space inside cards, use Grow To Fill strategically on the element that should absorb that space.

Testing content variations early is much easier than correcting the layout after real content has already been added across the site.

13. Use Advanced Units And Design Variables To Reduce Responsive Overrides

Fixed values are not always the best choice for spacing and typography across very different viewport sizes. Divi 5’s Advanced Units support functions such as clamp(), while the Variable Generator can create fluid sizing systems for you.

For typography, you can use the Variable Generator’s Font Size > Fluid Scale (CSS Clamp) workflow to create a reusable type scale that grows between defined minimum and maximum values.

Store reusable sizing values as Design Variables so the same system can be applied consistently throughout the site.

Fluid values are especially useful for settings that should scale gradually. Breakpoint-specific values are still useful when you need an intentional structural change rather than continuous scaling.

14. Understand When Align Content Actually Works

Align Content is different from Align Items. Align Items controls the items inside each Flex line, while Align Content controls how multiple Flex lines are distributed along the cross axis.

For Align Content to have a visible effect, the layout generally needs three things:

1. Layout Wrapping must be set to Wrap or Wrap Reverse.
2. The container must contain multiple Flex lines after the items wrap.
3. The container must have extra space available along the cross axis, such as space created by a defined height or minimum height.

If the content stays on one Flex line, or the container simply grows to fit its content, changing Align Content may appear to do nothing.

When you need to distribute multiple wrapped lines inside a taller container, create the necessary cross-axis space first, then choose an Align Content value such as Start, Center, Space Between, or Space Evenly.

15. Preserve Logical Source Order For Accessibility And Maintainability

The source order of your elements still matters when using Flexbox. Whenever possible, structure content in a sequence that makes sense without relying on visual reordering.

Place headings before the content they introduce, keep related controls together, and make sure interactive elements follow a logical sequence.

Display Order is useful for targeted responsive presentation changes, but it changes visual placement rather than automatically rewriting the underlying document order.

For small visual adjustments where the source sequence still makes sense, that can be appropriate. If you find yourself using many Display Order values to create an entirely different logical sequence, reconsider whether the underlying structure should change instead.

After reordering interactive content, test the published page with the Tab key and confirm that the focus sequence still makes sense relative to what visitors see.

16. Know When CSS Grid Is The Better Layout System

Flexbox is especially useful when content should flow primarily in one direction, distribute itself along an axis, wrap naturally, or reorder responsively.

CSS Grid is often the better choice when the layout depends on precise two-dimensional relationships between both rows and columns.

Use Grid when you need patterns such as irregular grid maps, precise row and column placement, spanning across multiple tracks, intentional offsets, or layouts where elements need to maintain defined relationships in both dimensions.

The goal is not to force every design into Flexbox. Divi 5 gives you both layout systems, so choose the one that best matches the structure you’re trying to create.

Putting It All Together

The strongest Divi 5 Flexbox layouts usually come back to a few core ideas: understand the parent-child relationship, use Gap for repeated internal spacing, use Stretch and Space Between where alignment needs it, add Grow To Fill only when a specific element should absorb available space, and combine Layout Wrapping with Column Class for flexible multi-line structures.

Use Structure Templates when multiple Columns need the same responsive change, use fluid Design Variables where values should scale continuously, and keep the underlying source order logical before adding visual reordering.

Most importantly, use Flexbox because it matches the layout problem, not simply because the controls are available. When a design needs true two-dimensional placement, switch to CSS Grid.

This brings our Mastering Flexbox series to a close. You can start again with Part 1, revisit the examples throughout the series, and apply the techniques to your own layouts.

Once Gap, parent-level controls, responsive structure, and clear Flexbox hierarchy become part of your normal workflow, complex layouts become easier to understand, adjust, and reuse.

The post Part 10 Of Mastering Flexbox: Best Practices & Helpful Tips appeared first on Elegant Themes Blog.