fbpx

Table Of Contents

Dual Button Widget

How to Use Dual Button Widget in Elementor

It is Dual Button Widget documentation. On the basis of the section, I’ll give you some instructions and pictures detailed to help you get started.

So, let’s start.

To Insert widget

Inserting Dual Button Widget

Inserting the widget is just a matter of drag and dropping. As you see in the screenshot above, drag the Elementor Dual Button Widget inside your current page.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website(such as a dual button). And in this regard, some handy sections in the tab will assist you a lot with the creative buttons.

Button

Here, in this section, you can set button size, alignment, and width. Specially, you can add text between the buttons.

button widget settings

Go to the Content tab > Button.

Button A

This section will allow you to shape or modify the first button. You could add text, link, alignment, and icon. In addition, you on/off the two switcher buttons on the button widget.

Dual Button Widget indivisual button setup

Simply go to the Content tab > Button A. Here, you can customize the first button of the Dual Button Widget using logo, text, spacing, link, etc.

Button B

It is as similar as Button A. Just go to the Content tab > Button B. Here, you can customize the second button of the Dual Button Widget using logo, text, spacing, link, etc.

Style Tab

Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Button

Both in the Normal mode and Hover mode, you could style the button widget. Go to the Style tab > Button and have a look at the screenshot below.

Normal:

Apply some padding & border-radius to make the button appear unique.

Hover:

Do the same thing for the hover mode. Just add some deeper color to get a hover effect on the Elementor Dual Button Widget.

Button A

This section will let you set a few Effects and work in both Normal and Hover mode.

Normal:

Elementor Dual Button Widget button A

Pick a brighter color for the text and an image for the background. It’s possible.

Just, go to the Style tab > Button A and see what happens.

Hover:

Button B

It is quite similar to Button A to style Button B. Simply go to the Style tab > Button B and look at the screenshot below.

Normal:

Same thing as Button A but with no image in the background. Instead, use gradient color for the second button of the button widget.

Hover:

Button A Icon & B Icon

These sections are pretty similar to Button A and Button B.

Come to the Style tab > Button A Icon & Button B Icon.

Middle Text

Go to the Middle Text Section and check them all.


Video Assist


Finally, I hope you’ve noticed that all the sections are pretty similar and easy to control. If you need more support you can watch the video embed above and furthermore to get ideas, you can visit our demo page linked here.

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Missed Black Friday offer this year? Get up for flat 50% discount right now. Check Here

© Copyright 2021 All Rights Reserved by BdThemes

Missed the Black Friday offer this year? Get up for flat 50% discount right now.