The design editor is where you build your templates and campaigns using drag & drop and WYSIWYG tools. To get started with the design editor, simply navigate to Marketing Campaigns from the left hand navigation menu and select either Campaigns or Templates. Whenever you open one of your campaigns or templates you will be taken to the design editor.

You can use the design editor to make changes to the various modules like text, images, buttons, links, and custom code that make up the content you include in your campaigns.


In addition to the general WYSIWYG controls, you can also toggle on the drag & drop editor which makes it easy to click and drag various pre-built modules into your campaign.

The design editor can be reached either by creating or editing a template from the Templates page, or by creating or editing a campaign from the Campaigns page.

Design / Code

Upon first opening the design editor, you will see a toggle allowing you to switch between the design and code editing experiences. Switching to the code editor will allow you to import, edit, and preview your campaign’s raw HTML.

Warning: toggling between the Design and Code editors, may cause your underlying HTML to be altered if the editor detects potentially faulty HTML.

Preview

You can easily open a preview of your campaign to see how it will appear on a desktop platform, a mobile platform, or as a plain-text email by clicking one of the preview icons.


Save your work!

To save your template or campaign when using the design editor, simply click the Save Draft/Save Template button.

The design editor will automatically save your changes every 2 minutes.

Settings

Template or Campaign Settings

You can name your template or campaign under the Settings tab in the left hand sidebar in the Template Name or Campaign Name text field.

Drag & drop editor

Under the name field, you will find a toggle switch allowing you to turn on the drag & drop editor. Enabling the drag & drop editor adds a new tab to the left-hand sidebar titled Build where you can add and edit different pre-built content modules.

For more details, please refer to our drag & drop editor documentation.

Tags

Substitution Tags

The Tags tab lists the various substitution tags that you can add to your campaign or template. Click the copy icon to easily copy a substitution tag, then paste the tag anywhere you want the substituted value to be placed in your content.

The following tags are available under the Tags tab in addition to any custom fields you’ve already added.

Default Values

You can choose a default value for a substitution tag to be displayed in the event that there is no unique replacement value. For example, users often write “Hello [%first_name%]” with the intent of replacing the substitution tag with each recipient’s name. However, if there is no name on file for a particular recipient, the email will read “Hello [%first_name%]” instead of “Hello John”.

This can be avoided by assigning a default value to a substitution tag using the syntax:

[%first_name|Valued Customer%]

Now, if no name is on record for a particular recipient, the email will read “Hello Valued Customer” instead of “Hello [%first_name%]”. You may choose any value to set as the default.

Substitution Tags for Personalization

The following substitution tags are very useful when personalizing your content for each of your recipients.

  • [%email%] - The email address of the recipient
  • [%first_name%] - The first name of the recipient
  • [%last_name%] - The last name of the recipient

Sender Identity, Unsubscribe Links, and Weblink Tags

The sender identity, unsubscribe, and weblink substitution tags are very useful when building the footer for your campaign. Providing a quick and easy way for your recipients to unsubscribe from your marketing email along with being open about your identity and location not only ensures that you are CAN-SPAM compliant, but also builds trust with your recipients.

  • [Sender_Name] - The name of the sender selected when sending your campaign
  • [Sender_City] - The city on record for the sender selected when sending your campaign
  • [Sender_State] - The state on record for the sender selected when sending your campaign
  • [Sender_Zip] - The zip code on record for the sender selected when sending your campaign
  • [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_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.
  • [Weblink] - This tag will be replaced with a link allowing your recipients to view your campaign content directly within their web browser.

You can use substitution tags for both web links and unsubscribe links.

For a more detailed discussion of the various fields SendGrid provides, please read What is the difference between custom fields, reserved fields, and system fields?

For help understanding the unsubscribe, sender ID, and weblink system tags, click here.

WYSIWYG Toolbar

When editing the text, text+image, or WYSIWYG modules you will have access to a general toolbar presenting some basic formatting and styling options.

  • Clicking this icon will insert a table.

  • Clicking this icon will open the image uploader.

  • Clicking this icon will insert either a web link or an email link.

  • Clicking this icon inserts a horizontal line or rule.

Uploading Images

To upload an image, click the big plus icon or the upload button after clicking the image icon described above. Then drag your image to the upload box. SendGrid will show you the status of your upload and then show a thumbnail of your image in your image library.

You can store up to 1,000 images in the image library. The max file size for each individual image is 10MB.

Inserting an Image Into Your Template or Campaign

To insert an image into your template, just click the image thumbnail in the library and you will see a form that will let you set how the image will be inserted.

From here, you can add alt text, change the default height and width, and even set a default alignment for your images.