Posts

How To Create A Responsive Editing Workspace For Small Screen Breakpoints In Divi 5

Image
Switch the canvas to Phone view and the page becomes a narrow column, while the builder panels keep their existing size and position. Depending on your setup, the settings panel can take up as much space as the layout you’re editing. For a quick check, that may be fine. You switch breakpoints from the top bar, scan the layout, and continue building. A dedicated responsive editing session involves more adjustments, though, and the panel arrangement that works for a full-width canvas may be less convenient at phone width. Divi 5’s Workspaces let you rearrange the builder for this kind of work and save that setup for next time. Below, we’ll create a Phone Editing workspace and explain the reasoning behind each choice, so you can adapt it to your screen and workflow. Why Create A Workspace For Responsive Editing? Divi 5 stores your builder arrangement as a Workspace you can return to whenever you need it. Panel positions, visible toolbar controls, and builder view p...
Post a Comment
Read more

The Beauty Of Divi 5’s Unique Take On Class-Based Design

Image
A growing website is easier to maintain when repeated styles share a common source. CSS classes support that approach by letting multiple elements use the same style rules. Change a shared rule, and the elements using it can update together. Divi 5 brings that principle into the Visual Builder through a connected design system . Design Variables provide reusable values, presets organize shared settings, and the Preset Manager gives you a central place to maintain them. Composable Settings and Nested Option Presets extend those connections to the individual parts inside modules. Let’s look at how these features work together and how they compare with a class-based CSS workflow. What Is Class-Based Design? A CSS class lets you target multiple elements with shared style rules. For example, a .primary-button rule might define a background color, padding, and font weight. Buttons using that class share those declarations without needing a separate copy on each element. Updatin...
Post a Comment
Read more

Exploring All 200+ Of Divi’s AI Agents Tools

Image
Divi AI agents use purpose-built tools to work with your layouts, design settings, and WordPress content. A single request can involve several of them: reading the page structure, locating the right modules, changing their settings, and checking the result. You do not need to memorize the catalog to use the feature. Understanding its main tool groups, however, helps you write clearer requests and see what the agent is doing. Building on our introduction to Divi AI agents , this guide explores the tools available in Divi 5 , their risk labels, and practical ways to use them. An overview of the tool catalog shown in this post, grouped by risk level. What Is An Agent Tool? A tool is a named operation the agent can use, such as reading a module, creating a preset, or moving a page to Trash. Its description and required inputs tell the agent what it does and what information it needs. Open the Tools catalog in the AI chat interface to browse or search the available operations. For e...
Post a Comment
Read more

9 Timeline Module Layouts For Divi 5 (Free Download!)

Image
A company history, project roadmap, or service process is easier to follow when each milestone has a clear place on the page. This free pack gives you 9 Timeline Module designs for Divi 5 , ready to import and customize with your own content. Some of the designs may look familiar. Our earlier 11 Timeline Designs For Divi 5 collection was created before Divi had a native Timeline Module. This pack revisits those designs, with nine versions built using the Timeline Module . You get familiar starting points with a structure designed specifically for timelines. Below, you can preview the collection, download the files, and learn how to replace the content and adapt a design to your site. Preview Here’s a look at the nine Timeline Module designs included in the pack. Choose the one that best suits your content, then make it your own. The download is further down the post. Download 9 Timeline Module Designs For Divi 5 Download the free pack below and unzip it on your computer. Y...
Post a Comment
Read more