Themed Templates

About Themed Templates

Working with themed templates helps you get an idea of the design possibilities of the Email Editor. Feel free to use them as inspiration for your future email campaigns! Replace all elements and content with the content that matches your brand, and there you go.

Read more about how to work with themed templates below.

Themed1.jpg

 


 

Working with Themed Templates

Here's some practical information about the most common actions users perform whenever using a themed template for the first time.

Themed8.jpg

 

About the Template

Expand an item to learn more:

Changing Themed Template

How to Change a Themed Template

To change the themed template after you've chosen one and gone into the Editor, simply click Back on the Bottom bar. You will go back to the Templates step, where you can choose a different template.

back_02.jpg

 

Note that all of the changes you made in the current template will be lost.

Template Settings

Review the Template Settings

While in the editor, open the Template settings by clicking Template settings on the Bottom bar.

pd7_02.jpg

 

It's divided into Template Settings, Design Settings and Unsubscribe Settings.

 

Template Settings

1. Change the name of your Template under Template name, and edit the description of your template under Description.

pd8_02.jpg

 

3. To save your changes, click Done.

pd9_02.jpg

 

Design settings

pd10_02.jpg

 

Click on an item below to expand:

Width

Adjust your Email's width by entering a measurement in pixels under Email Width (px).

We suggest a width of 600px, optimal for most Email clients.

bb7_02.jpg

 

Top Padding

The top padding will create a space between the top of the box where your Email is displayed on the Email client and the actual Email content.

Enter a measurement in pixels under Top Padding(px).

bb7_03.jpg

 

Body

Body Colour

Adjust the colour of your Email's body by clicking on the colour button.

Tick the Transparent box to make the Email's body transparent.

The background colour will still be displayed.

 

Click on the circle next to button colour to open the colour picker.

8_02.jpg

 

Use the colour picker to choose a colour for your Email body.

pd11_02.jpg

 

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each Email. Every new Email will have no recently used colours, but the colours will remain for each Email whenever you go back into editing.

bb10.jpg

 

Background

Background Colour

Adjust the colour of your Email's background by clicking on the colour button.

 

Click on the circle next to button colour to open the colour picker.

8_03.jpg

 

Use the colour picker to choose a colour for your Email background.

pd11_02.jpg

 

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each Email. Every new Email will have no recently used colours, but the colours will remain for each Email whenever you go back into editing.

bb10.jpg

 

Border

Border Width

Adjust the thickness of your Email's border by dragging the Width slider right for a higher measurement and left for a lower measurement.

bb11_02.jpg

 

Border Radius

The radius of your Email's border will determine how round the corners will be. Drag the Radius slider right for a higher measurement and left for a lower measurement.

bb11_03.jpg

 

Border Colour

Adjust the colour of your Email's border by clicking on the colour button.

Click on the circle next to button colour to open the colour picker.

bb11_04.jpg

 

Use the colour picker to choose a colour for your Email border.

pd12_02.jpg

 

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each Email. Every new Email will have no recently used colours, but the colours will remain for each Email whenever you go back into editing.

bb10.jpg

 

 

Unsubscribe Settings

pd13_02.jpg

Click on the item below to learn more about the unsubscribe settings.

Adjusting your Unsubscribe Settings

How to Adjust your Email's Unsubscribe Settings

1. Make sure that you've added an unsubscribe link in your Email. Expand the item above to learn more.

email19_02.jpg

 

2. While in the Email Editor, open the Unsubscribe Settings by clicking Template settings in the Bottom bar, and then Unsubscribe.

pd13_02.jpg

 

3. Since clicking the unsubscribe link will take them to a landing page, start by entering a headline for that page on Landing Page Headline.

email21_02.jpg

 

4. Enter the message for your landing page under Landing Page Message. This message could be a question, asking them whether they are sure they'd like to unsubscribe or if they're there by mistake.

email21_03.jpg

 

5. To confirm that they wish to unsubscribe, they will have to click on a button. Enter the text for that button under Landing Page Button.

email21_04.jpg

 

6. On Unsubscribe Type, you will choose what action the button will do.

Click the drop-down menu to choose between Message, to show them a confirmation message, and Redirect Link to take them to another page of your choice. Regardless of the page you choose to redirect them to, clicking the button will effectively unsubscribe them from your Email communications.

email31_02.jpg

 

If you choose Message:

Enter a message for the landing page under unsubscribe message.

email31_02.jpg

 

If you choose Redirect Link:

Lead them to a page of your choice after they confirm that they wish to opt-out.

Enter the URL of that page under Redirect Link.

Regardless of the page you choose to redirect them to, clicking the button will effectively unsubscribe them from your Email communications.

emal32_02.jpg

 

Testing a Template

How to Test a Template

1. Click Test in the bottom bar

