The Tech Zone

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...

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...

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...