Add a border, background color, or transparent color

Article author
Miguel Panayotty
  • Updated

Add a border

Add a border under the Styles section or selectively by using a Container.

 

Option 1: Add a border around the entire design through the Stylesheet section.

 

1. Click on the Stylesheet tab from the edit content panel

 

2. Under ESSENTIALS click on Background

 

3. Click open Email Container

 

4. Fill in details for border width, style and color

  • Open the Border section.
  • Click in Border Width to enter a width in pixels (Ex, 5px). This creates the border thickness.
  • Click in the Border Style field to select an option such as dashed, dotted, or solid.
  • Click in Border Color to enter your color code or select a color with the color picker tool.

 

 

Option 2: Add a border around specific blocks using a Container block.

 

1. In your design, drag the Container block over to the preview panel

 

2. Drag and drop blocks into the Container.

The Container will act as a 'wrap' around all the blocks that make up your design.

 

3. Click on the Container from the preview panel

4. Click on the Container's STYLE tab

 

5. Click open Block Container

 

6. Fill in details for border width, style and color

  • Click in Border Width to enter a width in pixels (Ex, 5px). This creates the border thickness.
  • Click in the Border Style field to select an option such as dashed, dotted, or solid.
  • Click in Border Color to enter your color code or select a color with the color picker tool.

 

 

Add a background color

 

1. Click on the Stylesheet tab from the edit content panel

 

2. Under ESSENTIALS, click Backgrounds

 

3. Click open the Body <body>

 

4. Update the Background color

Click in Background Color to enter your color code or select a color with the color picker tool.

 

Flow background across design

Using the Global Styles you can adjust your background body so that your design floats in the center. In other words, the background color would flow to fill the whole space behind the design.

1. Select Body <body>

2. Update the Background color to the same color as your Container Background color

 

 

 

Set a transparent color

Typical use cases for transparent colors in designs include:

  • With background images: Set a transparent background color so that your background image can be seen through a color band.
  • With fonts: Set your font color to transparent to hide the font.

Transparent colors have great support across most email clients. Outlook PC does not support transparent colors well. If there are email clients that do not support the feature, the email client will simply show an opaque solid color instead of a transparent one.

 

1. Open your design

2. Click on the block you would like to edit colors for (text, image or container).

3. Select the STYLES tab.

4. Select any element where there is a color option, such as the container or font.

5. Set the color to transparent by selecting the transparency box.

 

You can follow those same steps to set transparency globally under the email's STYLESHEET. Click on the STYLESHEET tab from the edit content panel (left side of the editor).

 

 

 

Was this article helpful?

Comments

0 comments

Article is closed for comments.