Posts

Everything You Need To Know About Divi 5’s Color Palette Variable Generator

Image
Creating a reliable color system has always been one of the harder parts of web design. You start with a primary brand color, then manually build lighter values, darker values, muted variations, and transparent colors for backgrounds, borders, shadows, buttons, and hover states. The result often works at first, but it becomes harder to manage as the site grows. Divi 5 changes that with the new Color Palette Variable Generator . Instead of building every color manually, you can start with one primary color and generate a connected color system using Divi 5’s relative HSL color system. The generator creates reusable color variables inside the Variable Manager, so your colors are not just saved as static swatches. They become part of your site’s design system. When the base color changes, related colors can update with it, helping your palette stay consistent across modules, presets, and pages. In this post, we’ll walk through what the Color Palette Variable Generator...
Post a Comment
Read more

How To Style The Contact Form 7 Module In Divi 5

Image
Styling a Contact Form 7 form to match your website used to mean writing custom CSS, chasing the right selectors, and checking every field again on mobile. Even when the CSS worked, the form often still felt separate from the rest of the page. That matters because forms are conversion points. When they look disconnected from your design system, they can make the whole experience feel less polished. Divi 5 brings Contact Form 7 forms back into that system. With the Contact Form 7 Styler module, you can display forms you already built with Contact Form 7 and style them directly inside the Divi 5 Visual Builder. This post walks through the full styling process, including inputs, labels, placeholder text, buttons, messages, focus states, checkboxes, radios, and reusable presets. What Is The Contact Form 7 Styler Module In Divi 5? The Contact Form 7 Styler module lets you display existing Contact Form 7 forms inside Divi and style them like native Divi elements. You still create and...
Post a Comment
Read more

Part 14: Mastering The Divi 5 Loop Builder

Image
Welcome back to the Divi 5 Mastery Course. In Part 13: Creating Interactive Off-Canvas Elements (Popups & More) , we used Canvases and Interactions to add interactive UI to our coworking website. Now, it’s time to build with one of Divi 5’s most powerful dynamic content tools: the Loop Builder. In this post, we’ll skip the traditional Blog module and build a custom Blog page using the Loop Builder , dynamic content, Flexbox , and the Pagination module. By the end, you’ll have a responsive Blog page with featured images, post titles, excerpts, metadata, Read More buttons, and pagination. The final layout will also use the same Design Variables and Presets we created in Part 3 and Part 4 , so it stays connected to the global design system. Let’s get started. What The Divi 5 Loop Builder Does If you’ve worked with WordPress for any length of time, you’ve probably heard of the Loop. It is the WordPress mechanism that retrieves and displays content such as posts, pages, product...
Post a Comment
Read more