The design editor is where you build your templates and campaigns using drag & drop WYSIWYG tools. You can use the design editor to make changes to the various modules like text, images, buttons, links, columns, or custom code that make up the content you include in your campaigns.

Getting Started With the Design Editor

  1. From the left-hand navigation, select Marketing, and then click Campaigns.
  2. Click Create Campaign.

    To create a campaign using an existing campaign, find the campaign you want to use and click the action menu next to the campaign and then select Edit or Duplicate.

  3. Select the template that you want to use for your campaign.
    You can select a Blank Template, a custom template that you have already created, or one of SendGrid’s pre-built templates. For more information, see Working With Templates.

  4. Select Design Editor, and then click Continue.
    The Design Editor opens.

Using Drag & Drop Modules

Drag & drop editing helps you swiftly build your campaign using pre-built content modules. You can easily edit individual modules in the left-hand sidebar and reorder modules in your campaign body with a simple click and drag of your mouse.

To add a drag & drop module:

  1. Navigate to the Build tab, and then click Add Modules.

  2. Find the module tile you want to add to your campaign and drag and drop it into your content area.

  3. Edit the module settings and add your custom content to build your campaign.

Drag & Drop Module Descriptions and Styles

You can add the following drag & drop modules to your campaign:

Module Description Unique Style Options
Button A clickable button that links to a URL. button color, border color, font color, width, height, padding, border radius, font size, button text, button URL, alignment,container background, container padding
Columns This module contains multiple drop zones for other non-column modules. container background, container padding, cell padding, columns
Code This is an “anything goes” module where you can enter your own custom HTML. Module styles are not available for code modules.
Text Can contain text, tables, and images. Background color, padding, line height
Image Can contain a single image.Data attributes can be inserted directly in the <img> tag. Image background, image margin, link url, alt text, alignment, responsive, height, width
Image and Text This is a columns module with two columns - each can contain either an image or some text. Image, image position, image background, image margin, text background, text margin
Spacer Allows you to insert spacing between other modules.To add spacing using this module, simply adjust the padding in the <td> tag. For example, the spacer module will add a spacing of 50 pixels. Background color, spacing (padding-bottom)
Divider A visual divider, or horizontal rule, that can be placed between modules. Background color, line color, height, padding
Social Icons that allow for social media integration within your campaigns.The module offers five different social media icon options (Facebook, Twitter, Instagram, Google+, and Pinterest) all of which can be toggled on or off as well as fully customized to match individual branding and design standards. URL, size, border radius, and icon ( Facebook, Twitter, Instagram, Google+, and Pinterest).

Using Global Styles

In addition to editing the styles for individual modules within your campaign/template, you may also make changes to the global styling of your entire campaign/template. This includes attributes such as the background color, text color, or font family.

The email body is the entire area that your campaign or template fills inside your recipient’s browser or email inbox.

Under the Global Styles dropdown menu in the left hand sidebar, click Email Body or Content Container to view and edit the following styles:

Global Style Style Options
Email Body

Background Color - This is the color for the background of your entire campaign/template.

Text Color - This is the color of all text in your campaign/template.

Link Color - This is the color of all links in your campaign/template.

Font Family - This is the font family to be used for all text in your campaign/template.

Font Size - This is the default font size to be used for all text in your campaign/template.

Content Container

Width - This is the width of the container for your entire campaign/template. Your modules will all be contained within these dimensions.

Background Color - This is the color of the area containing your modules.

Padding - This is the amount of space that you want between your modules and the boundaries of the content container.

Editing Module HTML

To edit Module HTML:

  1. Select the module in the design editor and click the < > icon.
    A window opens where you can edit the module HTML.
  2. When you are finished editing the HTML, click Update.

If you make any structural code changes, you need to convert the module to a code module.

Code Modules

The code module is a unique drag & drop module that allows you to insert any custom HTML in your campaign as a single module which can be relocated and edited.

The Design Editor does not modify or validate any HTML inserted via a code module. Please be careful when using custom HTML, and always preview your campaign before sending it.

Adding Images

To upload an image:

  1. Navigate to the Build tab, and then click Add Modules.
  2. Select the Images module, and drag and drop it into your content area.
    This opens a window where you can upload images to your image library.
  3. Drag and drop the image you want to use from your files or select Choose images to upload.

To insert an image:

  1. Navigate to the Build tab, and then click Add Modules.
  2. Drag and drop the Images module into your content area.

    A window opens where you can select images from the image library.
  3. Select the image you want to add to your campaign.
    The Image Details tab opens.
  4. Insert your image in the campaign by clicking Save Image.

