The Tech Zone

A spacing system becomes easier to maintain when its values have a clear relationship. A panel might need twice your standard padding, while the gaps between its contents need half that amount. Nested variables let you keep those relationships connected in Divi 5 . You can also build a fluid heading size from shared limits or assemble reusable text from smaller pieces. We’ll use a workshop layout to explore each approach and show what happens when a source value changes. What Are Nested Variables In Divi 5? A nested variable contains a reference to another variable within its value. The source holds the original information; the variable that references it adds a relationship or combines it with other content. For example, a number variable named Base Space can hold 24px. A second variable, Panel Padding , can reference Base Space and multiply it by 2. Panel Padding then produces 48px wherever you apply it. Change Base Space to 32px, and that padding becomes 64px. The distinction...

Someone looking for their first WordPress course has different needs from an experienced designer with an afternoon to spare. A course directory helps both visitors find something that fits when its filters reflect the questions they bring to the page. In this tutorial, we’ll build a small web-design course directory with Divi 5 and Advanced Custom Fields (ACF). Visitors can choose a category, skill level, and duration, then open a matching course through its image or title. We’ll use native Divi settings throughout the build. What We’re Building Our example includes six fictional courses covering UI design, development, and WordPress. Each card shows an illustration, title, short description, level, and exact duration. Three labeled dropdowns sit above the cards, alongside a button that returns the directory to its unfiltered view. ACF stores each course’s details, while Divi’s Loop Builder repeats one card design for the course records. We’ll connect the dropdowns to that loo...