Posts

Divi Product Highlight: Divi Sensei Icons

Image
Divi 5 includes a native icon system that makes icons easy to add and style throughout the Visual Builder. For projects that need a much larger selection, Divi Sensei Icons by Divi Sensei expands that same workflow with thousands of additional choices. Built specifically for Divi 5, the extension adds more than 14,000 icons directly to Divi’s native icon picker, with more than 30,000 variations when its thin, regular, and bold line weights are counted. The library combines familiar open icon collections with custom, industry-focused sets designed for more specific business use cases. In this Product Highlight, we’ll look at what Divi Sensei Icons includes, how its native Divi 5 integration works, how the library stays manageable at this scale, and how to start using the icons inside the Visual Builder. Why A Larger Icon Library Can Be Useful Icons are a practical way to add visual cues without adding more copy. They can help visitors scan a service grid, distinguish fe...

Using Aspect Ratio To Design Cleaner Loops in Divi 5

Image
A blog grid can look perfectly aligned while you’re designing it with placeholder content, then fall apart as soon as real posts start loading in. One author uploads a wide screenshot, another uses a portrait photo, and somebody else adds a square image from the brand library. The card design stays the same, but the image proportions do not. Divi 5’s Aspect Ratio and Framing settings solve that directly inside the builder. You define the frame once on the card, decide how images should fill it, and every featured image pulled into the loop follows the same visual rules without changing the original files in your Media Library. We’ll build the blog loop with the Loop Builder first, then apply the image settings that keep the finished grid consistent. Why Loop Images Break A Grid Nobody uploading a featured image is necessarily thinking about the proportions of your archive grid. A writer grabs the screenshot that illustrates their point, a contributor sends a port...

What Is A Theme Builder? Site Building With WordPress

Image
You build the homepage first. Then an about page, then a contact page. By the third one, you have the rhythm of it: drop in a section, add your content, style it, publish. One page, one design. 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 stall — not because it’s hard, but because it’s 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 rat...

Build Grids Visually With Divi 5’s New CSS Grid Editor (New Feature)

Image
Divi 5 already gives you a complete CSS Grid system for building two-dimensional layouts inside the Visual Builder. You can define columns and rows, control gaps and track sizes, use premade grid structures, and create Grid Offset Rules for layouts where certain items need to span or move differently. 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-dimensi...