Elements - HubSpot Email Templates Pack Documentation
Create your first email
Edit your email template
Once you type the name of your template and click Create email, you will arrive to the Basic HubSpot Editor.
In this editor you will be able to:
- Edit email content
- Edit buttons, text and other elements colors
- Update images as needed
- Hide sections
In this editor you won’t be able to:
- Add or re-arrange sections
Once you enter the editor, you will notice everything is based on modules, which means if you hover any element, you will see a small Pencil icon to allow you to edit it.
Feel free to click on any element, and you will see the content and visual editor at the left.
Also, in case you would like to hide a section, you can always go to the Settings of the module and untick the “Enable Module” feature, which will automatically hide that complete module/section.
If on the other hand you would like to add a section, or re-arrange some sections to have a different order, you will need to use the Advanced Editor.
Sneak Peak: HubSpot is already working on supporting drag and drop functionality, so in the coming future you will be able to do add and re-arrange sections directly from the Basic Editor.
If you want to make more advanced adjustments to the Elements email templates, please be prepared, as this can get a little technical.
With the Advanced Editor you will be able to:
- Add new sections
- Clone existing sections
- Re-arrange sections
So, if you would like to to any of these, you are in the right place. In order to edit the Template, you just need to click on Design > Actions and then Edit this template.
You will see a popup notification asking you if you would like to edit the actual template, or clone it first. We highly recommend you to clone it first, so you still have access to the original.
Once you clone it, you will arrive to the email template editor in the HubSpot Design Tools.
In this editor, you can start re-arranging or duplicating sections, however, it’s important to know the basics of web design in order to do it properly. While some things like duplicating a section can be very easy (as you just need to do Right Click + Clone), some other adjustments can be a little more complicated.
If you ever have questions, you can always email us at firstname.lastname@example.org, or if you are looking for advanced assistance, you can get in touch with our HubSpot Development Agency, so our team of HubSpot Experts can help you design and landing page, website or email template as needed.
Edit graphics, images and graphics
As you edit your email templates, you will notice some of the sections (for example, some hero sections that have text with background images) are images instead of actual text in the HubSpot editor.
This happens because not all email clients support background images, so this way we guarantee that all popular email clients will be able to correctly view the emails you send.
However, you don’t need to worry, as you don’t need to re-create these images. All of these images are available in this Figma file.
In case you are not aware, Figma is a design software like Adobe Photoshop or Illustrator, but with the main benefit that it works directly on your browser.
So, in order to access these designs, you just need to create a free account on Figma.com, and then enter to the Figma link above and duplicate the file. This will allow you to have an editable version of this file in your Figma drafts, so you can easily create any image needed, or edit the color of any graphic to match your brand style.
For example, let’s say you want to edit the graphic in the Thanks for subscribing email template. You can easily edit the colors on Figma to match your brand colors, and then you just re-upload the image to your HubSpot template, and you are ready to go!
Frequently Asked Questions
1. Templates don't look like in the preview or are not responsive
Sometimes, due to a common HubSpot bug, when you purchase the Elements Email Template Pack, or a single email template from the Elements collection, it may happen that the template you receive is not perfectly responsive, and it doesn’t look exactly like the one on the preview.
Our apologize for this, this is a bug in the HubSpot platform, not ours, so we don’t have control over it. However, there is nothing to worry about, as this can be fixed in less than 2 minutes, by doing the following.
1. Identify if you are having this problem: First, it’s important to identify if this is the issue you are having.
To do so, you just need to try the email templates, and if these are not responsive, or the templates look like below (notice the email box doesn’t have rounded corners, and it has a grey border, unlike the one in the preview), it means this email transfer bug affected your template/templates.
2. Go to Marketing > Files and Templates > Design Tools: Once you identified the problem, you need to go to the Design Tools, and identify the location of the email templates. These are usually in @marketplace > inboundelements > Elements > Elements Email Pack, or a similar folder.
3. Update the Templates: You need to click on each of the email templates, and then update them from ‘Basic Email Template‘ to ‘Responsive Email Template‘. Once you do this, all the issues will be fixed automatically.
Once you do that, just click ‘Publish changes‘, and then repeat the process with all the emails. After that, all responsive or design issues on the email templates will be fixed automatically.
If you want us to do this for you, we are more than happy to help with that! Please just email us at email@example.com, and our team will be happy to assist you.
Help & Support
And that’s all for now. As you start editing your new Elements HubSpot email templates, you will notice it’s super easy and simple to customize them.
However, if you ever have any questions about the templates, find an issue that you need help with, or just want to reach out to say hi, feel free to send us an email at firstname.lastname@example.org, our team will be ready to help you.
On the other hand, if you are looking for advanced help with HubSpot development for your company, feel free to reach out to our team of HubSpot Experts.