Use the Design Editor

To build your templates and emails with intuitive, drag-and-drop tools, use the Twilio SendGrid Design Editor. To add content to your email, the visual editing experience features a library of modules.

To use the Design Editor, log in to the Twilio SendGrid console.

Get started

Decide what you want to create: a Single Send message or an Automation series.

Single SendsAutomations

For Single Sends, you can choose one of three design options:

Use a blank template
Start with a custom template that you created
Start with a pre-built template from Twilio SendGrid

To use the Design Editor for Single Sends:

Go to Marketing > Single Sends.
Decide if you want to create a message or edit an existing message.

Create messageModify existing messageUse an existing message

Click Create a Single Send. The Select a Design page appears.
Choose from either Your Email Designs or SendGrid Email Designs.
As you hover over each design, text appears under the design indicating which editor, if any, someone used to create the design. You can choose a different editor, but Twilio recommends the editor displayed.
Hover over your chosen template and click Select. The Select Your Editing Experience page appears.
Click Select in the Design Editor box. The Design Editor page appears with a banner that states Success! You've added a new single send.
Add the metadata for your design.
- Add a human-readable label for this version in the Version Name box.
- Add a subject line for your email in the Subject box. As you can set a subject line when sending the email, this value is optional .
- Add an extended preview of your email in the Preheader box. This is also optional and can be set when you send your email.
In the Categories box, add categories in one of two ways:
Warning about categories and personal information
(error)
Never name a category with PII
Twilio stores category names as non-personally identifiable information (PII). Twilio SendGrid doesn't treat this data as PII.

Twilio can use this data for counting or other operations as Twilio SendGrid runs its systems.

You can't redact or remove these fields.

Twilio employees can view this value.

Twilio stores this data long-term, even after you've left the Twilio SendGrid platform.
1. Click in the Categories box and choose a category from the dropdown menu.
2. Click in the Categories box and type the name of a category you want to add.
  - If the category exists, it displays once you type enough characters in its name.
  - If it doesn't exist, it prompts you to add a category with that name.
Click Save.

From the list of Single Sends, choose an existing Single Send.
Click ⋮ (action menu) next to that Single Send.
Choose Edit. The editor page last used for the message, Code or Design, appears.
(warning)
Warning
You can only edit unsent emails.
Add the metadata for your design.
- Add a human-readable label for this version in the Version Name box.
- Add a subject line for your email in the Subject box. This is optional. You can set a subject line when sending the email.
- Add an extended preview of your email in the Preheader box. This is also optional and can be set when you send your email.
In the Categories box, add categories in one of two ways:
Warning about categories and personal information
(error)
Never name a category with PII
Twilio stores category names as non-personally identifiable information (PII). Twilio SendGrid doesn't treat this data as PII.

Twilio can use this data for counting or other operations as Twilio SendGrid runs its systems.

You can't redact or remove these fields.

Twilio employees can view this value.

Twilio stores this data long-term, even after you've left the Twilio SendGrid platform.
1. Click in the Categories box and choose a category from the dropdown menu.
2. Click in the Categories box and type the name of a category you want to add.
  - If the category exists, it displays once you type enough characters in its name.
  - If it doesn't exist, it prompts you to add a category with that name.
Click Save.

Click ⋮ (action menu) next to an existing Single Send.
Click Create Design. The Select Your Editing Experience page appears.
Click Select in the Design Editor box. The Design Editor page appears with a banner that states Success! You've added a new single send.
Add the metadata for your design.
- Add a human-readable label for this version in the Version Name box.
- Add a subject line for your email in the Subject box. This is optional. You can set a subject line when sending the email.
- Add an extended preview of your email in the Preheader box. This is also optional and can be set when you send your email.
In the Categories box, add categories in one of two ways:
Warning about categories and personal information
(error)
Never name a category with PII
Twilio stores category names as non-personally identifiable information (PII). Twilio SendGrid doesn't treat this data as PII.

Twilio can use this data for counting or other operations as Twilio SendGrid runs its systems.

You can't redact or remove these fields.

Twilio employees can view this value.

