How To Use The Dual Button Widget By Atomic Addons

The Dual Button widget by Atomic Addons places two buttons side by side as one unit, such as “Get Started” and “Learn More”. Button A is light and Button B is dark by default, and you can join them with a small round “or” badge. Each button has its own text, link, icon and hover effect. This guide covers adding the widget and setting up both buttons.

Enable the Dual Button Widget

Dual Button is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Dual Button. You can also open the Creative category.

4. 4

   Turn the Dual Button widget on.

5. 5

   Click Save Settings.

Add the Dual Button Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Dual Button. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Button

Open the widget and go to Content → Button. These settings apply to the pair:

1. 1

   Alignment: Places the pair on the left, center or right, per screen size.

2. 2

   Button Width Auto: Off by default. Turn it on to size each button to its text.

3. 3

   Button Width: With Button Width Auto off: the width of the pair, which the two buttons share equally. 40% by default, 80% on tablets and 100% on phones; you can also use px.

4. 4

   Middle Text: Adds a small round badge between the buttons. Off by default.

5. 5

   Text: With Middle Text on: the badge's text, “or” by default.

6. 6

   Button Gap: With Middle Text off: the space between the buttons, 5px by default.

Button A and Button B

Content → Button A and Content → Button B have the same settings, one set for each button:

1. 1

   Text: The button's text: “Click Me” for Button A and “Read More” for Button B.

2. 2

   Link: Where the button leads, # by default. Click the cog icon to open it in a new tab or add nofollow.

3. 3

   OnClick: Runs a JavaScript function when the button is clicked, instead of following the link. Off by default.

4. 4

   OnClick Event: With OnClick on: the name of the function, such as myFunction(). The function must already be defined on the page, for example in a custom code snippet. It is called without arguments.

5. 5

   Alignment: Left, center or right alignment of the text and icon inside the button, per screen size.

6. 6

   Icon: An optional icon in the button.

7. 7

   Icon Position: With an icon: Right of the text (the default), Left, Top or Bottom.

8. 8

   Icon Spacing: With an icon: the space between the icon and the text, 8px by default.

9. 9

   Button ID: A unique HTML id for the button, without the #, such as signup-button. Useful for tracking clicks or linking to the button. It allows letters, numbers and underscores.

Text and link fields accept dynamic tags.

Style the Dual Button

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Button — settings for both buttons: border style and width, radius, shadow, padding and typography, with a Hover tab for radius and shadow.
• Button A and Button B — each button's hover Effect (Effect A to Effect I, different ways the hover color fills the button; Effect A by default), and its text color, background, radius, border color and shadow in Normal and Hover tabs.
• Button A Icon and Button B Icon — with an icon: color, background, border, radius, padding and size, with hover colors.
• Middle Text — with Middle Text on: the badge's text color, background, radius, shadow, typography and a Horizontal Offset to move it off center.