Design & Code Editor

Marketing Campaigns is all about supporting your unique workflow, so you can get your work done more efficiently. You have complete control over the way that you create and edit each new campaign, thanks to two distinct editing experiences.

Choosing The Right Editor

The Code Editor is perfect for users who are importing, creating or editing custom HTML. It offers a robust environment to upload images, backed by a feature-packed editor – complete with split-screen preview, error flagging, scroll-syncing, syntax highlighting and more. While other email editors may be notorious for adding excess code to your project, rest assured that our editor never modifies your carefully crafted HTML.

The Design Editor, complete with HTML access to each content module, offers powerful “what you see is what you get” (WYSIWYG) editing. It features a diverse library of content blocks, allowing you to build beautiful emails quickly and intuitively. Once placed into your campaign, each module offers access to edit the HTML and a robust panel of settings – perfect for customizing content precisely to your needs.

The Design Editor features a number of convenient ways to edit the HTML content of your email –– including the ability to edit the HTML of each drag-and-drop module, edit the HTML head of your message, and even import complete code using our Drag & Drop Markup.

The Code Editor

SendGrid’s marketer-friendly code editor features a powerful, split screen editing experience – perfect for building campaigns with your own custom HTML. It offers a number of helpful features, often found in native editors.

Code Editor Features

Live Template Preview - See how your email looks in real-time, as you write and edit code. No more tabbing between windows, refreshing or re-rendering. Marketing Campaigns’ split-screen editing experience displays your code on the left, and a pixel-perfect preview on the right.

Code & Tag Completion - As you type, the editor automatically makes common suggestions. You can accept them by tapping tab or return –– or, simply continue typing to ignore. Additionally, as you open a tag of any kind, the code editor automatically places a closing tag.

Error Flagging - If the code editor finds something that seems odd or inconsistent with best practices, instead of interrupting your workflow, it places a small red “x” in the margin of the line so you can come back and check when it’s convenient for you.

Scroll Syncing - Easily pinpoint the HTML element you wish to edit. Click anywhere on the right-side preview of your email, and the code on the left automatically jumps to the corresponding line.

Syntax Highlighting - As you edit, parts of your code highlights in various colors according to the type of syntax. This added dimension provides clarity and efficiency as you search for, locate and edit code elements.

Getting Started With The Code 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.
  3. Then, select Edit or Duplicate.
  4. Select Code Editor, and then click Continue.

You can only edit unsent campaigns.

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.

When you open one of your existing campaigns or templates in the new editor, SendGrid creates a duplicate of the original campaign or template. You may always open the original campaign or template in the previous editor.

If you have already built the HTML that you want to use in another application, copy and paste that code directly into the content area of the code editor. You can also write the HTML for your campaign or template directly in the code editor.

The split-screen view of the Code Editor allows you to see a real-time preview of your campaign. You can toggle between a preview of how your campaign or template appears on a recipient’s desktop and mobile phone by clicking either the desktop or mobile phone icons above the content area. You can also view a plain-text version of your campaign or template by clicking 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.

Once you create a new campaign or template in the Code Editor, it cannot be edited using the Design Editor.

Uploading Images

  1. Select the images icon above the HTML code. A window opens where you can upload images to your library.
  2. Select the image you want to add from your image library.
  3. Select the image details tab and copy the URL in the Image Source URL tab by clicking Copy URL.
  4. Paste this URL in an image source tag in your campaign or template's HTML. Example: <img src="your image URL here">

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. Click the Settings tab on the left side of the editor.
  2. Click the Tags tab at the top of the Settings window.
  3. Locate the tag you want to add to your campaign and click it to automatically copy it to your clipboard.
  4. Paste the tag into the 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
<%asm_group_unsubscribe_
raw_url%>
*
This tag is replaced with a link allowing your recipients opt out of any emails you send using the chosen Unsubscribe Group. This tag should only be used when editing Transactional Templates. Unsubscribe
<%asm_preferences_
raw_url%>
*
This tag is replaced with a link allowing your recipients to opt out of any email unsubscribe groups you offer. This tag should only be used when editing Transactional Templates. Unsubscribe
<%asm_global_unsubscribe
_raw_url%>
*
This tag is replaced with a link allowing your recipients to opt out of all email communication. This tag should only be used when editing Transactional Templates. Unsubscribe
[Weblink] This tag is 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%]

