Articles in this section

See more

Image Recommendations for Campaigns & Landing Pages

Avatar
Kelli Freeman
  • Updated
Follow

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. There is 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.

In this article we cover:

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. 
  • GIFs up to 5 MB can be uploaded, the recommended width for GIFs is 600px.

Images_1.png

When multiple images are present in a row:

  • 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:

Images_2.png

Module Background Image

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:

1. Within the Email Design section of Email Composer

  • Set the row padding to 0 (by default it's 10)

Images_3.png

2. For each image component within the module:

  • 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.

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
  • 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

Images_4.png

 

 Image cropped to match the module height:

Images_5.jpg

Setting up Background image with padding:

The background image scales to fit the width of the parent container and the rest is hidden.

  • If your text container is 100px tall (aprox 3 rows of copy), you can add 150px top and bottom padding to make it 400px total height. That would fit a full 600x400 background image with minimal or no cropping.

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:

Images_6.png

 

See our help desk articles for more information on the best image sizes for your marketing email templates.

Related articles