Button

Please Note: This article applies to Free Trial accounts created on or after 16 December 2024 and Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before these dates, please refer to the article Elements Management.

Adding a Button

Option 1

  • Hover over the desired section and click Add Element:

  • Choose the Button element from the modal that appears:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing the Button

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing a Button

To edit, duplicate or delete the element, click on it and switch between the buttons that appears in its toolbar:

Editing the Button

To edit the element, click on it and choose the Edit button that appears in its toolbar:

  • AI Writer. Click the AI Writer button, enter the Post Topic to generate a new text, and click Write My Idea.
  • Style. Make the selected text bold, italic, underlined, or strikethrough.
  • Align. Align the text element to the left, right, or center.
  • Link. Add a link to a page (and select a page), anchor (page and section), URL, file, email address, or phone number. You can also turn on the toggle to open a link in the new tab.
  • Font. Select font, style, and format.
  • Size. Choose a font size and line height.
  • Color. Select the text color and its opacity by clicking the Square icon.
  • Icon.  Click the icon area to select a different icon from the pop-up, choose the icon color by clicking the Square icon on the right, and choose the alignment.

Settings:

  • Background Color. Change the Background Color by clicking the square icon to open the color picker.
  • Type. Choose the button type: Primary Solid (color), Secondary Solid (color), Primary Outline (color), Secondary Outline (color), or Text.
  • Button Shape. 
  • Border Size. Use the Slider Control to configure the size of the border size.
  • Hover Effects. Turn on the toggle to enable hover effects, and choose among Fade Out, Scale, Shine, Shadow, Glow, Uplift effect to apply when hovering over the button.
  • Full-Width. Turn on the toggle to enable full-width to stretch the button across the entire column width (disabled for the Text button type).

Duplicating the Button

  • To duplicate the button, click on it and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately.

Deleting the Button

To delete a button:

  • Click on it and choose the Remove button [Bin] that appears in its toolbar:

  • The element will be removed immediately.