Posts

Comparing The Font Scale Types In Divi 5’s Variable Generator

Image
When you generate font size variables in Divi 5 , one of the most important choices is the scale type. Fluid, Fixed Responsive, and Fixed Single can all create a usable typography system, but they behave differently once those variables are applied across your site. The right choice depends on how you want your typography to respond across screen sizes. Do you want text to scale smoothly between viewport widths? Do you want exact values at each breakpoint? Or do you want one fixed scale that stays the same everywhere? In this post, we’ll compare the three font scale types in Divi 5’s Variable Generator , explain how each one works, and show when to use each option. What Is The Variable Generator In Divi 5? The Variable Generator is a tool inside Divi 5’s Variable Manager that helps you create reusable design variables automatically. Instead of building each number variable by hand, you choose a category, configure the scale, preview the output, and add the variables to your site. ...

Exploring Divi 5’s New Contact Form 7 Module

Image
Contact Form 7 is one of the most widely used form plugins in WordPress, but styling those forms inside a Divi layout has not always been straightforward. The form logic lives in Contact Form 7, while the design usually depends on theme styles or custom CSS. Divi 5 closes that gap with the new Contact Form 7 Styler module . You can keep building and managing forms in Contact Form 7, then display and style those forms visually inside the Divi Builder. That means your existing CF7 forms can use Divi’s design system: field styling, labels, placeholders, buttons, messages, focus states, checked states, Design Variables, and Presets. What Is Contact Form 7? Contact Form 7 is a long-running WordPress form plugin with more than 10 million active installations. It gives site owners a lightweight way to create contact forms, place them with a block or shortcode, and manage submission behavior from the WordPress dashboard. You create the form structure inside Contact Form 7. That in...

How To Style Forms In Divi 5 (New Field Options)

Image
A well-designed form needs more than a background color and a font size. The field text, labels, placeholders, buttons, checkboxes, radio buttons, focus states, and checked states all need to feel like part of the same design system. Divi 5 makes that easier with new form styling options . Instead of relying on one broad field style, you now get dedicated controls for different field types, along with Focus and Checked editing modes and preset support. In this post, we’ll walk through the new form field options, show how to style inputs, checkboxes, and radio buttons, and explain how to save those styles as presets so you can reuse them across your site. What Changed With Form Fields In Divi 5 Divi’s older form styling workflow relied on one broader Field group for many form controls. That made it harder to style each field type on its own terms. Label controls were not always consistent, background options were more limited, and styling one form module did not always feel the sa...