A visual component that is essential to user interaction is a Button widget. The Button widget provides easy navigation by redirecting users to different pages or other sections on the website. The widget provides the ability to initiate a number of actions, including form submissions, confirmation requests, and command executions. CTAs encourage user interaction and prompt them through your website.
Adding a Button Widget
To add a Button widget to your website:
- Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
- Navigate to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or expand the Essentials grouping and select the Button widget.
Drag and drop the Button widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Button Widget
Once you have added the widget to the crafting area, you can modify the Button widget properties from the Property Panel according to your preferences. The properties of the Button widget include Styles, Content, and Settings. Each Button comes from the design preset, where you can customize them in Design System > UI Elements, and each has its own state.
To configure the Button widget:
- Go to Styles to modify the widget styling features:
- Global Styles - Make the necessary configuration of principal styling features from the Property Panel (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.
- Set the CSS design framework States - Normal, Hover, Active, Disabled, and Selected (see Global Styles > State).
- Define the Types of buttons - Label Only, Left Icon, Right Icon, Icon Only.
2. Go to Content to modify the button content, specifically:
- You can add a Link to redirect your customers to certain websites, Main or System pages, products, collections, or collection items, and headings, making them clickable for easy access.
- You can enhance customer engagement by adding clickable phone numbers and email addresses.
- Change the icon. Icon allows you to add or change the icon next to the item that best suits your website design. To do so:
- Click Change Icon.
- Go to General Icons and select the corresponding icon from the list.
- Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.
- Edit the button text/label.
3. Go to Settings to modify the widget visibility on your website. Specifically, select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).
Modifying the Widget States
You can set the state of the Button widget to define how it is displayed on your website based on user actions.
The following modes are available:
- Normal - allows you to create the static state of the widget for the public mode, referring to the state of the widget when it is not affected by any interaction.
- Loading - allows you to create the state and the design of the button once it is clicked on and the loading process takes place.
The modes are essential for defining widget behavior and enabling it to display other views depending on its current state. For instance, you could wish to offer several choices for a loading state, customizing the widget look and feel across the website.
You can find more about the widget states in Global Styles.
Note: You can additionally customize the existing styling features, specifically:
- Access the Design System at the upper-right corner of the Property Panel to easily create a UI Element;
- Reset Styles - refers to discarding the changes made to the widget and restoring its default style;
- Override Styles - refers to changing specific aspects in order to change its default style, such as specifying a specific font, size, and other formatting properties.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.