Button element is a separate interactive element that includes a variety of functions.
Highlight the element to open the settings for that element. A toolbar opened on the right.
General settings
First line. In this section, you can write text inside the button, change text color, font size, line height, select font style, and align text relative to the button.
Second line. If needed, you can add a second line inside the button - additional text. Click on the slider on the right, and an additional line will open on the button. The settings for the second line are identical to the settings for the first line: enter text, choose text color, set size, line height, font style, and text alignment within the button.
Positioning
For more information on the settings in this section, refer to the article "Positioning".
Style
Background. Choose a background color for the button, and you can also add a background image inside the button. For the background image, additional image settings are opened: image selection, size, image repetition and position of the image inside the button.
Shadow. You can add a shadow around the button, and adjust the offset and blur of the shadow. And also the color of the shadow.
Shadow of the text. This section adds a shadow for the text inside the button. Edit the shadow offset and blur, as well as the shadow color.
Frame. You can customize the border around the button: radius (rounding of the corners of the button), style (no border, solid, dashed, dotted), border color and its thickness.
Icon
An icon is a ready-made element used as a graphical decoration for the button. Icons are loaded in the accel online editor and regularly updated. You can choose a suitable icon from the offerings and use them to the left and right of the text inside the button.
Icon to the left. Click on the slider on the right. Here you can choose the icon, select the icon size, color, set the background color for the icon, round the corners, and adjust the padding. This icon will be displayed on the left side of the button.
Icon to the right. Click on the slider. The settings for this element fully correspond to the settings for "Icon to the left". However, the icon will be displayed on the right side of the button.
Click. The button is an interactive element that, when clicked, takes the visitor to a link. Click on the "action on click" button and choose from the options provided.
Interaction
Click. A button is an interactive element that a visitor clicks on to follow a link. Click on the "Click Action" button and choose from the offered options:
- Add to cart. When the user clicks on the item, the product will be automatically added to the cart. Specify the desired product by selecting it from the list of products. In order for the checkout process to start immediately after the user adds the order to the cart, move the “Quick Payment" slider to the active position.
File download. This action automatically starts downloading the selected file to the user's device. Attach the file by clicking the "Select on the server" button. And download the file from your computer.
Go to checkout page. The user will be instantly redirected to the checkout page. This action has no additional settings.
Go to link. When clicking on the element, the user will be redirected to the selected page. To select this action, paste the link into the field and move the "Open in a new tab" slider to the active position.
Refresh the page. When you click on the element, the user's page will be updated. This action has no additional settings.
Remove from cart. When the user clicks on this item, the product will be automatically removed from the shopping cart. Select the desired product and turn the slider to the active state to completely remove the product from the basket.
Run custom event. You can create any event that will trigger the script. In the configuration settings, write the name of the event. To learn how to set up a custom event, read the article "Types of events in the scenario".
Run JS function. A JS function is a block of code designed to perform a specific task. When the user clicks on the element, the configured JS function will be launched.
Scroll to section. This action redirects the user to another block on the same page where this button is located. Select the required block from the list to which the user will be directed.
Show pop-up window. When you click on this element, an additional window will be displayed on top of the web page. To learn how to set up a pop-up window, read the article "Pop-up windows".
Select the action that will take place when a site visitor clicks on the button.
Conditional show / hide
For more information on the settings in this section, refer to the article "Conditional show / hide".
Advanced
For more information on the settings in this section, refer to the article "Advanced settings".
