The Button element is an interactive element that prompts users to take specific actions on your website. However, if your desired action is to add items to the cart, we recommend using the Cart button element instead.
To begin, access the GemPages Dashboard and select the template you wish to edit. Locate the Button element conveniently situated in the left sidebar of the Editor. You have the option to choose from two button styles, one with a symbol and one without.
When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Advanced tabs.
Configure the Settings Tab
Text
Label: Input the text label for your button.
Styles: Choose a style for the text label from the pre-determined styles.
Font: Choose the font for your text label from the drop-down menu. In case, you would like to use other fonts, check out how to use a custom font here.
Size: Determine your preferred font size for your text label.
Click on the “Show more” button to reveal more customization options.
Font Weight: Choose your desired font weight from the provided drop-down menu.
Line Height: Adjust the height of the text by specifying a percentage value.
Letter Spacing: Modify the spacing between letters by inputting a value in pixels.
Text Transform: Transform the text in one of the following ways:
- No transformation applied.
- Uppercase: Convert all text to uppercase.
- Lowercase: Convert all text to lowercase.
- Capitalize: Capitalize the first letter of each word.
Icon
Toggle on this option to add an icon to the button label. After that, you can choose an icon from our icon library or upload one using the SVG code.
Icon position: Position the icon on the left or right side of the text.
Pick link
Hit the “Pick link” button to send visitors to a destination page. The link picker window will appear for you to select the link to add. There are two options for you at this point: enter the link to the Custom URL field or choose from the tabs below.
- Pages, Collections, Products, and Articles: internal links to other pages of your store.
- Scroll to: this option allows you to leap to a specific section of the current page.
- Email: Visitors can send emails to your address with the subject and body pre-filled.
- Phone: Shows your visitors your phone number and the option to call.
States
At this point, you have the ability to style the button in both its normal state and when hovered over. You can modify the button color, text label color, corner, border, and apply a button shadow as desired. These options allow you to customize the visual presentation of the button to align with your design preferences.
Size
Full-width: When you activate this option, the button will dynamically extend to fill the entire width of its container, reaching from one edge to the other.
Otherwise, you have the flexibility to input your preferred width in pixels within the designated box.
Inside space: Choose a specific inside space style from the available dropdown menu options. Should you wish to tailor the inside space according to your preferences, simply click on the three-dot button for further customization.
Align
This parameter allows you to determine how the text is positioned on your page. There are three options to choose from: left-aligned, centered, and right-aligned.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
Thank you for your comments