Customize Email Backgrounds and Images for a Polished Look
The Background and Image sections under the Composer tab of your invitation is where you can customize the background color of your email, upload your organization's logo and event images.
The Background Section
The email communications has two backgrounds:
Background Color 1 (you can choose a solid color or an image)
Background Color 2
Background Color
zkipster works in HEX color code format. If you have your own color codes, paste them into the color section.
Background Image
For Background Color 1, you can choose to upload an image file as the background of your email communications. The maximum file size is 5MB and accepted image file formats are JPG, PNG, GIF.
Please note: When adding a background image, it will always be up to the individual email client of your guest (Gmail, Outlook, Apple Mail, etc.) to render it according to the screen size. Most email clients will repeat the image to fill in the background if the image is smaller than the available screen size.
It is usually better to go for larger images that make sense from any viewpoint. For instance, do not rely on fine detail or particular objects inside the picture to be visible. Generally, it is advisable to go for patterned and broader images in this option.
The Image Section
You can upload your company logo or an event image in this section. The maximum image file size allowed is 5MB. Feel free to give it an internal label ('Logo', 'Banner', 'Flyer', etc.) to the section in case you are planning to have multiple images in the email.
Following the upload, you can scale up or down the width of the image ( max. width allowed is 570 px), and choose the alignment - Left, Center or Right.
Things to keep in mind for your communications image files:
The system only accepts GIF, JPG and PNG formats. Using GIF files can enliven emails a little more and look great presentation wise.
Different image formats are better for different image types:
GIF is the most efficient for very simple images (1-2 colors, no text).
PNG is best for most graphics, like banners, flyers, illustrations. (But a bit less efficient when it comes to file size optimization)
JPG is the best for photos and by far for efficiency and sampling - a mistake that is often made is that graphics that include text as most of the text or sharp lines between elements then get "pixelated". This article gives great detail on the different file types and recommendations for which file type to save your image as.
Your images will be displayed at 570 px width max. in the final email. This is to ensure the highest email deliverability and additionally guarantees that recipients will be able to open it on their mobile devices. There are no strict width and height restrictions for your original file as such (as long as you keep within the 5MB limit). However, once uploaded you will not be able to adjust the custom size any larger than 570px width.
Be careful with text on your main image. The more text you have on an event flyer or main banner image, the greater the chance that the details will not be displayed as clearly after uploading it into the system. Use the Body Text section to provide your event information, if possible.
You can additionally link your image directly to your response form (if working with the Email and Responses Form template) or an external web address:
Switch the 'Link Image' toggle to ON and choose:
'Form', if you want to allow your guests to be taken to the response form directly when clicking on the image (instead or in addition to the RSVP button).
'Web Address (URL)', if you want your guests to be navigated to an event landing page, your company website, etc.
Duplicating and Reordering the Image Section of your Email
By default, the system will provide you with one 'Image' section. However, the image section can easily be duplicated in case you need more than one - to upload a logo or additional invitation image.
Simply hover over the image tab for the Duplicate icon to appear:
Reordering the Email Sections
Apart from the 'Background' and 'Plain Text' tabs, which are locked, all sections of the email composer are movable and can be reordered as needed.
To rearrange the order of your communications email elements, drag and drop the sections in desired order.
For each section it is further possible to define a top margin in order to allow for different spacing between the sections in case they are being reordered (the default margin is 20px).
Learn more on how to customize the rest of the email sections in the article here or watch the video below:
Sending a Test Email to Check your Communications Design
We strongly encourage you to send yourself a test email during the design process of your online invitation to check that you are happy with the look and feel of the final invitation. You can find this option at the top of your Email Builder - more details on this here.