Dual Button Overview

Getting started

The Divi Dual Button module will allow you to add two flexible and trendy buttons in different styles. These buttons will make your webpage more classy and sleek. It has two buttons with varying styling options, a separator with a styling option, border, spacing, and more. Let’s drive in and see details about this beautiful double button for Divi. 

Divi Dual Button Content Options

The content option consists of several options like two-button, button separator, etc.

Left Button

Here in the left button, you have the option to add anchor text for your button, URL, and select the URL open option. Design and spacing options will be available in the design tab.

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. By 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.

Admin Label

The dual button can be given a custom label so that it does not need to only display as “Module-Type” on your page builder. You can use any name that is convenient for you.

Divi Dual Button Design Options

Now it’s time to design the buttons with an extensive collection of design resources. You can design every single element you gave in the content tab.

Alignment

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

Left Button Text

Here in the left button text design option, you have all the necessary text editing options to make your button text stand out. The left button text has all the font designing options like font, weight, style, including text alignment, color, and sizing. Besides these, you can use text-shadow and control positioning, strength, color, etc.

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 is the typography design options for you to select font, style 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 available with all associate options like border color, style, shadow positioning, strength, color, etc. 

Border

Individual button has a border option, which is the wrapper for both buttons. You will find rounded corners, border styles, color for your wrapper border.

Sizing

Sizing options help to create a responsive design. Here you have the opportunity to control the width and height of your dual button module. This option is available in the regular Divi module and does the same thing for all modules. 

Spacing

Spacing is one of the core features of our modules. Default Divi modules come with two spacing areas one is for margin, and another is padding. We break this down into the individual elements in our module. You can use margin padding to the wrapper, separator, text on both of your buttons. You also have the standard margin padding. 

Divi Dual Button Advanced Options

If you are a developer and want to use your custom CSS to expand design possibilities, you can venture further into the Advanced tab. Here is the list of the option you got-

CSS ID & Classes

CSS ID: Assign a unique CSS ID to the element used to assign custom CSS styles from within your child theme or Divi’s custom CSS inputs.

CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child theme or from Divi’s custom CSS inputs.

Custom CSS

There are six different custom CSS areas in the Divi dual button module you can target and set your custom CSS code there. In each CSS input box, there is a sign “?” that will tell you which class has been targeted.

Visibility

Divi Builder offers the option to hide your chosen modules on specific devices. This option is also available in the Divi dual button module. 

Transitions

If you are using any animation or hover effect, then this duration, delay, and curve will define your transition length, time, and way. This is also available in all modules.

Position

Here you can take full control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all. 

Scroll Effects

Scroll Effects are customizable animations that react to your visitors as they scroll up and down the page. This feature is available on every Divi module and works the same for all.

Note

 Any setting that has a mobile icon will allow you to customize it according to devices. You can select different settings for desktop, tablet & Mobile.

 A mouse pointer in the setting will allow you to set a hover effect on this element.

Submit a Comment

Your email address will not be published.