How To Make A Sendgrid Template

Design & Code Editor

The Twilio SendGrid e-mail design experience is all about supporting your unique workflow, so you lot can become things done more than efficiently. You have complete control over the way that y'all create and edit each new e-mail, thanks to our two distinct editing experiences.

Choosing the right editor

Both editors provide access to similar features, and you can reach the same results with either editor. Which editor you lot choose volition mostly be determined past the mode y'all like to work. A brief description of the editors and their shared functionalities is provided below. The user interfaces are similar but have some differences. How to piece of work with the editors is detailed in the editor-specific sections below.

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

The Blueprint Editor, complete with HTML access to each content module, offers powerful what you see is what you lot get (WYSIWYG) editing. It features a diverse library of content blocks, assuasive y'all to build beautiful emails quickly and intuitively. Once placed into your e-mail, each module offers access to edit the HTML and a robust panel of settings – perfect for customizing content precisely to your needs.

The Design Editor features a number of convenient ways to edit the HTML content of your email, including the power to edit the HTML of each elevate-and-drop module, edit the HTML head of your message, and even import complete code using our drag and drib markup.

Twilio SendGrid recommends only having one instance of a template or Marketing Campaigns electronic mail open in ane instance of the editor at a fourth dimension. Multiple instances in unlike browsers or computers volition cause autosave to undo changes, and at that place is no recovery choice.

Shared editor features

Dynamic data with Handlebars

Both editors support dynamic information using Handlebars syntax. Dynamic data includes any data you apply to personalize a design, such equally a client's name or lodge confirmation number. You can employ examination data in the editor's preview to ensure your dynamic values conduct the way you lot wait earlier you lot e'er send a message.

In add-on to substituting values, you lot can utilise Handlebars in your designs to format dates, iterate over lists, and conditionally render values. Come across our Handlebars documentation to meet all that you can practice with dynamic data and Twilio SendGrid templates.

Substitution Tags

Substitution Tags allow y'all to employ any reserved or custom field data you've added to Marketing Campaigns to dynamically generate unique content for each recipient of your email. A common example is to add a recipient's start name to the body (or even the subject line) of your email.

The data that populates your Substitution Tags will come from the information you have stored about each contact. Yous can manage this information on the Marketing Campaigns Contacts folio.

In add-on to the post-obit reserved fields that are available on all contacts by default, you tin can add your own Custom Fields with Marketing Campaigns. When building Marketing Campaigns designs, your Custom Fields volition be bachelor in the Tags tab of the editors. For information about managing these fields, meet our Custom Fields documentation.

For contacts with no entry in a custom field, the Commutation Tag appears blank. To ready a default value, apply the following pattern:

{{insert first_name "default=Valued Customer"}}

Reserved Commutation Tags

The post-obit Tags are provided by Twilio SendGrid by default and are available on each of your contacts.

