Email Marketing Tool

FDia
Member

Email layout alignment

Hi there, 
I have been trying to copy an existing one-pager into the drag & drop Hubspot email marketing tool. Unfortunately, I have encountered two problems: 

  1. The different text and image elements can't be aligned properly and shift as soon as the test email is sent out. Is there a way of having a grid view or automatic guidelines to align different elements of an email?
  2. Even if the layout were to be done, it is only visible on the web layout. The smartphone layout shifts the entire email design. How can I make sure that the smartphone version is the same as the web version?

These problems lead me to the question of whether there is an extension or tool that helps with this kind of design problems if one is to create an email layout more complex than just a top-to-bottom text. 

 

Thank you in advance for your help - it is very much needed!

 

0 Upvotes
3 Replies 3
FDia
Member

Email layout alignment

Hi Ben, thank you for your reply. I have created a simplified version without the copy for confidentiality reasons. 
Here is the test email: https://drive.google.com/file/d/1gkFDxW5xMu5qmw08ij2FVGh8K3AhLvrr/view?usp=sharing 

Here is how the web layout looks (as you can see, the section titles and text blocks are not well-aligned):

Bildschirmfoto 2022-05-20 um 07.36.37.png
Here is how the smartphone version looks: 

Bildschirmfoto 2022-05-20 um 07.35.14.png

0 Upvotes
Ben_M
Key Advisor

Email layout alignment

What it looks like is going on is that you are using the layouts and then on mobile everything is condensing to a single column. Try using a 1 column layout and then drag text areas or images next to one another in that layout instead of using the layouts feature.

Ben_M
Key Advisor

Email layout alignment

Email is unfortunately a much more complex beast than web design of landing/web pages.  Would you be able to share some images for us to see the layout you are trying to replicate and even the "view online" link from your test email so we can see what is happening when it is rendered. This will allow us to provide some insights to help guide you to a solution.