The Tech Zone

There’s so much to talk about in this Divi 5 feature update! We harmonized field options across all form-based modules, adding additional styling options for form elements such as radio buttons and checkboxes. In addition to hover editing, we added new editing modes for field-based pseudo-classes, such as :checked and :focus , giving you full control over your form field design. New input, checkbox, and radio groups now support presets , making it easy to style all your forms using Divi 5’s modular design system. Finally, we added a new Contact Form 7 module that lets you render and style forms with Divi’s full design suite. It’s the first of many new modules to come! There’s much to explore, so let me jump into the builder and give you the full tour. 👇 New Form Field Options We updated all form-based modules, harmonizing the available design options and adding new options to customize different field types. We cleaned up the randomness and added hundreds of new options in ...

Divi 5 makes it easy to build clean, visually engaging layouts with more structure and variety. In this free pack, you’ll get 4 Styled Grid Layout Designs that are perfect for landing pages, portfolios, featured content sections, editorial layouts, business pages, and more. Each one gives you a polished starting point with strong visual rhythm, layered imagery, and modern spacing built right in. Import a layout, replace the content, and you’re ready to go. Preview Here’s a quick look at the 4 Grid Styles included in the pack. The download is further down the post. Download 4 Grid Styles For Divi 5 Get all 4 layouts 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. I...

Building a new section on a site with an established design system is where Divi 5 ‘s Command Center becomes especially useful. On a site without presets, creating a new section usually means two separate tasks. First, you build the structure. Then you open the settings panel and apply the design choices manually. On a site with a well-defined design system, many of those decisions are already saved as presets. The Command Center’s queueing system lets you build the structure and attach presets as you go. You can do it all from the keyboard. Instead of creating each element and assigning presets one by one, you can queue the entire section and run it in a single pass. In this tutorial, we’ll add a dark CTA section to the bottom of a homepage. It will use a centered single-column layout with a heading, supporting text, and a button. The section will use existing presets and be built using a single command queue. Before You Build Before opening the Command Center, do two quick thin...

Links are the connective tissue of the web. When they are built correctly, they help users move through content, give search engines clearer signals about page relationships, and provide assistive technologies with predictable navigation. When they are built poorly, they can create friction for users and reduce the clarity of your page structure. Divi 5 gives you two distinct ways to make elements clickable. Most modules include the Link Option Group, which can make an entire module or container clickable. The newer Link Module also uses Divi’s link settings, but it outputs a real <a> element in the markup. That gives you a lighter way to add semantic links without using a Text module or styling a full Button module. This post looks at how those two approaches differ, where each one makes sense, and why using them together is often the most practical pattern. The Simple Difference In Divi 5, “clickable” can mean two different things, and they are not the same. A semantic ...

Divi 5 gives you more than one way to work. You can click through settings panels and modals when you want fine-grained control. You can use keyboard shortcuts for speed when performing smaller, repeatable actions. The Command Center adds a third option. It lets you trigger more complex builder tasks at keyboard speed, including navigation, context changes, and builder actions, without relying on a long list of dedicated shortcuts. You open it, start typing, and run the matching command you need. That simple shift changes the workflow more than it might seem at first. Instead of hunting through the interface, you can move directly to the page, panel, state, or action you want from one searchable input. What Is The Command Center? Subscribe To Our Youtube Channel The Command Center is a searchable action bar built into the Divi 5 Visual Builder. You can open it from anywhere in the builder by pressing CMD+K on Mac or CTRL+K on Windows. From there, type what you want to do, let...

Badges are a small part of web design, but they solve a very specific problem well. They add quick context without interrupting the rest of the layout. You see them on product cards, pricing tables, documentation pages, and feature lists because they can communicate something useful in very little space. Labels like New , Sale , Beta , or Popular are simple, but they help guide attention and clarify meaning at a glance. That is the real value of a badge. It does not carry the whole design. It adds a clear visual signal exactly where it is needed. The good news is that this kind of detail is easy to build in Divi 5 . You do not need a plugin or a workaround to create a clean text badge. With the right mix of text styling, spacing, background, and sizing, you can build one quickly and make it fit naturally into the rest of your site. What Are Text Badges? Text badges are short, styled labels that add context without taking up much space. You will see them clipped to product cards, t...