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.

That same editorial feeling is possible on the web, but it depends on having the right controls in the right place.

Divi 5 now includes a broader set of text styling options directly inside the builder. You can create multi-column text, add drop caps, control paragraph spacing, refine line wrapping, enable hyphenation, use small caps, and set vertical text direction without splitting content into extra modules or writing custom CSS.

In this tutorial, we’ll show you how to use Divi 5’s new text styling options to create magazine-style blog posts that feel more structured, readable, and editorial.

What Makes Blog Text Feel Like A Magazine Page?

Pick up a magazine, and the page already tells you what to read first. That happens before a single word fully registers. The headline, subheading, body text, pull quotes, captions, and section markers all create a visual path.

Image by Content Pixie On Unsplash

The headline usually carries the most visual weight. The subheading sits below it with a different size, weight, or rhythm. Body text often runs in narrower columns so the reader’s eye does not have to travel too far across the page. Shorter lines make it easier to return to the next line without losing place.

Drop caps open longer sections and give the first paragraph a stronger entry point. Paragraph spacing controls the pace of the page, giving readers natural stopping points without making the article feel disconnected.

These details do not just make a page look editorial. They help the page read better. Each decision supports the next, and the result feels more intentional than a long block of default text.

Why These Details Matter For Readability

Long-form blog posts ask more from readers than short updates or landing page copy. Before they commit, readers scan the page. They look for structure, hierarchy, section breaks, and signs that the content will be easy to follow.

Clear differences between the headline, subheadings, body copy, quotes, and labels help readers orient quickly. Line length affects how comfortably they move through a paragraph. Paragraph spacing gives the eye clean return points. Drop caps and small caps create editorial moments without needing extra design elements.

The goal is not to make every blog post look like a printed magazine spread. The goal is to borrow the parts that help digital content feel easier to enter, scan, and finish.

Introducing Divi 5’s New Text Styling Options

Divi 5 adds more text styling controls directly inside the Design tab, alongside the font, size, color, alignment, and spacing settings you already use.

These controls include column counts, drop caps, text direction, stroke position, capitalization, paragraph and list spacing, hyphenation, and line wrap styles. They are available across relevant title and body text option groups, so you can shape different text types independently.

That matters for blog layouts. A heading can use balanced wrapping while body text uses default wrapping. A paragraph can flow through two columns while a blockquote stays full width. A section label can use small caps while the main body stays in sentence case.

Instead of treating the text as one large block, Divi 5 lets you style each part of the article with more intention.

7 Ways To Style Blog Posts Like A Magazine

The controls below are most powerful when used together. You do not need to apply every setting to every post, but each one solves a different editorial problem.

1. Set Up Multi-Column Body Text

Long lines can make body text feel heavier than it needs to be. When a paragraph stretches across a wide layout, the reader’s eye has to travel farther to the right and then find the next line again on the left.

Multi-column text helps by shortening the line length. The same content becomes easier to scan because the reader’s eye travels a shorter distance before returning to the next line.

In Divi 5, you can create columns from a single text control. Open the relevant text option group and enter a value in the Text Columns field. The paragraph divides immediately without extra containers or duplicate modules.

The useful part is that each text type can have its own column setting. A long paragraph can use two columns, while a blockquote stays full width. A heading can stay in one column, while the body copy beneath it flows into two or three. Divi 5 includes column controls for multiple text types, including:

• Link Columns: For standalone links.
• Unordered List Columns: For bulleted lists.
• Ordered List Columns: For numbered lists.
• Heading Text Columns: For heading levels H1 through H6.

Use columns for longer passages, editorial intros, feature-style articles, and blog posts where the text width feels too wide. On smaller screens, reduce the column count so the layout stays readable.

2. Add Drop Caps To Open Sections

Drop caps give a long section a stronger opening. The enlarged first letter creates a visual entry point, helping readers understand where the next thought begins. In Divi 5, you can apply a drop cap by adjusting the Drop Cap Line Size value in the body text settings.

If you are unsure where to start, try a drop cap that spans three lines. That gives the opening letter enough presence without overwhelming the paragraph. After the line size is set, adjust the supporting settings:

• Drop Cap Spacing: Controls how close the body text sits beside the enlarged letter.
• Font: Lets the first letter use a different typeface if the design needs contrast.
• Font Weight: Adds or reduces visual mass.
• Text Color: Lets the drop cap use an accent color.
• Capitalization, Font Style, And Text Shadow: Add finishing details when the drop cap needs more character.

