The Email Editor User Interface

This documentation shows the comprehensive functionality of the Editor, how to add content and the different ways in which you can modify it.

The email editor allows you easily create a campaign using a modular template, which uses specific email editor attributes. Within Adestra, these modules are termed regions.

On this page:

Interface


 Content Panel: Your template is populated here. Regions can be selected on the panel, to edit template layout and to curate content in the sidepanel (2).
Sidepanel: When a region is selected from the Content Panel (1), it will be displayed here—where content can be added/edited.
Editable Region: The selected region. Depending on the type of region this view will change. You can also choose to hide regions here.
Device View: Select the size of your screen, switching between Desktop (large) and Mobile (small).
Hidden Regions:Toggle between hidden regions being shown or not (default view is off).
Save Button: Save to automatically populate the campaign preview.

Adding and Editing Content

When you select a region it will be highlighted and its editable attribute will be visible in the side panel. This will then automatically update in the Content Panel.

The template can be edited too, by changing its layout on the preview itself. This can be done by changing the template's layout with drag ordering, adding more regions with repeats or changing the region type using alternates.

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

Drag Ordering

To change the order of regions in your campaign, select the desired region and click the drag icon (shown highlighted). The region's new position will be highlighted in yellow, drop the region in place when satisfied.

Note: Regions can be exchanged only with each other; i.e., you cannot move an attribute to a different section of your campaign. This prevents headers and footers being ordered incorrectly.

Select Parent Region

Some regions have multiple layers, these are called nested regions and allow granular content curation. To access a parent region use the arrow icon. Any editable items will be be visible in the sidepanel.

For example: if a link wraps an image in your template. When viewing the image you can click the parent region icon to view and edit that link.

Repeat

Some regions will have a 'plus' (and 'bin') icon above them (shown highlighted). This means the region can be duplicated (or deleted).

Note: This is only possible with repeatable attributes. To delete, you require more than one copy, as regions cannot be deleted altogether.

Alternates

If there is a separate bar above the region, with multiple names (or a drop down arrow) it is possible to change that region to a different preset layout. Just click on a region name to change it (content written on one layout will remain until overwritten, or if the editor is exited).

Email Tools

The different regions all have available Email Tools—just look for the crossed tools icon. What each region can use differs however. The below table defines the regions available options.

Tools
Regions Personalisation Function File Link Form Link Share Link Image Anchor
Textline Yes Yes Yes
Textbox Yes Yes Yes
Link URL Yes Yes Yes
Link Text Yes Yes
HTML Box Yes Yes Yes Yes Yes Yes1 Yes2
Source Box Yes Yes Yes Yes Yes Yes

1 If the HTMLbox does not have the image attribute applied, this will not be visible in the drop down (shown below).

2 The Anchor icon does not display as an Email Tool for HTMLboxes. It must be provided in the template for Anchors to be set. HTMLboxes can link to Anchors elsewhere in the campaign, however.

Using the Email Tools

Each tool requires different information to configure, this is done by selecting the desired tool and applying the required data in a pop-up.

Personalisation

This tool lets you personalise email templates.

Function

Select a function for the text/text region.

You can choose between Link functions (linking to another campaign view or to an unsubscribe) and Campaign functions (providing campaign information within the content).

Provide a file from the file manager you want to link to. This will then open in the appropriate platform when clicked by the recipient.

Link to an available form in your workspace. This is useful for pointing recipients to preference centres.

Provide a share link by choosing from the available social networks.

Image

Insert an image to HTMLbox or Sourcebox, using the file manager.

Note: The HTMLbox must have the image tool applied in the template for this option to be available.

Anchor

Provide an Anchor name to the region, this will populate the Link ID field. You can then link to that anchor using the link's URL field by prefixing the anchor end-point name with a #.

You can also use the link option in a HTMLbox and change the Link Type to "Link to anchor in the text". And any available anchors will then be provided in the drop downs.

Note: For HTMLboxes to be given Anchor names, they must have the tool applied in the template

Screen Select

You can switch between large and small screen views using the device toggle. This will help you see whether your campaign content is optimised for both desktop and mobile devices.

The functionality is the same, no matter which view you decide to edit on, so you can prioritise without compromising editing ability.

Hidden Regions

To help you optimise your content for mobile devices, you can also hide regions from certain devices. You can do this for all regions by using the screen select checkboxes. By unchecking a screen, the region will be hidden from it at launch.

To see what regions you have hidden you can use the hidden regions toggle. Turning this on will show the regions you have chosen to hide, these will be faded (as shown below).

Background Colour

If the paintbrush button is visible, then it is possible to apply/change the background colour of the selected region. The square behind the paintbrush will show the currently applied colour (shown below).

Depending on the template you will either be able to select a colour from a palette, or from a pre-determined set of colours.

Background Image

If the image button is visible, then it is possible to apply/change the background image of the region.

You can select an image as you would with an image region, through the file manager.

Image Cropping

