Posts

10 Best Variable Fonts For Web Design (Now In Divi 5)

Image
Have you ever used a variable font before? A traditional font family gives you a fixed set of styles: maybe Light, Regular, Medium, and Bold. If you want something between Regular and Bold, you usually need another font file, and if that exact weight does not exist, you compromise. Variable font support in Divi 5 changes that. A single variable font can contain a range of adjustable design axes, such as weight, width, slant, optical size, and sometimes more experimental controls like casualness, softness, grade, or monospace. That gives you much more control over how typography feels across a website. Instead of forcing an H2 into 400 or 700, you can use a value like 535 if that balances better with your body text. Instead of swapping fonts for a compressed headline, you can adjust width. Instead of using the same display detail at every size, you can adjust optical size. Below are ten strong variable fonts you can use in Divi 5 , what each one lets you adjust, and where each one f...

Everything You Need To Know About Workspaces In Divi 5

Image
The Divi 5 Visual Builder is highly customizable. You can open and close panels, dock them to either side of the screen, float them over the canvas, resize them, group them into tabs, choose which top-bar icons appear, and switch between light and dark modes. That flexibility is useful, but it also creates a small problem: the setup that works best for one task is not always the setup you want for another. A layout-heavy build might need the Layers and Inspector panels open. A writing session might need a cleaner canvas. A smaller screen might need fewer panels competing for space. Divi 5 Workspaces solve that by letting you save complete builder setups and switch between them whenever you need. Instead of rearranging the interface by hand every time your task changes, you can save one workspace for your default build flow, another for content editing, another for responsive checks, and another for focused work. In this post, we’ll look at what Workspaces save, how they’re organiz...

5 Hover Effects You Can Create With Aspect Ratio And Framing In Divi 5

Image
Hover effects make a page feel more intentional. A card shifts, an image reveals more detail, or a button stretches slightly, and the layout starts to feel designed instead of simply assembled. In Divi 5 , you can create many of these interactions with the same Aspect Ratio and Image Framing controls you already use to crop and position images. Add hover states and transitions, and those layout controls become motion tools. In this post, we’ll build five hover effects in Divi 5, from a subtle image pan to a button morph and a team-card spotlight effect. Along the way, you’ll see how Aspect Ratio, Object Fit, Object Position, Filters, Transform, and Image Presets work together. The Controls Behind These Effects Before we build the effects, it helps to understand the three main controls doing the work. 1. Aspect Ratio Aspect Ratio is found in Design > Sizing . It sets a proportional relationship between an element’s width and height. A 1:1 ratio creates a square. A 16:9 rati...