Template Designer 2 (TD2) has a pre-built Icon Set layout that hosts a default set of social-media site icons.
You can insert this layout into your template and then:
- customize the icons to link to your organization's social-media accounts and
- add custom icons (for example, to link to your organization's website).
The linked icons are automatically included in all messages that are built on the template. This:
- makes it easy for your message recipients to connect with your organization's web presence and
- means you don't have to remember to include these icons every time you create a message.
Add an Icon Set
- Navigate to the Design > Build tab.
- Expand the Static Elements group.
- Drag and drop the Icon Set layout onto the canvas.
TIP: The precise location isn't crucial right now because, as with other content areas, you can drag and drop the layout to reposition it in the template.
When you add an Icon Set to the canvas, the default set of icons displays in the following order:
Now you can manage the appearance of the icon set. On the:
- Content tab, you can choose which icons to display and then customize their properties (refer to Content tab, below).
- Style tab, you can manage the appearance of the icons (refer to Style tab, below).
TIP: As you manage the icons on the Content and Style tabs, your changes are immediately apparent in the canvas. Also, you can undo and re-do actions via the icons above the canvas.
Content tab
On the Content tab, you can:
- add, remove, and re-arrange the icons.
- manage the properties (e.g., URL, image, alt text) of the icons.
Each icon is managed on its own "card."
- Scroll down to access other icon cards.
- Scroll down to access the Add Icon option which you can use to add and configure a custom icon.
The icons can be managed as described in the following table.
| Setting | Description |
|---|---|
|
up arrow and down arrow |
Click these to rearrange the left-to-right order of the icons. |
| trashcan icon | Click this to remove the icon. Click Remove at the confirmation prompt. |
| Image settings | Displays a preview of the icon's image.
BEST PRACTICE: Do not configure a link without an image. |
| Alt text field | Specify the text (e.g., facebook site link) that you want used for the icon in the Text version of messages that are built on this template. |
| Add hyperlink link | Click this to open the hyperlink dialog with the type pre-set to Web Page. Click the dropdown to choose a different hyperlink type; this will change the fields on this dialog.
|
When you have the icons configured for your organization, refer to the next section if you want to customize the icon set's appearance elements: borders, padding, alignment, and spacing.
Style tab
The Style tab is where you manage design aspects of the set of icons.
NOTE: These property settings apply to the icons as a set; they are not applied to individual icons.
| Property | Description |
|---|---|
| Border | By default, Icon Set does not have a border. Check the Border box to automatically apply the following default border properties: solid, 1px, black (#000000), all sides. Or, you can set:
|
| Padding | Accept the default of no padding or click the dropdown to set the amount of (top, bottom, left, and/or right) padding. The selections are automatically applied. |
| Alignment | Click the dropdown to set the horizontal position (left, center, or right) of Icon Set in the content area. |
| Spacing | Click the dropdown to set the amount of space (in pixels) between the icons. The selected amount of space is automatically applied between all icons; they cannot be individually set. |
Get creative
You can add an Icon Set layout in various places in the template and then make each instance unique by displaying different icons in each Icon Set instance. For example, if your organization has its own YouTube channel, in your newsletter template, you could add a dedicated Icon Set layout with links to promote new videos.
Related articles
You can also add social-media site icons to the headers and footers of your template — and most of the legwork has already been done because the icons are pre-added in some of the layouts.
This might be your preferred option if you want their placement to be static while other template content is dynamic!
To learn how to add header and footer layouts that already have social-media site icons, see: