In Part 2, we walked through the major parts of the Divi 5 interface. You now know where the main tools live and how the builder is organized. In Part 3, we’ll focus on a small but important part of that interface: Design Variables.
Design Variables are named, reusable values that can be referenced by modules, presets, templates, and other parts of your Divi 5 design system. Instead of storing one-off values inside individual modules, you define important values once and reuse them across the site. In Divi 5, that includes colors, fonts, numbers, images, text strings, and links.
This matters because every Preset we create in Part 4, every page section we build in Part 5, and every template we construct in Part 8 will reference these variables. Without them, the presets would rely on hardcoded values. As a result, the design system would be harder to update, reuse, and scale.
By the end of this post, our Coworking Space website will have a complete set of Design Variables for typography, colors, spacing, borders, layout dimensions, button styling, form fields, and reusable content. These are the raw ingredients that power everything that comes next.
