HTML Editor

The HTML Editor enables users to create and edit campaigns from HTML templates. It provides granular control over content and some styling autonomy too, alongside the ability to personalise with conditional content—no matter whether it's simple or complex.

On this page:

Accessing the HTML Editor

You can access the Editor when working with a campaign's HTML content. Whether a campaign has an empty message or already contains some HTML content, you can select the 'HTML' tab in the page tab bar, or the 'Manage HTML' button in the campaign overview.

This will direct you to the Edit HTML Content page, from which you can select the 'HTML Editor' from the drop-down menu.

The contents of the drop-down menu will depend on what features are enabled in your account.

For help with adding content to your campaign, see the Campaign Overview topic.

The Editor will open in a new window, with the function and formatting buttons displayed at the top of the screen.

The contents can be edited freely by clicking and typing directly in the template.

Note: When making changes to your campaign message, ensure there have been no updates to the original template; otherwise, your changes will be lost.

Send Test

The 'Send Test' button will immediately send a test email to the address of the current user, and a notification will appear at the top of the overview screen.

When working with the HTML content, if your campaign also contains a text part, the test email will contain both the HTML and text messages. When working with text content, the test email will only contain the text message.

Save Changes

Adestra will not automatically save any changes you make within the HTML Editor, however if you make changes and close the editor without saving you will prompted to confirm that you want to leave the page.

You can use the 'Save' button in the top left hand corner to save any changes, and these will be reflected in the campaign overview.

Text Formatting

There are a number of different text editing options, most requiring you to highlight the text you wish to format before clicking the relevant formatting tool. Some have drop-down boxes allowing you to choose from a number of options.

Editing the text format works on the block of text the cursor is currently placed in. You can select a preset style to apply to the text from the 'Format' drop-down menu.

Text Font

To edit the text font, highlight the relevant text and select a font from the 'Font Family' drop-down menu. The available fonts are common web fonts which should display similarly in most email clients.

Text Size

To edit the text size, highlight the relevant text and select a size from the 'Font Size' drop-down menu. The sizes available are limited to sizes that are supported by the majority of email clients.

Formatting

To add bold, italic, underline or

strike through formatting to text, highlight the section of text before selecting the button required. Clicking the button a second time will remove the formatting.

Text Alignment

Text can be aligned by placing the cursor in the relevant block of text and clicking the alignment button. Text can be aligned left, right, centre or be fully justified.

Text Colour

You can edit the colour and background colour by selecting the text and clicking the relevant button.

These will open the colour selector, which provides a number of means to select a colour. By default, it will open with the colour of the currently selected text.

  • You can choose a colour by clicking and dragging the cursor over the colour display.
  • At the bottom of the colour display you have the option to enter and edit HSL or RGB values.
  • In the top right corner, you also have the option to enter a colour hex code, for example your brand colours.
  • It is possible to preference colours to be displayed by default, for example you can have your brand colours quickly to hand.

Persistent Colours

You can store selected colours by clicking the + button and it will appear in the panel below. To remove a colour, click on the relevant colour, and then click the - button. When you save changes, the stored colours will be saved for that template.

Bullets and Numbering

Text can be organised into bulleted or numbered lists by placing the cursor in the relevant block of text and selecting either 'Bulleted List' or 'Numbered List', which will create a list. Clicking the button a second time will remove the formatting from the text.

Text Indents

You can edit the indent of a list using the 'Increase Indent' and 'Decrease Indent' buttons.

For example, to indent a bulleted list, place the cursor in the relevant bullet point.

Click 'Increase Indent' to indent the bullet point. Clicking the buttons multiple times will continue to increase or decrease the indent.

Subscript/Superscript

To format text as subscript or superscript, place the cursor in an individual word or highlight the relevant text and click the 'Subscript' and 'Superscript' buttons.

Special Characters

To add a special character to the text, place the cursor where you want it to appear and click the 'Special Character' button.

This will open the character selector, where you can choose the character you wish to insert. Hovering your cursor over a character will allow you to view a larger image in the top right corner.

Horizontal Lines

You can insert a horizontal line to separate sections of the template by placing the cursor where you want it to appear and clicking the 'Insert Horizontal Line' button.

Remove Formatting

The 'Remove Formatting' button will remove all formatting from the block of text the cursor is currently placed in, to return it to its default state. Alternatively you can highlight text and click 'Remove Formatting' to only change a specific section.

Spacing

Pressing the 'Enter' key will insert a new paragraph by default (<p> tags).

Whereas pressing Shift+Enter will insert a single line break (BR tags), for example:

Guidelines

By default, the HTML Editor will display any template guidelines and any invisible elements. For example:

You can turn this option on or off using the 'Show/Hide Guidelines/Invisible Elements' button. This can be useful when working with HTML containing lots of layout tables, as the guidelines can affect the layout.

CSS Style

The 'Edit CSS Style' button allows for advanced styling on blocks of text.

