Overview of the Button module

This page shows you how to add the Button module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Button module adds one or more styled buttons side by side, each with its own text, secondary text and hover effect. For more details, view the demo.

How to add the Button module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Button in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Use Add New Button Item to add items. Click an item in the list to open its own settings; drag items to change their order.

Configuration

• Inline Buttons: Choose whether or not to keep the buttons in the same line.

Button Item settings

Each button item has its own settings. Click an item in the list to open them.

Button

• Button Type: Choose the type of button you want to use.
• Button Text: Input text for the button.

Background

• Background Hover Fill Style: Choose the button background animation to be displayed when hovered.
• Background: Adjust the background style of this element by customizing the background color, gradient, image, video, pattern and mask.
• Background Color

Design tab settings

The Design tab lets you style each part of the module:

• Alignment: styling options for the alignment.
• Button Text: styling options for the button text.
• Icon: styling options for the icon.
• Sizing, Spacing, Border, Box Shadow, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.