How do I add social media links to my Website Builder site?

Adding social media links to your Website Builder site is quick and easy. Simply open your Website Builder editor, drag the Social Links component onto your workspace, enter your social media account URLs, and publish your changes.

For detailed step-by-step instructions, check out this article.

• Step 1 - Add a social links component to your site
• Step 2 - Add your social media links
• Step 3 - Adjust the style of your icons
• Step 4 - Add animations to your icons
• Step 5 - Publish your changes

Step 1 - Add a social links component to your site

1. Open Website Builder from the one.com control panel.
2. From the menu on the left, click Social and drag one of the component options to your workspace.

Step 2 - Add your social media links

1.  
   • Click the icon with the three dots to edit, hide or delete a social media icon. Hiding a link only affects that specific social media component, while deleting it affects all other social components you may have on your site.
   • Change the order of the icons by clicking on a link and dragging it up and down while holding your mouse button.
   • Type in an email or URL to one of your social media pages to add a new icon. You can add links to Facebook, Instagram, Twitter, Pinterest, LinkedIn, YouTube, Email, Yelp, Vimeo, Snapchat, Reddit, Tumblr, Tripadvisor and Foursquare.

Step 3 - Adjust the style of your icons

Adjust the look of the icons under Edit icons > Style.

• Change the shape of the icons; you can choose regular (default), circle, square or rounded.
• You can choose between an icon with a solid colour (fill) or a transparent area (knockout) showing your background.
• Under Colour, choose Multi colour to show social media default colours, or in black (dark) or white (light).

Adjust the Size and Spacing of the icons to your liking and choose where you want to place them on your site. Place the component in your header or footer if the icons should be visible on all pages.

Step 4 - Add animations to your icons

You can add animation effects to your icons to make them stand out more. For example, you can use a slide in effect or a bounce effect, which will make the icons pop out on the screen when a visitor scrolls down the page.

You can add animations by selecting the component and clicking Edit icons > Animations.

• Select an animation effect: You can choose between fade in, slide in or bounce.
• If you select fade in or slide in, you can choose the direction from which the component should enter the screen. The options are centre, top, bottom, left or right.
• Select the animation speed: It can be slow, medium or long.
• Choose if you want to delay the effect's onset and, if so, how long the delay should be.

Step 5 - Publish your changes

Click Save and Publish to make your changes visible on your website.

Tip: If you want to show social icons vertically, you can do so by adding a separate social links component for each icon, and hiding all but one. Then place them above one another.

Don't have access to Website Builder? You can try it out for free for 14 days and create a website in no time. Start your free trial now

Related articles:

• How do I add a favicon to my Website Builder site?
• How do I make an image into a link?