Articles in this section

Using Background Images in Exclaimer Cloud

Avatar
Jasmine Hotham
  • Updated
Follow

Related Products: Exclaimer Cloud Signatures for Office 365 | Exclaimer Cloud Signatures for G Suite

Scenario 

The signature design requires the use of a background image, in the template.

 

Solution

Caution: Before using a background image, it is important to know the width and height of this image and, to upload the image at the correct size it needs to be.

 

To check the image size, find the image in the folder it is stored within right click on the image -> Properties

 

In the properties window click on Details - you will be able to see the size of the image here, under dimensions

 

If the image is too big, you may want to consider using an image editor such as Adobe Photoshop, Gimp, Paint.net etc. to reduce the image down. A recommended width for this is 600px wide.

Once you know what the image size is, you can proceed to building the signature template

Steps

To get started, drag the custom table onto the signature canvas

Choose a 1x1 table structure, this will allow you to upload a background image to start with

 

Then, in the properties window on the table -> upload the custom image

 

Warning: Using background images will render the signature as a bitmap - this is behaviour by design to ensure the image can be viewed by all mail clients and devices.

 

 

After clicking yes, go to size and set the height and width of the image onto the table

You will be able to see the image appear inside the table, and in the design preview. 

 

 

Once the image is in place, you can then layer on tables and elements to further construct your signature template and use padding and alignments, to space out the design further

As an example, here we have used a table of two columns with white text due to the dark background of the image

We have added some padding to the left on the table, to move this away from the edge of the background image - the Golden Yellow Line

It may look odd when structuring the signature, this is normal for this to occur, you will be able to see in the preview how this is looking

 

 

We have also aligned this table to be vertically centred and aligned left horizontally

 

Also we have used padding on the Green Line of the left hand table cell to add space before the contact fields

 

This is the end result, a nice clean and simple design

 

 

If your design is more complicated, use more table cells where needed and don't be afraid to use padding to align the signature accordingly

 

 

 


Related articles