Twilio stores this data long-term, even after you've left the Twilio SendGrid platform.
1. Click in the Categories box and choose a category from the dropdown menu.
2. Click in the Categories box and type the name of a category you want to add.
  - If the category exists, it displays once you type enough characters in its name.
  - If it doesn't exist, it prompts you to add a category with that name.
Click Save.

To use the Design Editor for Automations:

Go to Marketing > Automations.
Decide if you want to create a welcome message or a custom existing message.

Create welcome automationCreate custom automation

Click Create an Automation. The Select an automation type page appears.
Under Welcome Automation, click Select. The Edit Automation page appears.

Define the automation workflow and settings.

Question	Properties	Action
What is the name of this automation?	Automation Name	Enter a human-readable name for this Automation series.
When will your contacts enter the automation?	Entry Criteria	Choose the list or segment that this series targets. Any contact added to this list or segment gets sent the messages in the series. Change the default value of All Contacts. Otherwise, any contact you add also gets added to this Automation series, resulting in additional unwanted email messages.
When will your contacts leave the automation?	Exit Criteria	Choose the condition that removes a contact leaves the workflow:
		Contacts have received all emails in the automation: The contact exits the Automation series after they receive every message in the series.
		Contacts no longer meet the entry criteria: Before sending an email message in your series, Twilio SendGrid checks that each contact belongs to the entry criteria list or segment. Any contacts on the list or segment get removed from the next send.
		Contact meets following criteria: To filter and remove contacts from your Automation, you can build a specific condition. Recipients that meet this condition exit the Automation series within 24 hours. Twilio SendGrid limits each parent account and subuser to 15 exit criteria across all Teammates. When you reach that limit, you can't duplicate, save, or enable Automations using Contact meets following criteria.
What Unsubscribe Group and Categories would you like to assign to these messages?	Unsubscribe Group	Choose the group into which Twilio places recipients who unsubscribe from your email series.
	Categories	Choose or create one or more self-titled topics that help organize and track your email series.
	IP Pools	If you have dedicated IP addresses grouped into IP Pools, choose a pool through which Twilio sends messages in the Automation series.
What email(s) are included in your automation?		Define either a single message or a workflow for a series of messages. Choose when each message gets sent. Keep workflows to 10 messages, longer workflows risk server timeouts and save failures.

For each email message in the series, hover over the design and click Edit. The Design Editor appears.
(information)
Info
You can edit the Welcome Series Automation only with the Design Editor.
Click Save.
To activate the automation, click Automation Settings, then Set Live.

Click Create an Automation. The Select an automation type page appears.
Under Custom Automation, click Select.

Define the automation workflow and settings.

Question	Properties	Action
What is the name of this automation?	Automation Name	Enter a human-readable name for this Automation series.
When will your contacts enter the automation?	Entry Criteria	Choose the list or segment that this series targets. Any contact added to this list or segment gets sent the messages in the series. Change the default value of All Contacts. Otherwise, any contact you add also gets added to this Automation series, resulting in additional unwanted email messages.
When will your contacts leave the automation?	Exit Criteria	Choose the condition that removes a contact leaves the workflow:
		Contacts have received all emails in the automation: The contact exits the Automation series after they receive every message in the series.
		Contacts no longer meet the entry criteria: Before sending an email message in your series, Twilio SendGrid checks that each contact belongs to the entry criteria list or segment. Any contacts on the list or segment get removed from the next send.
		Contact meets following criteria: To filter and remove contacts from your Automation, you can build a specific condition. Recipients that meet this condition exit the Automation series within 24 hours. Twilio SendGrid limits each parent account and subuser to 15 exit criteria across all Teammates. When you reach that limit, you can't duplicate, save, or enable Automations using Contact meets following criteria.
What Unsubscribe Group and Categories would you like to assign to these messages?	Unsubscribe Group	Choose the group into which Twilio places recipients who unsubscribe from your email series.
	Categories	Choose or create one or more self-titled topics that help organize and track your email series.
	IP Pools	If you have dedicated IP addresses grouped into IP Pools, choose a pool through which Twilio sends messages in the Automation series.
What email(s) are included in your automation?		Define either a single message or a workflow for a series of messages. Choose when each message gets sent. Keep workflows to 10 messages, longer workflows risk server timeouts and save failures.

