Building and editing an email template

The following guide is only recommended for editing email templates using Pendula's pre-existing layouts.

For a more comprehensive guide on the email template builder, see Styles panel (advanced) for more information.

Editing an imported HTML template may cause unexpected results. We recommend finalising your template design prior to importing the HTML into Pendula.

Quick links

Adding or changing an image

Adding or editing links

Adding, editing or duplicating copy

Using classes

Adding or changing an image

If your recipients use Microsoft Outlook as an email client, we recommend placing images in a <table> instead. Microsoft Outlook does not support styling with <div> containers or CSS background images. Learn more about known email client rendering bugs.

Adding an image

1. Under Add Blocks panel, drag the Image element into a table cell.
   
2. Double click on the image placeholder to open up the image modal. Paste the image address into URL field. Click on Add image.

   To ensure visibility, the image link must be a publicly hosted link. Read more in Email Best Practices.

   
3. Double click on the image preview below the URL field to then apply to the template.
4. The image will be applied to the template with its original size. Under the Styles panel, navigate to Layout > Width. Adjust accordingly using percentage (%) as a unit.

Changing an image

1. Double click on the image you would like to replace.
2. Paste the image address of the replacement image into the URL field. Click on Add image.
   
3. Double click on the image preview below the URL field to then apply this to the template.
4. The image will be applied to the template with its original size. Under the Styles panel, navigate to Layout > Width. Adjust accordingly using percentage (%) as a unit.
   For example, to have the image reach the maximum width of its container, enter 100% in 'Width'.

Adding or editing links

Adding a link

1. Under Add Blocks panel, drag Link tile onto desired position in email canvas builder.
   
2. Click on the link to open up the Styles panel. Adjust the link styling. Remember that all style settings adjusted under a name will cascade throughout the email. If there is a pre-existing link styling, you can add the class name to the Classes textfield under the Styles panel. Read more about stylising classes.

   Ensure that the added URL contains http:// or https:// to ensure optimal rendering in Microsoft Outlook. Read more in Email Best Practices.

   

Editing a link

1. Hover and select link that requires editing.
2. Under the Styles tab, navigate to URL. Add link.

   Adding common hyperlink types in URL textfield
   

   Hyperlink type	Attribute	Example
   Weblink	N/A	https://www.pendula.com/
   Phone number	tel:	tel:12345678
   Email	mailto:	mailto:hello@example.com

Adding, editing or duplicating copy

Always type directly into the text box or paste from a plain text editor. This will prevent formatting issues experienced with stylised text (e.g. from Microsoft Word or Google Docs).

Add copy using a text element

1. Under Add Blocks panel, drag Text or Paragraph tile onto the desired position in the email canvas builder.
   

   The text element is a single text block with paragraph class.
   
   The paragraph element is preconfigured with two text blocks, one with heading 2 class, and the other with paragraph class.

   
2. Edit text. To stylise text, go the Styles panel. The typography and styling settings can be adjusted here. Email clients render styles differently. Read Exceptions to learn more.

Editing a text block

1. Double click on text block you wish to edit and change text as required.
2. To stylise text, go the Styles panel. The typography and styling settings can be adjusted here.
   
   Remember that any styles modified here under a class name will cascade throughout the email with any other elements which share the same style! Additionally, some email clients will render styles differently.

If your HTML is imported, ensure your text is correctly formatted to be within the <p>

tag to enable text editing on the email builder.

Duplicating a text block

1. Select the layer you wish to duplicate.
2. Select the duplicate icon (two overlapping squares icon)
   

Note that selecting different layers that contain the text will lead to different outcomes.

Duplicating 'Text' layer

Duplicating 'Box' layer

Duplicating 'table cell' layer

Duplicating 'table row' layer

Duplicating 'table' layer

Using classes

A class is a generic way to name and stylise a HTML element.

Any styles (such as font, colour, size, margins, padding, etc) specified to a class name will automatically be applied to all elements with the same class name.

This enables you to efficiently add specific styling on elements that appear multiple times within a template.

For example, a padding-16px class created can be applied to a paragraph block, image block and/or a container.

How to create a class

1. Select an existing element within your template, or drag a new block you wish to stylise from the Add blocks panel

2. Select Edit, and under the Styles panel, delete all existing classes.

3. Add and name a new class by selecting the + icon

4. Customise the new class using any of the sections within the Styles panel

   

   In this example, heading-2class is stylised to be: Helvetica Light, 22px, red. All elements with the same class name will now inherit the same attributes.

5. Click Save

How to edit a class

1. Select the existing element with the desired class

2. Select Edit, and under the Styles panel, edit styling as necessary

3. Click Save

Any changes made to a class will automatically be implemented across all elements which share the same class name.