Posts

Everything You Need To Know About Divi 5’s Relative Colors & HSL

Image
As of last week, Divi has a new color system, and it is a big improvement. We put a lot of work into this feature, and it’s the kind of feature that shows the seriousness with which we are building Divi 5 . In one sense, the old Color system worked, but in another sense, it wasn’t enough. To appreciate the new Color System , I want to highlight three areas of improvement summarized in as many words: Global Relative HSL Divi 5’s Improved Color System Colors in Divi 5 aren’t just relegated to picking hex codes anymore. We’ve taken something basic and made it strategic and flexible — here is what we did: Subscribe To Our Youtube Channel Global Colors And Design Variables There are benefits to a well-integrated, global color system. The first is that it is just faster to build with. No saving hex values in Notepad and copying/pasting while designing. When you need a color, a selection box with all your pre-saved colors is waiting for you.   Global colors are especially usef...

What Is calc() In CSS (And How To Use It)

Image
Some CSS functions are powerful but rarely used, not because they’re difficult, but because easier alternatives are available. Calc() is one of them. It’s super useful but often overshadowed by clamp(). Calc() solves some layout problems that clamp() can’t touch. It’s great for fine-tuning section heights, adjusting for sticky headers, and mixing flexible and fixed units in one line of code. And here’s the good news: you can use calc() without writing a single line of code. In Divi 5 , it’s built right into the interface, so just type your value, and Divi handles the rest. Want to see how? In this post, you’ll learn how calc() works, where it helps, and how to use it inside Divi 5. 👉 Divi 5 is ready to be used on new websites , but wait a little before migrating existing ones. What Is calc() In CSS? Calc() is a native CSS function that lets you perform simple math like adding, subtracting, multiplying, and dividing (with some limitations depending on context) directly within you...

Using Variables In Design To Boost Efficiency in 2025

Image
Web design is all about creating consistent, scalable websites with less effort. Design Variables can transform how designers work across multiple web design tools, from Figma to our own Divi . In this post, we’ll explore how variables streamline workflows, ensure brand cohesion, and future-proof web projects, with a closer look at how Divi 5 ‘s Variable Manager makes it easy for everyone. Divi 5 is suitable for new websites , and will soon be safe for upgrading existing sites. What Are Design Variables In Modern Design? Design variables are foundational elements of modern design workflows. They act as global values for design properties like colors, typography, spacing, or animations, stored centrally and applied across a web design project. Think of them as small, reusable pieces that ensure consistency and scalability. Variables aren’t new, but their adoption has exploded with the rise of design systems and tools like Figma, Sketch, and modern CSS. Variables are cornerstones of...

Optimal Typography For Web Design In 2025

Image
Typography can make or break your website before visitors even read your content. When someone lands on your page, poor font choices instantly raise red flags to your visitors before they even start reading the words themselves. Most designers hate dealing with website fonts. Their builder makes typography way too hard. However, modern builders like Divi are making typography simple again. Let’s check out typography problems, find solutions that work, and see how Divi 5 makes it easy to apply them. Why Text Can Make Or Break Your Website Your website’s typography creates an instant emotional response before visitors even process your words. Research shows that poor font choices literally make people frown. This triggers negative feelings in the amygdala , a part of your brain that handles emotions and memory. Your font choices become part of how people remember your business. Visitors who see badly designed text feel worse about your site, creating lasting negative memories tied t...