Select the send time.
Click ✎ (edit button) next to Email 1.
Click Code Editor.
Click Continue.

Add metadata and styling to email messages

Every email message includes machine-readable information like its title and what styles get applied to its content. With the editor, you can add this information, or metadata, to your email messages.

Edit the HTML <head> tag

The HTML <head> element contain any metadata you want in your email message or template.

To define any custom fonts or CSS styles, you can use the <head> element.

To edit the HTML head of your email message or template:

Click the Settings drawer. The Settings panel appears.
Click Build. The Build panel appears.
Expand the Advanced menu.
Click the Edit next to Edit HTML Head. The Edit HTML Head appears.
<head></head>
Make your desired changes.
Click Update.

Add custom fonts to the HTML <head> section

Using the tag to reference a web font hosted on the internet, users add custom fonts like Google Fonts. Define a web-safe font as a fallback should one of your recipient's clients not support your custom font.

The following popular clients support web fonts:

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

This list might change. Twilio can't guarantee web font support. Some inbox providers don't support fonts.

To add a custom font using the HTML <head>:

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 that points to your web font.
<link href="https://fonts.google.com/specimen/Oswald" rel="stylesheet" />
To indicate that you want to use the web font, add an HTML <style> tag with CSS rules:
1
<style>
2
body { font-family: 'Oswald', sans-serif; }
3
</style>

Format email with global styles

To apply styles in your entire email message or template, use global styles. These global styles include attributes such as the background color, text color, or font family.

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

Click the Settings drawer. The Settings panel appears.
Click Build. The Build panel appears.
Expand Global Styles. The style options appear.

Click Email Body or Content Container.

Email body stylesContent container styles

Each style option applies to all text or colors within the modules in your message or template.

Style option	Method to set value	Default value	Reset to default
Background Color	Type a hexadecimal color value or click on the color and choose another from the picker.	`#FFFFFF`	Click ⟳.
Text Color	Type a hexadecimal color value or click on the color and choose another from the picker.	`#000000`	Click ⟳.
Link Color	Type a hexadecimal color value or click on the color and choose another from the picker.	`#1188E6`	Click ⟳.
Font Family	Click the dropdown menu and select from 14 pre-selected typefaces or choose inherit an added webfont.	`Arial`	Choose `Arial`.
Font Size	Type a different value in the box. Twilio SendGrid sets font size in pixels.	`14px`	Type `14`.

You can override these values with Text Module Styles.

Style option	Method to set value	Default value	Reset to default
Width	Type an integer value that sets the width of the module container. Twilio SendGrid sets this value in pixels.	`600px`	Type `600`.
Background Color	Type a hexadecimal color value or click on the color and choose another from the picker.	`#FFFFFF`	Click ⟳.
Padding	Type an integer value for the top, right, bottom, and left edges. Twilio SendGrid sets this value in pixels.	`0px` for all	Set all to `0`.

Add modules

To speed design or your email messages, use drag-and-drop editing with pre-built content modules. You can edit individual modules in the left sidebar and reorder modules in your email message body. To reorder modules, click the module and drag your mouse to another location in the message body.

To add a drag-and-drop module to your email message:

Click the Settings drawer. The Settings panel appears.
Click Build. The Build panel appears.
Click Add Modules. The list of modules appears.
Find the module tile you want for your email.
Follow the procedure for the specific module listed.

Button module

Adds a button linked to a URL.

Columns module

Adds a module with a columnar layout. Each column can contain one or more image, text, or button modules.

Click, drag, and drop the Columns module into your content area. The Columns Module Styles panel appears.

In the Select a layout section, choose from eight columnar layouts.

View the columnar layout options

Layout	Number of columns	Distribution in container
1 Column	1	100%
2 Columns	2	50%, 50%
3 Columns	3	33%, 33%, 33%
4 Columns	4	25%, 25%, 25%, 25%
1:2 Columns	2	33%, 66%
2:1 Columns	2	66%, 33%
1:3 Columns	2	25%, 75%
3:1 Columns	2	75%, 25%

