# 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][console].
## Get started
Decide what you want to create: a *Single Send* message or an *Automation* series.
## Single Sends
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:
1. Go to **Marketing** > **Single Sends**.
2. Decide if you want to create a message or edit an existing message.
3) Click **Create a Single Send**. The **Select a Design** page appears.
4) 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.
5) Hover over your chosen template and click **Select**. The **Select Your Editing Experience** page appears.
6) 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.**
7) 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.
8) In the **Categories** box, add categories in one of two ways:
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
[pii]: /docs/glossary/what-is-personally-identifiable-information-pii
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
9) Click **Save**.
3. From the list of Single Sends, choose an existing Single Send.
4. Click `⋮` (action menu) next to that Single Send.
5. Choose **Edit**. The editor page last used for the message, Code or Design, appears.
> \[!WARNING]
>
> You can only edit unsent emails.
6. 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.
7. In the **Categories** box, add categories in one of two ways:
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
[pii]: /docs/glossary/what-is-personally-identifiable-information-pii
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
8. Click **Save**.
3. Click `⋮` (action menu) next to an existing Single Send.
4. Click **Create Design**. The **Select Your Editing Experience** page appears.
5. 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.**
6. 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.
7. In the **Categories** box, add categories in one of two ways:
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
[pii]: /docs/glossary/what-is-personally-identifiable-information-pii
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
8. Click **Save**.
## Create message
3. Click **Create a Single Send**. The **Select a Design** page appears.
4. 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.
5. Hover over your chosen template and click **Select**. The **Select Your Editing Experience** page appears.
6. 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.**
7. 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.
8. In the **Categories** box, add categories in one of two ways:
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
[pii]: /docs/glossary/what-is-personally-identifiable-information-pii
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
9. Click **Save**.
## Modify existing message
3. From the list of Single Sends, choose an existing Single Send.
4. Click `⋮` (action menu) next to that Single Send.
5. Choose **Edit**. The editor page last used for the message, Code or Design, appears.
> \[!WARNING]
>
> You can only edit unsent emails.
6. 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.
7. In the **Categories** box, add categories in one of two ways:
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
[pii]: /docs/glossary/what-is-personally-identifiable-information-pii
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
8. Click **Save**.
## Use an existing message
3. Click `⋮` (action menu) next to an existing Single Send.
4. Click **Create Design**. The **Select Your Editing Experience** page appears.
5. 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.**
6. 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.
7. In the **Categories** box, add categories in one of two ways:
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
[pii]: /docs/glossary/what-is-personally-identifiable-information-pii
#### Warning about categories and personal information
> \[!CAUTION]
>
> Twilio stores category names as non-[*personally identifiable information* (PII)][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.
8. Click **Save**.
## Automations
To use the Design Editor for Automations:
1. Go to **Marketing** > **Automations**.
2. Decide if you want to create a welcome message or a custom existing message.
3) Click **Create an Automation**. The **Select an automation type** page appears.
4) Under **Welcome Automation**, click **Select**. The **Edit Automation** page appears.
5) 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][category] | 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. |
[category]: /docs/sendgrid/glossary/categories
[IP Pools]: /docs/sendgrid/ui/account-and-settings/ip-pools
[list]: /docs/sendgrid/ui/sending-email/how-to-send-email-with-marketing-campaigns/#add-contacts
[segment]: /docs/sendgrid/ui/managing-contacts/segmenting-your-contacts
[subuser]: /docs/sendgrid/ui/account-and-settings/subusers
[Unsubscribe Group]: /docs/sendgrid/ui/sending-email/create-and-manage-unsubscribe-groups/#create-an-unsubscribe-group
6) For each email message in the series, hover over the design and click **Edit**. The Design Editor appears.
> \[!NOTE]
>
> You can edit the **Welcome Series** Automation only with the [Design Editor][].
7) Click **Save**.
8) To activate the automation, click **Automation Settings**, then **Set Live**.
3. Click **Create an Automation**. The **Select an automation type** page appears.
4. Under **Custom Automation**, click **Select**.
5. 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][category] | 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. |
[category]: /docs/sendgrid/glossary/categories
[IP Pools]: /docs/sendgrid/ui/account-and-settings/ip-pools
[list]: /docs/sendgrid/ui/sending-email/how-to-send-email-with-marketing-campaigns/#add-contacts
[segment]: /docs/sendgrid/ui/managing-contacts/segmenting-your-contacts
[subuser]: /docs/sendgrid/ui/account-and-settings/subusers
[Unsubscribe Group]: /docs/sendgrid/ui/sending-email/create-and-manage-unsubscribe-groups/#create-an-unsubscribe-group
6. Select the send time.
7. Click ✎ (edit button) next to **Email 1**.
8. Click **Code Editor**.
9. Click **Continue**.
## Create welcome automation
3. Click **Create an Automation**. The **Select an automation type** page appears.
4. Under **Welcome Automation**, click **Select**. The **Edit Automation** page appears.
5. 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][category] | 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. |
[category]: /docs/sendgrid/glossary/categories
[IP Pools]: /docs/sendgrid/ui/account-and-settings/ip-pools
[list]: /docs/sendgrid/ui/sending-email/how-to-send-email-with-marketing-campaigns/#add-contacts
[segment]: /docs/sendgrid/ui/managing-contacts/segmenting-your-contacts
[subuser]: /docs/sendgrid/ui/account-and-settings/subusers
[Unsubscribe Group]: /docs/sendgrid/ui/sending-email/create-and-manage-unsubscribe-groups/#create-an-unsubscribe-group
6. For each email message in the series, hover over the design and click **Edit**. The Design Editor appears.
> \[!NOTE]
>
> You can edit the **Welcome Series** Automation only with the [Design Editor][].
7. Click **Save**.
8. To activate the automation, click **Automation Settings**, then **Set Live**.
## Create custom automation
3. Click **Create an Automation**. The **Select an automation type** page appears.
4. Under **Custom Automation**, click **Select**.
5. 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][category] | 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. |
[category]: /docs/sendgrid/glossary/categories
[IP Pools]: /docs/sendgrid/ui/account-and-settings/ip-pools
[list]: /docs/sendgrid/ui/sending-email/how-to-send-email-with-marketing-campaigns/#add-contacts
[segment]: /docs/sendgrid/ui/managing-contacts/segmenting-your-contacts
[subuser]: /docs/sendgrid/ui/account-and-settings/subusers
[Unsubscribe Group]: /docs/sendgrid/ui/sending-email/create-and-manage-unsubscribe-groups/#create-an-unsubscribe-group
6. Select the send time.
7. Click ✎ (edit button) next to **Email 1**.
8. Click **Code Editor**.
9. 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 \ tag
The HTML [``][] element contain any metadata you want in your email message or template.
To define any custom fonts or CSS styles, you can use the `` element.
To edit the HTML head of your email message or template:
1. Click the **Settings** drawer. The **Settings** panel appears.
2. Click **Build**. The **Build** panel appears.
3. Expand the **Advanced** menu.
4. Click the **Edit** next to **Edit HTML Head**. The **Edit HTML Head** appears.
```html
```
5. Make your desired changes.
6. Click **Update**.
### Add custom fonts to the HTML \ section
Using the tag to reference a [web font][webfonts] 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 ``:
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 `` tag containing an `href` attribute that points to your web font.
```html
```
5. To indicate that you want to use the web font, add an HTML `
```
### 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.
1. Click the **Settings** drawer. The **Settings** panel appears.
2. Click **Build**. The **Build** panel appears.
3. Expand **Global Styles**. The style options appear.
4. Click **Email Body** or **Content Container**.
## Email body 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][webcolors] or click on the color and choose another from the picker. | `#FFFFFF` | Click ⟳. |
| **Text Color** | Type a [hexadecimal color value][webcolors] or click on the color and choose another from the picker. | `#000000` | Click ⟳. |
| **Link Color** | Type a [hexadecimal color value][webcolors] 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][webfonts]. | `Arial` | Choose `Arial`. |
| **Font Size** | Type a different value in the box. Twilio SendGrid sets [font size in pixels][css-font-size]. | `14px` | Type `14`. |
You can override these values with **Text Module Styles**.
## Content container styles
Each style option applies to the container that encloses all of your modules.
| 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][webcolors] 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:
1. Click the **Settings** drawer. The **Settings** panel appears.
2. Click **Build**. The **Build** panel appears.
3. Click **Add Modules**. The list of modules appears.
4. Find the module tile you want for your email.
5. 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.
1. Click, drag, and drop the **Columns** module into your content area. The **Columns Module Styles** panel appears.
2. 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% |
The columns take up the width of the container minus the **Padding** and **Cell Padding** values.
> \[!NOTE]
>
> You set the following parameter values:
>
> * Content container width to `600px`.
> * Column layout to 1:2 columns.
> * Padding to `5px`.
> * Cell Padding to `5px`.
>
> The two columns would be 193px and 386px, respectively.
>
> ```text
> (Width - (Padding × 2) - (Cell Padding × 2)) ÷ Column Widths
> (600 - (5 × 2) - (5 × 2)) ÷ 3 = 193
> 193 × 2 = 386
> ```
3. In the **Module** section, modify the styling of this module, if desired.
#### View column style options
| Style option | Method to set value | Default value | Reset to default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ---------------- |
| **Background Color** | Type a [hexadecimal color value][webcolors] 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`. |
| **Cell Padding** | Type an integer value for the gap between the columns. This value doubles in the display. Twilio SendGrid sets this value in pixels. | `0px` | Set to `0`. |
### Code module
Add your custom HTML.
1. Click, drag, and drop the **Code** module into your content area. The **Edit Module HTML** panel appears.
2. Add your HTML code in the box.
3. Click **Update**.
> \[!WARNING]
>
> 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.
1. Click, drag, and drop the **Text** module into your content area. The **Text Module Styles** panel appears.
2. 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][webfonts]. | `Arial` | Choose `Arial`. |
| **Font Size** | Type a different value in the box. Twilio SendGrid sets [font size in pixels][css-font-size]. | `14px` | Type `14`. |
| **Line Height** | Type a different value in the box. Twilio SendGrid sets [font size in pixels][css-font-size]. | `22px` | Type `22`. |
| **Background Color** | Type a [hexadecimal color value][webcolors] or click on the color and choose another from the picker. | `#FFFFFF` | Click ⟳. |
| **Text Color** | Type a [hexadecimal color value][webcolors] or click on the color and choose another from the picker. | Inherit global | Click ⟳. |
| **Link Color** | Type a [hexadecimal color value][webcolors] 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:
1. Click, drag, and drop the **Images** module into your content area. The **Image Library** appears with any images you uploaded before.
2. 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:
1. Click, drag, and drop the **Images** module into your content area. The **Image Library** appears with uploaded images.
2. Click the image you want to add to your email. The **Image Details** panel appears.
3. 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](#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](#text-module).
1. Click, drag, and drop the **Image & Text** module into your content area. The **Colums Module Styles** panel appears.
2. Modify the styling of this module following the [**Columns** module](#columns-module) procedure, if desired.
### Spacer module
Adds vertical spacing between other modules.
1. Click, drag, and drop the **Spacer** module into your content area. The **Spacer Module Styles** panel appears.
2. 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][webcolors] or click on the color and choose another from the picker. | `#FFFFFF` | Click ⟳. |
### Divider module
Adds horizontal line between modules.
1. Click, drag, and drop the **Divider** module into your content area. The **Divider Module Styles** panel appears.
2. 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][webcolors] or click on the color and choose another from the picker. | Inherits global | Click ⟳. |
| **Line Color** | Type a [hexadecimal color value][webcolors] 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`. |
### Social module
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.
1. Click, drag, and drop the **Social** module into your content area. The **Social Module Styles** panel appears.
2. 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][webcolors] or click on the color and choose another from the picker. | Inherit global background color | Click ⟳. |
| **Icon Color** | Type a [hexadecimal color value][webcolors] 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][].
1. Click, drag, and drop the **Unsubscribe** module into your content area. The **Unsubscribe Module Styles** panel appears.
2. Modify the styling of this module, if desired.
#### View unsubscribe style options
| Style option | Method to set value | Default value | Reset to default |
| -------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------- | ---------------- |
| **Background Color** | Type a [hexadecimal color value][webcolors] 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`. |
| **Line Height** | Type a different value in the box. Twilio SendGrid sets [font size in pixels][css-font-size]. | `22px` | Type `22`. |
| **Font** | Click the dropdown menu and select from 14 pre-selected typefaces or choose inherit an added [webfont][webfonts]. | `Arial` | Choose `Arial`. |
| **Font Size** | Type a different value in the box. Twilio SendGrid sets [font size in pixels][css-font-size]. | `14px` | Type `14`. |
| **Font Color** | Type a [hexadecimal color value][webcolors] or click on the color and choose another from the picker. | Inherit global | Click ⟳. |
| **Link Color** | Type a [hexadecimal color value][webcolors] or click on the color and choose another from the picker. | Inherit global | Click ⟳. |
| **Alignment**. | Click the icon for a horizontal alignment of **Left**, **Center**, or **Right**. | `Left` | Set to `Left`. |
3. To include the mailing address line, toggle **Address Line** to **ON**.
4. To include the Unsubscribe Preferences link, toggle **Unsubscribe Preferences** to **ON**.
To add an Unsubscribe Group to your a Single Send or an Automation series message, see [Add an Unsubscribe Group to your email][add-unsub]. You can't add an Unsubscribe Group to an email template.
## Edit module HTML
To edit Module HTML:
1. Click the module in the email design.
2. At the top of the module, click `<>`. The **Edit Module HTML** page displays with the HTML code for that module.
3. When finish editing the HTML, click **Update**.\
If you add structural HTML code, like ``, `
`, `
` 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.
1. To preview your email message or template, click **Preview**.
2. To view the desktop preview, click **Desktop**.
3. To view the mobile preview, click **Mobile**.
4. 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:
1. Click the **Settings** drawer. The **Settings** panel appears.
2. Click **Tags**. The **Tags** panel appears.
3. Locate the tag you want to add to your email.
4. Click the **copy** icon next to that tag.
5. Paste the tag into the module.
#### View the substitution tags for the sender
To add personalized data about the sender, use one or more of the following substitution tags:
| 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 |
Sender tags don't use and don't need default values.
#### View the substitution tags for recipients
To add personalized data about your recipients, use one or more of the following substitution tags.
Recipient-specific tags come from the values on [**Contact Details** page][contacts] for each recipient. These include:
| Substitution tag | Replaces the tag with the recipient's | Status |
| --------------------------- | --------------------------------------------------- | ---------- |
| `{{first_name}}` | First name | |
| `{{last_name}}` | Last name | |
| `{{email}}` | Email address | |
| `{{alternate_emails}` | Alternate email addresses | |
| `{{address_line_1}}` | First line of their mailing address | |
| `{{address_line_2}}` | Second line of their mailing address | |
| `{{city}}` | City of their mailing address | |
| `{{state_province_region}}` | Region, Province, or State of their mailing address | |
| `{{postal_code}}` | Postal code of their mailing address | |
| `{{country}}` | Country of their mailing address | |
| `{{phone_number}}` | Phone number | |
| `{{whatsapp}}` | [WhatsApp][] number | Deprecated |
| `{{line}}` | [Line][] ID | Deprecated |
| `{{facebook}}` | [Facebook][] Profile ID | Deprecated |
| `{{unique_name}}` | Unique name | Deprecated |
Subscription management-specific tags include:
| Substitution tag | Replaces the tag with |
| ------------------------------- | ------------------------------------------------------------------------------ |
| `{{{unsubscribe}}}` | A link to unsubscribe from any emails you send. |
| `{{{unsubscribe_preferences}}}` | A list of unsubscribe options and a link to your unsubscribe preferences page. |
| [`{{Weblink}}`][weblink] | A link that opens the email message on a Twilio SendGrid-hosted web page. |
When you copy and paste a tag from the **Tags** tab, the editor adds a tag with a default value using the `insert` keyword.
```html {title="Result of pasting the first_name tag into the Code Editor"}
{{ insert first_name 'default=default' }}
```
You can type a tag with a default value using the syntax shown on the **Tags** panel.
```html {title="Accepted syntax for a tag with a default value"}
{{ first_name | Pat Bloggs }}
```
The editor converts it to the standard default value tag syntax:
```html {title="Converted tag after "}
{{ insert first_name 'default=Pat Bloggs' }}
```
To learn more about working with default values and Handlebars, see [Adding Dynamic Content with Handlebars in Marketing Campaigns][handlebars-data].
[handlebars-data]: /docs/sendgrid/ui/sending-email/adding-dynamic-content-with-handlebars-in-marketing-campaigns
[weblink]: /docs/sendgrid/ui/sending-email/weblink
[contacts]: /docs/sendgrid/ui/managing-contacts/create-and-manage-contacts
[line]: https://www.line.me/en
[facebook]: https://www.facebook.com
[whatsapp]: https://www.whatsapp.com
6. When you have finished changes to your design, click **Save**.
### Preview personalization with test data
To view a preview with the integrated test data:
1. Open a design in the Design Editor.
2. Click **Preview**.
3. Click **{} Show Test Data**. The test data panel appears.
4. 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.
> \[!NOTE]
>
> 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.
>
> ```json {title="Example of JSON document for sample data"}
> {
> "first_name": "Tira",
> "last_name": "Misu",
> "email": "recipient@example.com",
> "alternate_emails": "recipient+@example.com",
> "address_line_1": "1234 N. Real Ave.",
> "address_line_2": "Suite 200",
> "city": "Denver",
> "state_province_region": "CO",
> "postal_code": 80202,
> "country": "United States",
> "phone_number": "+15555555555",
> "Sender_Name": "Orders",
> "Sender_Email": "orders@example2.com",
> "Sender_Address": "1234 N. Exist St.",
> "Sender_City": "Portland",
> "Sender_State": "OR",
> "Sender_Zip": 97227,
> "Sender_Country": "United States"
> }
> ```
5. When you have finished changes to your data, click **Save**.
6. 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]
>
> * 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](#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]`.
## Text
```html
[MODULE CONTENT]
```
## Image
```html
[MODULE CONTENT]
```
## Image and Text
```html
[MODULE CONTENT]
[MODULE CONTENT]
```
## Code
```html
[MODULE CONTENT]
```
## Columns
```html
[MODULE CONTENT]
[ANOTHER MODULE CONTENT]
```
## Button
```html
[MODULE CONTENT]
```
## Divider
```html
```
## Spacer
```html
```
## Social
```html
[MODULE CONTENT]
```
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:
1. Click the **Settings** drawer. The **Settings** panel appears.
2. Click **Build**. The **Build** panel appears.
3. Expand the **Advanced** menu.
4. Expand the option titled **Import Drag & Drop HTML**.
5. Click **Import**. The **Import Drag & Drop HTML** page appears. Paste in your HTML in the box.
6. Paste or type the HTML code you want to use.
7. Click **Update**.
## Export HTML code
To export template HTML from the Design Editor:
1. Click the **Settings** drawer. The **Settings** panel appears.
2. Click **Build**. The **Build** panel appears.
3. Expand the **Advanced** menu.
4. 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][].
## Additional resources
* [Sending an Email][]
* [A/B Testing][]
* [Campaign Statistics][]
* [Marketing Campaigns Email Designs][]
[``]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/head
[A/B Testing]: /docs/sendgrid/ui/sending-email/a-b-testing
[Campaign Statistics]: /docs/sendgrid/ui/analytics-and-reporting/marketing-campaigns-stats
[console]: https://mc.sendgrid.com
[css-font-size]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-size
[Design Editor]: /docs/sendgrid/ui/sending-email/editor
[Google Fonts]: https://fonts.google.com
[Import exported HTML]: /docs/sendgrid/ui/sending-email/code-editor#import-exported-html
[Marketing Campaigns Email Designs]: /docs/sendgrid/ui/sending-email/working-with-marketing-campaigns-email-designs
[sender metadata]: /docs/sendgrid/ui/sending-email/how-to-send-an-email-with-dynamic-templates
[Sending an Email]: /docs/sendgrid/ui/sending-email/how-to-send-email-with-marketing-campaigns
[webcolors]: https://htmlcolorcodes.com
[webfonts]: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts
[add-unsub]: #add-an-unsubscribe-group-to-your-email