This article...
- Details the available Header layouts in Template Designer and how to add one to a template.
- Describes how to customize a Header layout's appearance.
- Describes how to add the content (logo, text, icons) of the layout and how to configure the properties of those elements.
A Header houses the information that displays at the start of an email message. It typically includes an organization's logo or the message's title.
The header is one of the first things your message recipients see, so it is an important aspect of your message and of the template upon which it's built.
Add a Header layout
- Navigate to the Design tab > Build sub-tab.
- Expand the Headers section.
- Drag and drop a Header 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.
There are two levels of configuration available for every Header layout that you add to a template:
- the layout properties with which you manage the appearance (border, padding, alignment) of the header's "content container" and which is nearly the same for all of the Header layouts. Refer to Header layout properties, below, for information.
- the header content which are the images, banners, and logos; text; and social-media links that you add to the layout in order to customize your template's header. The content in each header is dependent on the Header layout that is selected (e.g., only a logo vs. a logo and social icons). Refer to Add Header content, below, for information.
Header layout properties
You can manage several properties for Header layouts. These properties:
- are available for all Header layouts;
- have the same behavior across all Header layouts; and
- are applicable only to the layout to which they are applied.
To access these properties, click the title row of a Header layout that has been added to the canvas; the Properties panel opens on the left.
Refer to the table that follows the image for information on these properties.
| Property | Description |
|---|---|
| Use default background |
By default, a Header layout uses the color that has been set
in the
Template Background field on the
Theme
tab. Uncheck the box to open the color picker to select a different background color. |
| Border |
By default, a Header layout 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:
|
| Banner |
Check the box to extend the header to the edges of the message
body. This checkbox is pre-selected for the two "Full Width Banner" layouts. |
| Padding | Accept the default of no padding or click the dropdown to set the amount of padding for the top, bottom, left, and/or right of the Header layout. The selections are automatically applied. |
| Banded Background |
Accept the Default option to keep the Header
layout
within the message body. Click Banded to have the Header layout extend to the edges of the page. |
| Vertical Align | Click the dropdown to set the vertical alignment (top, middle, or bottom). |
- Click Save in the upper right of the page to preserve your changes as you work.
- Click Back in the upper right of the panel to close it and save your changes.
In addition to setting the properties for the Header layout, you can customize the content that displays in the header when a message is sent.
Add Header content
The type of content that you can include in a header depends on the Header layout that is selected.
The configuration options are the same within each content type; i.e., all logos have the same configuration options — irrespective of which Header layout they're in. Likewise for text and social-media icons.
Notes
The Designer treats banners as logos (as shown in the image below), and their properties are managed on the Logo Properties panel that is described in this section.
The Logo and Social Icons with Web Version Text layout is the only layout that includes all three content types.
TIP: As you work through adding and configuring the various content properties, your changes are immediately apparent on the design canvas; take advantage of this "preview" to check your work. You can undo and re-do actions via the icons above the canvas.
Text Properties
Select the text element of your Header layout to open the Text Properties panel.
NOTE: This Properties panel is the same for text elements in all Header layouts.
| Option | Description |
|---|---|
| Text editor field | Type or paste the text for your header right into the editor field. |
| Toolbar | Use the formatting options in the toolbar to customize (e.g., bold, italic, bullets, links, personalization) the header text. See Rich Text Editor for information about this editor. |
| AI Assistant icon | Click the AI icon in the lower left to open the AI Assistant fly-out panel on the right. See AI Assistant for information on this feature. |
| Pop-out editor icon | Click the double-diagonal arrow icon in the lower right to open the text editor in an overlay dialog which is larger and much easier to use. |
- Click Save in the upper right of the page to preserve your changes as you work.
- Click Back in the upper right of the panel to close it and save your changes.
Logo Properties
Select the logo element of your Header layout to open the Logo Properties panel.
NOTE: This Properties panel is the same for logo elements in all Header layouts.
| Option | Description |
|---|---|
| Image |
Displays a preview of the logo (or banner) image.
|
| Alt text |
Specify the text that you want to display:
|
| 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.
To learn about the hyperlink options, see Hyperlinks in Messages. |
| For mobile version | Accept the default of using the same image for the mobile version of the message or click the dropdown to either hide this image or use a different image for the mobile version. |
| Add image caption | Check the box to add a text caption below the logo image. Then, specify the caption text and, optionally, select a text style. Refer to Captions for Logos, below, for information on caption behaviors and configuration options. |
- Click Save in the upper right of the page to preserve your changes as you work.
- Click the Style tab to set the horizontal position (left, center, right) of the logo.
- Click Back in the upper right of the panel to close it and save your changes.
Icon Set Properties
Select the icon-set element of your Header layout to open the Icon Set Properties panel.
NOTE: This Properties panel is the same for icon-set elements in all Header layouts.
In an Icon Set Properties panel:
- the icons' properties (image, alternative text, hyperlink) are individually managed per icon.
- This is detailed in the Content tab section in Icon Set (Social Media Icons).
- several design aspects of the set of icons can also be managed.
- This is detailed in the Style tab section in Icon Set (Social Media Icons).
- Click Save in the upper right of the page to preserve your changes as you work.
- Click Back in the upper right of the panel to close it and save your changes.
Custom headers
Though you'll commonly create headers as a static part of a template, you can give message creators the ability to customize them with Message Content Areas. To learn how, see Template Structure - Message Content.
Captions for Logos
You can include a caption with the logos and banners that you add to your Header layouts.
To add a caption to an image:
- On the Logo Properties panel, check the add image caption box.
- In the Caption text field, type the text that you want as the caption.
- Accept the default, Standard Text 1, or click the Text style dropdown and choose a different style for your caption text.
Captions notes & styles
- Captions are always centered.
- Captions always display directly below the image.
- Captions that are too long to fit within the layout will line-wrap.
- Captions that are applied to an image are also applied to the alternate mobile image, if one is used.
Your image caption can be one of the three Standard Text styles:
- Standard Text 1,
- Standard Text 2, or
- Standard Text 3.
These Standard Text styles cannot be modified in this Properties panel.
You can modify these styles (font, size, weight, and color) in the template's theme.
- On the Design tab, click the Theme subtab.
- From the Element dropdown, select text.
- Customize one of the Standard Text styles for use with captions as described in the Text section of Manage a Template Theme.