How do I add social media icons in the Drag & Drop Email Editor?
Jump start:
If your template shows a social media icons placeholder, just click on it and the social settings will open.
Don’t like the style of the icons? Click on the style drop-down menu and select a new style. It’s just that easy.
Need to add another platform such as TikTok or Pinterest? Click the add icons button. Need to remove an icon? Click on the trash can icon.
Add in your direct social page links and now your subscribers will easily be able to follow you on all your channels!
Don’t like the style of the icons? Click on the style drop-down menu and select a new style. It’s just that easy.
Need to add another platform such as TikTok or Pinterest? Click the add icons button. Need to remove an icon? Click on the trash can icon.
Add in your direct social page links and now your subscribers will easily be able to follow you on all your channels!
Deeper dive
Insert new Social Block: Drag and drop a Social Block into an existing Structure in the e-blast. Click on it to open the social settings menu.
Background color: By default, the background of the social media icons is transparent. To change the background color, click the color box. Enter a color hex code, use one of the preselected colors, or use the Color Picker.
Style: Social media icons are defaulted to the “circle color logos” style. To change the style, use the drop-down menu and select a style from the list provided.
Size: Adjust the size of the icons using the size drop-down menu.
Add icons: Add further icons, such as Pinterest or TikTok, by clicking the Add icon button.
Edit icons: Personalize your icons further with these options:
Alignment: To align the social icons within the container, select left, center, or right alignment.
Style: Social media icons are defaulted to the “circle color logos” style. To change the style, use the drop-down menu and select a style from the list provided.
Size: Adjust the size of the icons using the size drop-down menu.
Add icons: Add further icons, such as Pinterest or TikTok, by clicking the Add icon button.
Edit icons: Personalize your icons further with these options:
- More – Click to toggle on then add an icon Title and alt text.
- Remove icon – Remove an icon by clicking the trash can icon beside it.
- Link – Insert the direct URL for your social media platform page.
- Additional Link Options – Use this if you want to include a link to a source other than a webpage (book, e-resource, or uploaded file).
Alignment: To align the social icons within the container, select left, center, or right alignment.
To set a different alignment for mobile view, click the mobile icon then set the alignment.
Next, click on the Block that you would like linked to this anchor.
Hide element: To hide social media icons from view on either desktop or mobile devices, select the corresponding icon in the Hide element section.
Pro tip! Some elements look good on desktop devices when center-aligned but may not look as good on mobile devices. You may want to set different alignments for certain elements on mobile and desktop devices. Click on the Device Preview icon to see how your email will look on desktop and mobile devices.
Indent between icons: Adjust the spacing between social icons using the + and – controls.
Padding: Padding refers to the margin around images or text. To add padding to the edges of a Social Block, use the + and – controls to adjust the padding for all edges.
To adjust the padding for each edge separately, click More to toggle on.
Click the mobile icon to adjust padding for the mobile version.
Add an anchor link: Anchor links allow viewers to jump to specific areas within the email. To add an anchor link to your Social Block, click Add an anchor link to toggle on and enter a name for the anchor.
Padding: Padding refers to the margin around images or text. To add padding to the edges of a Social Block, use the + and – controls to adjust the padding for all edges.
To adjust the padding for each edge separately, click More to toggle on.
Click the mobile icon to adjust padding for the mobile version.
Pro tip! Sometimes you want to make your email design “clean” with lots of white space. Sometimes you use padding for containers and structures to fill them in with a color background. This all looks good on desktop devices, but on mobile devices it may make those elements less attractive. So, you may want to remove padding for mobile devices. Click the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.
Add an anchor link: Anchor links allow viewers to jump to specific areas within the email. To add an anchor link to your Social Block, click Add an anchor link to toggle on and enter a name for the anchor.
NOTE: Anchor links are not supported in some email clients: iOS Gmail app, iOS Apple Mail, Outlook app on Android, Outlook app for macOS and AMP Emails.
Next, click on the Block that you would like linked to this anchor.
- To link a piece of text in a Text Block, highlight it and click the Change Link icon on the formatting toolbar. In the settings menu, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.
- To add the link to other Blocks, in the settings menu for that Block, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.
Hide element: To hide social media icons from view on either desktop or mobile devices, select the corresponding icon in the Hide element section.
Pro tip! There are a few reasons why you might need this option. For example, you may want to hide some elements on mobile devices to avoid horizontal scrolling, which could happen if you apply a large font size to the text. Click the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.
Include in: By default, the social media icons will be included in both HTML and AMPHTML emails. This is shown in the Include in setting. We do not recommend you change this setting.
Delete: To delete a Social Block, hover over it in the e-blast. A menu tab will appear on the right side of the block. Click the tab then the trash can icon.
Include in: By default, the social media icons will be included in both HTML and AMPHTML emails. This is shown in the Include in setting. We do not recommend you change this setting.
Delete: To delete a Social Block, hover over it in the e-blast. A menu tab will appear on the right side of the block. Click the tab then the trash can icon.
