Social Links Blocks

Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Social Links Blocks

Last updated July 20, 2023 14:17

Add icons to your pages that link to your social media profiles, such as Facebook or Twitter.

Use social links blocks to add social icons anywhere you can add blocks to your site. The icons link to the URLs you add in the Social links panel. It’s common to add this block to a footer so it appears on every page of your site.

To see a list of available platform logos and if your site displays additional built-in icons, visit Adding social icons.

Tip: To help you get started, your site might include a social links block in its demo content. To customize the block, click it, then click the pencil icon.

Watch a video

Before you begin

The Content tab of social links blocks reflects the information added to the Social links panel of your site. When you update the social links in a social links block, they also update in the Social links panel.

Because of this, all social links blocks show the same social icons. If you add or remove a social link in one social links block, all other social links blocks on your site will reflect the change. It's not possible to have social links blocks display different social icons.

Add a social links block

To add a social links block:

Edit a page or post, click Add Block or an insert point, then click Social links. For help, visit Adding content with blocks.
Open the block editor by clicking the pencil icon on the block.
In the Content tab, add or edit social icons.
Click Design to change the design of the social links.

Add or edit social icons

To add a new social icon:

In the Content tab, click Add social link.
Copy and paste a URL for a profile page or email address in the blank field.
Press Enter on your keyboard.

To edit an individual social link, click it in the Content tab. Here you can:

Edit the URL or email address for the social link.
Switch the Display Social Icon toggle off to temporarily hide the icon from your site.
Delete the social link. Keep in mind, deleting a social link removes it immediately from everywhere on your site.

To change the order of the social links, click Edit in the top-right corner of the Content tab, then click and drag the icon to the right of the social link you want to move.

You can also add and edit social links in the Social links panel of your site. Any changes made in the social links panel affect all the social links blocks on your site, and vice versa.

Change the design

Customize the design of the icons using the following settings in the Design tab:

Tip: These settings don't affect built-in social icons, which have their own style settings.

Setting	Options
Border	Change the shape of the border surrounding the icons. Choose from: No border Square Circle Rounded square Select a style for the border from the following options: Knockout Outline Solid To change the outline's width, use the thickness slider.
Alignment	Change the alignment of the icons relative to the block's container. Choose from: Left Center Right
Size	Change the icon size. Choose from: XS S M L XL

Change the color of the icons

You can change the colors of the icons in a social links block to fit with your site's branding. Your options vary depending on your site's version.

To change the icon colors:

Version 7.1
Version 7.0

While editing a page, open Site styles, then click Colors.
Click the pencil icon on your social link block's theme.
Scroll down to Social links block.
Use Main Color to change the color of the social icons. If you're using a Solid border for the icons, you can also use the Secondary Color tweak.
Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

It's not possible to use the default colors of each service's branding.

Click Edit on the page with the social links block, then click Edit on the block.
Click the Design tab.
Under Color, choose from Black, White, or Standard. With Standard, each icon matches the service's branding. For example, the Facebook icon will be blue.

Delete a social link

Before deleting a social link, remember that deleting it from one social links block deletes it from the social links panel on your site and all other social links blocks. It's not possible to display different social icons in different social links blocks.

To delete a social link:

Click Edit on the page, then click the pencil icon on the social links block.
In the Content tab, click the social link you want to delete.
Click Delete Social Link, then click Delete. This removes it from all social links blocks and your social links panel immediately. This action can't be undone.

Alternatively, you can temporarily hide a social link by switching the Display Social Icon toggle off.

To delete multiple social links:

In the Content tab, click Edit in the top-right corner.
Click the minus icon next to the social links you want to delete. This removes them from all social blocks and your social links panel immediately. This action can't be undone.

Was this article helpful?

192 out of 659 found this helpful