Posts

How To Use :focus And :checked Editing In Divi 5

Image
Interactive states can make a form feel more polished, more responsive, and easier to use. The problem is that styling those states usually means writing custom CSS, finding the right selectors, and testing everything on the front end. Divi 5 changes that with new pseudo-class editing modes for form fields. You can visually customize states like :focus and :checked directly inside the builder, using the same design controls you already use for the default state. In this tutorial, we’ll build a modern project inquiry form and use both states to add visual feedback across text fields and checkbox selections. A focused field will become easier to track while the visitor types, and checked options will respond clearly when selected. A Quick Look At :focus And :checked Before jumping into the build, it helps to understand what these two states do. Both live inside Divi 5’s pseudo-class editing modes. You can access them by hovering over a supported design option and clicking the sm...
Post a Comment
Read more

Everything You Need To Know About Variable Fonts In Divi 5

Image
Variable fonts have been around for years, but most page builders still treat them like static fonts. You get a font picker, a weight dropdown, and maybe an italic toggle. The deeper controls these fonts are built for never make it into the visual workflow. Those deeper controls are what make variable fonts worth using. A variable font can give you continuous control over weight, width, slant, optical size, grade, roundness, shape, and other axes depending on the typeface. Instead of choosing from a few fixed styles, you can fine-tune the font to fit the exact size, layout, and mood of the design. Divi 5’s Variable Fonts update brings those controls into the Visual Builder. When you choose a supported Google variable font, Divi reads the font’s available axes and displays the matching controls in the relevant text option group. No custom CSS. No guessing which axes the font supports. No limiting a variable font to a basic weight dropdown. In this guide, we’ll look at what variable ...
Post a Comment
Read more

Exploring Divi 5’s New Text Fill Options (Create Text Gradients & Image Masks)

Image
Gradient and image-filled headings are everywhere now, from SaaS landing pages to bold editorial hero sections. They look polished, but they used to be awkward to build. You either copied custom CSS, saved the text as a flattened image, or rebuilt the effect every time the wording changed. Divi 5 now handles this visually with its new Gradient Options and Text Effect Settings . Gradients are easier to manage, gradients can be saved as variables, and text can now be filled with gradients or images directly inside the builder. The result is a more flexible text-design workflow. You can create gradient headings, image-filled editorial type, transparent outlined text, and reusable brand gradients without turning your headline into a static image. In this post, we’ll look at how Divi 5’s new text fill options work, how to use gradient and image fills, when to add text strokes, and how Gradient Variables help you reuse the same effect across your site. What Are Text Fills In Divi 5? A ...
Post a Comment
Read more

7 Knockout Grids For Divi 5 (Free Download!)

Image
Divi 5 makes it easy to create structured layouts with strong visual rhythm and bold image placement. In this free pack, you’ll get 7 Knockout Grids for Divi 5 that are perfect for landing pages, hero sections, portfolio layouts, real estate websites, service pages, design studios, travel sections, editorial layouts, and more. Each design uses grid-based composition, image blocks, text panels, color contrast, and intentional negative space to create polished sections that feel modern, layered, and easy to customize. Import a section, replace the content, update the images, and you’re ready to go. Preview Here’s a quick look at the 7 Knockout Grids included in the pack. The download is further down the post. Download 7 Knockout Grids For Divi 5 Get all 7 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder. Download the Files Download F...
Post a Comment
Read more