An eye-catching, user-friendly, and customizable dual button setup for your website!
Divi Essential’s Dual Button module lets you add 2 comfortable and super trendy buttons into your webpage of your website. Using the Dual buttons you can make your webpage more stylish and classy. Divi Dual Button you can make it possible for vistitors or the users to interact with a new system and it gives you chance to take the action by making any selection.
Design and use the Dual Button in your Website:
You can see the attached video where from you can get an insight that how to use the Dual Button Module for creating stunning designs.Moreover you can check our documentation, whichever you feel convenient for yourself.
Installing Process
Select the Dual Button widget from the menu bar on the left-hand side of your screen then drag and drop it in the selected area.
If you want to set the dual button with just a click then you need to install the Divi Essential plugin or you can install Divi Dual Button if you have the separate Dual Button Plugin.
To use Divi Dual Button module, first you need to add “A New Section” by clicking on the “+” icon. Then insert a row by selecting your preferable column.
Now you can notice that you can see a black round icon where from you can add a new module, now search Dual Button and select it.
Content
Content → Button One and Button Two
In the Button One and Button Two options there are Button Text, Button Link also Button Link Target options are available. Here add any gorgeous word which can be attractive word to your website visitors or customers.
Make sure the Divi Dual button text entices as well as it encourages action.
Content → Background One & Background Two:
Best Companies across the world are constantly looking for the best ways to reach visitors,customers and encourage them to take action. One of the easiest ways to implement this process is through the color scheme. Several studies have been done to prove what colors are the best for buttons on websites.
First Enable the Background color and Gradient color then you can find numerous colors and pick the colors which can match with your web contents, images.
From the gradient color option you can set 2types of colors.
Different background colors provide a different mood and tone to images that’s why for matching the subject, the background color should different.
Design
Design → Text Button 1 & Text Button 2
Internet Marketers have found by doing lots of research that presenting the texts in the button can make massive
difference because by checking the texts visitors read your contents and products information. Button texts can be more eye catching for your website.
From the Design>Text option you can design the text Font, style, color, size etc.
Design → Alignment
From this option you can easily align the buttons. You can keep them in the letf side or right side or in the center.
Design → Hover One and Two
Here you can adjust the Hover effects. Almost 30 hover effects are available in the 2D section. In the BG option you will get more than 15 hover effects.
From here you can easily set the Background hover color. Choose the stroke effect and Icon effect if you want to see while hovering.
Design → Icon
Choose your preferable color from here.
Here you can can change design of 2 Button icons.
Enable/ Disable Icon: By enabling icon you can easily get the Button icon as well as Button icon color moreover Button icon placement opportunity.
You can also use here the “Only show icon on Hover for Button ” functionality. Here you can enable or disable this option smoothly.
Design → Border One and Border Two
Select this option so that you can set the rounded corners, border styles width moreover the border colors.
Design → Spacing
The visitors whom are viewing your website on a larger screen there button space will significantly improve button text’s readability. From here you can set Dual button’s margin, padding smoothly without any coding.
Sizing → Border One and Border Two
Dual button introduces the smart visualization to the visitors. Dual button should be the perfect in size so that anyone can click on a buttons without any hesitation also they shouldn’t feel any disturbance in their mind. That’s why you can set the sizing here by setting the module alignment, height, max height, width, max width.