Tips for Using the CMS Email and Print Template Editor

Adjusting the Height of Rows By Dragging

You can adjust the height of elements inside your template to reduce the appearance of space and padding. This can be done by finding the outermost container and selecting the border and dragging either up or down to resize the container.

Example: In this example, there is extra space above the Subtotal: line and after the Order Status: line. The goal is to remove that space to create a more condensed layout.

First, find the bottom border container for the section. It should be represented by a dotted line. In the screenshot, it is highlighted and numbered 1.

Hover your cursor over the line and click and hold to select it. While holding down, move the line upwards until the space at the top and bottom has been reduced.

It should look like this now:

Note

The outer container border may not be on screen if the content area is larger than your screen size. If this is the case then scroll down until you find it. See the second example in the video below.

See this video example:https://drive.google.com/file/d/1zcOfmR16TT1yxewl1w8V8FyuW6_CcqMr/view?usp=share_link

Adjusting the Height of Rows and Cells Manually

You may not be able to adjust the height of a row without changing the height of an adjacent row or cell by dragging the border scrubber for the said row. For example, you try dragging the scrubber to shrink a row but the row above it grows as you shrink it. This is because the adjacent row is wrapped in a container with a fixed height. When this happens you can try adjusting the height of rows and cells individually by right-clicking on the item and selecting row or cell properties.

Example: The original row below has white space above and below the content. In this example, you will remove it.

1. Step 1 - Adjust the row height
   1. Right-click on the row.
   2. Select Row > Row Properties.
   3. Adjust the height of the row to 150px.
2. Step 2 - Adjust the cell heights

   After completing Step 1 the row height will appear to be the same. That is because the child cells also have height values that need to be modified.

   1. Right-click on the left cell (the one with the text “Subtotal:”... etc.).
   2. Change the height to the height you used in Step 1. In this example, it's 150px.
   3. Click Save.
   4. Right-click on the right cell (the one with the email tags $sub_total... etc.).
   5. Change the height to the height you used in Step 1. In this example, it's 150px.

   It should look like this now:

3. Step 3 - Keep adjusting

   Getting your desired results may require trying several different values, and then testing the results by printing or sending the template.

Adjusting the Height of Parent Table to Use Height Auto

After you adjust the height of any parent table, the editor will hardcode a height property on the style tag. (For example., <table style=“height: 2400px”>). If your content does not at least fill that height perfectly, the table will render with extra space between rows to fill the height.

To fix this:

1. Right-click the parent table.
2. Select Table Properties from the popup menu.
3. Set the height to auto.
4. Save your template.
5. Test by sending a test email.