Drag & Drop Editor

Configure default colors and fonts in Settings to be used in Drag & Drop emails and Snippets.

Color Palette Definition

Select up to 8 different colors to display as default colors in the Drag & Drop editor.  To add a custom color, follow these steps.

  1. Slick on the '+' icon
  2. Select from the color picker, enter the HEX number, or enter the R G B codes.
  3.  Click Save

To delete a selected color, hover over the color and click the Trash Can icon.

Custom Fonts

Easily add any number of custom fonts to be used in Drag & Drop emails and Snippets.  The following information is required when adding custom fonts:

  • Font Name
  • Font URL
  • Font Family

The Font Name is used to display the font in the Drag & Drop editor.  It can be the actual name of the font or anything that will make it easily recognizable to your users.

The Font URL is the address of the CSS document used to embed the font files and the CSS rules that apply them.  It's a best practice to use a dedicated CSS sheet. If the CSS contains additional styles, the host application is likely to inherit them. Google fonts already provide web fonts that work in the editor and most email clients. 

This URL must be delivered on the https protocol, with a valid SSL certificate. Also, Policy cors must be enabled in the host to deliver the font files.

The Font Family should include the name of the custom font and the fall-back choices. Remember that Gmail and other email clients will not display web-fonts. It's important to add a web-safe font or a general font-family style (serif, sans-serif, or monospace). 

Below is an example of a custom font entry:

Note in this example, that the custom font being created is the first entry in the Font Family field.

When selecting a custom font to be used within the editor, the URL will be checked for a valid font regardless of what type of file the URL points to. If it doesn't find a valid font, it will default to the list of fonts that are defined in Font Family in the order they were provided. If those aren't available as well, it will default to whatever font the template was using

Adding a Custom Font

To add a new custom font, select the (+) icon on the right side of the Custom Font label. This will display the required field for your custom font. 

Enter the information into the required field and then click Save.  Repeat these steps for any additional custom fonts.

Removing Custom Fonts

To remove an individual custom font, click on the Trash Can icon next to that specific font.  To clear all custom fonts, click on the Clear All icon at the top of the page.