Posts

Part 10: Mastering Flexbox In Divi 5

Image
Welcome back to the Divi 5 Mastery Course. In Part 9 , we built the core inner pages of the coworking website. Now, it’s time to dig deeper into the Flexbox Layout System that helped make those pages possible. Divi 5 brings Flexbox controls directly into the Visual Builder, so you can manage spacing, alignment, wrapping, and distribution without writing custom CSS. In this post, you’ll learn how Flexbox works in Divi 5, what each major layout setting does, and how to build a simple responsive layout using those settings. By the end, you’ll understand the main Flexbox settings and know how to use them to create cleaner, better-aligned sections across breakpoints. Let’s dive in. The Power Of Flexbox In Divi 5 Flexbox is best for one-dimensional layouts. That means it arranges items primarily in a row or a column while giving you control over alignment, spacing, distribution, wrapping, and order. Throughout the coworking website, Flexbox helps power navigation bars, feature rows...
Post a Comment
Read more

Part 9: Building The Core Inner Pages Of Your Divi 5 Website

Image
In Part 5 , we built the homepage for our coworking space website. Then, in Part 6 and Part 7 , we added a global header and footer using the Theme Builder. In Part 8 , we created global templates for posts, archives, search results, and 404 pages. Now, we’re ready to build the core inner pages of the site. For this coworking website, that means creating a Contact page and an Events page. By this point, the design system is doing most of the work. The header and footer load globally from the Theme Builder . Headings, text, buttons, containers, forms, and layout elements all have presets. The Design Variables from Part 3 are used throughout the presets that control color, typography, spacing, and borders. As a result, this part is mostly structural assembly. We’ll reuse the system we already built, add a few new module presets where needed, and use Divi 5 workflow features like Page Manager, Command Center, and Extend Attributes to move faster. Building The Contact Page Create a...
Post a Comment
Read more

Everything You Need To Know About Divi 5’s New Form Field Options

Image
Divi 5 continues to add new design-system features, and this update focuses on form styling. The new form field options introduce dedicated Input, Checkbox, and Radio option groups, new focus and checked editing states, form field presets, and a new Contact Form 7 module. Together, these updates give you more control over form design directly inside Divi’s Visual Builder. You can style inputs, checkboxes, and radio buttons more consistently, customize labels and placeholders, and edit interactive states such as focus and checked from the module’s Design tab. Field Presets let you save reusable styles for form field groups, so you can apply the same form design across multiple modules. Meanwhile, the new Contact Form 7 module brings Divi’s form styling options to Contact Form 7 forms, with more integration-based modules planned. In this post, we’ll break down what’s new, how the features work, and how to use them to build better forms in Divi 5. Let’s dive in. What Are Divi 5’s N...
Post a Comment
Read more