Creating HubSpot Emails
HubSpot emails can be created using either custom-coded templates or the drag & drop email editor. Depending on the project requirements, developers may create templates using HTML + HubL and reusable modules.
Creating an Email Template (Custom Code)
Section titled “Creating an Email Template (Custom Code)”Creating an email template is very similar to creating a page template.
- Navigate to
Marketing > Files and Templates > Design Tools - Click
File > New File - Select HTML + HubL
- Choose Email as the template type
- Write the email structure using HTML and HubL
Inside the template you can:
- Write standard HTML markup
- Include custom modules
- Add dynamic content using HubL
Required Email Information
Section titled “Required Email Information”HubSpot requires certain company information to be included in marketing emails for compliance reasons.
Common fields include:
site_settings.company_namesite_settings.company_street_address_1site_settings.company_citysite_settings.company_statesite_settings.company_zipsite_settings.company_country
Emails must also include an unsubscribe option:
unsubscribe_linkunsubscribe_link_allunsubscribe_section
Optional Email Variables
Section titled “Optional Email Variables”Additional HubL variables that can be useful in email templates include:
view_as_page_url– Displays a “View in browser” link for recipients who cannot properly view the email.subscription_namesite_settings.company_street_address_2
Using Modules in Emails
Section titled “Using Modules in Emails”Email templates can also include custom modules, similar to landing pages.
Modules allow developers to create reusable components such as:
- headers
- content blocks
- call-to-action sections
- footers
These modules can then be configured by marketers directly in the email editor.
Email Styling
Section titled “Email Styling”Email styling has stricter limitations than normal web pages.
To ensure compatibility across email clients:
- All styles should be written inline. Many email clients strip or ignore
<style>tags, so inline styles ensure consistent rendering. - Avoid complex CSS
- Avoid unsupported properties used in web layouts
This ensures better rendering across email clients such as Gmail, Outlook, and Apple Mail.
Drag & Drop Email Editor
Section titled “Drag & Drop Email Editor”Emails can also be created using HubSpot’s drag & drop email builder.
- Navigate to
Marketing > Email - Click Create email
- Select a template
- Use the visual editor to add modules and edit content
Knowledge Check
Test your understanding of this section
Loading questions...