The new Marketing Campaigns code and design editors are currently in beta.

Table of Contents

What is the new campaign and template editing experience?

With SendGrid Marketing Campaign’s new editing experience you now have complete control over your editing environment: you can choose between an optimized visual design editor and a pure HTML code editor.

The code editor provides users who are importing, editing, or crafting custom HTML a robust environment to upload images, write HTML, and configure their campaign without interference from HTML generating WYSIWYG tools.

The design editor offers users powerful drag & drop WYSIWYG editing tools making it possible for anyone to build beautiful emails, regardless of HTML knowledge. For those familiar with HTML looking to leverage the design editor you can modify the HTML of individual content modules.

Providing Feedback

Thank you for participating in our Closed Beta.

Please go about your normal Marketing Campaigns activities, using this form to share any feedback you may have about the new editing experience. This may include:

  • Positive feedback (e.g. something that was easier to do, or a new capability you liked).
  • Negative feedback (e.g. something that was difficult to do, or functionality you miss from the old editing experience).
  • General feedback (e.g. Anything that was unclear, questions you have, or general comments you’d like to share).

Submit to this form as frequently as you like, there’s no such thing as too much feedback!

Creating New Campaigns

There are two ways to create a new campaign using the beta editor: create a net-new campaign or duplicate an existing campaign.

Following is an explanation of how to create a campaign, and which editor will be available to you.

Create a new campaign

To create a new campaign, navigate to Marketing Campaigns in the left hand navigation menu and click Campaigns. Click Create Campaign in the upper right corner.

Select a template

Next, you will select the template that you would like to use for your campaign. You can either select Blank Template, a custom template that you have already created, or one of SendGrid’s pre-built templates.

Select an editor

Next, you can choose between the design editor and the code editor.

Select Editor

Duplicate a campaign

You can also create a duplicate of a campaign that you would like to reuse. Navigate to the Campaigns page and find the campaign that you want to duplicate. Click the action cog and select Duplicate.

Duplicating a campaign built in the old editor

If the campaign you are duplicating has the label Old Editor, then it will automatically be opened in the old campaign editor. You will see a banner at the top of the editor explaining that you are using the old campaign editor. To move your campaign to the beta editor click Switch to Beta Editor. After clicking the beta link, you will have the option of opening your campaign in either the design editor or the code editor.

During the beta, you will always be able to open your original campaign in the old editor.

Duplicating a campaign built in the beta editor

If the campaign you are duplicating has either the label Code Editor or Design Editor, then your duplicate will be opened in the indicated editor.

Creating new templates

There are several ways to create a new Marketing Campaigns template. Depending on how you create your template, you may be presented with a choice of editor experiences or you may be channeled into the optimal editor for your template.

Following is an explanation of how you can create a template, and which editor is available for each option.

Create a new template

To create a new template, navigate to Marketing Campaigns in the left hand navigation menu and select Templates. Click Create New Template.

Select an editor

When creating a brand new template, you may choose between either the design editor or the code editor.

Duplicate a SendGrid template

You can easily duplicate a pre-built template provided by SendGrid. Navigate to the Marketing Templates page and click SendGrid Templates under “Filter By”.

Choose your template, click the action cog, and select Duplicate. Your duplicate will be automatically opened in the new design editor.

Duplicate a custom template

If you would like to duplicate one of your custom templates, simply navigate to the Marketing Templates page, find your custom template, click the action cog and select Duplicate.

If the template you are duplicating has the label Old Editor, then it will automatically be opened in the old editor. However, you will see a banner explaining that you are using the old editor. Click the link in this banner to move your template to the beta editor.

After clicking the beta link, you will have the option of opening your template in either the beta design editor or the beta code editor.

If the template has either the label Code Editor or Design Editor, your duplicate will be opened in the corresponding editor.

Create a template from a campaign

To create a new template from an existing campaign, navigate to the Campaigns page. Find the campaign you would like to use, click the action cog, and select Create Template. Campaigns labeled Old Editor will allow you to choose between opening the template in the code or design editors.

Campaigns labeled Code Editor or Design Editor will open the template in the corresponding editor.

Editing Existing Campaigns or Templates

Campaigns

To edit an existing campaign, navigate to the Campaigns page and find the campaign that you want to edit. Click the campaign title, or click the Action Cog and select Edit.

Note: you can only edit campaigns that are in “draft” status. Scheduled or sent campaigns cannot be edited. To edit a scheduled campaign, simply unschedule it to return to draft status.

If the existing campaign you selected includes the label old campaign, it will automatically be opened in the old campaign editor. You will see a banner explaining that you are using the old editor. To move your campaign to the beta editor, click Switch to Beta Editor.

If you switch to the beta editor, SendGrid will create a duplicate of this campaign and will open the duplicate in the beta editor.

You will still be able to return to the old editor by opening your original campaign in the old editor—it should have the label Old Editor—but you will be unable to revert the duplicate.

Templates

To edit a template, navigate to the Marketing Templates page and find the template you want to edit.

Hover over the template and click “Edit” or click the Action Cog and select Edit.

You can only edit custom templates, or templates that you have created yourself or duplicated from a SendGrid pre-built template.

As with campaigns, you will be taken to the editor originally used to create the campaign. You cannot switch between the design and code editors after the template has been created.

If you have selected a template with the label old editor, then you will be able to choose to switch to the beta editor. If you do so, you’ll have the option to use the code editor or the design editor. Once you switch, SendGrid will create a duplicate of this template and will open that duplicate in the beta editor.

You can return to the old editor by opening the original template—it will still have the Old Editor label—however you will not be able to revert the duplicated template to the old editor.

Design Editor

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.

Drag & drop modules

ModuleDescriptionUnique Style Options
ImageCan contain a single lineImage background, image margin, link url, alt text, alignment, responsive, height, width
Image & Text Coming soon!This is a columns module with two columns - each can contain either an image or some text.

While the pre-built Image & Text module is not yet released, you may always build your own by adding two column modules–one containing an image module and the other containing a text module.
Image, image position, image background, image margin, text background, text margin
TextCan contain text, tables, and images.Background color, padding, line height
CodeThis is an “anything goes” module where you can enter your own custom HTML.Module styles are not available for code modules.
ColumnsThis module contains multiple drop zones for other non-column modules.container background, container padding, cell padding, columns
ButtonA 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
DividerA visual divider, or horizontal rule, that can be placed between modules.Background color, line color, height, padding
SpacerAllows you to insert spacing between other modules.Background color, spacing (padding-bottom)
SocialIcons that allow for social media integration within your campaigns.

You must specify the URL for each icon. Any icons without a URL in the link field will not appear in the campaign preview, or your delivered campaign.
URL, size, border radius, and icon ( Facebook, Twitter, Instagram, Google+, and Pinterest).

Editing Module HTML

You can edit the HTML for any individual module by selecting that module within the design editor and clicking the < > icon. This opens a modal window in which you can modify the module’s HTML.

Edit module HTML

You can then make any non-structural changes to the content of the module such as updating text, styling, link sources, etc. However, if you do add or remove any HTML tags and click Update, you will see the message “Convert to a Code Module?.” If you would like to keep your structural code changes, you will need to convert the module to a code module.

Convert to code module

To return to the design editor after editing the HTML of a module, simply click Update to save your changes or click Cancel to discard any modifications.

Code module

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 at your leisure.

To add a code module when using the design editor, navigate to the Build tab, click Add Modules, and drag and drop the Code module tile into your content area. To make changes to your module after adding your code, simply double click the module (or click the < > icon) to begin editing.

This is an “anything goes” module. Unlike the other drag & drop modules, there are no specific styles listed under the Module Styles dropdown menu, and you can only edit the module from the code view.

We will 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.

Previewing Your Campaign

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

You can toggle between a preview of how your campaign or template will appear 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.

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

Using Custom HTML

You can add your own drag & drop HTML to a template in the design editor using the Import/Export menu. When importing HTML into the design editor, we recommend that you use Marketing Campaigns drag & drop markup, otherwise your code will be imported as a single text module and you will not be able to leverage our drag & drop functionality.

Import HTML

To import your own custom HTML, navigate to the Build tab in the left hand toolbar and scroll to the Advanced drop down menu. Expand the option titled Import/Export. Click the Import button.

Import HTML

This will open a window where you can paste in your own HTML that you would like to use within the design editor.

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

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

  • First, we will look for any HTML elements that contain the attribute role="modules-container".
  • Next, we will 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 that from scratch that you want to be compatible with the design editor.

Any HTML that lies 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— allowing 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.

Example HTML

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>

Custom Modules

If you are writing your own custom HTML that you plan on importing into the design editor, refer to the following 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, then your code will be imported as a text module.

General requirements

  • All units must be in pixels as px
  • All colors must be entered as hex values
  • Values such as ‘margin’, ‘padding’, and ‘border’ must include all four parameters.

Incorrect:

1
style="padding-top: 50px"

Correct

1
style="padding: 50px 0 0 0"

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>

Space

To add spacing using this module, simply adjust the padding in the tag. For example, the following spacer module will add a spacing of 50 pixels.

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>

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>

