Studio Editor: Adding and Customizing a Social Bar
Encourage visitors to explore your client's social media accounts using a social bar. The social bar shows icons of the platforms you want to include, linked to the relevant accounts. You can also select the icon designs and adjust their size and spacing.
Adding a social bar to your site
Add a social bar to your page and place it in a location that visitors can easily notice. For example, you can show the social bar on the site header so it appears at the very top of every page.
To add a social bar:
Click Add Elements
on the left side of the editor.
Click Embed & Social.
Click Social Bars.
Drag the social bar to the desired location on the page.
Customizing your social bar
The social bar comes with default icons, but it's fully customizable to your client's needs. You can replace the icons, add new ones, and set the relevant social links. You can also remove icons that you don't need.
To customize your social bar:
Click the social bar in the editor.
Click Set Social Links.
Choose how you want to customize the social bar:
Add a new icon
Click + Add Icons at the top.
Add a new icon by doing one of the following:
Click + Upload Media to upload a custom design.
Select the desired icon from Media by Wix, Shutterstock, or Unsplash.
Click Add to Gallery.
Click Done.
Replace an icon
Click the relevant social media icon.
Click Replace Icon on the right.
Choose a new icon by doing one of the following:
Click + Upload Media to upload a custom design.
Select the desired icon from Media by Wix, Shutterstock, or Unsplash.
Click Choose Image.
Click Done.
Add/change a social media link
Click the relevant social media icon.
Click the Link icon
under What social page does this icon link to?.
Enter the relevant social media URL.
Select how you want the link to open under How does it open?.
(Optional) Click Advanced SEO Settings to link rel values.
Click Done.
Remove an icon
Hover over the relevant social media icon.
Click the Remove icon
to delete it.
Customizing the layout of your social bar
Customize the social bar's layout and appearance. You can change the icon size, adjust the spacing between icons, and choose their orientation and direction.
To customize the layout:
Click the social bar in the editor.
Click the Layout icon
.
Customize the layout using any of the below options:
Icon size: Set the size of the social media icon.
Spacing: Set the space between the social media icons.
Orientation: Choose whether the bar is horizontal or vertical.
Direction: Set whether the bar reads left-to-right, or right-to-left.
Need to flip or rotate the icons?
Click the social bar in the editor.
Click the Open Inspector arrow
at the top right of the editor.
Click Adjust and enter the desired angle (e.g.180) next to Rotate.