In the Module section, modify the styling of this module, if desired.

View column style options

Code module

Add your custom HTML.

Click, drag, and drop the Code module into your content area. The Edit Module HTML panel appears.
Add your HTML code in the box.
Click Update.

(warning)

Twilio SendGrid doesn't check Custom HTML

The Design Editor doesn't modify, lint, or validate any HTML in a code module. Preview your email before sending.

Text module

Add text to your email message or template.

Click, drag, and drop the Text module into your content area. The Text Module Styles panel appears.

Modify the styling of this module, if desired.

View text style options

Style option	Method to set value	Default value	Reset to default
Style bar	Click the icons that changes the text in the way you want. These changes include text alignment, style (bold, italic, underline), links, ordered or unordered lists, dedent or indent text.	None	Click `Ⱦ`.
Text Style	Click the dropdown menu and select normal or a Heading size.	`normal`	Choose `normal`.
Font	Click the dropdown menu and select from 14 pre-selected typefaces or choose inherit an added webfont.	`Arial`	Choose `Arial`.
Font Size	Type a different value in the box. Twilio SendGrid sets font size in pixels.	`14px`	Type `14`.
Line Height	Type a different value in the box. Twilio SendGrid sets font size in pixels.	`22px`	Type `22`.
Background Color	Type a hexadecimal color value or click on the color and choose another from the picker.	`#FFFFFF`	Click ⟳.
Text Color	Type a hexadecimal color value or click on the color and choose another from the picker.	Inherit global	Click ⟳.
Link Color	Type a hexadecimal color value or click on the color and choose another from the picker.	Inherit global	Click ⟳.
Padding	Type an integer value for the top, right, bottom, and left edges. Twilio SendGrid sets this value in pixels.	`0px` for all	Set all to `0`.

Image module

Add an image to your email message or template. Upload desired images into your Image Library, then select the image from the library for your email.

Upload images to image library

To upload an image to your Image Library:

Click, drag, and drop the Images module into your content area. The Image Library appears with any images you uploaded before.
To upload an image, you have two options:
- Drag and drop the image you want to use from your files into the Drag and drop your images here box.
- Click Choose images to upload.

Insert images into email

To insert an image into your email template or message:

Click, drag, and drop the Images module into your content area. The Image Library appears with uploaded images.
Click the image you want to add to your email. The Image Details panel appears.
Click Insert Image. The Image Details panel closes.

Image & Text module

Adds module with two columns.

The module uses the same style options as the Columns module
Each column can contain either an image or text.
When first added, the Twilio SendGrid sets the left column to image and the right column to text.
The text column can use any style available to a Text Module.

Click, drag, and drop the Image & Text module into your content area. The Colums Module Styles panel appears.
Modify the styling of this module following the Columns module procedure, if desired.

Spacer module

Adds vertical spacing between other modules.

Click, drag, and drop the Spacer module into your content area. The Spacer Module Styles panel appears.

Modify the styling of this module, if desired.

View spacer module style options

Style option	Method to set value	Default value	Reset to default
Height.	Type a different value in the box. Twilio SendGrid sets height in pixels.	`30px`	Type `22`.
Background Color	Type a hexadecimal color value or click on the color and choose another from the picker.	`#FFFFFF`	Click ⟳.

Divider module

Adds horizontal line between modules.

Click, drag, and drop the Divider module into your content area. The Divider Module Styles panel appears.

Modify the styling of this module, if desired.

View spacer module style options

Style option	Method to set value	Default value	Reset to default
Background Color	Type a hexadecimal color value or click on the color and choose another from the picker.	Inherits global	Click ⟳.
Line Color	Type a hexadecimal color value or click on the color and choose another from the picker.	`#000000`	Type `#000000`
Height.	Type a different value in the box. Twilio SendGrid sets height in pixels.	`10px`	Type `10`.
Padding	Type an integer value for the top, right, bottom, and left edges. Twilio SendGrid sets this value in pixels.	`0px` for all	Set all to `0`.

Adds icons that point to up to six social media accounts: Facebook, Instagram, X, Pinterest, LinkedIn, TikTok. You can customize them for your branding and design standards.

