Posts

How To Create Tooltips With Divi 5

Image
Clean pages and informative pages often pull in opposite directions. Add every detail a visitor might need, and the layout starts to feel crowded. Remove too much, and visitors may not have enough context to understand what they are looking at or what to do next. Tooltips sit right in that gap. They let you keep the page clean while still making extra context available when someone needs it. Divi 5 now includes a dedicated Tooltip module that makes this workflow native. You can add a tooltip to an icon, button, text element, pricing feature, image, or any other element that needs a little more explanation. The tooltip stays tied to its parent element, and you control the trigger, movement, position, arrow, timing, content, and styling visually. In this tutorial, we’ll look at what tooltips are, where they work best, and how to create them with Divi 5’s Tooltip module. What Are Tooltips? Screen space is limited, and not every detail needs to sit directly on the page. A tooltip is...
Post a Comment
Read more

Creating Color Variations From Brand Colors In Divi 5

Image
A client hands you a logo, maybe a short brand guide, and a few approved hex codes. You open Divi 5 , start building in the Visual Builder , and quickly realize the issue is not the layout. It is color variation. A brand color on its own is rarely enough for a full website. You need lighter versions for backgrounds, darker versions for hover states, muted versions for borders, and transparent versions for overlays or shadows. Guessing those values by eye can make the design feel inconsistent fast. Design Variables let you store reusable colors in Divi 5, but the Color Scale Generator inside Divi 5’s Variable Generator helps you create the supporting colors first. Starting from one source color, it can generate tints, shades, tones, and transparencies that stay relative to the original brand value using relative HSL filters . This walkthrough covers that exact workflow: taking the brand colors you already have and turning each one into a usable Color Scale in Divi 5. If you are s...
Post a Comment
Read more

How To Use Text Stroke, Text Fill, And Variable Fonts Together In Divi 5

Image
Variable fonts , Text Fill , and Text Stroke are three different typography controls in Divi 5 . The font controls the shape of the letters. The fill controls what appears inside them. The stroke controls the edge. You can use each one on its own, but they become more powerful when you combine them. A variable font can make a heading thick enough for a gradient to show clearly. A transparent fill and stroke can turn a word into a hollow outline. A wide, heavy letterform can hold an image pattern without losing readability. There is no single recipe. Each design below uses the same three ingredients differently. The first layers outlined and solid text around a cutout photo. The second uses a gradient-filled number with a light stroke. The third fills a full-width heading band with an image pattern. Along the way, we’ll look at how variable font axes, Text Fill, Text Stroke, Gradient Variables, and presets work together so you can build more intentional typography effects directly i...
Post a Comment
Read more

How To Create Magazine-Style Blog Pages With Consistent Image Crops

Image
Most blog layouts fall apart at the images. One post has a tall portrait, the next has a wide landscape, and the third uses something almost square. The grid starts to look uneven, and the layout feels more like a plain list of posts than the magazine-style feed you had in mind. Magazine layouts avoid that problem by placing every image inside a fixed frame. The photos can be different, but the crop system stays consistent. In Divi 5 , you can build the same kind of system visually. The Loop Builder repeats one post card across the feed, Aspect Ratio and Framing keep every featured image inside the same crop, and Grid Offset Rules turn selected posts into full-width editorial features. In this tutorial, we’ll build a magazine-style blog layout with a centered blog heading, one large featured post, a row of standard post cards, and a repeating full-width feature that returns every fifth post. Understanding The Tools Behind The Layout This layout depends on three Divi 5 tools work...
Post a Comment
Read more