About Element Sizes & Email Editor
To design the perfect email, you'll need balance. Some of the most common questions when working with Elements in the Email Editor are about how you can resize Elements and how far the limits go when it comes to margins, line height, width, etc.
Continue reading this article for a collection of all the width and height limits in pixels for Elements and Design Options, as well as some handy tips for changing the Elements in your email.
In this article
How to Resize Elements
There are different ways you can adjust Element sizes. One of the most common ways is to use Row Columns to change the width of the Elements inside.
Create Columns by adding more Elements, or click the Row's handle and then the plus sign on the left to create a new Column.
As you add new Elements, or create new Columns, the Elements inside the Row will adjust to fit their new place in your email.
You can also resize Elements with their margins. To learn more, continue reading Margins below.
You can use margins to resize Elements.
The maximum measurement for all margins is 100px, but there are different limits for width and height depending on each Element. The margins overlap or override the measurement of the Element.
If you set margins greater than the size of the Element, though, the margins will overlap and your Element might disappear or get covered.
To fix this, simply clear all the margins of the Element. If you have a hard time locating the Element, you can still find it inside the Row or Column in the Structure Panel on the left.
Rows, Columns & Email Body Width
The maximum email body width is 800px and the minimum is 320px.
As to the email's body border, the maximum is 20px.
An Email Row's width limit corresponds with the email's body width.
Email Columns have a minimum width of 10px.
A Row with 4 Columns will automatically split its width evenly for each column.
So, for an email with a 600px body width, four Columns will automatically be 150px wide by default.
The width of all Columns should be equal to that of the width of the email.
You can, of course, adjust each Column's size by dragging the handles between them.
To adjust the width of the columns, expand the Column width drop-down in the Design Panel. Click and drag the icon left and right to reduce and increase the width in pixels, or enter the value manually.
The Text Element has both margins and a manual line-height option.
Tick the Manual Line-height checkbox to enter a measurement in pixels. The maximum is 150px.
If you leave this checkbox unticked, the line-height of your text will correspond with the font, size and style you choose inside the Text Element. For more information, read up on the Inline Text Editor.
The maximum width of the image will match the email's body width, if the image is placed in a Row that contains no other Elements/Columns.
If there are other Elements/Columns in the row, the maximum will be relative. For example, in a 800px wide Row with two Elements/Columns, one Element/Column can be minimum 10px while the other can only be 790px maximum.
So, since the maximum width for the email body is 800px, that's the maximum width for images as well.
There is no limitation as to image height, but we suggest that you don't use images that occupy too much space in your email since it will affect your email's deliverability.
However, if there are more than one Elements/Columns in the Row, the height of the tallest image or Element/Column will not affect the shorter one, and vice versa. In this case, the height of image and other Elements/Columns will adapt to their width, depending on their proportions.
We support PNG, JPG, JPEG and GIF image file types.
While the average image file size tends to be around 2MB and 2.5MB, we recommend that you keep the file size at 1MB or under.
The Button Element has a minimum width of 10px and its maximum width corresponds with the email's body width.
Be mindful of the Element's margins, since they will also affect its dimensions. Jump to Margins...
For a maximum width Button, start by clearing all its margins and set the Button's style to Full width.
A Button's padding is the space between the borders of the Button and its text. The maximum padding is 100px, and the minimum padding corresponds with the Button's font, since different fonts have different standard line-heights.
As to the Button Element's border, the maximum is 100px as well, and it begins on the outer part of the Button's padding. A colour-less border will result in additional padding.
If the sum of the Button's padding and border exceeds the width of the email body, the Button's text will gain a line break.
The Line Element's minimum thickness is 1px, and the maximum thickness is 100px.
You can also adjust the length of the line, with a minimum of 1px and a maximum of 800px or the maximum email body width. The email's body width will limit the length of the line.
You can choose between a horizontal and vertical direction for your Line Element. If you would like a vertical line that extends on the side of your email, you can add a vertical Line Element on the furthest Column.
Vertical Lines in the Mobile Version
Vertical lines will behave differently in mobile devices, so test and preview your email in mobile to make sure that it looks beautiful in all devices.
We suggest that you create a mobile version of your email with Rows without the vertical line for optimal performance. Take a look at the section about the Spacer Element below to learn more.
Since there is a 4 Column limit per Row, you may only add 3 other Columns in your Row(s) since the Line's Column will count. As mentioned above, the maximum length for a Line Element is 800px. To extend the Line, clone your Line Element and adjust the surrounding Columns and/or its length to cover the rest of your email.
The Spacer Element's maximum width corresponds with the email's body width, and the minimum is 1px.
There is no maximum height for the Spacer Element. However, we suggest that you preview and test your email in desktop and mobile to make sure your Spacer doesn't take too much space in mobile devices.
You can also add a Row with a Spacer Element for mobile and another Row for desktop. Simply add the Spacers in separate Rows and set the Row visibility to mobile for one and desktop for the other.
List, Menu and Icon Menu Elements
The List, Menu and Icon Menu Elements have no limit as to how many items you can add.
However, consider that items that exceed the space set by the email's body width will not show in your email.
When it comes to the List and Menu Elements, the maximum measurement for the space between items is 100px.
As to the Icon Menu Element, the maximum icon size is 100px, and the maximum for spacing is 400px.