Posts

Creating Custom SVGs with Divi AI Agents

Image
Divi AI Agents can create custom SVG graphics from plain-language instructions. Describe an icon, divider, or badge, specify its style and colors, and ask the agent to add it to your layout as an editable SVG Module. In this tutorial, we’ll create a decorative leaf, refine it in the same conversation, and cover the prompt details that help preserve your design as you make changes. What An SVG Is And Why Icons Use It SVG stands for Scalable Vector Graphics. A JPEG stores an image as a grid of colored pixels. Enlarge it enough, and those pixels become visible. An SVG describes shapes and paths with coordinates, allowing the browser to render vector artwork at different sizes without pixelation. That makes SVG useful for logos, icons, dividers, and badges. Simple vector artwork can scale across screen sizes and use colors defined in the markup or through styling. Divi 5 ’s SVG Module accepts pasted SVG code or an uploaded SVG file. Its Design tab includes Fill and Stroke contro...
Post a Comment
Read more

Components Inside Of Components Using Slots

Image
A resource section can share one introduction across several pages while presenting different content beneath it. Reusing both the section and its cards lets you maintain those designs separately. With Components and Slots in Divi 5 , you can combine those two levels of reuse. Put a card Component inside a Slot belonging to a larger section Component. The section controls its shared structure, the card controls its own shared design, and each page instance supplies its content. We’ll build a pine-green resource collection with peach cards, oversized serif headings, and editorial images. Its first instance contains two resource cards. Its second contains a checklist card beside a newsletter block. All three cards remain connected to one card source. How Components Inside Slots Work A Component has a saved source and connected instances. The source defines the settings those instances share. A Slot provides a place for an instance’s own child elements within that shared ...
Post a Comment
Read more

Nested Variables, Variable Math & Variable Combinations for Divi 5

Image
I’m excited to introduce a new level of flexibility for Divi 5 variables: combine them, nest them within other variables, and use them directly in calculations within your settings. 🎉 Create spacing relationships that stay connected as your design changes. Build fluid sizes from shared minimum and maximum values. Mix reusable text, dynamic content, and your own words in the same field. This expands on Design Variables and works alongside Relative Colors , turning reusable values into the building blocks of more connected designs and content. Let’s take a look at how it works. 👇 Create Design Relationships With Variable Math A number variable can now be part of a calculation. Insert your variable into a supported number field, then combine it with other values using addition, subtraction, multiplication, or division. Imagine a section with padding controlled by a Spacing variable. You want an image inside that section to extend beyond its edge. Use the same variab...
Post a Comment
Read more

Best Practices For Steering Divi AI Agents To Get It To Do What You Want

Image
Divi 5 has a new way to build pages in the Visual Builder: Divi AI agents . Instead of working through settings panels one change at a time, you describe what you want in a conversation, and the agent carries it out on the page. It can add modules, update styles, work with your design system, and handle multi-step tasks while you watch. Clear direction helps it produce a useful first pass. Name the outcome, identify the target, and explain what should stay unchanged. Without that guidance, the agent has more decisions to infer, and the result may need more cleanup. In this post, we’ll explain which controls shape the work, then walk through ten best practices for steering Divi AI agents toward the result you have in mind. What Are Divi AI Agents? Divi AI agents brings a conversational assistant into the Divi 5 Visual Builder. You describe what you want, and the agent can add, edit, move, and style elements, update design settings, and coordinate changes across the layout. It...
Post a Comment
Read more