How to add social media icons to my website?

You can add social media icons to your website to provide quick access and encourage more engagement from your visitors.

How to add social media icons?

When in the Website Builder editor, click on the Add elements button.

Drag and drop the Social media element into your page content. Note that the editor will highlight the spots where you can drop it.

How to edit social media icons?

Click on the social media icons to open the settings toolbar.

Platforms

Action
Select if you want icons to follow your social media or share your website on your visitor’s feed.
Social media links
For the Follow Action provide your social media links. You can add an alternative text that appears if the icon doesn’t load and is read out loud by screen readers.

For the Share Action provide the label you want to encourage people to share your website with, for example, “share this page with your friends”.
Add more platforms
Use this button to add more platforms. You can delete any platform with the x on the right next to it.

Icon settings

Style
Select the visual style of the icons. You can choose from icons designed for bright and dark backgrounds, or made using default colors of the platforms.
Layout
Choose between horizontal and vertical icon layout.
Alignment
Align your icons inside the social icon block to left, centre or right.
Color
Select the color of the icons’ filling.
Size
Choose from three predefined sizes or click on the … button to enter your own size manually.
Spacing
Set up the gaps between the icons with the slider.

Block settings

The social media block is a framed workspace around your icons with a Social Media label on the left. You can only see the frame after clicking on the object. It won’t be visible on your website.

You can customize its color, padding, border, radius, and shadow.

Absolute positioning

Enable this option to move icons to any place on your website.

Note: we only recommend using this option if you have some unusual design that can’t be created in any other way. Using objects with absolute positioning can make your page less responsive on mobile devices.