Social Buttons

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

Table of Contents

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 (Drag and Drop Grid) article to learn more about moving and duplicating elements.

Customizing Social Buttons

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

Sort Tab

  • 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 [Bin] on its right.

Style Tab

The Style tab allows you to change the following:

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

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.

More Menu

  • Click the More icon in the editing menu to access the available options:

  • Cut. Click Cut or Ctrl+X to cut your element.
  • Copy. Click Copy or Ctrl+C to copy your element.
  • Duplicate. Click Duplicate or Ctrl+D to duplicate your element. The duplicate will appear immediately.
  • Delete. Click Delete to remove the element. The element will be deleted immediately.
  • Move Forward. Click Move Forward or Ctrl+⇓ to move your element.
  • Move Backward. Click Move Backward or Ctrl+⇑ to move your element.

Please Note: The Move Forward or Move Backward options are available only when one element is added on top of another.