Click, drag, and drop the Social module into your content area. The Social Module Styles panel appears.

Modify the styling of this module. This includes adding the appropriate links to your social media pages.

View column style options

Style option	Method to set value	Default value	Reset to default
Background Color	Type a hexadecimal color value or click on the color and choose another from the picker.	Inherit global background color	Click ⟳.
Icon Color	Type a hexadecimal color value or click on the color and choose another from the picker. When you add the social page URL, the related icon changes to this color.	Inherit global text color	Click ⟳.
Icon Size	Type an integer value for the height and width of the icon. This accepts only one value.	`21px`	Set to `21`.
Border Radius	Move the slider to a value between `0` (square) and `100` (circle) pixels.	`0px`	Set to `0`.
Padding	Type an integer value for the top, right, bottom, and left edges. Twilio SendGrid sets this value in pixels.	`0px` for all	Set all to `0`.
Icon Alignment	Click the icon for a horizontal alignment of Left, Center, or Right.	`Left`	Set to `Left`.
Facebook Page URL	Type the full URL for your desired Facebook page. To not include a Facebook icon, leave this blank.	None	Clear box.
Instagram Page URL	Type the full URL for your desired Instagram page. To not include a Instagram icon, leave this blank.	None	Clear box.
X Page URL	Type the full URL for your desired X page. To not include a X icon, leave this blank.	None	Clear box.
Pinterest Page URL	Type the full URL for your desired Pinterest page. To not include a Pinterest icon, leave this blank.	None	Clear box.
LinkedIn Page URL	Type the full URL for your desired LinkedIn page. To not include a LinkedIn icon, leave this blank.	None	Clear box.
TikTok Page URL	Type the full URL for your desired TikTok page. To not include a TikTok icon, leave this blank.	None	Clear box.

Unsubscribe module

Adds your sender metadata and links to the {{{unsubscribe}}} tag. Transactional templates require sender metadata.

Click, drag, and drop the Unsubscribe module into your content area. The Unsubscribe Module Styles panel appears.

Modify the styling of this module, if desired.

View unsubscribe style options

To include the mailing address line, toggle Address Line to ON.
To include the Unsubscribe Preferences link, toggle Unsubscribe Preferences to ON.

Edit module HTML

To edit Module HTML:

Click the module in the email design.
At the top of the module, click <>. The Edit Module HTML page displays with the HTML code for that module.
When finish editing the HTML, click Update.
If you add structural HTML code, like <span>, <p>, <table> tags, the Convert to a code module? modal prompt appears.
- To keep your structual tags, click Confirm.
- To discard your structual tags, click Cancel.

Preview your email

You can review your email message or template in a preview.

To preview your email message or template, click Preview.
To view the desktop preview, click Desktop.
To view the mobile preview, click Mobile.
To view a plain-text version of your email message or template, click Plain Text.

Previews also display your chosen From name, Subject, and Preheader text.

Add personalized data

Twilio SendGrid provides personalization of email messages. To accomplish this, you add substitution tags to your email messages or templates and provide test data to validate the tags.

Add substitution tags

To add a substitution tag to your email template or message:

Click the Settings drawer. The Settings panel appears.
Click Tags. The Tags panel appears.
Locate the tag you want to add to your email.
Click the copy icon next to that tag.
Paste the tag into the module.

View the substitution tags for the sender

Substitution tag	Substituted with
`{{Sender_Name}}`	The name of the sender selected when sending your email
`{{Sender_Email}}`	The email of the sender selected when sending your email
`{{Sender_Address}}`	The address on record for the sender selected when sending your email
`{{Sender_City}}`	The city on record for the sender selected when sending your email
`{{Sender_State}}`	The state on record for the sender selected when sending your email
`{{Sender_Zip}}`	The zip code on record for the sender selected when sending your email
`{{Sender_Country}}`	The country on record for the sender selected when sending your email

View the substitution tags for recipients

