Design Elements
The Design elements in the Email editor and Form editor provide you a wide range of design possibilities. Go ahead and have fun shaping your content!
In this Article
About Elements
The content of the Email is built up by Elements, from the Design panel, on the right side of the canvas. Drag and drop Elements into a Row or a Column in to the canvas.
Each Element has a set of design options, appearing on the right side when the Element is selected in the Canvas.
Duplicate - to copy Element, select Element in the Canvas and click Duplicate in the bottom right corner.
💡 Tip! When adjusting the style options, hold the style icons and drag them left and right - the Element in the Canvas will adjust in size and shape accordingly!
Inline Text Editor
When using Elements containing text, mark the text and edit content with the Inline Text Editor.
Styles - Here you can access all headings.
Data tags
With Data tags, you can personalise the Email with dynamic data (fetching Profile data into the text). Pick Data tag in the Data tag drop-down.
For example, "Good morning ##FirstName##!", would appear in the inbox as "Good morning Anna!", if the Profile's "FirstName" Attribute has the value "Anna".
Read more about how you can Personalise your sendings by using Data tags here.
Heading element
The Heading and Paragraphs elements is used for distinguishing headlines from body of copy.
For headlines it is important to use the Heading element to optimise accessibility (screen reader tools can read that it is a headline).
The Headings can be predefined under "Styles" in the right column.
Heading Levels
To use different levels of headings:
Define font and size under the Styles tab to the right.
Place a Heading element into the canvas.
Select the preferred heading in the in-line editor Style drop-down.
Heading Options
Add a heading name to keep better track of the email structure. This will be reflected in the structure panel to the left of the canvas.
Tick the checkbox to manually adjust the line-height (pixels).
Paragraph element
The Paragraph element is used for body of copy.
Paragraph Options
Add a paragraph name to keep better track of the email structure. This will be reflected in the structure panel to the left of the canvas.
Tick the checkbox to manually adjust the line-height (pixels).
Text element
The text element is an earlier version of the Paragraph element, and it works similarly. We recommend to use the Paragraph element.
Use the Inline editor to change the look of your text, to add links and data tags.
Text Options
Add a Text name to keep better track of the email structure. This will be reflected in the structure panel to the left of the canvas.
Tick the checkbox to manually adjust the line-height (pixels).
Image element
Place the Image element in the Canvas. Click the Browse button in the element to see Image options. Go to the Upload tab.
Upload image - three options
Upload image from your device.
Use an image uploaded to the account Image gallery.
Image URL
Tick the Add to the gallery checkbox in order to save image in the gallery for future occasions.
We recommend you to use image files hosted in your own domain, (to ensure the image files are available to the Email).
Note: File types supported: PNG, JPG, JPEG and GIF
File size: support up to 10 MB, but we recommend 1 MB or less for best resolution.
Gallery tab
The images saved in the Gallery can be reached from any tool in the account. This means you can use and store images for not only for emails, but also for Event tool sending, Forms and Pages.
Deleted images will disappear from the gallery, but still be presented in your content.
Size and Width
Under Style, in the Design panel, set image width for desktop and mobile.
Desktop:
Full width - image covers 100 % of the column
True size - image keep the same size as you uploaded
Custom width - set width (px). Maximum width of image is the width of the column.
If the Column is 300px, the image will be maximum 300px, even if Custom size is set to 500px.
If no adjustments are done, the settings will remain true size, witch is the size of the uploaded image.
Mobile:
Under the Mobile tab, select whether the image size should follow desktop settings, be full width or keep true size (same size as uploaded).
Add Link and Text to all Images
When you have selected an image, expand Link settings.
Add an image text / alt text to enhance accessibility.
Choose link type and add the URL to connect the element.
By adding text and link to the images, the Email gets more accessible, clickable and generate higher Profile engagement!
Button Element
Place a Button element into your Email.
Button Text and Link
Remember to add a link to the button to connect it to a landing page!
Mark the text and use the link symbol in the Inline editor to add a URL.
Type in a button text (that encourages to click) and use the Inline editor to change the look.
Screen reader label
Add a description for screen reader tools, a text communicating know what happens when clicking the button.
Design Style
Design the look of the button with the Style design options on the right.
Border thickness and radius (rounded corners).
Width: in number of pixels (Fit) or set full width covering the entire row (Full).
Padding - space around the text in the button
Colour for border and button
Line element
The Line element is handy when you want to create dividers between content.
It can be directed either vertically (between Rows) or horisontally (between Columns).
Thickness and length can be adjusted by dragging the Style icons left and right.
Spacer element
With the Spacer, you create space between Elements.
Adjust the Spacer size by pulling the handle on the element up and down. Or use the icon in the design options; drag left and right to change size.
List element
Create a list to organise the content. When creating a list, you start by adding list items in the Design options on the right.
Create a List
Place a List element into the Canvas.
In Design options (on the right):
- expand List Items, click +Add item
- continue clicking +Add item to reach the number of list items you want. Remove with the cross on the right.In the Canvas:
- type in the text for each list item- edit text in the Inline editor
Style settings:
- set space between list items
- choose bullets, letters, numbers or custom the items
💡 Tip! Make the items in the list clickable to increase engagement!
Menu element
The Menu element is great for guiding your readers quickly to different parts of your website. It is fully customisable, so design it to fit the rest of your Email.
Create a Menu:
Place a Menu element into the Canvas
In Design options (on the right):
- expand Menu Items, click +Add item
- continue clicking +Add item to reach the number of menu items you want
Remove with the cross on the right.
In the Canvas:
- type in text for the menu items- edit text with the Inline editor
Style settings:
Customise Separator between menu items if you prefer
Icon Menu element
Use an Icon Menu Element to create good looking paths to all of your social media channels and contact information in one Email.
Create a Icon Menu:
Place a Icon menu element into the Canvas.
In Design options (on the right):
Expand "Content", click +Add item
Select Service in the dropdown menu (for example Facebook)
Add URL
Track link, Encode data tags and Advanced link settings - Read more here!
Alt text - Add an alt text, describing the icon, to enhance accessibility.
Choose from Icon Style versions (colour and shape)
Expand Style:
Layout for different devices (vertically or horisontally)
Display icon and text / only icon
Set Alignment and Margins to complete the look.
HTML element
The HTML element allows you to use HTML code in your Email. This is especially useful for when you would like to have custom tables or price tables.
This is an advanced feature that requires advanced coding skills for emails. Get in touch with your development or design team to make sure that your HTML code works as intended. Need an expert hand? Get in touch with your Account Manager at Efficy!
Populate an HTML Element
1. Click on the HTML element you've added into the Canvas.
2. Enter the HTML code you wish to add. (Links in the HTML code cannot be tracked)
3. To preview, click away from the HTML element.
Read about HTML code for Emails here.
Next Step