The Dual Buttons Widget allows you to display two buttons side by side, providing an elegant way to present multiple call-to-action options on your website.
Activate the widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.
Widget options
Settings section
- Width: Adjust the width of the dual buttons container. You can set it in pixels or percentage.
- Alignment: Align the buttons to the left, center, or right within their container.
- Separator: Enter the text for the separator between the two buttons (e.g., “or”).
First button section
- Text: Enter the text for the first button (e.g., “Start here”).
- Link: Provide the URL the first button should link to.
- Icon: Select an icon to display on the first button.
- Icon Position: Choose whether the icon should appear before or after the button text.
- Icon Spacing: Adjust the spacing between the icon and the text.
Second button section
- Text: Enter the text for the second button (e.g., “Get in touch”).
- Link: Provide the URL the second button should link to.
- Icon: Select an icon to display on the second button.
- Icon Position: Choose whether the icon should appear before or after the button text.
- Icon Spacing: Adjust the spacing between the icon and the text.
Style tab
Customize the appearance of your dual buttons under this tab. You can adjust typography, text color, background, border, box shadow, and hover effects for both buttons and the separator text. These options ensure the dual buttons integrate seamlessly with your site’s design and branding.
First button style
- Typography: Set the typography for the first button text.
- Text Shadow: Apply text shadow to the first button text.
- Text Color: Set the normal and hover text color for the first button.
- Background: Set the background color for the first button in normal and hover states.
- Border: Configure the border settings, including color, width, and radius for the first button.
- Box Shadow: Apply box shadow to the first button.
- Height: Adjust the height of the first button.
Separator style
- Text Color: Set the text color for the separator.
- Background Color: Set the background color for the separator.
- Size: Adjust the size of the separator text.
- Border: Configure the border settings for the separator.
- Border Radius: Set the border radius for the separator.
- Typography: Set the typography for the separator text.
Second button style
- Typography: Set the typography for the second button text.
- Text Shadow: Apply text shadow to the second button text.
- Text Color: Set the normal and hover text color for the second button.
- Background: Set the background color for the second button in normal and hover states.
- Border: Configure the border settings, including color, width, and radius for the second button.
- Box Shadow: Apply box shadow to the second button.
- Height: Adjust the height of the second button.
These style options ensure that your dual buttons look professional and integrate seamlessly with your site’s overall design.
Usage tips
- Use distinct and clear call-to-action texts for both buttons to avoid confusion.
- Utilize icons to enhance the visual appeal and user experience.
- Ensure the separator text is relevant and helps users understand the context of the two buttons.
Conclusion
The Dual Buttons Widget is a versatile tool for adding multiple call-to-action buttons side by side on your website. With extensive customization options, you can tailor the appearance and functionality to match your needs and provide an engaging user experience.