Button Widget

Buttons on the web are there to perform an action. A well-designed, good-looking button is always crucial in any web design. Buttons hold the key to page redirection, interaction, and data flow on web pages.

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Button widget from the widget list, then it'll be added to the layout's section where you want to add a Button widget.

The Button Widget settings come with 3 different settings tabs:

General Settings
Design Settings
Responsive Settings

2.1 Add New Button Items

The widget inline editor will open up when you click on the Button element in the layout. You can access the widget settings and customize the button to fit your needs.

In the general setting tab, click on "Add Item" to add a new button item.

Button title: The button title is the name of the button.
Link: Insert the URL you want to link to the button.
Styles: Choose a button style from the drop-down list.
Outline Style: Enable to create a line that is drawn around the button element, outside the borders, to make the element "stand out".

Enable Button Group: Enable this option if you would like to group a series of buttons on a single line with the button group.
Styles: Choose a size style for buttons.
Border Radius: Choose an option for the border-radius of buttons.
Gutter: Select a padding between your buttons.

Custom Class: Write the class name used for writing custom CSS or JS.
Custom ID: Give a custom ID to override the auto-generated ID

3. Design Settings

Animation: Choose an animation for the widget.
Max Width: Set the Max Width for the widget.
Text Alignment: Set the alignment of the text of the widget.
Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.
Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.