Dual Button

How to use Dual Button Widget of Sky Addons for Elementor

The Dual Button Widget is an elementor widget that has two custom buttons for WordPress users. Clicking on one of the buttons will trigger a custom action you have assigned to it. It’s perfect for call-to-actions, pricing sections, downloads, and more.

Features:

1. Two Fully Customizable Buttons : Each button (A & B) has its own text, link, icon, and individual style settings — giving you full creative control.
2. Responsive Alignment & Spacing : Easily align the button group (left, center, right), adjust spacing between buttons, and set custom widths for different screen sizes.
3. Optional Separator with Styling : Add a stylish separator between the buttons with full control over its size, color, border, and typography.
4. Show Separator: Optionally enable a separator between the buttons.
5. Hover Interactions: Create modern and interactive button groups that enhance user engagement with smooth hover transitions.

Insert Dual Button Widget

1. Open Elementor Editor. In the Elementor panel, search for “Dual Button“ under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Layout Section

Dual Buttons Section

1. Alignment: Position both buttons — Left, Center, or Right.
2. Width: Control the total width of the button group.
3. Space Between: Customize the spacing between the two buttons.
4. Show Separator: Optionally enable a separator between the buttons.

Button A & B Options
Both Buttons are allowing full individual customization.

1. Text: Set the button label.
2. Link: Add a custom URL or page link.
3. Alignment: Align icon and text within the button.
4. Icon: Choose an icon from the Elementor icon library.

Style Your Slider

Dual Buttons Section

1. Padding: Add space around the button group.
2. Typography: Customize font size, family, weight, and more.
3. Shadow: Add a shadow effect to the whole section.

Button A & B Styling

All the same style settings as Button A & B, independently configurable.

1. Padding & Typography: Customize spacing and text styles.
2. Colors: Set text, background, and icon colors.
3. Border & Radius: Control the border style and roundness.
4. Shadow: Apply box-shadow for depth.
5. Hover Mode: Customize hover colors, borders, and transitions.

Separator Styling (Optional)

1. Size: Set width and height of the separator.
2. Color & Background: Define solid or gradient color styles.
3. Typography (if text-based): Control font styles.
4. Border, Radius, Shadow: Design the separator to match your layout.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Buttons not aligning correctly: Check your section/container layout and alignment settings inside Elementor.
2. Icon not showing: Make sure the icon is selected and Elementor’s icon library is loaded correctly.
3. Hover styles not applying: Double-check that you’re editing the correct hover state under the Style tab.

Conclusion

The Dual Button Widget from Sky Addons is a powerful and flexible tool that gives you two independently styled buttons in one widget. Whether you want to direct users to multiple actions or highlight pricing options, this widget keeps your UI clean, modern, and effective.