You can easily add links to your social media accounts on any page of your website. To get started, drag the Social Accounts component to a page of your site. Next, click on the component to open the options panel.
Social Accounts
By default the component has three networks added, though we support the following:
- Facebook (added by default)
- X/Twitter (added by default)
- Instagram (added by default)
- Bluesky
- Threads
- YouTube
- TikTok
- SnapChat
- Tumblr
- GitHub
- Phone
- Waze
- Maps
To add an an account, click the Add Social Account and then click on the network you want to add. Next, click on “Account Name” next to the icon in the list and enter the username you use with the network.
To rearrange your networks, click on one and drag it to a new position. Note: You may need to scroll to see all the networks you’ve added. If you want to remove an account, click the small red X button on a network in the list.
Layout
We provide a couple different options to control the layout of the component:
- Direction - With this option you can choose to display the icons horizontally or vertically.
- Gap - Use this to control how much space there is between each icon.
Size & Position
Much like the name suggests, the options in this group control the size of icons and their position within the component.
- Size - With this option you can go from very tiny to very large.
- Position - You can position the icons to the left, right, or center of the component.
Design
There are three style options found under the design option group:
- Text Color - This option will update the color of the icons, and you can choose auto or set a custom color.
- Shape - With this option you can set a custom shape for the component. By default it inherits what you choose in your site settings. Note that you’ll need to have a border set for the component to see any changes. Click on the desktop/mobile icon to set this separately for large and small screens.
- Border - There are three options for border:
- Width - You can choose no border up to extra large.
- Color - Choose from your site colors or set a custom color for the border. Note this option only shows when the width is small or thicker.
- Style - Choose from a few different choices what style of border you want. Note this option only shows when the width is small or thicker.
Spacing
The two options in this option group control spacing within and around the component. Note that both can be set individually for large and small screens by clicking on the desktop/mobile icon for each option.
- Margin - Control the space around the component.
- Padding - Control the space within the component around the icons as a whole.
Hover
You can control certain aspects of the component when a visitor hovers over it with a mouse. At the top of the component options panel on the left, click on Hover and you’ll see these options:
- Text Color - Change the color of an icon when hovering over it.
- Border - Update the style of the border on hover.
- Scale - Increase or decrease the size of an icon when hovering over it.