Email: Design Elements

Design options, Text, Image, Button, Spacer, Line, Icon Menu, List, HTML, Margins, Line-height, Clone, Copy, Inline editor

Räftegård, Elin avatar
Written by Räftegård, Elin
Updated over a week ago

Email: Design Elements

The Design elements in the Email editor provide you a wide range of design possibilities. Go ahead and have fun shaping your Email!

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 Email canvas) there are nine Elements. Drag and drop Elements into a Row or a Column in your Email.

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 with options to add text you'll need to use the Inline Text Editor. (Text, Button, List, Menu and Icon Elements).

To edit, mark the text in the Element and use the inline editor, appearing above.

Design your text with font, size, colours and more in the inline editor.

Data tags

With Data tags, you can personalise the Email with dynamic data (fetching Profile data into the text). For example, "Good morning ##FirstName##!", would appear in the inbox as "Good morning Anna!", if the Profile's "FirstName" Attribute has the value "Anna". Pick Data tag in the Data tag drop-down.

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, 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

  1. Upload image from your device.

  2. Use an image uploaded to the account Image gallery.

  3. 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.

  1. Add an image text (Alt text to increase accessibility).

  2. 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

  1. Place a List element into the Canvas.

  2. 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.

  3. In the Canvas:
    - type in the text for each list item

    - edit text in the Inline editor

  4. 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:

  1. Place a Menu element into the Canvas

  2. 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.

  3. In the Canvas:
    - type in text for the menu items

    - edit text with the Inline editor

  4. 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):

  1. Expand "Content", click +Add item

  2. Select Service in the dropdown menu (for example Facebook)

  3. Add URL

  4. Track link, Encode data tags and Advanced link settings - Read more here!

  5. Choose from Icon Style versions (colour and shape)

  6. Expand Style:
    Layout for different devices (vertically or horisontally)
    Display icon and text / only icon

  7. 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.

htmlElement2.jpg

Next Step

Did this answer your question?