Adding Categories

Assigning categories to a campaign allows you to track emails based on your own categorization system. By assigning your campaign to a category, you can track statistics across multiple similar campaigns. Example categories may include: “Weekly Digest,” “Product Announcements.”

  1. Click the Settings panel located on the left-hand side of the window to expand it.
  2. Navigate to the Settings tab, and click Campaign Settings to expand the menu.
  3. Locate the Categories field under Campaign Settings.
  4. Select the Add Categories field. Type in the tag that you'd like to add, and press enter.

Currently, only 10 categories can be added to each campaign.

The Design Editor

SendGrid’s flexible design editor allows you to build your templates and campaigns using intuitive, drag and drop tools. The “What you see is what you get” (WYSIWYG) editing experience features a library of modules for easily adding content to your campaign.

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. Then, select Edit or Duplicate.

  1. 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 Marketing Templates
  2. 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.

  1. Find the module tile you want to add to your campaign and drag and drop it into your content area.
  2. 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 adds 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).
Unsubscribe This module is pre-populated with your sender information and a hyperlink to the [unsubscribe] tag which are required in order to be compliant with anti-spam laws. Background color, padding, line height, font, font size, link color, alignment, Address Line, Unsubscribe Settings.

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 are all 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 use any custom field data you've added to Marketing Campaigns to dynamically generate unique content for each recipient of your campaign. A common example is to add a recipient's first name to the body (or even the subject line) of your campaign.

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.

Any custom fields you've created appear in the Tags tab of the Marketing Campaigns editor. Email is available by default.

You'll also see a number of System Fields that you can place in the body of your campaign to populate with your data. These include:

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 is replaced with a link allowing your recipients opt out of any emails you send using the chosen Unsubscribe Group. Unsubscribe
<% unsubscribe_
preferences %>
*
This tag is replaced with a link allowing your recipients to opt out of any email unsubscribe groups you offer. Unsubscribe
<% Weblink %> This tag is replaced with a link allowing your recipients to view your campaign content directly within their web browser. Weblink

* For your convenience, these substitution tags are included by default in the Unsubscribe Module found on the Tags tab of the Design Editor.

The <%asm_group_unsubscribe_raw_url%>, <%asm_preferences_raw_url%>, and <%asm_global_unsubscribe _raw_url%> tags are reserved for use in Transactional Templates and should not be used in Marketing Campaigns.

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 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:

<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:

<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 is 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.

  1. 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 is discarded. Only supported styling options and attributes are included.

If you don't include the "modules-container" attribute in any of your custom HTML, then all of your HTML is imported as a single 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.

Drag & Drop Code Examples

  • Image
  • Image & Text
  • text
  • code
  • columns
  • button
  • divider
  • spacer
  • social
<table class="wrapper" role="module" data-type="image">
  <tr>
    <td [styles go here] align=['left' or 'right']>
      [MODULE CONTENT]
    </td>
  </tr>
  <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>
  <table class="module" role="module" data-type="text">
    <tr>
      <td [styles go here] bgcolor=[some color]>
        [MODULE CONTENT]
      </td>
    </tr>
  </table>
  <table class="module" role="module" data-type="code">
    <tr>
      <td>
        [MODULE CONTENT]
      </td>
    </tr>
  </table>
  <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>
  <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>
  <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>
  <table class="module" role="module" data-type="spacer">
    <tr>
      <td style="padding: 50px 0 0 0" bgcolor=[some color]>
      </td>
    </tr>
  </table>

Exporting HTML From the Design Editor

To export template HTML 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 remains 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.

Creating Categories

Assigning categories to a campaign allows you to track emails based on your own categorization system. By assigning your campaign to a category, you can track statistics across multiple similar campaigns. Example categories: “Weekly Digest,” “Product Announcements.”

To add a category:

  1. Navigate to the Settings tab, and click Campaign Settings to expand the menu.
  2. Find the Categories field.
  3. Enter the name of a new category or select a previously used category from the drop-down menu.

Additional Resources

See a mistake? Edit this page