Note: Some CSS styles may not display in all browsers.

Cut and Paste

The cut and paste options include 'Cut', 'Copy', 'Paste', 'Paste as Plain Text' and 'Paste from Word'.

Note: Some browsers will require you to first confirm the program is allowed access to your clipboard in order to use the cut and paste buttons. Alternatively, keyboard shortcuts will work instead; for PC users, to cut use Ctrl+X, to copy use Ctrl+C, and to paste Ctrl+V. For Mac users, to cut use cmd+X, to copy use cmd+C, and to paste use cmd+P.

Paste as Plain Text

If you are copying text from another application for example from a web browser, you can remove all formatting by pasting it as plain text. To do this you will need to turn on the 'Paste as Plain Text' button by clicking it so it is toggled in the tool bar.

Copy the text you wish to insert, then everything you paste whilst the 'Paste as Plain Text' button is turned on will be plain text. To turn it off you simply need to click the button again.

Paste from Word

Text from a Word document may contain formatting that could potentially cause problems in your email. The 'Paste from Word' button can remove any problematic formatting for you, but please be aware this function will also remove fonts, colours and images.

Some formatting will remain including basic formatting (bold, underline, italic, etc.), tables, lists (bulleted/numbered lists) and hyperlinks.

This will open a window for you to paste into, then click the 'Insert' button to paste the text into your template.

Undo and Redo

The 'Undo' and 'Redo' buttons allows you to step through the history of any changes you've made in the current session.

It is possible to link text or images to a website or email address, and to add anchors to link different parts of your email template.

To create a link, highlight the relevant text or image before clicking the 'Insert/Edit Link' button, which will open a window for you to enter the link information.

  • Link URL: will require you to enter the URL you want to link to, for example http://www.adestra.com. To link to an email address, enter the prefix mailto: and then the email address.
  • Target: decides how the link opens when a recipient clicks on the link.
  • Title: will be displayed when a recipient hovers their cursor over the link.
  • Class: allows you to select any CSS classes defined in your stylesheet.
  • Label: used to identify the link in reporting.

You can remove the link underline by right-clicking on the link and selecting the 'Remove Link Underline' option from the menu.

To edit a link, including the link title and label, you can place you cursor in the link and click on the 'Insert/Edit Link' button again, or you can right-click on the link and choose this option from the menu.

To remove a link, select the relevant image or highlight the text and click the 'Unlink' button.

Anchor links allow you to create links within an email, for example you could add a 'Back to top' link to return a recipient to an anchor at top of your email.

To add and anchor, place the cursor where you want the anchor to be inserted and click the 'Insert/Edit Anchor' button.

Note: The anchor will not be visible to the recipient.

Enter an anchor name and click 'Insert'. If the 'Show/Hide? Guidelines/Invisible Elements' button is switched on, the anchor symbol will be displayed in the template.

Next, highlight the text you wish to link the anchor to and click the 'Link' button. In the 'Link URL' field, enter a hash followed by the anchor name, for example if the anchor name was top, you would enter #top. Click 'Insert' and the anchor and text will be linked.

To edit an anchor name, click on the anchor and then the 'Insert/Edit Anchor' button. Please note: if you make changes to an anchor name you will need to make corresponding changes to any links that refer to it.

Tables

The HTML Editor has a number of functions for working with tables.

To create a table, place your cursor at which point will be the top left corner of the table and click the 'Insert/Edit Table' button.

This window allows you to define the properties of the table including the number of columns and rows, the 'Cell Padding' (the distance from the border to the content within), the 'Cell Spacing' (the distance between the table cells), and the width and height of the table. Further options are available in the 'Advanced' tab.

Once the table has been created, text, images, links etc. can be added to the table cells. You can format table rows by clicking the 'Table Row Properties' button, or individual cells using the 'Table Cell Properties' button.

Insert Rows

Depending where the cursor is placed, you can insert a row before and after by clicking the 'Insert Row before' and 'Insert Row After' buttons. You can also delete the row that the cursor is in by clicking the 'Delete Row' button.

Insert Columns

Similarly you can insert a column before and after the column that the cursor is currently placed in by clicking the 'Insert Column before' and 'Insert Column After' buttons. You can also delete the column the cursor is in by clicking the 'Delete Column' button.

Merge Cells

To merge table cells, you can either highlight the relevant cells, or place you cursor in the top left-hand cell of the ones you want to merge and click the 'Merge Table Cells' button which will allow you to specify the number of columns and rows to merge.

Please note: if the top left-hand cell to be merged has any formatting, this will take precedent over other cells' formatting.

You can split any cells that have been merged by clicking the 'Split Merged Table Cells' button.

Delete Tables

To delete a table, right-click on the table and select 'Delete Table'.

Personalisation

The HTML Editor enables you to include personalisation in your emails, using information from contact records. For example you may wish to have the recipient's first name in the opening salutation. To add personalisation to your template, place your cursor where you want it to appear and click the 'Personalisation' button.

