Design (Format) Message Content

The Design menus are how you can format all of 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.
  • Button
  • Containers
  • HTML
  • Image
  • Social
  • Table
  • Text
  • Webpage

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.

  • Button
  • Containers
  • HTML
  • Image
  • Message Design
  • Spacer
  • Social
  • Table
  • Text
  • Webpage
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.

  • Message Design
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.
  • Containers
  • HTML
  • Image
  • Message Design
  • Social
  • Table
  • Text
  • Webpage

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:

  • One value will round all of the corners equally. For example 2px
  • Two values will round the left and right sides of the button. For example 2% 10%
  • Four values will round each corner in relation to the other corners. For example 2px 10px 4px 20px

For more information about the CSS properties for border radius see http://www.w3schools.com/cssref/css3_pr_border-radius.asp.

  • Button
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.
  • Containers
  • HTML
  • Image
  • Message Design
  • Social
  • Table
  • Text
  • Webpage

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.
  • Containers
  • HTML
  • Image
  • Message Design
  • Social
  • Table
  • Text
  • Webpage
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.
  • Text
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:
  • Sliding the bar for a container to the left or right
  • Entering a new number in the px box

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.

  • Containers
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.

  • Containers
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.
  • Buttons

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.

  • Button
  • Containers
  • HTML
  • Message Design
  • Table
  • Text
  • Webpage

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.

  • Button
  • Containers
  • HTML
  • Message Design
  • Table
  • Text
  • Webpage

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.

  • Button
  • Containers
  • HTML
  • Message Design
  • Table
  • Text
  • Webpage

Font Style

Specifies if the font is italic.

Font style can either be italics or normal text. By default, text is set to normal.
  • Button
  • Containers
  • HTML
  • Message Design
  • Table
  • Text
  • Webpage

Font Weight

Specifies if the font is bold.

Font weight can be bold or normal text. By default, text is set to normal.
  • Button
  • Containers
  • HTML
  • Message Design
  • Table
  • Text
  • Webpage
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.
  • Spacer
  • Text
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.

  • Button
  • Table
  • Text
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.

  • Button
  • Text
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:
  • left: the message contents will be aligned to the left edge
  • center: the message contents will be centered
  • right: the message contents will be aligned to the right edge

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.

  • Message Design
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.
  • Text

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.

  • Button
  • Containers
  • HTML
  • Image
  • Message Design
  • Rec Loop
  • Social
  • Table
  • Text
  • Webpage
Page Background

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.

  • Message Design
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.

  • Text
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
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:
  • left: the text will be aligned to the left edge of the element or container its in
  • center: the text will be centered in the element or container its in
  • right: the text will be aligned to the right edge of the element or container its in
  • justify: stretches the text so that each line has equal width

If you set alignment for text at the container or element level, those settings will override the text alignment set at the message level.

  • Message Design
Text Decoration

Specifies if the font has an underline or strikethrough.

By default, text decorations is set to normal.
  • Button
  • Containers
  • HTML
  • Message Design
  • Table
  • Webpage

Width

Sets the width of an element.

The width can be set with
  • Percentages: sets the width in relation to the size of the container the element is in. So, if you set a button to have 100% width, it will completely fill the container box.
  • Px: sets the width to a specific size. If that size is larger than the container box, the container box size is automatically adjusted to accommodate the width setting.
  • Button
  • Image
  • Message Design