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!
This article starts with the general design options, found in all Design elements. And continues with specific features for each Element.
In this Article
About Elements
The content of the Email is built up by Elements. In the Design panel (right side of the canvas) there are nine Elements. 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.
Style, Alignments, Margins and Clone
Most Elements have following Design options that can be adjusted:
Margins (padding) - max 100 pixels
Alignment - left, center or right
Style - colour, border, radius, padding and width of the element.
Clone - to copy Element, select Element in the Canvas and click "Clone" in the bottom right corner.
Further design features for the each Element are found in the Element descriptions below!
💡 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 (Text, Button, List, Menu and Icon Elements), edit the text with the Inline Text Editor.
Mark the text in the Element to access the inline editor.
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.
Text element
Drag and drop a Text element into a Row or a Column in your Email.
Use the Inline editor to change the look of your text, to add links and data tags.
Manual Line-Height
Tick the checkbox to manually adjust the line-height (pixels). You may also hold on the line-height icon and drag to change spacing (left and right to reduce and increase).
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 increase 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
Drag and drop a Button element into your Email.
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.
Text
Type in a text (that encourages to click) and use the Inline editor to change the look.
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!
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