Using Substitution Tags

Substitution tags allow you to easily generate dynamic content for each recipient on your contact list. When you send to a list of recipients you can specify substitution tags specific to each recipient.

To add a substitution tag to your campaign:

  1. Navigate to the Tags tab.
  2. Locate the tag you want to add to your campaign and click the copy icon.
  3. Paste the tag into the module.

You can add the following substitution tags to your marketing campaign:

Substitution Tag Description Type
[%email%] The email address of the recipient Personalization
[%first_name%] The first name of the recipient Personalization
[%last_name%] The last name of the recipient Personalization
[Sender_Name] The name of the sender selected when sending your campaign Sender Identity
[Sender_City] The city on record for the sender selected when sending your campaign Sender Identity
[Sender_State] The state on record for the sender selected when sending your campaign Sender Identity
[Sender_Zip] The zip code on record for the sender selected when sending your campaign Sender Identity
[Unsubscribe] This tag will be replaced with a link allowing your recipient to be added to the unsubscribe group selected when sending your campaign. Unsubscribe
[Unsubscribe_Preferences] This tag will be replaced with a link allowing your recipients to opt into or out of the various email unsubscribe groups you offer. Unsubscribe
[Weblink] This tag will be replaced with a link allowing your recipients to view your campaign content directly within their web browser. Weblink

For contacts with no entry in a custom field, the substitution tag appears blank. To set a default value, use the following pattern:

[%first_name | Valued Customer%]

Previewing Your Campaign

To preview your campaign or template, click the Preview button in the upper-left corner.

You can toggle between a mobile and desktop preview mode by clicking either the desktop or mobile phone icons above the content area.

To view a plain-text version of your campaign or template, click the T icon. When in this preview mode, you can edit the plain text content of your campaign or template by clicking the Edit Plain Text button.

When previewing a campaign, you will also see a preview of the From name, the Subject, and the preheader text that you have selected.

Editing the HTML Head

The HTML <head> element is where you can define any metadata you would like to include with your campaign or template. For example, you can use the <head> element to define any custom fonts or CSS styles you would like to use.

To edit the HTML head of your campaign or template:

  1. Navigate to the Build tab in the left-hand toolbar and scroll to the Advanced menu.
  2. Expand the option titled Edit HTML Head.
  3. Click Edit to begin editing your HTML head.
    A window appears where you can insert your custom HTML.
  4. Once you’ve finished making your changes, click the Update button.

Adding Custom Fonts Using the HTML Head

Most commonly, users add custom fonts by using the tag to reference a web font hosted somewhere on the internet. For example, Google Fonts.

Make sure that you define a web-safe font to use as a fallback if one of your recipient’s clients does not support your custom font.

While some inbox providers do not support web fonts, the following popular clients do provide web font support:

  • Apple Mail
  • Outlook.com app
  • Outlook 2000
  • Default Android Mail app (not the Android Gmail app)
  • iOS Mail

This list may change, and we cannot guarantee 100% support from any of these clients.

To add a custom font using the HTML head:

  1. Open the HTML Head by navigating to the Build tab in the design editor.
  2. Scroll down to the Advanced drop-down menu and select Edit HTML Head.
  3. Click Edit to begin making your changes.
  4. Insert a <link> tag containing an href attribute pointing to your web font.

For example:

1
<link href="https://fonts.google.com/specimen/Oswald" rel="stylesheet">

Next, you’ll have to add add a <style> to specify that you want to use this new font family:

1
2
3
4
5
6
<style>
    body {
        font-family: 'Oswald',
        sans-serif;
    }
</style>

Importing Custom HTML With Drag & Drop Markup

If you are writing your own custom HTML that you plan on importing into the design editor, refer to the drag & drop code examples to ensure that any modules you create are compatible with our drag & drop functionality. If you do not specify a data type that matches one of our drag & drop modules your code will be imported as a text module.

To import custom HTML:

  1. Navigate to the Build tab in the left-hand navigation.
  2. Scroll down and select the Advanced drop-down menu.
  3. Expand the option titled Import/Export.
  4. Click Import.
    A window opens where you can paste in your own HTML.

  5. Paste or enter the HTML you want to use, and then click Import.

Any HTML that you import replaces all existing content in your campaign or template. If you want to import only a section of HTML, use a code module.

Drag & Drop Markup

SendGrid parses your custom HTML, looking for any drag & drop compatible modules.

  • First, we look for any HTML elements that contain the attribute role="modules-container".
  • Next, we look for all HTML elements with the attribute role="module" that are descendants of the “modules-container” element.

