Using Background Images in Exclaimer Cloud

Relevant 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

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

In the Properties window, select the Details tab. You will see the size of the image under Dimensions.

If the image is too big, you may want to consider using an image editor such as Adobe Photoshop, Gimp, Paint.net and so on 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 build the signature template.

Steps to use background image

1. To get started, drag the custom table onto the signature canvas.
   
   
   
   
2. Choose a 1x1 table structure, this will allow you to upload a background image to start with.
   
   
   
   
3. In the Table properties window, 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.

    

   
   
   
4. Once you click Yes, click Size and set the height and width of the image onto the table
   
   
5. You will be able to see the image appear inside the table and in the design preview:
   
   
   
   
6. Once the image is in place, you can 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 on the dark background of the image:
   
   
7. We have added some padding to the left of the table - to move this away from the edge of the background image. For more information, see the Golden Yellow Line.
   
   It may look odd when structuring the signature, but it is normal for this to occur. You will be able to see in the preview how this looks. Example:
   
   
   
   
8. We have also aligned this table to be vertically centred and aligned left horizontally:
   
   
   
   
9. 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.