The Divi Button module lets you add interactive buttons with custom hover styles and icons, making it easy to guide visitors through your website.
Add The Divi Button Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon to insert a Row.
Click the Gray Plus icon inside the Row, which will show the list of all available Divi modules.
Find the Button module and click on it to load it. Alternatively, you can use the Search option to find it.
{Gif here}
The Divi Button Module Use Cases
Triggering Toggle Modules: Use a button to open or close multiple Toggle Modules simultaneously, streamlining content display.
Promoting Downloadable Resources: Place buttons to link directly to downloadable files like PDFs, eBooks, or reports, simplifying resource access.
Custom Navigation Links: Create buttons that link to specific sections or external pages, enhancing navigation beyond standard menus.
Button Module Settings Breakdown
Once you've added the Button module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab lets you customize the button text, set its link, and adjust other key settings.
Text - Choose the button's text.
Link - Choose the link of the button.
Admin Label - Choose the Button module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Button module are in this tab.
Alignment - Choose the Button module's alignment on the page.
Text - Choose the overall Button module's text styles for this module.
Button - Choose the Button module's design styles.
Spacing - Choose the Button module's spacing.
Box Shadow - Choose the Button module's Box Shadow styles.
Filters - Choose the Button module's filters such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Button module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Button module's animation styles, adding personality and interactivity while keeping a polished, professional feel.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Button module, enabling advanced styling that perfectly aligns with your vision.
Attributes - Choose advanced link settings for the button, such as its relationship to the destination page.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Visibility - Choose the Button's module visibility based on different devices.
Transitions - Choose how long Button's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Button's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Button module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S
on a Mac or CTRL + S
on a PC.
You can also:
Click on the Save button.
Click on the Exit button.