Posts

How to Use Divi AI Agents Rules

Image
Keeping a website consistent means carrying the same brand voice, design choices, and layout conventions into each new task. Repeating those instructions in every AI prompt adds work, especially when you are building several pages for the same client. Divi AI Agents let you save that guidance as Rules in the Divi 5 Visual Builder. You can define standards the agent should follow, choose when they apply, and reference other Rules or site content. Here is how to set them up and keep them useful as your site develops. From Individual AI Tasks To Connected Workflows When Divi AI launched in August 2023 , it brought text and image generation into the Visual Builder. Code generation followed, expanding what you could create without leaving the page. Those tools later expanded to generate layouts and full websites. Instead of starting every section manually, you could use AI to create a starting point and continue editing it in Divi. The introduction of Divi AI Agents brings these ...
Post a Comment
Read more

Filtering Loops With Custom Fields In Divi 5

Image
The Loop Filter Modules in Divi 5 let visitors search and refine content directly on your website. Beyond categories and tags, you can connect filters to custom fields for details such as price, bedroom count, and location. In this tutorial, we build a property directory with a Loop Builder listing grid and a filter form beside it. Visitors can search by keyword and use five ACF fields to narrow the listings by maximum price, city, property type, bedrooms, and amenities. Along the way, we cover numeric comparisons, automatically generated options, and the extra care needed when filtering multi-value fields. How The Loop Filter Modules Work Divi 5’s Loop Builder lets you repeat an element for each result in a query. For this directory, we design one property card, query the Properties post type, and use Dynamic Content to populate each repeated card. The loop defines the starting content and layout. The Post Filter Module gives visitors controls to refine those results withou...
Post a Comment
Read more

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