--- title: Email Template Migration description: Email Templates. Yay. --- Email Template Migration ![Image of Santa Claus in red costume. Communication concept.jpeg](https://go.bpweiss.com/hs-fs/hubfs/Stock%20images/Image%20of%20Santa%20Claus%20in%20red%20costume.%20Communication%20concept.jpeg?width=620&name=Image%20of%20Santa%20Claus%20in%20red%20costume.%20Communication%20concept.jpeg "Image of Santa Claus in red costume. Communication concept.jpeg") Migrating Email Templates is a common scenario we discuss with customers in Onboarding. While[ we offer an Email Template Rebuild](https://www.hubspot.com/services/consulting/email-template-rebuild) service, many customers will expect you can discuss with them at a high level how to get their existing HTML emails ready to go in HubSpot. ## Resources Here are some resources before we get started.  - [Email Template Rebuild service page](https://www.hubspot.com/services/consulting/email-template-rebuild) - [Free responsive email templates from Litmus (for practice)](https://litmus.com/resources/free-responsive-email-templates) - [KB guide on creating + saving HTML email template](https://knowledge.hubspot.com/articles/kcs_article/cos-general/build-a-custom-coded-template-in-hubspot) - [Designers Docs on Email Template Markup](https://designers.hubspot.com/docs/cos/email-template-markup) ## Anatomy of the boilerplate HTML Creating a new "HTML & HUBL" email template comes with some boilerplate HTML to get you started.    ![Anatomy_Of_HTML_Email_comments](https://go.bpweiss.com/hs-fs/hubfs/Anatomy_Of_HTML_Email_comments.png?width=1139&name=Anatomy_Of_HTML_Email_comments.png)   1) Head: Some meta-data and a place for your CSS.  2) Body: The actual rendered content of your email template.  3) Super helpful comment of where someone should copy + paste their email content assuming the only thing they are copying and pasting is just their content and not their head + footer. This is never the case.  4) The boilerplate also comes with a footer which includes the token to show their Company info from settings and the manage subscription links. The email template they are migration most likely has it's own footer with this information. They will need to replace the Company info + Unsub links in their template with the tokens located here.  HTML  elements frequently come in pairs, with a start tag and an end tag with some content in between.  ## Making it editable 1: The Content Attribute The bare minimum you need to do to go from hard-coded email content to something editable in the email tool is to create your first module.  [Welcome to content_attribute](https://designers.hubspot.com/docs/hubl/hubl-module-syntax-and-parameters#content-attribute) HubL lets you define editable modules. A common 'low effort' version of this is to wrap the actual content of your email - not including your logo and footer - in content_attribute.  Everything inside the tags is loaded into the editor as the default content you start with.      ## Nested Tables: Understanding the layout ![EmailTemplate-Nested-tables](https://go.bpweiss.com/hs-fs/hubfs/EmailTemplate-Nested-tables.png?width=532&name=EmailTemplate-Nested-tables.png) What the hell am I looking at? HTML email templates are typically structured as tables within tables. This is a rough sketch of the layout of the Product Announcement email template layout.  Tables start with the tag.  Each table has at least one row: Each row has at least one cell:
If a row has more than one column in it, that would be an additional tag.  Once you get to the cell, the layout then contains another table, with it's own row and table.  Welcome to the wonderful world of email template layouts.  ## Additional Resources Just can't get enough when it comes to HTML emails?  - [Litmus: The Ultimate Guide to Bulletproof Buttons in Email Design](https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design) - [Treehouse: HTML Email Design](https://teamtreehouse.com/library/html-email-design) - [Link 3](http://hubspot.com) - [Link 1](http://hubspot.com) - [Link 2](http://hubspot.com) - [Link 3](http://hubspot.com)