Using the cropping interface, you can edit an image's size from within the editor. You can do this by clicking the 'Crop Image' button in the sidepanel or the crop icon from the content panel.

Once your image is cropped it will be displayed as such in the side panel.

Note: Images will not be processed if scaled up more than 10x the original size, regardless of crop size

Cropping Interface

After clicking either cropping button, you will then see the cropping UI appear.

Toolbar Actions

The possible functions of the toolbar are, from left to right:

  • File Manager: allows you to change image
  • Reset to Saved State: return to last saved crop (appears only after preview is saved and then re-opened)
  • Set image to actual size: will reset to size specified in the File Manager
  • Centre Image: centres the cropped image
  • Expand Crop to fit Image: expands the cropping nodes to the edge of the image
  • Fit Image to Crop: Ensure as much of the image is viewable in the current croppable area
  • Zoom In: will zoom in on image (increasing total image size)
  • Zoom Out: will zoom out of your image (decreasing total image size)
  • Cancel: exit cropping
  • Crop: executes your crop
  • Image Size: change the image's pixel width or height, maintaining aspect ratio
  • Crop Area: change the desired crop area manually, or choose from predefined ratios (click the lock to change whether ratio is kept or not)

Drag and Resize

There is also a drag icon for moving the whole image (visible in the top right of the image below), and a resize icon for quick size adjustments keeping aspect ratio (visible in the bottom right of the image below).

Conditional Content

By clicking the Conditional Content button, you will be able to add IF/ELSE conditionals, based on lists and/or fields. This allows you to serve different content depending on whether the conditions are met or not.

By clicking the blue text you can configure your condition. After clicking, you will be shown a pop-up to define your IF condition—whether 'In List' or 'Field'.

Depending on what the data source is, your condition options will change.

  • Duplicate Condition: Once a first condition is set, you can duplicate the condition to keep the same field path

  • Edit Condition: Edit the condition's data source and what it needs to check against

  • Delete Condition: Delete the single condition

  • Add Condition: Add a new condition

  • Remove All Conditions: Will prompt you to agree to deleting all conditions for that tag

In List

If you choose a list as your data source, all you need to do is select your desired list.

Field

If you choose a field as your data source. You need to select which field is being used, what condition is being checked against.

  • equals: exact match to characters given

  • contains: contains the given string of characters

  • is less than: number is less than the number here

  • is greater than: number is greater than the number here

  • begins with: text field is prefixed with the entered characters string

  • ends with: text field is suffixed with the entered characters string

  • is empty: field has nothing in it

  • is not empty: field has something in it

Toggling Conditions

After choosing your conditions you're ready to create different content. The green tick shows you which condition you're editing for that region. Conditions must be configured before its content can be edited.

Toggling between the conditions will show you the different content for that region.

You can delete conditions at any time by clicking the bin icon.

Applied Conditional Content

When conditional content is applied to a region, it will then be highlighted pink to raise awareness of it—contrasted against the standard blue.

Note: A notification will appear in the campaign overview once Conditional Content is applied, to make you aware that it is in the campaign message.

Switching Style Sheets

If, in the sidepanel, there is a Global Styles option (this title may differ depending on the template) then you can switch between different applied CSS. This will change the different styles and defaults of whatever the CSS has defined in your template.

Class Switching

Depending on the template, there may also be options to add more granular styling to content. When editing tags, if there is a 'Choose Styles' drop down, you will be able to change the styling for that specific tag. A default may be set by your template.

Note: The ability to preview styles is reliant upon your template.

HTML Box Pasting Error

Due to increased browser security settings it’s not possible for us to include clipboard functions in the context menu. Please use keyboard shortcuts instead (i.e. CTRL+X, CTRL+C, CTRL+V for cut, copy and paste respectively for Windows or CMD+X, CMD+C, CMD+V for Mac).

When you right click you will see a prompt to paste, and upon clicking this prompt you will be shown a 'browser error'.

Note: This does not affect other regions such as textboxes and link URLs

FAQ

Why do I get a notification when I try to add more repeats?

This will be due to a maximum number of repeats being set for the template. If you think you require more, please talk to the designer of your template to discuss this.

Why can't my template use the Email Editor?

Email editor templates must be designated as such by the designer. This is due to the specific amf attributes they use. If you don't have any templates available and you would like some, speak to your AM about a bespoke solution.

Why can't I edit some regions?

You may well come across parts of your campaign that you cannot edit, this will be because they don't use an amf: attribute. This will be a choice made when creating the template. Should you wish to have control over that part you will need to contact the designer of the template in use.

Can I save my Email Editor campaign HTML to a file?

Yes, all you need to do is press the 'Download' button, available to you after selecting 'Manage HTML'. This will save your campaign as a HTML file.

This is not standard functionality. To enable it, contact your account manager.

Why is the template not rendering as expected after pasting HTML into HTMLbox?

It could be that the HTML you're pasting includes tags that are not accepted by the Editor.

These unaccepted tags are: html head body style script