Drop caps work best at the beginning of substantial sections. Avoid using them on every short paragraph. The more often they appear, the less special they feel.

3. Adjust Paragraph Spacing

Line height and paragraph spacing are related, but they do different jobs. Line height controls the space between lines inside the same paragraph. Paragraph spacing controls the gap between separate paragraphs.

In Divi 5, Paragraph Spacing is handled inside the text option group. It applies spacing within the text content itself rather than pushing the entire module around from the outside.

That makes it useful for long-form posts. The spacing travels with the text and keeps paragraphs from collapsing into one dense block.

The default unit is em, which ties the spacing to the font size. Larger text gets more breathing room, and smaller text stays tighter. You can also use units such as px, %, rem, vw, vh, vmin, vmax, or functions like calc(), min(), max(), and clamp().

clamp() is especially useful for fluid editorial layouts. It lets you set a minimum, preferred, and maximum value so spacing can respond to screen size without becoming too tight or too loose. For a full workflow, read our guide on building fluid spacing ramps with clamp() in Divi 5.

4. Choose The Right Line Wrap Style

A heading that breaks awkwardly can make a layout feel unfinished. A final line with one lonely word can interrupt the rhythm of a paragraph. Both issues come down to how the browser wraps text. Divi 5’s Text Line Wrap Style gives you three options.

• Default: Uses the browser’s normal wrapping behavior.
• Balanced: Distributes short text more evenly across lines, which is useful for headings.
• Pretty: Helps avoid awkward last-line endings, especially in body text.

Each text type has its own line wrap controls. Body text, links, unordered lists, ordered lists, blockquotes, and heading levels H1 through H6 can be handled separately.

For editorial layouts, Balanced usually works well on headings because uneven heading breaks are highly visible. Pretty can work well on body copy where an orphaned word at the end of a paragraph disrupts the reading rhythm.

Use these settings selectively. Body text and headings often need different wrapping behavior.

5. Enable Hyphenation In Narrow Columns

Columns improve line length, but they also make each line narrower. That can create problems when the content includes long technical terms, URLs, product names, or compound words.

Hyphenation helps those long words break at more natural points instead of overflowing the column or creating awkward gaps. Divi 5 includes a Text Hyphenation toggle for different text types, including body text, links, lists, blockquotes, and headings.

The separation is useful. You can enable hyphenation for body copy inside a narrow column while leaving headings untouched.

That distinction matters. Body text may benefit from cleaner word breaks, but a hyphenated H1 can interrupt the headline’s impact. For most magazine-style layouts, turn hyphenation on where long-form reading needs help and keep it off where display typography needs to stay intact.

6. Apply Small Caps For Editorial Detail

Small caps are useful for bylines, section markers, metadata, labels, and short editorial cues. They feel structured without carrying the same visual weight as full uppercase text. Print publications often use small caps when they want a line of text to feel deliberate without competing with the headline above it.

In Divi 5, open the relevant body text or heading text option group in the Design tab. Then choose Small Caps from the Text Capitalization controls.

The capitalization row also includes other options:

• All Caps: Converts text to uppercase for maximum emphasis.
• Capitalize: Capitalizes the first letter of each word.
• Lowercase: Converts all text to lowercase.
• Small Caps: Displays lowercase letters as smaller uppercase forms.
• All Small Caps: Applies small-cap styling across the full line.

Use small caps sparingly. They work best on short text, not long paragraphs.

7. Control Text Direction For Sleek Headings

Magazine layouts often use side labels, vertical markers, and directional text to create structure around the main article content. Divi 5’s Text Direction controls make that kind of treatment easier to build visually. For this example, the heading and body text sit in separate columns.

Divi 5 includes three text direction options:

• Standard Horizontal: Text flows normally across the line.
• Vertical Right To Left: Text runs vertically, with new lines starting to the left.
• Vertical Left To Right: Text runs vertically in the opposite direction.

Standard Horizontal is the default.

Vertical Right To Left creates a vertical heading treatment.

Vertical Left To Right creates the alternate vertical flow.

Vertical text works best for short headings, section labels, dates, category markers, or editorial side notes. For anything longer, check readability carefully and adjust the layout at smaller breakpoints. On phones, switching back to Standard Horizontal is often the cleaner choice.