The role="modules-container" attribute is required so that we know where your drag and drop modules are located. All of the SendGrid pre-built templates include the role="modules-container" by default. You are only required to include this attribute when creating a campaign or template from scratch that you want to be compatible with the design editor.

Any HTML outside an element with the “modules-container” attribute will be discarded. Only supported styling options and attributes will be included.

If you don’t include the “modules-container” attribute in any of your custom HTML, then all of your HTML will be imported as a single text module.

If your HTML does contain drag & drop modules, then these modules will be imported into your campaign or template. This allows you to move and edit them as you normally would.

However, if your custom HTML is not compatible with drag & drop then your imported HTML will be imported as a text module.

Following is an example of how you should structure and organize your custom HTML, where [module content] represents the content of your modules.

1
2
3
4
5
6
7
8
9
10
11
<div role=”modules-container”>
  <table role=”module” data-type=”button”>
    [ module content ]
  </table>
  <table role=”module” data-type=”text”>
    [ module content ]
  </table>
  <table role=”module” data-type=”image”>
    [ module content ]
  </table>
</div>

Drag & Drop Code Examples

Module Custom Module Code Examples
Image
1
2
3
4
5
6
<table class="wrapper" role="module" data-type="image">
  <tr>
    <td [styles go here] align=['left' or 'right']>
      [MODULE CONTENT]
    </td>
  </tr>
Image & Text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<table role="module" data-type="imagetext">
  <tr>
    <td>
      <table>
        <tr role="module-content">
          <td class="templateColumnContainer" >
            <table>
              <tr>
                <td class="leftColumnContent" role="column-one">
                  <table role="module" data-type="image">
                    <tr>
                      <td role="module-content">
                        [MODULE CONTENT]
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td class="templateColumnContainer" >
            <table>
              <tr>
                <td class="rightColumnContent" role="column-two">
                  <table role="module" data-type="text">
                    <tr>
                      <td role="module-content">
                        [MODULE CONTENT]
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Text
1
2
3
4
5
6
7
    <table class="module" role="module" data-type="text">
  <tr>
    <td [styles go here] bgcolor=[some color]>
      [MODULE CONTENT]
    </td>
  </tr>
</table>
Code
1
2
3
4
5
6
7
    <table class="module" role="module" data-type="code">
  <tr>
    <td>
      [MODULE CONTENT]
    </td>
  </tr>
</table>
Columns
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <table role="module" data-type="columns">
  <tr>
    <td [styles go here] bgcolor=[some color]>
      <table>
        <tr>
          <td class="templateColumnContainer column-drop-area">
          [MODULE CONTENT]
          </td>
          <td class="templateColumnContainer column-drop-area">
          [ANOTHER MODULE CONTENT]
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Button
1
2
3
4
5
6
7
8
9
10
11
12
13
 <table class="module" role="module" data-type="button">
  <tr>
    <td [styles go here] bgcolor=[some color] align=['left' or 'right']>
      <table class="wrapper-mobile">
        <tr>
          <td [styles go here too] bgcolor=[some color]>
            [MODULE CONTENT]
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Divider
1
2
3
4
5
6
7
8
9
10
11
    <table class="module" role="module" data-type="divider">
  <tr>
    <td [styles go here] bgcolor=[some color]>
      <table height=[some height]>
        <tr>
          <td bgcolor=[some color]></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
Spacer
1
2
3
4
5
6
    <table class="module" role="module" data-type="spacer">
  <tr>
    <td style="padding: 50px 0 0 0" bgcolor=[some color]>
    </td>
  </tr>
</table>
Social
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <table class="module" role="module" data-type="social">
 <tbody>
  <tr>
   <td [styles go here] data-align=['left', 'right', or 'center']>
    <table>
     <tbody>
      <tr>
       [MODULE CONTENT]
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

Exporting HTML From the Design Editor

To export the HTML of a template from the design editor:

  1. Navigate to the Build tab in the left-hand navigation.
  2. Scroll down and select the Advanced drop-down menu.
  3. Expand the option titled Import/Export.
    This starts the raw HTML download of the template, excluding images.

SendGrid hosts the images included in the pre-built templates and any images you have uploaded to the image library, so when you export a template’s HTML from the design editor, the embedded URLs in each <img> tag will remain valid.

To open exported HTML in the code editor:

  1. From the left-hand navigation, select Marketing and then click Campaigns.
  2. Click New Campaign, and then select Blank Template.
  3. Select Code Editor.
  4. Paste the raw SendGrid template HTML into the code editor.