pd14_02.jpg

 

2. Enter the email(s) in the corresponding field, separated by commas.

pd15_02.jpg

 

3. Click Send Test.

 About Test Emails

When testing an email, the test email might be sorted by your email client as spam. Spam emails tend not to load images and all additional content in the preview, which is completely normal and done with your best interest in mind.

Please move the email out of the spam folder into another inbox in order to load all of the email's content.

testemail.jpg

 

Previewing a Template

How to Preview a Template

1. Click Preview in the bottom bar to preview your Email.

pd16_02.jpg

 

2. Toggle Desktop, Mobile and the Text version by using the buttons on the right.

You can see how the Email will look in all three formats, so you can make sure it will be displayed correctly no matter the device.

pd17_02.jpg

 

3. If necessary, make any changes to improve the way your Email is displayed.

Click Back in the Bottom bar to go back to the Email Editor.

pd18_02.jpg

 


 

About Elements

Expand an item to learn more:

Replacing an Image

How to Replace an Image

1. Click on the image element you wish to replace.

pd1_02.jpg

 

2. The Image Options will open on the right, on the Design Panel. Locate the image you uploaded towards the bottom of the Image Options.

pd2.jpg

 

3. Hover over the image and click Change Image.

pd3.jpg

 

4. Choose another file from your computer.

image0.jpg

 

Replacing Text in the Text Element

How to Replace Text in the Text Element

1. Click on the text inside the text element.

pd4.jpg

 

2. Select all the text in the text element.

pd5.jpg

 

3. Erase all the text, or paste the desired text in the text element.

 

4. Use the inline text editor to change the style of the text.

Text3.jpg

 

A few words about the options in the inline text editor:

FontSize & StyleFormat & ColourAlignmentData Tags

How to Change the Font of the Text in the Text Element

1. Click on the font button in the inline text editor.

text10.jpg

 

2. Choose a font from the list.

We currently support 7 different fonts: Arial, Comic Sans, Courier New, Georgia, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet Ms and Verdana.

text11.jpg

 

Something to consider: Some Email clients may not support certain fonts. If this is the case, the Email client will replace the font with a fallback font.

 

Adding Elements

How to Add Elements into the Canvas

You get to choose the exact placement of the element before adding it into the canvas. Here's a quick guide for how they behave depending on where you drop them in the canvas.

Only elements can be placed inside an existing row, since an asset is already a row.

 

1. Choose your element.

canvas7.jpg

 

2. Click on it, and drag it towards the canvas. Don't drop it yet.

main2.jpg

 

3. The line indicator will point to the place where the element will be placed. Take a look at the images below to see how it should look when you add elements into the canvas.

canvas10_02.jpg

 

Click on an item below to expand:

Into a new row

This is how the canvas will signal that you are dropping the element into a new row.

main2.jpg

Into a new column

This is how the canvas will signal that you are dropping the element into a new column.

main3.jpg

Into an existing empty row

This is how the canvas will signal that you are dropping the element into an existing row with no other elements in it.

main4.jpg

Into an existing empty column

This is how the canvas will signal that you are dropping the element into an existing column with no other elements in it.

main5.jpg

Into an already populated row

This is how the canvas will signal that you are dropping the element into an existing row that has one or more elements in it. Adding an element to a row will create a new column.

main3.jpg

Into an already populated column

This is how the canvas will signal that you are dropping the element into an existing column that has one or more elements in it.

main6.jpg

Cloning Elements

How to Clone an Element

1. Click on the element you would like to clone.

main7.jpg

 

2. On the right, the Element Options will open in the Design Panel.

main8.jpg

 

3. Scroll to the bottom of the Element Options, and click Clone.

main9.jpg

 

4. That's it! Your element will be cloned directly under the original, in the same row.

main10.jpg

 

Replacing an Element

How to Replace an Element

1. Click on the element you wish to replace.

pd1_02.jpg

 

2. Click on the red "x" on the right corner of the element.

pd6.jpg

 

3. From the Design Panel, drag and drop the new element where you wish to place it. For more information, expand Adding an Element above.

canvas9.jpg

 

Deleting an Element

How to Delete an Element

Note that this will only delete the element, but not its container row. To delete a row or column, see Deleting a Row.

1. Click on the element you wish to remove.

pd1_02.jpg

 

2. Click on the red x on the top right corner of the element.

pd6.jpg

 

 


 

About Rows

Expand an item to learn more:

Creating a Row

How to Create a Row

1. Click on the element and drag & drop it on the canvas, outside of a row, to create a new row. Note the green line marker, and make sure that it says Drop to create a new row before you drop it there.

sp5.jpg

 

Alternatively, if you're adding an asset, it will be enough to just drop it where you wish to place it. It is already a row so it will fall outside of the existing rows.

sp6.jpg

 

