Social Buttons

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.

The Social Buttons element is a website component that allows you to display your social media profile links and other subscription options.

Adding Social Buttons

Option 1

  • Hover over the desired section, and click the Add Element:

  • Choose the Social Buttons 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 Social Buttons

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

Customizing Social Buttons

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

Editing Social Buttons

Click the Social Buttons to display the Edit button to be able to modify the element's Layout and Design:

Layout Tab

The Layout tab allows you to add, edit or delete social network buttons, connect them to social network accounts, change the color, and rearrange them.

  • Add Networks. Click Add Social Network to add a new social network button. Then, in the Add Social Network pop-up, click the social button you would like to add.

  • Connect Accounts. Hover over a network's name, click Edit, and enter the profile link or name on the pop-up. To open a link in the new tab, turn the toggle on.

  • Rearrange Buttons. Drag and drop buttons to change their order.
  • Delete Buttons. Hover over the social network and click the Delete button [x] on its right.

Design Tab

The Design tab allows you to change the following:

  • Alignment. Align the button left, right, or center within its placeholder.
  • Size. Drag the resizing control to set the size of Social Buttons.
  • Icon. Click a color square to open the color picker and select the color for the icon.
  • Hover. Click a color square to open the color picker and select the color for the icon hover.
  • Style. Select the social buttons preferable design.

Duplicating the Social Buttons

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

  • The duplicate of the element will appear immediately.

Deleting the Social Buttons

  • To delete social buttons, click on the element and choose the Remove button [Bin] that appears in its toolbar:

  • The element will be removed immediately.