Design (Format) Message Content
The Design menus enable you to format the containers and elements in your message.
The Design menu is displayed when you add or edit an element on the canvas, edit a container, or use the Message Design button on the Settings menu.
A message's design settings always default to the most specific design. If you apply the same design setting to an element, a container, and import a CSS for a message, the element design will respect the design settings that were set at the element level. For example, if you make the Background Color for a container blue and give the text in the middle cell of that container a green Background Color, the left and the right cell in the container will have the blue background, but the middle cell will have the green background you assigned to the Text element. For Text elements, any font design set in the Content tab will supersede Design tab settings.
You can click the Reset button in the editing panel to revert all of the settings back to when you opened the element or container.
The options on the Design menu differ between elements. Each design option is described below and includes a list of the elements the option applies to.
| Menu Option | Description | Available In |
|---|---|---|
|
Alignment |
Controls the horizontal spacing of the element within the container. When you apply an alignment to a container, it is applied to all of the elements in the container. You can only choose one of the alignment settings available in the list.For more information about alignment, see http://www.w3schools.com/cssref/pr_text_text-align.asp. Note: When editing a
Button element, alignment adjusts the
alignment of the text on the button. If you want to align a
button in relation to the position of the button in the
container, then you should edit the alignment for the container
from the Container Design menu or use
padding to adjust the position of the button in relation to the
container box. |
|
|
Background Color |
Applies the selected color to the container cell the element is in. You can either select a color by clicking on the color picker, or you can enter the CSS color value if you know the exact color you want to use. If you set the background color for an element, it will override any other background color settings you may have applied to a container or a message. Except for buttons. Background color for a button will make the area within the button a specific color. To change the color of the space behind a button use Element Background Color. For more information about background color see http://www.w3schools.com/cssref/pr_background-color.asp. |
|
| Background Image | Sets an image that is used for the background of the message. You can use a background image for the body of your message; the image does not appear behind the header or footer of the message. If you use a background color for a container or element, the background color will cover the image.If you want to create white space so that certain parts of a background image appear in a message, use the Spacer element. For example, if you want to center your message content on a background image, add a container with a Spacer element to the top and bottom of a message. Tip: You can also set a background image
for the text element. |
|
| Border Color | Changes the color of a border around the element. You can either select an option from the color picker, enter any generic color (blue, red, purple), or enter the HEX value for a color.When you set a border color you must also set a border style in order for the border to be displayed. When you assign a border color to an element, the border is applied to the perimeter of the element, not to the container box the element is in. So if you have more than one element in a container box only the element you applied the border color to will have the border.Note: Due to
some email client's limited ability to support complex borders,
this value cannot be used with a border radius. |
|
|
Border Radius |
Adds a rounded border to a button. If you set a border radius any other border values you set will not be applied due to the limited ability of some email clients to support complex borders. If you decide, after setting a border radius, you'd rather use the other border options, set a border style and the border radius will be overwritten. Use either a px value or a % to change the shape of the button. If you enter multiple px values, then the button shape will be rounded differently on each corner:
For more information about the CSS properties for border radius see http://www.w3schools.com/cssref/css3_pr_border-radius.asp. |
|
| Border Style | Adds a border in the specified style around the element. You can select an option from the menu. The border style shown is what the border will look like. For more information see http://www.w3schools.com/cssref/pr_border-style.asp. If you want to change the color of the border, use the border color design option. If you want to change the width from the default use the border width design option.When you assign a border style to an element, the border is applied to the perimeter of the element, not to the container box the element is in. So if you have more than one element in a container box only the element you applied the border style to will have one. Note: Due to some email client's limited
ability to support complex borders, this value cannot be used
with a border radius. |
|
|
Border Width |
Adjusts the width of the lines in a border. You should use this element if you want to use a variable border width or want to use a border to create a line between elements on the canvas (instead of a box). To use border width to create a line instead of a border, set the sides of the border you don't want to display to 0px.Border width overrides any width setting you have applied to the same element or container using the border option. You will only see the border width settings applied to your message if the element or container also has border settings. Note: Due to some email client's limited ability to
support complex borders, this value cannot be used with a border
radius. |
|
| Bulleted list | Adds bullets to your list items. You can choose from a disc bullet or a circle bullet. For information on numbered lists, see the Numbered Lists entry. |
|
| Column Width | Sets the width of a box in a container. Set custom column width for a container box by opening a container's settings and selecting either Equal Column Widths or Custom Column Widths from the Layout tab. If you select Custom Column Widths you can further edit each box width by either:
The total width of a container must equal 640 px. When you adjust one container box, the other container boxes will be adjusted in order to meet the 640 px requirement. |
|
| Device Rendering | Determines whether the columns in a container will stack or shrink on a mobile device. By default, when an email is viewed on a mobile device columns in a container stack on top of each other to avoiding shrinking the content in the container. However, in some situations you may want the content in the container to shrink so the columns in the container can maintain their vertical alignment.If you do not want the columns in a container to stack, click the Do not stack on mobile box located under Device Rendering on the Layout tab. This only applies to the individual container. You must select this setting for each container you do not want stacked. |
|
| Element Background Color | Sets the color of the container box behind a button. This can be used to style the background color behind a button if you want only the container column behind a button to be a specific color. To set the color of the entire container a button is in, set the Background Color for the container. |
|
|
Font Color |
Sets the color used for text. You can either select a color by clicking on the color picker, or you can enter the CSS color value if you know the exact color you want to use.If you set the font color for an element, it will override any other font color settings you may have applied to a container or the message. This means, if you make the font color of a Text element yellow, the text will be yellow, even if you have set the font color of the rest of the container to be green. |
|
|
Font Family |
Specifies the type of font used for text. Fonts have been divided into three categories. In the Font Family list, the first set of fonts that appear are considered supported fonts. These fonts will display as designed in any situation a contact may open an email in. The second set of fonts, found under the Reduced Support heading, may not be supported in all situations. When you use one of these fonts it's possible a contact opening an email using a specific browser, email client, or mobile device might see a different font than the one you select. Generally, the font you chose will be replaced by another font in the same font family. The final set of fonts, found under the Limited Support heading, are generally not supported by most email clients or browsers. We do not recommend using these fonts. For more information about font family see http://www.w3schools.com/cssref/pr_font_font-family.asp. |
|
|
Font Size |
Sets the size of the text. While you can set the font size to a percentage or a general size (small, medium, etc.) we recommend you set the font size in px. The default font size is 16px. |
|
|
Font Style |
Specifies if the font is italic. Font style can either be italics or normal text. By default, text is set to normal. |
|
|
Font Weight |
Specifies if the font is bold. Font weight can be bold or normal text. By default, text is set to normal. |
|
| Height | Controls the amount of space that is used for a Spacer. Setting the height for the Spacer or Text element lets you control the amount of space between elements. Always use a px value for the height. |
|
| Line Height | Sets the distance between lines in text. By default, line height is set to normal but you can select other percentages in order to increase the line height. The higher the line height percentage is set, the greater the space there will be between lines of text in the element.You cannot apply line height at the container level or to a selection of text within a single element. If you have two Text elements in the same container cell, only the Text element you apply line height to will be effected by the setting. |
|
| Letter Spacing | Sets the amount of space between letters. You can set letter spacing using px or em. By default, letter spacing is set to 0. You have the option of either using a preset letter spacing (0px, 0.25px, 0.5px, 0.75px, 1px, 1.25px, 1.5px, 1.75px and 2px) or specifying your own letter spacing value. When you set letter spacing to a number larger than 0, it will increase the spread between letters. When you set letter spacing to a number smaller than 0 (Example: "-0.25"), letters will appear closer together. |
|
| Message Alignment | Sets the alignment for all elements in a message. Message alignment sets the alignment for the contents of your message but is not applied to the header or footer of a message. You can set the message alignment by going to Settings > Message Design. From here you can choose one of the following for message alignment:
If you set the alignment at the container or element level, those settings will override the message alignment. If you want to globally set the alignment for text in your message, but do not want to align the other elements in the message, set Message Design > Text Alignment instead of using message alignment. |
|
| Minimum Height | Sets a minimum height in pixels (px) for an element. Note: The element
will appear at least the set minimum height whether or not the
content requires that height. If the element content requires a
height greater than the set minimum height, then the element
will stretch to accommodate the content. |
All elements |
| Numbered list | Adds numbers to your list items. You can choose from numbers or Roman numerals. For information on bulleted lists, see the Bulleted List entry. |
|
|
Padding |
Controls the white space around the element. If you select a padding setting from the list, the padding is applied equally on all sides on the element. You can also type values into the box in order to apply different margin widths to each side of your element. For example, if you type 15px 5px then the top and the bottom of the element will have 15px of white space and the left and right space in the element will have a 5px of white space around it. |
|
| Page Background Color | Sets a background color for a page. You can either select a color by clicking on the color picker, or you can enter the CSS color value if you know the exact color you want to use.If you set a background color for an element or a container it will override the Page Background setting. |
|
| Subscript | Sets the selected text below the line. For example, if you type H2O for water, you can put the 2 in a subscript and it will look like this: H2O. |
|
| Superscript | Sets the selected text above the line. For example, if you want to add the registered trademark symbol after your product name, you could put the symbol in a superscript and it would look like this: Product®. |
|
| Text Alignment | Sets the alignment for text at the message level. You can set the text alignment for all text in a message by going to Settings > Message Design. From here you can choose one of the following for text alignment:
If you set alignment for text at the container or element level, those settings will override the text alignment set at the message level. |
|
| Text Decoration | Specifies if the font has an underline or strike through. By default, text decorations is set to normal. |
|
|
Width |
Sets the width of an element. The width can be set with
|
|