Exchange Tag	Description
{{first_name}}	The starting time proper name of the recipient
{{last_name}}	The last name of the recipient
{{electronic mail}}	The electronic mail address of the recipient
{{alternate_emails}	Alternating emails of the recipient
{{address_line_1}}	The kickoff 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 lawmaking of the recipient
{{country}}	The country of the recipient
{{phone_number}}	The phone number of the recipient
{{whatsapp}}	The whatsapp of the recipient
{{line}}	The line of the recipient
{{facebook}}	The facebook of the recipient
{{unique_name}}	The unique name of the recipient
{{Sender_Name}}*	The proper name of the sender selected when sending your email
{{Sender_Email}}*	The electronic mail of the sender selected when sending your electronic mail
{{Sender_Address}}*	The address on record for the sender selected when sending your e-mail
{{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 electronic mail
{{Sender_Zip}}*	The zip code on record for the sender selected when sending your email
{{Sender_Country}}*	The land on tape for the sender selected when sending your email
{{{unsubscribe}}}	Allows your recipients to opt out of whatever emails you send.
{{{unsubscribe_preferences}}}	Shows recipients the various unsubscribe options available to them based on the unsubscribe groups yous've created and set to display on your unsubscribe preferences page.
<%asm_group_unsubscribe_ raw_url%>*	This tag is replaced with a link allowing your recipients to opt out of any emails you transport using the chosen Unsubscribe Group. ASM tags are only bachelor when using the Email API and should not exist used in Marketing Campaigns.
<%asm_global_unsubscribe_ raw_url%>*	This tag is replaced with a link allowing your recipients to opt out of all email communication. ASM tags are only available when using the Email API and should not exist used in Marketing Campaigns.
<%asm_preferences_ raw_url%>*	This tag is replaced with a link allowing your recipients to opt out of any electronic mail unsubscribe groups you offer. ASM tags are only available when using the Email API and should not be used in Marketing Campaigns.
{{Weblink}}	This tag is replaced with a link that will open the electronic mail in a Twilio SendGrid-hosted webpage. This feature makes it possible to view an e-mail when an email customer fails to open up or properly render the message.

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

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

See how to work with Substitution Tags

• Using the Code Editor
• Using the Design Editor

Test data

The Design and Lawmaking Editors both provide a test information preview feature. This ways you tin can add the reserved and custom fields stored on a contact as well as any other variables you wish to pass into your template, such as order confirmation data. Test data provides a fashion to exist sure that your concluding design will populate and render the substitutions properly. If you wanted to interact on a blueprint for instance, having examination data stored straight in the design means each teammate can reference the data structure used to populate substitution tags without having to dig into a code base.

See how to work with Exam Data

• Using the Code Editor
• Using the Pattern Editor

Categories

Category data will exist stored equally a "Non PII" field and may be used for counting or other operations every bit SendGrid runs its systems. These fields by and large cannot be redacted or removed. You should take intendance not to identify PII in this field. SendGrid does not care for this information as PII, and its value may be visible to SendGrid employees, stored long-term, and may proceed to be stored after you've left SendGrid's platform.

Assigning categories to a Single Send allows you lot to track emails based on your ain categorization organization. Past assigning your Single Send to a category, you lot tin track statistics across multiple similar Single Sends and Automations. For example, you might have categories like "Weekly Digest" or "Product Announcements."

Currently, only 10 categories can exist added to each Single Send.

See how to add categories

• Using the Code Editor
• Using the Pattern Editor

E-mail Testing

E-mail testing offers robust, pre-ship testing of your emails, including in-app spam testing, inbox rendering previews, and link validation right inside your Marketing Campaigns workflow. It allows y'all to preview how an email is likely to perform beyond a wide range of inbox providers, devices, and spam filters earlier sending. For more data, come across our defended e-mail testing documentation.

Disengage and redo functionality

Both editors provide undo and redo functionality using the disengage and redo buttons at the pinnacle of the editor UI or with keyboard shortcuts.

Undo/redo keyboard shortcuts

• Undo: Command or Control + Z
• Redo: Control or Command + Shift + Z

The Code Editor

Twilio SendGrid's marketer-friendly code editor features a powerful split-screen editing experience – perfect for building Single Send or Automation emails with your own custom HTML. It offers a number of helpful features, often plant in full-featured lawmaking editors.

Code Editor Features

Live template preview

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

Error flagging

If the lawmaking editor finds something that seems odd or inconsistent with best practices, instead of interrupting your workflow, it places a small red "x" in the margin of the line and then yous tin come up back and check when it's convenient for yous.

Ringlet syncing

Easily pinpoint the HTML element you lot wish to edit. Click anywhere on the right-side preview of your email, and the code on the left automatically jumps to the respective line. Click somewhere on the left, and the preview on the right volition jump along with you.

Syntax highlighting

Equally you lot edit, parts of your code highlight in various colors according to the type of syntax. This added dimension provides clarity and efficiency as y'all search for, locate, and edit code elements.

Getting Started With The Lawmaking Editor

To employ the lawmaking editor for Single Sends:

1. From the left-hand navigation, select Marketing, and so click Single Sends
2. Click Create a Single Send.
   To create a Single Send email using an existing (drafted or sent) email, observe the Unmarried Send you'd like to utilise and click the activeness menu next to the email.
3. Then, select Edit or Duplicate.
4. Select Code Editor, and then click Go on.

To use the code editor for Automations:

1. From the left-hand navigation, select Marketing, and then click Automations .
2. Click Create an Automation.
3. Nether Custom Automation click Select.

The Welcome Series Automation tin can just be edited with the Blueprint Editor.

1. Give the automation a name, entry criteria, exit criteria, and select an Unsubscribe Group.
2. Select the send time and then click the edit push button next to Email one.
3. Select Code Editor, and then click Go on.

You lot tin can simply edit unsent emails.

You can select a bare template, a custom template that you accept already created, or one of Twilio SendGrid's pre-congenital templates. For more information, meet "Working With Marketing Campaigns Email Designs".

If you accept already built the HTML that you want to use in another application, copy and paste that code direct into the content expanse of the Code Editor. You lot tin also write the HTML for your electronic mail or template directly in the Lawmaking Editor.

The carve up-screen view of the Code Editor allows you to run into a real-fourth dimension preview of your email. You can toggle betwixt a preview of how your electronic mail or template appears on a recipient's desktop and mobile phone by clicking either the desktop or mobile phone icons above the content area. Y'all tin can too view a manifestly text version of your e-mail or template past clicking the T icon. When in this preview style, you tin edit the plain text content of your electronic mail or template past clicking the Edit Plain Text button.

Once you create a new Single Transport or automation email in the Code Editor, it cannot be edited using the Design Editor unless y'all add our Elevate and Drop Markup.

Uploading images with the Code Editor

1. Select the images icon to a higher place the HTML code. A window opens where you tin can upload images to your library.
2. Select the prototype you want to add from your image library.
3. Select the image details tab and re-create the URL in the Image Source URL tab past clicking Copy URL.
4. Paste this URL in an image source tag in your email or template'south HTML.

              <img src="your image URL here" />                          

Using Commutation Tags with the Code Editor

To add together a substitution tag to your electronic mail:

1. Click the Settings tab on the left side of the editor.
2. Click the Tags tab at the summit of the Settings window.
3. Locate the tag you desire to add to your email and click information technology to automatically copy it to your clipboard.
4. Paste the tag into the email.

When copying and pasting a tag from the Tags tab, a default volition be added automatically. Default values are supported by the insert keyword only. For this reason, tags with default values will be saved with a dissimilar syntax automatically. For more information almost working with default values and Handlebars, see Adding Dynamic Content with Handlebars in Marketing Campaigns.

Test data with the Lawmaking Editor

1. To access the test data preview from the editor, click preview and then Testify Test Information.

You can place the information for any tags in your design into the Test Data window. Notation that the data must be in JavaScript Object Notation (JSON) format which is shown below. JSON is a way of structuring data in a collection of key/value pairs. For instance, if you employ the first_name substitution tag, first_name is the fundamental and the customer's name is the value. The post-obit sample code can be copied into Examination Information to bear witness a number of reserved fields. You can add to the list following the same format to capture any of your custom fields that are used as tags in your pattern.

              {   "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" }                          

4. Once you have test data in identify, the preview on the right pane will return your test data within your design as it would appear for recipients.

Adding Categories with the Code Editor

Category information will be stored equally a "Non PII" field and may exist used for counting or other operations as SendGrid runs its systems. These fields generally cannot be redacted or removed. You should accept intendance not to place PII in this field. SendGrid does not treat this data as PII, and its value may be visible to SendGrid employees, stored long-term, and may continue to be stored after you've left SendGrid'south platform.

To add categories to a Single Send

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

The Design Editor

SendGrid's flexible pattern editor allows you to build your templates and emails using intuitive, elevate & drop tools. The what you lot encounter is what yous get (WYSIWYG) editing experience features a library of modules for easily adding content to your electronic mail.

Getting Started with the Design Editor

To use the design editor for Unmarried Sends:

1. From the left-manus navigation, select Marketing, then click Unmarried Sends
2. Click Create a Single Send.
   To create a Single Send email using an existing (drafted or sent) email, detect the Unmarried Ship yous'd like to use and click the action menu next to the email.
3. And so, select Edit or Duplicate.
4. Select Design Editor, and so click Go along.

To use the blueprint editor for Automations:

1. From the left-mitt navigation, select Marketing, and so click Automations .
2. Click Create an Automation.
3. Make up one's mind whether you'd like to ship a pre-fabricated "Welcome" series or a custom Automation and then click Select.
4. Requite the automation a proper name, entry criteria, exit criteria, and select an unsubscribe grouping.
5. Select the send time and then click the edit button side by side to Electronic mail 1.
6. Select Blueprint Editor, and and so click Continue.
   The Design Editor opens.
7. Select the template that you want to use for your email.
   You can select a Blank Template, a custom template that you have already created, or one of Twilio SendGrid's pre-built templates. For more information, run across "Working With Marketing Campaigns Electronic mail Designs"
8. Select Blueprint Editor and then click Continue.
   The Design Editor opens.

Using drag and drib modules

Elevate and drop editing helps you swiftly construct your email, using pre-built content modules. You tin edit individual modules in the left sidebar and reorder modules in your email body by clicking and dragging your mouse.

To add together a drag & drop module:

1. Navigate to the Build tab and so click Add Modules.

2. Find the module tile you want to add together to your email. Then, elevate and drop it into your content area.
3. Edit the module settings and add your custom content to build your email.

Drag and driblet module descriptions and styles

Module	Description	Unique Fashion Options
Push button	A clickable button that links to a URL.	button color, border color, font color, width, elevation, padding, edge radius, font size, push button text, push button URL, alignment,container background, container padding
Columns	The Columns module comprises multiple column layouts. When you lot drag a cavalcade module into your blueprint, you lot will exist presented with layout options. Each layout provides a number of columns distributed amid mutual width ratios. Available layouts include evenly distributed ane, 2, iii, and 4 columns, 1:ii and ii:1 columns, 1:3 and 3:1 columns. Inside a column there are multiple drop zones for other not-cavalcade modules such as images, buttons, and text.	container groundwork, container padding, cell padding, columns
Code	This is an "anything goes" module where you can enter your own custom HTML.	Module styles are not available for lawmaking modules.
Text	Tin can incorporate text, tables, and images.	Groundwork color, padding, line height
Image	Can contain a unmarried epitome. Data attributes can exist inserted directly in the <img> tag.	Image background, epitome margin, link url, alt text, alignment, responsive, peak, width
Paradigm and Text	This is a columns module with 2 columns - each can contain either an image or some text.	Epitome, paradigm position, paradigm background, image margin, text groundwork, text margin
Spacer	Allows you to insert spacing betwixt other modules.To add together spacing using this module, simply adjust the padding in the <td> tag. For example, the spacer module adds a spacing of fifty pixels.	Background color, spacing (padding-bottom)
Divider	A visual divider, or horizontal dominion, that can be placed betwixt modules.	Background color, line color, acme, padding
Social	Icons that allow for social media integration within your emails.The module offers v different social media icon options (Facebook, Twitter, Instagram, Google+, and Pinterest) all of which can be toggled on or off as well as fully customized to lucifer individual branding and design standards.	URL, size, border radius, and icon ( Facebook, Twitter, Instagram, Google+, and Pinterest).
Unsubscribe	This module is pre-populated with your sender information and a hyperlink to the {{{unsubscribe}}} tag which are required in order to exist compliant with anti-spam laws. If you are using transactional templates, you need to include sender data the JSON array. For more than information, see How to Ship E-mail with Dynamic Transactional Templates.	Groundwork colour, padding, line acme, font, font size, link color, alignment, Address Line, Unsubscribe Settings.

Using global styles

In add-on to editing the styles for private modules within your email/template, you may likewise make changes to the global styling of your entire email/template. This includes attributes such as the background colour, text color, or font family.

The electronic mail body is the unabridged surface area that your email or template fills within your recipient's browser or email inbox.

Nether the Global Styles dropdown menu in the left hand sidebar, click Email Torso or Content Container to view and edit the following styles:

Global Fashion	Style Options
Electronic mail Body	Background Color - This is the colour for the background of your entire email/template. Text Colour - This is the colour of all text in your electronic mail/template. Link Color - This is the colour of all links in your email/template. Font Family unit - This is the font family to exist used for all text in your email/template. Font Size - This is the default font size to be used for all text in your email/template.
Content Container	Width - This is the width of the container for your entire email/template. Your modules are all independent inside these dimensions. Background Color - This is the colour of the area containing your modules. Padding - This is the amount of space that yous desire between your modules and the boundaries of the content container.

Editing module HTML

To edit Module HTML:

1. Select the module in the design editor and click the < > icon.
   A window opens where yous tin edit the module HTML.
2. When y'all are finished editing the HTML, click Update.

If yous make whatsoever structural code changes, you need to catechumen the module to a lawmaking module.

Code modules

The code module is a unique elevate and drop module that allows y'all to insert any custom HTML in your email every bit a single module which tin can be relocated and edited.

The Design Editor does non modify or validate whatsoever HTML inserted via a code module. Please be careful when using custom HTML. E'er preview your electronic mail before sending it.

Adding images with the Pattern Editor

To upload an prototype:

1. Navigate to the Build tab and and so click Add Modules.
2. Select the Images module and drag and drop it into your content area.
   This opens a window where you tin can upload images to your image library.
3. Drag and driblet the image you want to employ from your files or select Choose images to upload.

To insert an image:

1. Navigate to the Build tab and then click Add Modules.
2. Drag and drop the Images module into your content area.
   A window opens where you can select images from the prototype library.
3. Select the image y'all desire to add together to your email.
   The Image Details tab opens.
4. Insert your prototype in the electronic mail by clicking Save Prototype.

Using Exchange Tags with the Pattern Editor

To add a substitution tag to your electronic mail:

1. Navigate to the Tags tab.
2. Locate the tag you desire to add to your electronic mail and click the re-create icon.
3. Paste the tag into the module.

When copying and pasting a tag from the Tags tab, a default will be added automatically. Default values are supported past the insert keyword only. For this reason, tags with default values will be saved with a different syntax automatically. For more information almost working with default values and Handlebars, come across Adding Dynamic Content with Handlebars in Marketing Campaigns.

Test data with the Design Editor

1. To admission the exam data preview, open a pattern in the Design Editor and select the Preview tab.
2. With the Preview tab active, you will run across a {} Show Test Data button on the left. Click this button to open the exam information window.

3. Yous volition now have a side-by-side view of a code window and your design.

Yous can identify the information for a contact into the code window. Note that the data must be in JavaScript Object Notation (JSON) format. JSON is a way of structuring information in a collection of fundamental/value pairs. For example, if you utilise the first_name commutation tag, first_name is the cardinal and the customer'southward name is the value. These keys can also be thought of as variables. Like a variable in algebra, these variables represent a value yous don't however know. The post-obit sample customer is provided in JSON format for you to experiment with.

              {   "first_name": "Tira",   "last_name": "Misu",   "email": "recipient@example.com",   "alternate_emails": "recipient+@instance.com",   "address_line_1": "1234 N. Real Ave.",   "address_line_2": "Suite 200",   "city": "Denver",   "state_province_region": "CO",   "postal_code": 80202,   "state": "United States",   "phone_number": "+15555555555",   "Sender_Name": "Orders",   "Sender_Email": "orders@example2.com",   "Sender_Address": "1234 N. Be St.",   "Sender_City": "Portland",   "Sender_State": "OR",   "Sender_Zip": 97227,   "Sender_Country": "United States" }                          

4. Once you lot have exam data in place, you should see whatsoever commutation tags for which information is present rendered properly.

Previewing your email

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

You lot can toggle between a mobile and desktop preview mode by clicking either the desktop or mobile phone icons above the content expanse.

To view a patently-text version of your email or template, click the T icon. When in this preview style, you can edit the evidently text content of your electronic mail or template by clicking the Edit Plain Text button.

When previewing an email, you too meet a preview of the From name, the Field of study, and the preheader text that yous have selected.

Editing the HTML Caput

The HTML <head> element is where yous can define whatever metadata y'all would like to include with your email or template. For example, you tin use the <head> element to define any custom fonts or CSS styles you would like to use.

To edit the HTML head of your electronic mail or template:

1. Navigate to the Build tab in the left-hand toolbar and gyre to the Advanced menu.
2. Expand the option titled Edit HTML Head.
3. Click Edit to begin editing your HTML head.
   A window appears where you lot can insert your custom HTML.
4. Once y'all've finished making your changes, click the Update button.

Calculation custom fonts using the HTML Head

Most usually, users add custom fonts past using the tag to reference a web font hosted somewhere on the internet. For example, Google Fonts.

Make sure that you define a web-rubber font to use as a fallback if one of your recipient's clients does non support your custom font.

While some inbox providers do not back up spider web fonts, the post-obit popular clients practise provide spider web font support*:

• Apple Mail
• Outlook.com app
• Outlook 2000
• Default Android Mail app (non the Android Gmail app)
• iOS Post

* This listing may change and nosotros cannot guarantee 100% support from any of these clients.

To add a custom font using the HTML head:

1. Open the HTML Head by navigating to the Build tab in the blueprint editor.
2. Scroll down to the Advanced drop-down menu and select Edit HTML Head.
3. Click Edit to begin making your changes.
4. Insert a <link> tag containing an href attribute pointing to your web font.

              <link href="https://fonts.google.com/specimen/Oswald" rel="stylesheet" />                          

Next, add a <style> to specify that you want to use this new font family:

              <mode>   torso {     font-family: 'Oswald', sans-serif;   } </way>                          

Importing custom HTML with drag and driblet markup

If yous are writing your ain custom HTML that you plan on importing into the blueprint editor, refer to the elevate and drop code examples to ensure that any modules you create are compatible with our drag and driblet functionality. If yous practice not specify a data type that matches i of our elevate and driblet modules, your code is imported as a text module.

To import custom HTML:

1. Navigate to the Build tab in the left-hand navigation.
2. Scroll downwards and select the Advanced drop-down card.
3. Expand the option titled Import Drag & Driblet HTML.
4. Click Import.
   A window opens where you lot can paste in your own HTML.

5. Paste or enter the HTML you desire to use then click Import.

Any HTML that y'all import replaces all existing content in your email or template. If yous want to import only a section of HTML, utilize a code module.

Drag and drib markup

Twilio SendGrid parses your custom HTML, looking for any elevate & drib uniform modules.

• First, we await for any HTML elements that incorporate the attribute office="modules-container".
• Adjacent, we look for all HTML elements with the aspect role="module" that are descendants of the "modules-container" element.

The role="modules-container" aspect is required so that we know where your drag and drop modules are located. All of the Twilio SendGrid pre-built templates include the role="modules-container" by default. You are only required to include this attribute when creating an email or template from scratch that you want to be compatible with the design editor.

Any HTML outside an element with the "modules-container" aspect is discarded. Just supported styling options and attributes are included.

If y'all don't include the "modules-container" attribute in any of your custom HTML, then all of your HTML is imported as a unmarried text module.

Post-obit are examples of how you lot should structure and organize your custom HTML, where [module content] represents the content of your modules.

Drag and drop code examples

              <table class="wrapper" role="module" data-type="image">   <tr>     <td [styles go hither] marshal=['left' or 'right']>       [MODULE CONTENT]     </td>   </tr> </table>                          

                              <tabular array role="module" data-blazon="imagetext">     <tr>       <td>         <table>           <tr role="module-content">             <td class="templateColumnContainer" >               <table>                 <tr>                   <td class="leftColumnContent" role="column-one">                     <table function="module" data-type="paradigm">                       <tr>                         <td part="module-content">                           [MODULE CONTENT]                         </td>                       </tr>                     </table>                   </td>                 </tr>               </table>             </td>             <td class="templateColumnContainer" >               <tabular array>                 <tr>                   <td class="rightColumnContent" role="column-two">                     <tabular array function="module" data-type="text">                       <tr>                         <td function="module-content">                           [MODULE CONTENT]                         </td>                       </tr>                     </tabular array>                   </td>                 </tr>               </tabular array>             </td>           </tr>         </table>       </td>     </tr>   </table>                          

                              <table course="module" function="module" data-type="text">     <tr>       <td [styles become here] bgcolor=[some color]>         [MODULE CONTENT]       </td>     </tr>   </table>                          

                              <tabular array class="module" role="module" data-type="code">     <tr>       <td>         [MODULE CONTENT]       </td>     </tr>   </table>                          

                              <tabular array function="module" data-blazon="columns">     <tr>       <td [styles become here] bgcolor=[some colour]>         <table>           <tr>             <td form="templateColumnContainer cavalcade-drop-expanse">             [MODULE CONTENT]             </td>             <td class="templateColumnContainer cavalcade-driblet-surface area">             [Another MODULE CONTENT]             </td>           </tr>         </table>       </td>     </tr>   </table>                          

                              <tabular array class="module" role="module" data-type="button">     <tr>       <td [styles become here] bgcolor=[some color] align=['left' or 'right']>         <tabular array class="wrapper-mobile">           <tr>             <td [styles go hither too] bgcolor=[some color]>               [MODULE CONTENT]             </td>           </tr>         </tabular array>       </td>     </tr>   </table>                          

                              <table grade="module" role="module" data-blazon="divider">     <tr>       <td [styles go here] bgcolor=[some colour]>         <table height=[some tiptop]>           <tr>             <td bgcolor=[some color]></td>           </tr>         </table>       </td>     </tr>   </table>                          

                              <table class="module" role="module" data-type="spacer">     <tr>       <td style="padding: 50px 0 0 0" bgcolor=[some colour]>       </td>     </tr>   </tabular array>                          

                              <tabular array course="module" role="module" information-type="social">     <tbody>       <tr>       <td [styles go here] information-align=['left', 'right', or 'center']>         <table>         <tbody>           <tr>           [MODULE CONTENT]           </tr>         </tbody>         </table>       </td>       </tr>     </tbody>   </table>                          

Exporting HTML from the blueprint editor

To consign template HTML from the design editor:

1. Navigate to the Build tab in the left-hand navigation.
2. Coil downward and select the Advanced drop-down carte du jour.
3. Aggrandize the option titled Import/Export.
   This starts the raw HTML download of the template, excluding images.

SendGrid hosts the images included in the pre-congenital templates and any images yous have uploaded to the paradigm library, so when you lot export a template'southward HTML from the design editor, the embedded URLs in each <img> tag remains valid.

To open exported HTML in the lawmaking editor using Unmarried Sends:

1. From the left-hand navigation, select Marketing and so click Single Sends.
2. Click New Campaign and then select Bare Template.
3. Select Code Editor.
4. Paste the raw SendGrid template HTML into the code editor.

To open exported HTML in the code editor using Automations:

1. From the left-paw navigation, select Marketing and then click Automations.
2. Click Create an Automation and and then navigate to Custom Automation and click Select.
3. Navigate to the first email in the Automation series and click Edit Email Content.
4. Locate the blank template and click Select.
5. Select Code Editor.
6. Paste the raw SendGrid template HTML into the code editor.

Calculation Categories with the Design Editor

Category information volition be stored as a "Not PII" field and may be used for counting or other operations equally SendGrid runs its systems. These fields generally cannot be redacted or removed. You lot should accept care not to place PII in this field. SendGrid does non treat this data as PII, and its value may be visible to SendGrid employees, stored long-term, and may go on to be stored later you've left SendGrid'due south platform.

To add a category:

1. Navigate to the Settings tab and click Single Send Settings to aggrandize the carte.
2. Observe the Categories field.
3. Enter the name of a new category or select a previously used category from the drib-downwardly bill of fare.

Boosted resources

Demand some help?

We all do sometimes; code is hard. Get help at present from our support team, or lean on the wisdom of the crowd browsing the SendGrid tag on Stack Overflow.

How To Make A Sendgrid Template,

Source: https://docs.sendgrid.com/ui/sending-email/editor

Posted by: vallebechapte.blogspot.com

Share this post