When considering the design for your email, it's important to note how your modules are constrained in size to allow for effective use across platforms. In other words, there's a set amount of room intentionally, so that Revinate can optimize across the many ways that people may open the email (across Operating Systems, Browsers, and Devices). Knowing those dimensions will help you build the most beautiful creatives possible. It may take some savvy on your part as an Email Designer.
Things to Know
- Each module in the campaign builder has a fixed width of 600 pixels. If there are two images in a row, then they can be up to 300 pixels wide each.
- When multiple images are present in a row, then it is recommended that they are same vertical height.
- When there are images and text modules in a horizontal space (e.g. "Img + Txt + Btn" module):
- The Text and Button components are taking 2/3rds of the space (400 pixels)
- The Image component is taking 1/3rd of the space (200 pixels). Example:
How do I make the images take up the whole space?
With the above dimensions in mind, there are a few things you need to do to make the images take up the whole space for the module:
- Within the Email Design section of Email Composer, set the row padding to 0 (by default it's 10)
- For each image component within the module, you will need to expand the width to fill the space appropriately. For example:
- For a full width image, it would be 600;
- For a module with two images horizontally, each would be 300 width
- For a module with image + text horizontally, text takes 2/3rds, so the image width is 200.
- Finally, if you want an edge-to-edge (full-width) image, you can select a module and add “Module Background Image”. The image should be at least 600px wide and height will depend on your content inside that module. Note that the module will crop the image that falls outside the module height. For example, if your module is 300px tall and your image is 500px tall, only 300px of the image will be shown. Since the image is center cropped, the top 100px and bottom 100px will be invisible. See example below:
Original image and how it’s been cropped to match the module height:
Landing Page Header
When designing your Upsell and/or Guest Preference landing pages, you have the option to show a banner and/or logo. The recommended size is 1366px x 160px. You can also add your logo on top of the banner. See example below:
See our help desk articles for more information on the best image sizes for your marketing email templates.