Managing Email Designer Settings

The Email Designer is currently in a Beta release phase. Contact your customer success manager to discuss access to the Beta release.

In addition to content specific settings for your text, media, buttons, and headings, the Email Designer has a selection of Global settings that apply to the whole email.

Access all global settings from the Global tab in the settings menu, regardless of which element you have selected on your canvas.

  • Width - enter a value for the width of your email, e.g. 700px.

  • Foreground - Set the color, gradient, or image for your email.

  • Spacing - set padding for your email. Individual content block padding is set separately.

  • Border - set a border for your email. Individual content block borders are set separately.

  • Button variant - set button color, borders, margins, etc.

  • Text - set font family, size, color, etc.

Note: global settings will apply to items that do not have individual styling applied. For example:

If you customise a text block to have size 16 font and then change the global text settings to size 12 font:

  • The customised text block will stay at 16.

  • All other text blocks will change to size 12 font.

Foreground

To change the foreground of your mailing:

  1. Go to the Global settings tab.

  2. Under Foreground, use the color picker to select a color by:

    • Adjusting the slider and selecting from the color chart, or

    • Entering values in the fields.

      Tip: use the up/down arrows to choose between RGB, HSL, or HEX.

  3. If you want your foreground to have a top to bottom gradient effect, repeat for the gradient color, e.g. select a dark red for the color and a bright red for the gradient.

    Screen capture showing an example gradient applied to the foreground of a mailing where the color changes from dark red to a bright red. Image includes the Global settings with the dark red and light red values.

To set an image as your foreground:

  1. Go to the Global settings tab.

  2. Under Foreground, press the Click to Upload button to open the file manager.

  3. In the Select File window, use the Files for dropdown menu to toggle between files at the Project, Workspace, User, and Account level.

  4. Locate and select your image from the file list.

    • If you are using folders, select the folder name to navigate through folders.

    • Use the search bar at the top of the window to search for file names.

    • If your image is not present in the file manager, drag and drop it into the file manager.

      Note: ensure you have selected the correct level and folder for the file first.

  5. Press the Okay button.

Spacing

To add padding to your email:

  1. Go to the Global settings tab.

  2. Under Spacing:

    • Enter a number for your Top padding.

    • Enter a number for your Right padding.

    • Enter a number for your Bottom padding.

    • Enter a number for your Left padding.

Border

To add a border to your email:

  1. Go to the Global settings tab.

  2. Under Border:

    • Enter a number for your border thickness.

    • Choose a border style from the dropdown menu, e.g. dotted.

    • Use the color picker to select a text color by:

      • Adjusting the slider and selecting from the color chart, or

      • Entering values in the fields.

        Tip: use the up/down arrows to choose between RGB, HSL, or HEX.

  3. By default, the border settings are applied to the entire border. Press the custom border icon to enable editing of top, right, bottom, and left borders separately.

Button variant

To change the styling of a button variant:

  1. Go to the Global settings tab.

  2. Under Button Variant, select the variant you wish to edit from the Button Variant dropdown.

  3. Select a font from the Font Family dropdown.

  4. Enter a px value into the Font Size field, e.g. 20px.

  5. Add an optional border to your button.

  6. Enter a value into the Border Radius field to change the amount of rounding on the button, e.g. 0 for square edges instead of rounded edges.

  7. Set your button colors.

  8. Apply optional margins and padding.

To add additional button variants:

  1. Scroll to the bottom of the Button Variant settings.

  2. Press the + Create Variant button.

  3. Enter a name for your button in the Button name field.

  4. Define your button as if re-styling an existing button.

    Tip: the editor displays a preview of your button below the Button name field.

  5. Press the Save Variant button.

Setting button borders, colors, and spacing

Button borders

To add a border to your button:

  1. Go to the Design settings tab.

  2. Under Border:

    • Enter a number for your border thickness.

    • Choose a border style from the dropdown menu, e.g. dotted.

    • Use the color picker to select a border color by:

      • Adjusting the slider and selecting from the color chart, or

      • Entering values in the fields.

        Tip: use the up/down arrows to choose between RGB, HSL, or HEX.

  3. By default, the border settings are applied to the entire border. Press the custom border icon to enable editing of top, right, bottom, and left borders separately.

  4. Enter a number in the Border Radius field to create a button with rounded corners.

Button colors

To change the background and text color of your button:

  1. Select the color preview block in the Background Color field.

  2. Use the color picker to select a background color by:

    • Adjusting the slider and selecting from the color chart, or

    • Entering values in the fields.

      Tip: use the up/down arrows to choose between RGB, HSL, or HEX.

  3. Select the color preview block in the Text Color field.

  4. Use the color picker to select a text color by:

    • Adjusting the slider and selecting from the color chart, or

    • Entering values in the fields.

      Tip: use the up/down arrows to choose between RGB, HSL, or HEX.

Spacing

To add margins and/or padding to your button:

  1. Enter a number for your Top padding.

    Enter a number for your Right padding.

    Enter a number for your Bottom padding.

    Enter a number for your Left padding.

  2. Enter a number for your Top margin.

    Enter a number for your Right margin.

    Enter a number for your Bottom margin.

    Enter a number for your Left margin.

Text

To change the default styling of text blocks:

  1. Go to the Global settings tab.

  2. Under Text:

    • Select a Font Family from the dropdown menu, e.g. Garamond.

    • Type a number into the Font Size field, e.g. 12.

    • Enter a value for the line height in the Line Height field, e.g. 1.5em.

    • Use the color picker to select a text color by:

      • Adjusting the slider and selecting from the color chart, or

      • Entering values in the fields.

        Tip: use the up/down arrows to choose between RGB, HSL, or HEX.

    • Use the color picker to set your link text color by:

      • Adjusting the slider and selecting from the color chart, or

      • Entering values in the fields.

        Tip: use the up/down arrows to choose between RGB, HSL, or HEX.