This will open the field selector, where you can select a field from the core table that the list currently attached to the campaign is associated with. If no list is currently attached to the campaign, you will be able to select a core table. Please note: if a list from a different core table is later selected, some of the fields may not match. You can also select from data table fields using the 'Data table fields' tab.

You can also choose to have the personalisation displayed in uppercase or lowercase, or with the first letter capitalised, by selecting the relevant tick box.

The option to trim white space will automatically remove any excess white space contained within the field.

'HTML escape' is selected by default and it is recommended that it is left on, as it will prevent HTML control characters from affecting your layout.

There is the option to add a 'Default value' which will be used with the field is empty. This can be useful if information is missing from the contact record. For example, for first name personalisation, if you entered Customer into the 'Default value' box, and a contact's first name was empty, the salutation would read 'Dear Customer' instead.

If your template requires more than one field, for example first name and last name, you will need to separate the personalisation with a space.

Files can be uploaded into Adestra and linked to within your campaigns, for example you might want to link to a PDF brochure. You can select the text or image that the file will link to, or simply place your cursor when you wish the URL to appear, and click the 'File Link' button.

The file selector lets you select files that are available for the project, workspace, or just for your user, using the drop-down box. For help managing the available files, refer to the File Manager topic.

Once you have selected the relevant file, click 'Okay' to insert the link. Please note: not all file types will be available to link to.

To remove a link, highlight the text or image, right-click and select 'Unlink' from the menu.

Images

Images can be uploaded to Adestra and inserted into your template. To add an image to your template, place the cursor where you wish the image to appear and click the 'Image' button.

This will open the file selector, from which you can select images available for the project, workspace, or just your user, using the drop-down box. Please note: you will only be able to select image files when using this function.

Due to automatic image blocking by most email clients, when constructing your email it would be wise not to rely on images as the only source of important information that is not repeated elsewhere in the email content. Also consider the size and quantity of images, as a high image to text ratio may be flagged by spam filters, potentially causing deliverability problems.

Once inserted, you can right-click on images and select 'Insert/Edit Image' for more options, including sizing and alignment.

The 'Image Description' field allows you to add alternative text ("alt text") that is displayed in place of the image if images are disabled by the recipients' email client.

Adding retina images

When adding retina images, we recommend uploading images at twice the size and then re-sizing them back down within the HTML Editor. This will ensure images have sufficient data to display clearly on high resolution screens, such as on mobiles or tablets.

Often our production team will add placeholder images to your templates, which include the instructions for this process. Initially you will need to delete these placeholder images from the template and replace them by uploading your own larger image. This image will be too big when inserted, so you will need to edit this by right-clicking and selecting Insert/Edit image. Set the dimension width to half the size, leaving the height blank, and click save.

Inserting share links into your campaigns gives recipients the option to share a link or a copy of your campaign using various social networks, for example Twitter and Facebook etc.

For help setting up share links, refer to the Social Media topic.

You can insert a link to a form into your campaigns using the 'Form Link' button.

The form selector will display the forms available to the current workspace.

Select the relevant form and click 'Okay', and the form link will be inserted into your template. For example: 

Click here to update your details: [*form.link(2)*]

Functions

The HTML Editor allows certain function links to be added into your template, as well as other information relevant to the campaign, using the 'Function' button.

The function selector allows you to choose from a number of link functions or different campaign information to insert into your template.

Link Functions

Each of the link functions allow you the option to add link text which will be displayed in the email instead of the link itself.

  • Link to web version: a web version is a copy of your campaign that recipients can open in their browser. This can be useful for recipients who have trouble viewing your email campaign in their inbox. The web version will be identical to your original campaign, with the same content, including all of the images, links and personalisation.
  • Link to simple version: a simple version will display the text version of your email which can be useful for mobile devices, such as BlackBerrys, which cannot display images.
  • Link to safe sender instructions: recipients will be able to find out how to add the from address to their list of senders that are considered safe to receive emails from, for various different email clients.
  • Unsubscribe Link: an unsubscribe link enables recipients to opt-out of receiving future emails. You can insert a link to a default unsubscribe page generated by Adestra. Alternatively, you can direct recipients to your own branded unsubscribe confirmation page by including the URL in the Campaign Options setup.

Campaign Information

The campaign information you can include in your template include the name and ID of the workspace, project and campaign.

The last four options are primarily used when integrating with external services, such as advertising networks.

  • Timestamp: represents the current time in YYYYMMDDHHMMSS, for example 20120309115538.
  • Random string: generates a 16 character random string containing letters from A-Z in both upper and lower case, and numbers 0-9, for example ZrhI5v2f6RxGCtRm.
  • Random number: generates a random number between 0-2,147,483,647 for example 314800015.
  • Random number for ad trackers: generates a random number that will always be an integer, and will always be the same for a given contact and campaign, for example 1555490088. This can be a requirement of some advertising networks.