Substitution tag	Substituted with
`{{first_name}}`	The first name of the recipient
`{{last_name}}`	The last name of the recipient
`{{email}}`	The email address of the recipient
`{{alternate_emails}`	Alternate emails of the recipient
`{{address_line_1}}`	The first line of the address of the recipient
`{{address_line_2}}`	The second line of the address of the recipient
`{{city}}`	The city of the recipient
`{{state_province_region}}`	The region of the recipient
`{{postal_code}}`	The postal code of the recipient
`{{country}}`	The country of the recipient
`{{phone_number}}`	The phone number of the recipient
`{{whatsapp}}`	The WhatsApp number of the recipient
`{{line}}`	The line of the recipient
`{{facebook}}`	The facebook of the recipient
`{{unique_name}}`	The unique name of the recipient
`{{{unsubscribe}}}`	A link to unsubscribe from any emails you send.
`{{{unsubscribe_preferences}}}`	A list of the recipient's unsubscribe options based on your unsubscribe groups and a link to your unsubscribe preferences page.
`{{Weblink}}`	A link that opens the email on a Twilio SendGrid-hosted web page. This allows recipients to view an email when an email client fails to open or render the message.

Preview personalization with test data

To view a preview with the integrated test data:

Open a design in the Design Editor.
Click Preview.
Click Show Test Data. The test data panel appears.

Insert contact data into the code window.

The data uses JavaScript Object Notation (JSON) syntax.
JSON structures data as a collection of key-value pairs.

(information)

Example of a test data JSON

If you use the first_name substitution tag, the key is first_name and the value is the customer's name. Think of these keys as variables. Like a variable in algebra, these variables represent a value you don't yet know.

Example of JSON document for sample data

1{
2  "first_name": "Tira",
3  "last_name": "Misu",
4  "email": "recipient@example.com",
5  "alternate_emails": "recipient+@example.com",
6  "address_line_1": "1234 N. Real Ave.",
7  "address_line_2": "Suite 200",
8  "city": "Denver",
9  "state_province_region": "CO",
10  "postal_code": 80202,
11  "country": "United States",
12  "phone_number": "+15555555555",
13  "Sender_Name": "Orders",
14  "Sender_Email": "orders@example2.com",
15  "Sender_Address": "1234 N. Exist St.",
16  "Sender_City": "Portland",
17  "Sender_State": "OR",
18  "Sender_Zip": 97227,
19  "Sender_Country": "United States"
20}

After you save the test data, any substitution tags should display the data in the email preview.

Write custom HTML code

You can write HTML code in the Design Editor.

(warning)

HTML requirements

Any imported HTML overwrites all existing content in your email message or template.
If you don't include the "modules-container" attribute in your custom HTML, then Twilio SendGrid imports all of your HTML as one text module.
To import only a section of HTML, use a code module.
Any HTML outside an element with the "modules-container" attribute gets discarded.
HTML code only allows supported styling options and attributes.

Conform to HTML requirements

Any HTML code should conform to the HTML that Twilio SendGrid generates in the Design Editor.

To identify your HTML as drag-and-drop modules, Twilio requires the role="modules-container" attribute.
- All Twilio SendGrid pre-built templates include the role="modules-container".
- Any compatible HTML for your email message or template requires this attribute.
To find for any drag-and-drop compatible modules, Twilio SendGrid parses your custom HTML checking:
- Any HTML elements that contain the attribute role="modules-container".
- All HTML elements with the attribute role="module" that are descendants of the "modules-container" element.

Examples of compliant HTML custom code

The following examples show the recommended structure and organization of custom HTML code. Twilio represents the content of your modules as [MODULE CONTENT].

TextImageImage and TextCodeColumnsButtonDividerSpacer

1  <table class="module" role="module" data-type="text">
2    <tr>
3      <td style="[CSS rules]; background-color: [some color]">
4        [MODULE CONTENT]
5      </td>
6    </tr>
7  </table>

1<table class="wrapper" role="module" data-type="image">
2  <tr>
3    <td style="[CSS rules]; text-align: [left|right]">
4      [MODULE CONTENT]
5    </td>
6  </tr>
7</table>