Custom Typography Without Leaving The Divi 5Builder

Magazine-style blog design is not about adding decoration for the sake of it. It is about giving readers a clearer way into the content.

Columns control line length. Drop caps create strong openings. Paragraph spacing sets rhythm. Line wrap styles clean up awkward breaks. Hyphenation helps narrow columns behave better. Small caps add editorial structure. Text Direction creates vertical markers and side labels.

Divi 5 brings these controls into the Visual Builder, inside the same Design tab where you already manage fonts, colors, and spacing. That means you can shape long-form content without splitting every idea into a separate module or reaching for custom CSS.

Use the settings with restraint, combine them where they support the reading experience, and your blog posts can feel more editorial without becoming harder to manage.

The post How To Create Magazine-Style Blog Posts With Divi 5’s New Text Styling Options appeared first on Elegant Themes Blog.

Each design uses oversized quote marks, strong typography, portrait imagery, color blocks, layered composition, and clean spacing to turn simple quotes into polished page sections. Import a section, replace the quote and author details, update the imagery, and you’re ready to go.

Preview

Here’s a quick look at the 5 Large Quote sections included in the pack. The download is further down the post.

Download 5 Large Quotes For Divi 5

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

Download the Files

Download For Free

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

DOWNLOAD

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

What’s Included (6 Exports)

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

Styled – Large Quotes Section 1 to 5 (5) → Five fully styled quote section layouts with oversized quote marks, testimonial text, author details, portrait imagery, bold color treatments, layered content blocks, and clean spacing that you can use as-is or customize.

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

How To Use The Large Quote Sections

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

1. Import Sections Into The Divi Library

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

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

2. Add A Large Quote Section To Any Page

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

Click Add From Library and select one of your Large Quote sections.

3. Swap The Quote Content

Once the section is on the page, replacing the placeholder content only takes a few clicks. Start by updating the quote, author name, role, company name, testimonial details, supporting text, and any short labels or captions so the section matches your website and message.

Then swap in your own portrait image, client photo, founder image, team member photo, brand visual, or supporting imagery as needed.

Because these sections rely on large quote marks, portrait placement, text alignment, and strong visual hierarchy, it’s best to replace content one area at a time. This helps preserve the balance between the quote, image, background color, author details, and negative space as you customize the design.

If your new quote is much longer or shorter than the original, review the layout immediately after editing. Large quote sections can change quickly when text wraps differently. Adjust text size, line height, spacing, module width, or image placement as needed to keep the section readable and balanced.

4. Adjust Styles (Optional)

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

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

To refine the visual styling, open the section, row, column, group, image module, or quote element you want to adjust and use the Design tab to tweak Background, Border Radius, Box Shadow, Sizing, Spacing, Filters, and Position settings.

If your section uses oversized quote marks, cropped portraits, color blocks, layered image areas, split layouts, or high-contrast backgrounds, keep those relationships in mind as you edit so the layout remains polished and easy to read.

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

Tips For Effective Large Quote Sections

Large quote sections work best when the testimonial feels easy to read and visually important. Use these quick tips to keep your sections polished, credible, and easy to customize.

Keep The Quote Focused

Large quote layouts work best with concise testimonials. Choose a quote that communicates one strong idea, result, reaction, or benefit instead of trying to include every detail.

Make The Quote Easy To Scan

Oversized typography can create impact, but readability still matters. Use clear line height, balanced text width, and enough spacing around the quote so visitors can read it quickly.

Use Portraits With Purpose

Portraits can make a testimonial feel more personal and credible. Use images that support the quote without distracting from the message, and check that the crop works well inside the layout.

Balance Quote Marks With The Content

Large quote marks can become a strong design element. Keep them visually connected to the testimonial while making sure they do not overpower the actual message.

Check The Layout On Mobile

Large quote sections can change noticeably on tablet and phone screens as text wraps and images stack. Review your layout on smaller devices to ensure the quote remains readable, portrait images crop well, spacing feels balanced, and author details stay clear.

Start Building In Divi 5 Today!

These 5 Large Quote sections give you a fast way to build bold testimonial and quote sections for landing pages, service pages, case studies, creator websites, personal brands, agency sites, portfolios, and more. Swap in your quote, add your author details, customize the styling if needed, and you’ll have a polished testimonial section ready in minutes with Divi 5’s Visual Builder.

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