Would you like to display two call-to-action buttons side by side on your website? The Dual Buttons widget in aThemes Addons for Elementor lets you place two buttons next to each other with a customizable separator, making it easy to present visitors with two clear options.
In this guide, we’ll walk you through how to use the Dual Buttons widget in aThemes Addons for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.
Activating the Widget
Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for Dual Buttons and toggle the switch to activate the widget.
Exploring Widget Options
Configuring the Settings Section
The Settings section controls the overall layout of your dual buttons:
- Width – Set the button width in pixels or percentage.
- Alignment – Choose left, center, or right alignment.
- Separator – Add text between the two buttons, such as “or.”
Configure the first button with these options:
- Text – Enter the button label.
- Link – Set the destination URL.
- Icon – Select an icon for the button.
- Icon Position – Place the icon before or after the text.
- Icon Spacing – Adjust the space between the icon and text.
Configure the second button with the same options available for the first:
- Text – Enter the button label.
- Link – Set the destination URL.
- Icon – Select an icon for the button.
- Icon Position – Place the icon before or after the text.
- Icon Spacing – Adjust the space between the icon and text.
Customizing the Style Tab
The Style tab lets you customize the appearance of the dual buttons. Adjust typography, text color, background, border, box shadow, and hover effects for both buttons and the separator.
- Typography – Set font family, size, weight, and style.
- Text Shadow – Add a shadow effect to the button text.
- Text Color – Set separate colors for normal and hover states.
- Background – Choose background colors for normal and hover states.
- Border – Configure border color, width, and radius.
- Box Shadow – Add a shadow around the button.
- Height – Set the button height.
Styling the Separator
- Text Color – Set the separator text color.
- Background Color – Choose a background color for the separator.
- Size – Adjust the separator size.
- Typography – Set font family, size, weight, and style.
- Text Shadow – Add a shadow effect to the button text.
- Text Color – Set separate colors for normal and hover states.
- Background – Choose background colors for normal and hover states.
- Border – Configure border color, width, and radius.
- Box Shadow – Add a shadow around the button.
- Height – Set the button height.
Following Usage Tips
- Use contrasting colors for the two buttons to make each option stand out.
- Keep button text short and clear so visitors understand each action at a glance.
- Test on mobile devices to ensure both buttons display properly on smaller screens.
- Use separator text to provide context between the two options.
That’s it! You’ve successfully learned how to use the Dual Buttons widget in aThemes Addons for Elementor to display two side-by-side buttons on your website.
Next, would you like to create eye-catching split headings? Check out our guide on using the Dual Heading widget to learn more.