1  <table role="module" data-type="imagetext">
2    <tr>
3      <td>
4        <table>
5          <tr role="module-content">
6            <td class="templateColumnContainer" >
7              <table>
8                <tr>
9                  <td class="leftColumnContent" role="column-one">
10                    <table role="module" data-type="image">
11                      <tr>
12                        <td role="module-content">
13                          [MODULE CONTENT]
14                        </td>
15                      </tr>
16                    </table>
17                  </td>
18                </tr>
19              </table>
20            </td>
21            <td class="templateColumnContainer" >
22              <table>
23                <tr>
24                  <td class="rightColumnContent" role="column-two">
25                    <table role="module" data-type="text">
26                      <tr>
27                        <td role="module-content">
28                          [MODULE CONTENT]
29                        </td>
30                      </tr>
31                    </table>
32                  </td>
33                </tr>
34              </table>
35            </td>
36          </tr>
37        </table>
38      </td>
39    </tr>
40  </table>

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

1  <table role="module" data-type="columns">
2    <tr>
3      <td style="[CSS rules]; background-color: [some color]">
4        <table>
5          <tr>
6            <td class="templateColumnContainer column-drop-area">
7            [MODULE CONTENT]
8            </td>
9            <td class="templateColumnContainer column-drop-area">
10            [ANOTHER MODULE CONTENT]
11            </td>
12          </tr>
13        </table>
14      </td>
15    </tr>
16  </table>

1  <table class="module" role="module" data-type="button">
2    <tr>
3      <td style="[CSS rules]; background-color: [some color]; text-align: [left|right]">
4        <table class="wrapper-mobile">
5          <tr>
6            <td style="[CSS rules]; background-color: [some color]">
7              [MODULE CONTENT]
8            </td>
9          </tr>
10        </table>
11      </td>
12    </tr>
13  </table>

1  <table class="module" role="module" data-type="divider">
2    <tr>
3      <td style="[CSS rules]; background-color: [some color]">
4        <table height=[some height]>
5          <tr>
6            <td style="background-color: [some color]"></td>
7          </tr>
8        </table>
9      </td>
10    </tr>
11  </table>

1  <table class="module" role="module" data-type="spacer">
2    <tr>
3      <td style="padding: 50px 0 0 0; background-color: [some color]">
4      </td>
5    </tr>
6  </table>

1  <table class="module" role="module" data-type="social">
2    <tbody>
3      <tr>
4      <td style="[CSS rules]" data-align="[left|right|center]">
5        <table>
6        <tbody>
7          <tr>
8          [MODULE CONTENT]
9          </tr>
10        </tbody>
11        </table>
12      </td>
13      </tr>
14    </tbody>
15  </table>

If you don't specify a data type that matches a Twilio SendGrid drag-and-drop modules, Twilio imports your code as a text module.

Import custom HTML code

To import custom HTML:

Click the Settings drawer. The Settings panel appears.
Click Build. The Build panel appears.
Expand the Advanced menu.
Expand the option titled Import Drag & Drop HTML.
Click Import. The Import Drag & Drop HTML page appears. Paste in your HTML in the box.
Paste or type the HTML code you want to use.
Click Update.

Export HTML code

To export template HTML from the Design Editor:

Click the Settings drawer. The Settings panel appears.
Click Build. The Build panel appears.
Expand the Advanced menu.
Click Export.
This starts the raw HTML download of the template, excluding images.

To learn how to import the HTML into a Code Editor, see Import exported HTML.

Use the Design Editor

Get started

Never name a category with PII

Warning

Never name a category with PII

Never name a category with PII

Info

Add metadata and styling to email messages

Edit the HTML <head> tag

Add custom fonts to the HTML <head> section

Format email with global styles

Add modules

Button module

Columns module

Example of column widths

Code module

Twilio SendGrid doesn't check Custom HTML

Text module

Image module

Upload images to image library

Insert images into email

Image & Text module

Spacer module

Divider module

Social module

Unsubscribe module

Edit module HTML

Preview your email

Add personalized data

Add substitution tags

Result of pasting the first_name tag into the Code Editor

Accepted syntax for a tag with a default value

Converted tag after

Preview personalization with test data

Example of a test data JSON

Example of JSON document for sample data

Write custom HTML code

HTML requirements

Conform to HTML requirements

Examples of compliant HTML custom code

Import custom HTML code

Export HTML code

Additional resources