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.
In the left button, you can add anchor text for your left button, URL, and select the URL open option.
The right button does have the same options as the left button.
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.
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.
If you are using separator text, here are the typography design options for selecting the font, color, size, space, etc.
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.
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 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.
Features from advanced tab covered on General doc.
Great overview we love the dual button module, it gives you so many options for customization.
I have one question, can you vertically align the dual buttons on mobile? So that they aren’t next to each other on mobile?
Thanks for the great modules and content.
Thanks for the appreciation. The Dual button module has only the Horizontal alignment.
unfortunately, the Dual button module doesn’t have any option to align the buttons vertically.
However, we will inform our developer team regarding the feature. They will have a look and
decide if they can add this in the future.