Buttons add a functional and decorative element to your messages because they simultaneously:
- give your recipients an obvious and simple way to access content that you deem important or relevant enough to link to, and
- break up the repetition of text titles and blocks of content with your customizations of colors, positioning, size, font, and creative labeling.
Add a button
- Navigate to the Design tab and click the Build tab.
- Click to expand the Static Elements category.
- Click and drag the Button element onto the canvas and "drop" it where you want the button to display.
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.
The Button Properties panel opens on the left.
- Use the fields on the Content and Style tabs to set the properties and design elements of the button.
TIP: As you configure the button 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
This is where you configure the hyperlink properties of the button.
- Click into the Label field and specify the text to display on the button.
- Click Add hyperlink to open the hyperlink dialog with the type pre-set to Web Page.
- Set the link's properties on the dialog.
-
Hyperlink - Accept the default or click the dropdown to choose a different hyperlink type; this will change the fields on this dialog. The choices are:
- Web Page
- Web Version of this Mailing
- Form Landing Page
- Content Only Landing Page
- Unsubscribe Landing Page
- Email Address
- Document
- Bookmark
- iCalendar
- Survista Pro Survey
- url - Specify the URL to which the button will link.
- name - Specify a name for the hyperlink (used for web tracking).
- Disable tracking - Check the box to disable web tracking for this hyperlink; uncheck the box to enable web tracking.
- Click Insert Hyperlink.
The button's label and hyperlink are now configured. Refer to the next section if you want to change the appearance of the button (e.g., colors, font, text alignment).
Style tab
This is where you manage the design aspects of the button.
NOTE: The boxes are pre-checked and will apply the default values that are indicated.
- Uncheck a box to expand the setting and choose a value other than the default, as shown in the following image in which the button size and font family settings are expanded and have override values.
TIP: If you expand a setting and override the default, leave the setting expanded. Do not re-check the box to collapse the setting; doing so re-applies the default value.
Settings
Check a box to use the default value for the setting; uncheck a box to set a different value.
The Style tab settings are described below.
- Background - The "fill" color of the button. Avoid "shocking" colors.
- Text Color - The color of the text on the button. This should be easily readable against the Background.
- Expansion - The width of the button. Expanded makes the button the full width of the layout.
- Size - The size of button. The options are: Tiny, Small, Large, and XLarge, and the text size automatically adjusts in relation to the size of the button.
- Alignment - The horizontal position of the button within the layout. The options are: left (the default), center, and right.
- Text Decoration - The option to apply an underline to the text on the button.
- Font Family - The font family (Arial, Georgia, Verdana) of the text on the button. There are several "serif" and "sans-serif" fonts to choose from.
- Padding - Use these dropdowns independently to set the amount of top and bottom padding (up to 30px) for the button. Padding is the amount of space ("cushioning") above and below the button, and can be used to set a preferred amount of separation between the button and other message content.