View Categories

Dual Button Overview

Dual button module for divi will allow you to add two buttons side-by-side with a separator. Let’s drive in and see details regarding this dual button.

Content Tab

Left Button

In the left button, you can add anchor text for your left button, URL, and select the URL open option.

Right Button

The right button does have the same options as the left button.

Button Separator

Here you have an option to use a button separator. Turning this ON will show the separator text area and icon option. You can give any text to your separator, or you can use an icon. You can design your icon by selecting a color, circle, and font size.

Design Tab

Alignment

The first option in our design tab is the alignment for your button. You can align your button Horizontally here in three positions.

Left Button Text

The left-button text design option has all the necessary text editing options like font, weight, and style, including text alignment, color, and sizing. Besides these, you can use text-shadow and control positioning, strength, color of the shadow.

Left Button Style

Here we are in the styling option for the left button. You can give a solid or gradient background color. You have the opportunity to use any image in the background. You will find an option to use an icon to the left or right of your button text. The selection of icons and colors is also available underneath it. 

Button styling also has a rounded corner, border, and box-shadow option available with all associate options like border color, style, shadow positioning, strength, color, etc. 

Right Button Text

The right button text also has the same features as the left button.

Right Button Style

The right button style also has the same features as the left button style.

Separator Text

If you are using separator text, here are the typography design options for selecting the font, color, size, space, etc.

Separator Style

Here you have the styling options for your separator element. You can give a solid or gradient background color. You also have the opportunity to use any image in the background.
It also has a rounded corner, border, and box-shadow option with all associate options like border color, style, shadow positioning, strength, color, etc.

Border

Both the left and the right button has different border option here. You can round the corners, style borders, and set colors for your button wrapper border.

Spacing

Spacing is one of the core features of our modules. Including default spacing, We break it down into individual elements. You can use margin padding to the wrapper, separator, and text on both buttons.

Advanced Tab

Features from advanced tab covered on General doc.