2.2. Button
Last updated
Last updated
The Button widget allows you to add and customize buttons on your landing page, enabling users to perform actions such as submitting forms, accessing links, or interacting with other parts of the website.
Place buttons in strategic locations, such as at the top of the page, at the bottom, or near key content to attract attention.
Use bold and clear colors to make buttons easily visible.
Ensure the button is large enough to be easily clicked, especially on mobile devices.
Label the button with clear and action-oriented words like “Sign Up,” “Buy Now,” or “Learn More.”
In the sidebar, click on Widgets, then select Button.
Click and drag the Button widget onto your landing page.
Click on the Button widget and select Content in the quick settings bar to access the content editor.
Choose the representation of the Button: Text and icon, Icon only, Text only, Nothing.
Enter the text and select the icon you want to display on the button in the provided field (you can adjust the arrangement of these two components within the button).
+ Direction: Adjust the position of the icon.
+ Reverse: Swap the positions of the Icon and Text within the button.
+ Space between elements: Adjust the spacing between the Icon and Text inside the button.
Click on the Button widget and select Design in the quick settings bar to access the design editor.
Align: Helps you align the button within its container. For more information, see Align.
Sizes: Adjusts the size of the button. For more information, see Sizes.
Display on: Determines which devices the button will be displayed on, including Desktop and Mobile.
Styles: Allows you to change the background color and shadow effects of the selected button. For more information, see Styles.
Typography: Customize the text display on the button, including font, font size, line height, letter spacing, font weight, and style. For more information, see Typography.
Border: Allows you to add and customize the border around the button, and you can also adjust the roundness of the corners. For more information, see Borders.