Image

Data attributes can be inserted directly in the <img> tag.

1
2
3
4
5
6
7
<table class="wrapper" role="module" data-type="image">
  <tr>
    <td [styles go here] align=['left' or 'right']>
      [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">
          [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>

Code

This is essentially an “anything goes” module where you can paste any custom HTML that you would like to be rendered within your campaign or template.

1
2
3
4
5
6
7
<table class="module" role="module" data-type="code">
  <tr>
    <td>
      [module content]
    </td>
  </tr>
</table>

Social

The social module allows for simple social media integration when creating templates and 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. The module displays when an icon link has been updated to point to a social media destination, providing a visual indicator that links have been properly configured.

Once you have selected your desired icons, you can adjust the size, color, and border radius of the icons to match a template or campaign theme.

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, navigate to the Build tab and scroll down to Advanced and select Import/Export in the left hand toolbar and then click Export. This will begin a download of the raw HTML of the template, not including 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 your exported HTML in the code editor, navigate to the Campaigns page and click New Campaign, select Blank Template, and choose Code Editor. Finally, simply paste the downloaded HTML for the SendGrid template into the code editor.

Edit 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, navigate to the Build tab in the left hand toolbar and scroll to the Advanced menu. Expand the option titled Edit HTML Head. Click the Edit button to begin editing your HTML head.

Edit HTML head

You will see a modal window appear where you can insert your own custom HTML. Once you’ve finished making your changes, click the Update button.

Example: Adding custom fonts using the HTML head

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

Make sure that you also 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.

First, open the HTML Head by navigating to the Build tab in the design editor. Scroll down to the Advanced drop-down menu and select Edit HTML Head.

Click Edit to begin making your changes.

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>

Code Editor

If you want to create a template or campaign using only your own custom HTML, we recommend using SendGrid’s code editor. The code editor provides the tools you need to successfully import, edit, preview, and of course send your campaign.

To get started with the code editor, either create a new blank campaign or template—or open one of your old campaigns or templates labeled Old Editor—and select Code Editor in the modal window that appears.

Entering your code

If you have already built the HTML that you want to use in another application, simply 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, which offers helpful features such as predictive text completion, color coded syntax highlighting, and detailed error messaging.

Once you create a new campaign or template in the code editor, your campaign/template will always be opened in the code editor.

Uploading Images

To add images to your campaign or template when using the code editor, select the Images tab in the left hand toolbar and click Manage Image Library. This will open a modal window where you can upload images to your image library.

Manage image library

To insert an image into your campaign or template, select the image you want from your image library. You will be taken to the Image Details tab. Copy the URL under the Image Source URL field by clicking Copy URL.

Paste this URL in the image source tag in your campaign or template’s HTML.

For example: <img src="your image url here">

Previewing your campaign

As with the design editor, you can preview your campaign or template by clicking the Preview button in the upper left corner.

You can toggle between a preview of how your campaign or template will appear 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.

Frequently Asked Questions

How do I opt out of the beta?

For the duration of our closed beta, you may opt out of the new editing experience at any time by contacting support.

When you open one of your old campaigns or templates in a beta editor, SendGrid creates a duplicate of the original campaign/template which is opened in the beta editor. You may always open the original campaign or template in the old editor.

What will happen to my old campaigns and templates?

For the duration of the beta, you will continue to have the option of opening your old campaigns and templates in the old editor. Whenever you open an old campaign or template in a beta editor, a duplicate is created. While you may not open the duplicate in the old editor, your originals may always be opened in the old editor.

Can I use both editors?

When opening a pre-existing campaign or template you will be given the option of opening the duplicate of that campaign/template in either the design editor or the code editor. Once you have made your selection, you will not be able to switch between the design and code editors when editing that specific campaign/template.

However, for the duration of the beta, you will be able to open your original, old campaigns and templates in the old editor.

Can I move a campaign or template created in the beta editor to the old editor?

You cannot move a campaign/template from the beta editor to the old editor. Any new campaigns/templates created in the beta editor will only be accessible from the beta editor. However, you can still open your old campaigns/templates in the old editor.

Why did I get the error “We were unable to detect any drag & drop modules?”

If you want to import HTML containing drag & drop compatible modules, it is important that you structure your content according to the format explained here.

If you receive the error “We were unable to detect any drag & drop modules”, first ensure that you include the following attributes in your HTML:

  • The attribute role=“modules-container” must be included in all elements containing drag & drop modules
  • Every drag & drop module must include the attribute role=module

If you continue to receive an error, please refer to our example HTML for building your own drag & drop modules.