Configuring Social Icons on Templates
The Social Content element allows you to add a group of linked social media icons to your template. Each icon can direct recipients to your organization's corresponding social media profile, making it easy to provide consistent links to your online presence without uploading and linking individual icon images.
Social icons are commonly placed in an organization footer, though you may add them anywhere in the template where you want recipients to connect with your organization on another platform.
Adding Social Media Icons
Open the Content tab.
Click and drag the Social element onto the desired location on your template.
Select the Social element on the template canvas.
From the settings on the right, select each platform you want to include.
Enter your organization's corresponding URL for each selected platform.
Each platform selected will add its icon to the Social element and provide a field for entering the destination associated with that icon.
Available social and communication icons include:
X | ||
Indeed | ||
Vimeo | YouTube | Snapchat |
Facebook Messenger | ||
TripAdvisor | Meetup | Product Hunt |
RSS | Tinder | Tumblr |
Apple Music | Spotify | SoundCloud |
Yelp | Medium | Skype |
Flickr | GitHub | Google Plus |
Discord | Telegram | TikTok |
Add only the platforms your organization actively uses. Leaving unused platforms out of the Social element helps keep the section clean and ensures every displayed icon has a meaningful destination.
💡 If your audience may recognize one version of a platform's branding more readily than another, such as Twitter versus X, you can choose the icon that best fits your communication and audience.
Setting Social Media Links
When you select a social platform, a corresponding URL field appears in the settings panel.
Enter the full URL for your organization's profile or page on that platform. For example, the Facebook icon should link to your organization's Facebook page, not the general Facebook website.
Before using the template, test each icon to confirm that it opens the intended destination.
Using the Email Icon
The Email option works differently from the social media platforms. Instead of directing the recipient to a social profile, the Email icon can be configured to open a new message in the recipient's supported email application.
This provides another way to create a Send Email action within the template and can be useful as an alternative to a Button or linked text.
Depending on the available settings, you can configure information such as:
Field | What It Does |
|---|---|
Mail To | Sets the email address that will populate as the recipient of the new message. |
Subject | Sets the subject line that will populate in the new email. |
Body | Adds predefined wording to the body of the new message. |
For example, an organization footer could include an Email icon that opens a message addressed directly to your general contact or development email address.
Icon Style
The Icon Style setting controls the shape and color appearance of all icons within the Social element. You will want to choose a style that provides enough contrast with the background behind the icons and fits the overall design of your template.
Icon Style | Appearance |
|---|---|
Circle | Circular icons displayed in each platform’s standard brand colors. A good general-purpose option when you want the individual platforms to remain easily recognizable. |
Circle White | Circular icons displayed in white, with transparent areas that let the template background show through. Best suited for dark or strongly colored backgrounds. |
Circle Black | Circular icons displayed in black, with transparent areas that let the template background show through. Best suited for white or light-colored backgrounds. |
Round | Rounded-square icons displayed in each platform’s standard brand colors. Useful when you want a slightly more structured shape while preserving recognizable platform colors. |
Round Black | Rounded-square icons displayed in black, with transparent areas that let the template background show through. Best suited for lighter backgrounds. |
Square | Square icons displayed in each platform’s standard brand colors. Provides a more structured, uniform appearance across the Social element. |
Square Black | Square icons displayed in black, with transparent areas allowing the template background to show through. Best suited for white or light-colored backgrounds. |
The selected Icon Style is applied consistently across the entire Social element, helping the group of icons appear as a coordinated part of the template design.
Alignment
Alignment controls where the group of social icons is positioned within the available Content area.
Left | Positions the group of icons along the left side of the Content area. |
Center | Centers the social icons within the available area. |
Right | Positions the icons along the right side of the Content area. |
Center alignment is commonly used for footer sections, while left or right alignment may work better when the Social element is positioned alongside other Content.
Icon Size
Icon Size controls the displayed size of each social media icon and is measured in pixels. The default size is 32 px. Increasing the value makes all icons in the Social element larger, while decreasing it makes the group more compact.
When selecting an icon size, consider both visibility and surrounding space. Icons should be large enough to recognize and select comfortably without overwhelming the surrounding content.
Icon Spacing
Icon Spacing controls the amount of horizontal space between each social media icon. The default spacing is 15 px. Increasing the spacing creates more separation between icons, while decreasing it creates a tighter grouping.
If your Social element contains many platforms, adjusting the icon size and spacing together can help the group fit comfortably within the available width.
General Settings
The General settings control the Social element's placement and behavior within the surrounding template.
Container Padding
Container Padding controls the space around the entire Social element.
Setting | What It Does |
|---|---|
Container Padding | Adds space between the group of social icons and nearby Content elements. |
More Options | Allows the Top, Right, Bottom, and Left padding values to be adjusted independently. |
Increasing Container Padding can help visually separate social icons from nearby Paragraphs, Dividers, logos, or other footer information.
Section Name
The Section Name field allows the Social element to be used as a destination for internal navigation within a longer email.
Enter a short, recognizable Section Name if another Menu item, Button, linked Heading, Image, or other supported element should direct recipients to the Social section using Go to Page Section.
For example, you could assign the Social element a Section Name such as follow-us and create a link near the top of the email that directs recipients to the organization's social links farther down.
Responsive Design
Responsive Design controls whether the Social element appears based on how the recipient is viewing the email.
When editing in Desktop view, enable Hide on Desktop if the Social element should not appear in the desktop version.
When editing in Mobile view, enable Hide on Mobile if the element should not appear for recipients viewing the mobile version.
Hiding the Social element in one view does not remove it from the template. It allows you to create different layouts for desktop and mobile displays.
Social Icon Tips
Include icons only for platforms your organization currently maintains, and make sure each displayed icon has the correct destination configured. A smaller group of active, relevant links is generally more useful than displaying a large collection of platforms that recipients may not need.
Choose an icon style that contrasts clearly with the surrounding background, keep icon sizing and spacing consistent, and review the completed Social element in both Desktop and Mobile views.
Before sending the communication, test each icon from a generated email to confirm that the correct social profile, page, or email action opens as expected.