Renaming a Row

How to Rename a Row

You can rename a row from either the row settings or directly on the structure panel.

 

Rename from the Structure Panel

1. Double-click on the row's name and rename it directly on the structure panel.

sp7.jpg

 

 

Rename on the Row Settings

1. Open the row settings by clicking on the row in the structure panel.

sp8.jpg

2. Rename your row by editing the Row name field in the Row settings.

sp9.jpg

 

Dividing a Row into Columns

How to Divide a Row into Columns

 

1. On the Structure Panel, click on the row where you want to create an extra column.

sp10.jpg

 

2. On the canvas, locate the row that you selected. There you will see a plus sign. Click on the plus sign to add a column.

sp11.jpg

 

 

Saving a Row as an Asset

How to Save a Row as an Asset

This is only one of the actions you can perform in regards to assets. For more information about assets, head over here.

1. Start by going to the Email Editor in the Design step.

Get here either by creating an Email or by editing an existing Email.

sp3.jpg

 

 

2. Drag and drop elements from the Design Panel into a row.

Skip this step if you are creating an asset from an existing Email

sp5.jpg

 

 

3. Take a look at the Structure panel and click on the row you want to save as an asset. This will open the row settings

Remember that columns are always a part of a row.

sp14.jpg

 

4. You'll see the Row Settings on the Design Panel.

On the bottom of the settings, click Create as asset.

sp15.jpg

 

5. Enter a Name and a Description for your asset.

sp16.jpg

 

 

6. Done? Click Create.

sp17.jpg

 

Deleting a Row

How to Delete a Row

1. Click on the row you wish to delete in the structure panel, on the left.

sp14.jpg

 

 

2. On the row settings, which is on the right, click Delete.

sp19.jpg

 

 

3. Are you sure you want to delete this row? If yes, click Delete to confirm. If no, Cancel.

sp20.jpg

 

Row Settings

To open the Row Settings, click on a row in the Structure Panel. You may also do this by clicking on the area between the canvas and the Structure Panel, where a green sidebar shows if any element is selected.

sp21.jpg

 

Click on an item below to expand:

Row Name

How to Change the Name of a Row

Type it under row name in the row settings. Naming a row will allow you to keep track of it in the structure panel.

sp22.jpg

 

Row Background

How to Change the Row Background

Customise the background for the row by choosing a colour. 

sp24.jpg

 

To make it transparent, tick the Transparent box.

Otherwise, pick a colour from the colour picker.

editor25.jpg

 

If you already have a standard colour, enter the colour code in the Hex box.

sp51.jpg

 

Tip: A slightly less dark black is optimal for reading text in white backgrounds. Its colour code is #4a4a4a.

 

Go ahead and enter the colour in RGB format if you prefer that method editor27.jpg

 

The colour picker will save 16 of your recently used colours for each Email. Every new Email will have no recently used colours, but the colours will remain for each Email whenever you go back into editing.

editor28.jpg

Row Columns

How to Divide a Row into Columns

1. On the Structure Panel, click on the row where you want to create an extra column.

rowselect2.jpg

 

2. On the canvas, locate the row that you selected. There you will see a plus sign. Click on the plus sign to add a column.

sp38.jpg

 

Device Visibility

Mobile and Desktop Device Visibility

Would you like to make this row visible only in the mobile or the desktop version of your Email? Or would you like to make it visible in both?

Click on the icons under Show on to choose on which device(s) the row will be visible. You must choose at least one device, as it is impossible to deselect both.

The icon on the left represents desktop and the icon on the right represents mobile.

sp27.jpg

 

Row Segmentation

How to Segment a Row

If you're after a practical guide to working with segments, head over to Working with Segments.

We also have a lot of content about how to create a segment and the segment builder. Check it out if you haven't yet!

 

1. On the Row Settings, click Segments.

EmailSP72.jpg

 

2. The segmentation options will expand.

Under Including Segments, click Add included to include a segment.

EmailSP1.jpg

 

3. Click Select and choose a segment from the drop-down. You may repeat this step until you've included all the segments you wish to include.

EmailSP81.jpg

 

4. You may choose to include all or any profiles that match your segments, by clicking on the any/all drop-down menu.

EmailSP2.jpg

 

5. To exclude segments, scroll to Excluding Segments and click on Add Excluded.

EmailSP70.jpg

 

6. Follow the same steps as described above for Including Segments.

 

Segmented rows will be identified with an icon.

Hover over a row to see the segmentation settings.

Rowseg2_02.jpg

 

Deleting a Row

How to Delete a Row

Would you like to delete the row? On the settings, click Delete.

sp47.jpg

 

Are you sure you want to delete this row? If yes, click Delete to confirm. If no, Cancel.

sp48.jpg

 

 


 

 

Was this article helpful?