You can add a button component in a predefined section you included in the page.
Click on the blue sign next to Section, in the upper part of the Customizer menu. You will open the list of components.
In the category of Basic Components, find the Button component.
Use drag-and-drop to put a new button to the section you are modifying.
New button added to a page section:
To customize the button element, you need to have the settings category for Buttons open in Customizer.
From the Content category, you’ll adjust the properties of the button.
Fill in the blank space with the text you want to place onto the button.
The role of a button is to lead users to another page/page section/website/checkout page/newsletter subscription page, etc.
Fill in the blank space under Link with the complete URL to the destination page.
Determine the dimensions of the button (it can be small, medium, large or of a custom-size).
If you want to display an icon next to the button text, enable the option to Display icon. You can change the default icon by choosing another one from the Font Awesome icon library.
Choose the most effective placement of the button, by aligning it to the left, at the center or to the right.
Define the styling options for the button you’ve added to your section.
Background of the button
Under Button Style, next to Background, you’ll find a brush icon followed by gradient options and color options.
Click on the color picker to choose an effective color for the button, that is a color which drives users’ attention.
Click on the symbol for gradient option and select a specific gradient for the button you’ve added to the section.
Background of the button on hover
Under Button Style, next to Hover Background, you’ll find a brush icon followed by gradient options and color options.
Click on the color picker to choose an effective color for the button when users hover over it with the mouse, that is a color which drives users’ attention.
Click on the symbol for gradient option and select a specific gradient for the button as it appears when users hover over it with the mouse.
Text of the button
Choose the color of the text that appears on the button, from the color picker.
Text of the button on hover
Choose the color of the text that appears on the button, when users hover their mouse over it.
Typography of the button text
Choose the style of the text that appears on the button, by adjusting the typography for that text.
Border Type for the button
If you want to make the button more salient, you can select among 6+ different types of visible borders.
Thickness of the border for the button
Then, you’ll need to select, on the slider, a value for how thick you want the border to be. The higher the values, the thicker the button border will be.
Color of the button border
To differentiate the button element from the other elements in the page, you can apply a particular color to the button, by selecting it from the color picker.
Color of the button border on hover
This is the color the button border will have, when users hover their mouse over the respective button.
This option refers to how round the corners will be. The higher the values for the border radius, the rounder the corners of the border will be.
For a more stylish effect, you can enable the option to attach a shadow to the button box. Click on the pencil icon next to Box Shadow, to open the panel with customization options for the shadow of the box. You can set the shadow color, deviation on a horizontal/vertical axis, the surface it is spread over around the button box, and you can apply a blur effect to it.
From here, you can set additional options for the button component.
You can make modifications for the Border and Shadow, Spacing and Typography.