Design Panel

About the Design Panel

The Design Panel is in the area on the right in the Email editor that contains your elements and assets. It will allow you to build your Email without hassle--drag and drop elements or assets into the canvas and be ready in no time!

To alternate between the Elements view and the Assets view, click on Assets or Elements in the  Design Panel.

In this article you'll find all sorts of information about the Design Panel, from the most basic to the most specific, so head over to the left navigation to jump to a specific topic.

design1.jpg

 


 

Elements & Assets Basics

What's an Element?   What's an Asset?

An Element is a content container that can be added into an Email. There are 7 types of elements: Text, Image, Button, Line, Spacer, List and Menu.

Click an element to read more.

 

An Asset is a row that contains one or more columns and elements, which has been saved for future use. If you have a part of an Email that you will be using regularly, it's best to save it as an asset.

Jump to Assets.

Here's how to use the elements and assets to create your Email

Click on an item below to expand:

Adding Elements

How to Add Elements into the Canvas

You get to choose the exact placement of the element before adding it into the canvas. Here's a quick guide for how they behave depending on where you drop them in the canvas.

Only elements can be placed inside an existing row, since an asset is already a row.

 

1. Choose your element.

canvas7.jpg

 

2. Click on it, and drag it towards the canvas. Don't drop it yet.

canvas9.jpg

 

3. The line indicator will point to the place where the element will be placed. Take a look at the images below to see how it should look when you add elements into the canvas.

canvas10_02.jpg

 

Click on an item below to expand:

Into a new row

This is how the canvas will signal that you are dropping the element into a new row.

canvas2.jpg

Into a new column

This is how the canvas will signal that you are dropping the element into a new column.

canvas11.jpg

Into an existing empty row

This is how the canvas will signal that you are dropping the element into an existing row with no other elements in it.

canvas3.jpg

Into an existing empty column

This is how the canvas will signal that you are dropping the element into an existing column with no other elements in it.

canvas4.jpg

Into an already populated row

This is how the canvas will signal that you are dropping the element into an existing row that has one or more elements in it.

canvas5.jpg

Into an already populated column

This is how the canvas will signal that you are dropping the element into an existing column that has one or more elements in it.

canvas6.jpg

Cloning Elements

How to Clone an Element

1. Click on the element you would like to clone.

canvas16.jpg

 

2. On the right, the Element Options will open in the Design Panel.

image8.jpg

 

3. Scroll to the bottom of the Element Options, and click Clone.

clone.jpg

 

4. That's it! Your element will be cloned directly under the original, in the same row.

clone2.jpg

 

Adding Assets

How to Add Assets into the Canvas

1. On the Design Panel, click on the Assets tab.

assets1.jpg

 

2. Locate the asset you wish to add to your Email and drag it onto the canvas.

assets2.jpg

 

3. Drop it into the canvas like you would with any other element. There it is!assets3.jpg

 

Assets are rows, and not elements, and therefore they can only be added as a new row.

Moving an Element or Asset

How to Move an Element or Asset

The elements you place in the canvas are not static. Here's how to move them around the canvas after they've been placed.

Assets cannot be moved, since they are already rows. Rows, for now, cannot be moved either. We will notify you once this feature becomes available. Nevertheless, it is possible to move a specific element from inside an asset into a new or existing row.

To move an element, first click and hold it. Then scroll around and drop it wherever you wish to place it.

canvas15.jpg

 

Deleting an Element

How to Delete an Element

1. Click on the element you wish to remove.

canvas16.jpg

 

2. Click on the red x on the top right corner of the element.

canvas17.jpg

 

Removing an Asset

How to Remove an Asset

You can remove an asset by deleting all the elements within the row, one by one, but the row will remain. To do that, simply follow the steps above on deleting an element. Here are the instructions on how to remove an asset and its container row.

 

1. Locate the asset you wish to remove.

canvas17.jpg

 

2. Look over to the left, on the Structure panel, and click on the row where the asset is.

canvas19.jpg

 

3. Head over to the Design Panel, where Row Settings is now shown, and click Delete.

canvas20_01.jpg

 

4. Are you sure? Click Delete if yes, otherwise cancel.

canvas21_02.jpg

 

Deleting an Asset

How to Delete an Asset

Here's how to delete an asset from the Design Panel. You may also do this from the Assets tab.

1. Click the Assets tab in the Design Panel.

assets1.jpg

 

2. Locate the asset you wish to delete, and click on the red X.

asset4.jpg

 

3. Are you sure you want to delete this asset? If yes, click Delete. Otherwise, click Cancel.

assets5.jpg

 

 


 

About Assets

What is an Asset?

An Asset is a type of user-made Email content. Essentially, it's a row in an Email saved for future campaigns. A big benefit of saving rows as assets is to save time in the Email editor by not having to create the same row repeatedly: like your standard Email footer.

Working with assets also makes it easy to maintain design and branding consistency within all your email campaigns.

Creating an asset with the Email design tool is simple. While creating or editing an Email, save a row that you feel you will use in the future.

Here's some useful information to get you started with assets.

Click on an item below to expand:

Creating an Asset

How to Create an Asset

1. Start by going to the Email Design page.

Get here either by creating an Email or by editing an existing Email.

design1.jpg

 

2. Drag and drop your desired elements from the Design Panel into a row.

Skip this step if you are creating an asset from an existing Email.

design4.jpg

 

3. Take a look at the Structure panel and click on the row you want to save as an asset. This will open the Row Settings.

Remember that columns are always a part of a row, they only form when placing elements inside of a row and are never in the canvas independently. If you save a row as an asset, it will save the columns inside the row as well.

design11.jpg

 

4. You'll see the Row Settings on the Design Panel.

On the bottom of the settings, click Create as asset.

design12.jpg

  

5. Enter a Name and a Description for your asset.

design13.jpg

  

6. Done? Click Create.

design14.jpg

 

Editing an Asset

How to Edit an Existing Asset

Currently, it's not possible to edit an existing asset; you can add an asset into the canvas, modify it and save it as a new asset. Here's the instructions for that process.

We will update you as soon as it's possible to edit assets.

1. Locate or add your asset into the canvas.

design15.jpg

 

2. Make the changes you want to make within the row.

design16.jpg

 

3. On the structure panel, click on the row that you want to save as an asset. This will open the Row Settings.

design15.jpg

  

4. You'll see the Row Settings on the Design Panel.

On the bottom of the settings, click Create as asset.

design12.jpg

 

5. Enter a Name and a Description for your new asset.

Since we are currently unable to provide you with a preview of your assets in the Design Panel, we strongly recommend you give your assets unique names and descriptions to be able to tell them apart. You can, however, rename and delete assets from the Assets tab in the Activity Page.

design13.jpg

  

6. Done? Click Create.

design14.jpg

 

Searching for an Asset

How to Search for and Locate an Asset

A quick way to locate an asset with the intention of deleting or renaming it is to go directly to the Assets tab in the activity page. Continue reading this section for instructions on how to locate an asset in the Email Editor. Read more about the assets tab...

 

1. On the Assets tab of the Design Panel, write the name or part of the name of the asset you're looking for under Search for my asset. There it is!

design17.jpg

 

Placing an Asset on the Canvas

How to Place an Asset on the Canvas

1. On the Design Panel, click on the Assets tab.

assets1.jpg

 

2. Locate the asset you wish to add to your Email, and drag in onto the canvas.

assets2.jpg

  

3. Drop it into the canvas like you would with any other element. Confused? Read this article.

assets3.jpg

 

Removing an Asset

How to Remove an Asset from the Canvas

You can remove an asset by deleting all the elements within the row, one by one, but the row will remain. To do that that, simply follow the steps on how to delete an element in this article. Here are the instructions on how to remove an asset and its container row. If you are looking for instructions on how to delete an asset, refer to the Assets tab section in the Activity Page article.

1. Locate and click on the row that contains the asset you wish to remove.

canvas17.jpg

 

2. Look over to the left, on the Structure panel, and click on the row where the asset you want to remove is.

design11.jpg

  

3. Head over to the Design Panel, where Row Settings is shown. Click Delete.

design12.jpg

 

4. Are you sure? Click Delete if yes, otherwise cancel.

canvas21_02.jpg

Deleting an Asset

How to Delete an Asset

Here's how to delete an asset from the Design Panel. You may also do this from the Assets tab.

1. Click the Assets tab in the Design Panel.

assets1.jpg

 

2. Locate the asset you wish to delete, and click on the red X.

asset4.jpg

 

3. Are you sure you want to delete this asset? If yes, click Delete. Otherwise, click Cancel.

assets5.jpg

 

 


 

Text Element

Use a text element to insert text into your Email. You can style the text in several ways to make sure it fits your Email's design!

text1.jpg

 

Here's some useful information to get you started with the text element

Click on an item below to expand:

Adding a Text Element

How to Add a Text Element into the Canvas

1. Head over to the Design Panel, on the right.

Click and hold the Text element.

text2.jpg

 

2. Drag the element where you wish to place it, and drop it.

text3.jpg

 

3. Now you can enter your text! To learn more about text formatting, click on the Formatting the Text Element item below.

aa_02.jpg

 

Cloning a Text Element

How to Clone a Text Element

1. Click on the text element you would like to clone.

aa_02.jpg

 

2. On the right, the Text Options will open in the Design Panel.

text5.jpg

 

3. Scroll to the bottom of the Text Options, and click Clone.

clone.jpg

 

4. That's it! Your text element will be cloned directly under the original, in the same row.

 

Text Element Options

How to Open and Review the Text Element Options

Click on the text element, either on the canvas or on the Structure Panel. This will open the Text Options on the Design Panel.

text5.jpg

 

Text Element Name

text7_02.jpg

This is an internal name for your text element, and will only be displayed on the Structure Panel on the left hand side.

text8.jpg

 

Manual Line Height

To manually adjust the line height of your text element, check the box next to Manual Line Height and enter a measure in pixels below:

text9__02.jpg

 

Text Element Margins

text9_02.jpg

 

Set the margins of the element, known as padding, by writing a measurement in pixels under top, right, bottom and left margins. The standard measurement is 17px. See some examples below:

 

This is what text looks like with 17px margins:

text10.jpg

 

While text with 0px margins looks like this:

text11.jpg

 

Clone Element

Click Clone to clone this element. The clone will be placed directly under the original, inside the same row.

clone.jpg

 

Formatting the Text Element

How to Format the Text in the Text Element

1. Once you've added the element, click on New text inside the text element.

texti_02.jpg

 

2. Enter the text in the box.

arial_02.jpg

 

3. That was easy! Click on the text to open the inline text editor if it doesn't open automatically.

aa_02.jpg

 

4. Use the inline text editor to change the style of the text.

text14_02.jpg

 

A few words about the options in the inline text editor:

FontSize & StyleFormat & ColourAlignmentData Tags

How to Change the Font of the Text in the Text Element

1. Click on the font button in the inline text editor.

fontbutton_02.jpg

 

2. Choose a font from the list.

We currently support 7 different fonts: Arial, Comic Sans, Courier New, Georgia, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet Ms and Verdana.

text15.jpg

 

Something to consider: Some Email clients may not support certain fonts. If this is the case, the Email client will replace the font with a fallback font.

 

Deleting a Text Element

How to Delete a Text Element

1. Click on the element you wish to remove.

text32.jpg

 

2. Click on the red x on the top right corner of the element.

text33.jpg

 

 


 

Image Element

To add images into an Email, you'll need an image element!

Images will make your Emails more attractive, increasing the click rate for those Emails in which you place images with a link.

image1.jpg

 

Here's some useful information to get you started with the image element

Click on an item below to expand:

Adding an Image Element

How to Add an Image Element into the Canvas

1. Head over to the Design Panel. Click and hold the image element.

image2.jpg

 

2. Drag the element where you wish to place it, and drop it.

image3.jpg

 

3. Now that your element is placed on the canvas, click Upload to pick your image.

image4_01.jpg

 

You may also locate the file in your computer, and drag and drop it on the element. It's important that you don't drag it into the button, but rather the empty area in the element.

img1.jpg

 

4. Select an image file from your computer. We support PNG, JPG, JPEG and GIF image file types.

Consider the file size. Currently, the maximum image size is 1MB.

image5.jpg

 

5. There's your picture!

image6.jpg

 

Cloning an Image Element

How to Clone an Image Element

1. Click on the image element you would like to clone.

canvas16.jpg

 

2. On the right, the Image Options will open in the Design Panel.

image8.jpg

 

3. Scroll to the bottom of the Image Options, and click Clone.

clone.jpg

 

4. That's it! Your image element will be cloned directly under the original, in the same row.

clone2.jpg

 

Resizing an Image

How to Resize an Image

For now, it is not possible to resize images. We will notify you when this feature becomes available.

Replacing an Image

How to Replace or Change an Image

1. Click on the image element you wish to replace.

image6.jpg

 

2. The Image Options will open on the right, on the Design Panel. Locate the image you uploaded towards the bottom of the Image Options.

image8.jpg

 

3. Hover over the image and click Change Image.

image7.jpg

 

4. Choose another file from your computer.

image0.jpg

 

6. There you go!

image9.jpg

 

Image Element Options

How to Open and Review the Image Element Options

Open the Image Options by clicking on the image element, either in the canvas or in the Structure Panel. The Image Options will open on the Design Panel.

image10.jpg

 

Image Element Name

image11_02.jpg

 

This is an internal name for your element when it's displayed on the structure panel on the left side.

image12.jpg

 

Image Element URL

Add an image link if you want your recipients to be able to click on the image and take them to a webpage.

This can be very useful if, for example, you have a special sale or event and want your recipients to engage with your website. To achieve this, upload an eye-catching image with a CTA, and add a link to it.

Open the Link Type drop-down menu, and choose between Web Address, Email Address and Unsubscribe:

image13_02.jpg

 

Enter the Web or Email address, if you chose either of these, and then enter a link title.

The link title is important for event tracking purposes. Curious about this? Jump to profile events.

You may skip tracking this link by clicking on the Do not track checkbox.

image14.jpg

 

Image Element Text

Enter a text to describe your image. It will appear when a cursor hovers over the image.

image16_02.jpg

 

For example:

image15.jpg

 

Image Element Alignment

image17_02.jpg

This will modify how the element aligns with the rest of the space in the element.

 

Image Element Margins

text9_02.jpg

 

Set the margins of the element, known as padding, by writing a measurement in pixels under top, right, bottom and left margins. The standard measurement is 17px.

 

This is what it would look like with 17px padding:

image6.jpg

 

While an element with 0px padding looks like this:

image18.jpg

 

Clone Element

Click Clone to clone this element. The clone will be placed directly under the original, inside the same row.

clone.jpg

 

Deleting an Image Element

How to Delete an Image Element

1. Click on the element you wish to remove.

image6.jpg

 

2. Click on the red x on the top right corner of the element.

image19.jpg

 

 


 

Button Element

Buttons make Emails feel more organic and allow your Audience to engage directly with you. You can add them to send them directly to a page of your choice.

button1.jpg

 

Here's some useful information to get you started with the button element

Click on an item to expand:

Adding a Button Element

How to Add a Button Element into the Canvas

1. Head over to the Design Panel. Click and hold the button element.

button2.jpg

 

2. Drag the element where you wish to place it, and drop it.

button3.jpg

 

3. Now that the button is placed, click on the button and type in your button text or call to action.

button4.jpg

 

4. There you go!

button6_02.jpg

 

Cloning a Button Element

How to Clone a Button Element

1. Click on the button element you would like to clone.

button4.jpg

 

2. On the right, the Button Options will open in the Design Panel.

button15.jpg

 

3. Scroll to the bottom of the Button Options, and click Clone.

clone.jpg

 

4. That's it! Your button element will be cloned directly under the original, in the same row.

 

Editing Button Text

How to Edit the Text in a Button Element

1. To edit a button's text, first click on the button.

button4.jpg

 

2. Then edit the button text directly.

button5_02.jpg

 

3. Use the inline text editor to adjust the style of the button text.

button10.jpg

 

Click on a tab below to read more about the inline text editor:

FontSizeColour

How to Change the Font of the Text in the Button Element

1. Click on the font button in the inline text editor, and select the text to adjust the font.

button9_02.jpg

 

2. Choose a font from the list.

We currently support 7 different fonts: Arial, Comic Sans, Courier New, Georgia, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet Ms and Verdana.

button10.jpg

 

Something to consider: Some Email clients may not support certain fonts. If this is the case, the Email client will replace the font with a fallback font.

 

Button Element Options

How to Open and Review the Button Element Options

Open the Button Options by clicking on the button element, either in the canvas or in the Structure Panel. The Button Options will show on the Design Panel.

button15.jpg

 

Button Element Name

button16_02.jpg

 

This is an internal name for your element and will only be displayed on the Structure Panel, on the left.

button17.jpg

 

Button Element Link

Add a link (URL) for your recipients to open when they click the button.

Make sure the link corresponds with your button's text.

Open the Link Type drop-down menu, and choose between Web Address, Email Address and Unsubscribe:

button16_03.jpg

 

Enter the Web or Email address, if you chose either of these, and then enter a link title.

The link title is important for event tracking purposes. Curious about this? Jump to profile events.

You may skip tracking this link by clicking on the Do not track checkbox.

bitton18.jpg

 

Button Element Style

Customise the colour, border, shape and placement of your button.

button78.jpg

 

ColourBorderWidthAlignmentMargins

How to Change the Button Colour

Click on the circle next to button colour to open the colour picker.

button20_01.jpg

 

Use the colour picker to choose a colour that suits your button.

button19.jpg

 

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each Email. Every new Email will have no recently used colours, but the colours will remain for each Email whenever you go back into editing.

button14.jpg

 

 

Clone Element

Click Clone to clone this element. The clone will be placed directly under the original, inside the same row.

clone.jpg

 

Deleting a Button

How to Delete a Button Element

1. Choose and click on the button element you wish to remove.

button22_04.jpg

 

2. Click the red x on the top right corner.

button30.jpg

 

 


 

Line Element

Line Elements come in handy when you need to divide content in your Email. Use them wisely!

line2.jpg

 

Here's some useful information to get you started with the line element

Click on an item below to expand:

Adding a Line Element

How to Add a Line Element into the Canvas

1. Head over to the Design Panel. Click and hold the line element.

line1.jpg

 

2. Drag the line element where you wish to place it, and drop it.

line3.jpg

 

3. There it is!

line4.jpg

 

Cloning a Line Element

How to Clone a Line Element

1. Click on the line element you would like to clone.

line2.jpg

 

2. On the right, the Line Options will open in the Design Panel.

3. Scroll to the bottom of the Line Options, and click Clone.

lineclone.jpg

 

4. That's it! Your line element will be cloned directly under the original, in the same row.

 

Line Element Options

How to Open and Review the Line Element Options

Click on the line element, either on the canvas or the Structure Panel, to see the line options. The Line Options will open on the Design Panel.

line5.jpg

 

Line Element Name

line6_02.jpg

This is an internal name for your line element, which will only be displayed on the Structure Panel.

line7.jpg

 

Line Element Style

Customise the look of your line element by changing these settings.

line9.jpg

 

ColourPaddingHeight

How to Change the Colour of the Line

1. Click on the circle next to Colour to open the colour picker.

line10_02.jpg

 

To edit the line colour, pick a colour from the colour picker.

line11.jpg

 

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer.

The colour picker will save 16 of your recently used colours for each Email. Every new Email will have no recently used colours, but the colours will remain for each Email whenever you go back into editing.

button14.jpg

 

Deleting a Line

How to Delete a Line Element

1. Click on the line element you wish to delete.

line15_02.jpg

 

2. Click on the red x on the top right corner.

line16.jpg

 

 


 

Spacer Element

Need some space? Use a spacer element in your Email to create some separation between the elements in your Email. It can be quickly modified by using the spacer handle, making very easy to tailor the spacer as you build your Email.

spacer1.jpg

 

Here's some useful information to get you started with the spacer element

Click on an item below to expand:

Adding a Spacer Element

How to Add a Spacer Element

1. Head over to the Design Panel, on the right.

Click and hold the Spacer element.

spacer2.jpg

 

2. Drag the spacer element where you wish to place it, and drop it.

spacer3.jpg

 

3. There it is!

spacer4.jpg

 

Cloning a Spacer Element

How to Clone a Spacer Element

1. Click on the spacer element you would like to clone.

spacer5.jpg

 

2. On the right, the Spacer Options will open in the Design Panel.

 

3. On the bottom of the Spacer Options, click Clone.

clonespacer.jpg

 

4. That's it! Your spacer element will be cloned directly under the original, in the same row.

 

Adjust Spacer Size

How to Adjust the Spacer Element Size

To adjust the size of your spacer, click on the handle and drag it up or down.

spacer5.jpg

 

You may also change its size by entering a specific size for your spacer in pixels under Spacer Size (px) in the Spacer Options in the Design Panel.

If you move the handle in the element, the number in Spacer Options will be modified to reflect the measurement.

spacer6.jpg

 

Spacer Element Options

How to Open and Review the Spacer Element Options

Click on the spacer element, either in the canvas or in the Structure Panel, to see the Spacer Options. They will appear in the Design Panel, on the right.

spacer6.jpg

 

Spacer Name

spacer8_02.jpg

 

This is an internal name for your spacer element, and will only be displayed on the Structure Panel.

spacer9.jpg

 

Spacer Size

Enter a specific size for your spacer in pixels under spacer size (px).

spacer7_03.jpg

 

If you move the handle in the element, this number will be modified to reflect the measurement.

 

Clone Element

Click Clone to clone this element. The clone will be placed directly under the original, inside the same row.

clone.jpg

 

Deleting a Spacer Element

How to Delete a Spacer Element

1. Click on the element you wish to delete.

spacer5.jpg

 

2. Click the red x on the top right corner of the element.

spacer10.jpg

 

 


 

List Element

A list element will allow you to display information in an organised manner. You can create a list that is clickable in order to send your Audience to your website, and most importantly, the list can be made so that it fits your Email's design!

list1.jpg

 

Here's some useful information to get you started with the list element

Click on an item below to expand:

Adding a List Element

How to Add a List Element into the Canvas

1. Head over to the Design Panel. Click and hold the list element.

list2.jpg

 

2. Drag the list element where you wish to place it, and drop it.

list3.jpg

 

3. There's your list element! By default, your list will be empty. Refer to the List Options to add list elements.

list4.jpg

 

Cloning a List Element

How to Clone a List Element

1. Click on the list element you would like to clone.

list22.jpg

 

2. On the right, the List Options will open in the Design Panel.

 

3. Scroll to the bottom of the List Options, and click Clone.

clone.jpg

 

4. That's it! Your list element will be cloned directly under the original, in the same row.

 

List Element Options

How to Open and Review the List Element Options

Click on your list element, either on the canvas or from the Structure Panel on the left, to see the List Options. They will open on the Design Panel.

list5.jpg

 

List Name

list6_02.jpg

This is an internal name for your element, and will only be displayed on the Structure Panel on the left.

list7.jpg

 

List Items

Here you can add and remove items from the list.

To add an item, click Add item. Your item will appear in the element, where you can directly edit its content.

listrep_02.jpg

 

To remove an item, click on the X on the right of the item.

Read more on how to add and remove list items in the section below.

 

List Spacing

Increase or decrease the spacing between list items by clicking on the slider and dragging it left or right. The measurement in pixels will appear on the slider as you drag it.

list9_02.jpg

 

List style

Adjust these settings to make sure that your list element matches the rest of your Email.

List TypeAlignmentMargins

How to Change the List Type

The list type refers to the character that precedes and organises the list items.

list10_02.jpg

 

Choose between a bullet, which looks like this:

list11.jpg

 

Letters from A-Z:

list12.jpg

 

If your list items exceed the number of letters in the alphabet, the letters will then behave as double digit numbers:

list13.jpg

 

Or numbers:

list14.jpg

 

To show the list items without any character in front, choose none.

For a completely custom character, select custom and enter your character under custom style.

list15_02.jpg

 

 

Clone Element

Click Clone to clone this element. The clone will be placed directly under the original, inside the same row.

clone.jpg

 

Adding List Items

How to Add Items to a List Element

You can add list items from the List Options and then edit the content of the items directly in the canvas.

To open the List Options, click on the list element either on the canvas or the Structure Panel on the left.

 

1. Click Add under List items in the list options. Add as many as you want to add.

list8_02.jpg

 

2. Your list item or items will appear in the list element.

list21.jpg

 

3. Click on the list elements to edit their content.

Keep going until you've added and edited all your items!

list22.jpg

 

Formatting the List Items

How to Format the Text in the List Element

1. Once you've added the list element and its items, click on the list element to open the inline text editor.

list22.jpg

 

2. Use the inline text editor to change the style of the text.

list23_02.jpg

 

A few words about the inline text editor:

FontSizeFormatColourData Tags

How to Change the Font of the List Element Items

1. Click on the font button in the inline text editor.

list24_02.jpg

 

2. Choose a font from the list to change the font the text will be displayed on.

We currently support 7 different fonts: Arial, Comic Sans, Courier New, Georgia, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet Ms and Verdana.

list25.jpg

 

Something to consider: Some Email clients may not support certain fonts. If this is the case, the Email client will replace the font with a fallback font.

 

Removing List Items

How to Remove Items from the List Element

To remove items, you must be in the List options. To open the List Options, click on the list element either on the canvas or the Structure Panel on the left.

1. Find the list item you wish to remove.

listselect_02.jpg

 

2. Click the circle with the "x".

 

Deleting a List Element

How to Delete a List Element

1. Click on the element you wish to delete.

list36.jpg

 

2. Click on the red x on the top right corner of the element.

list37.jpg

 

 


 

Menu Element

A menu element is useful to organise information in an Email, as well as to guide your Audience into a specific part of your website. It's fully customisable, so make sure you adjust the settings to make it fit the rest of your Email.

menu1.jpg

 

Here's some useful information to get you started with the menu element

Click on an item below to expand:

Adding a Menu Element

How to Add a Menu Element

1. Head over to the Design Panel. Click and hold the menu element.

menu2.jpg

 

2. Drag the menu element where you wish to place it, and drop it.

menu3.jpg

 

3. There's your menu element!

menu4.jpg

 

Cloning a Menu Element

How to Clone a Menu Element

1. Click on the menu element you would like to clone.

menu11.jpg

 

2. On the right, the Menu Options will open in the Design Panel.

 

3. Scroll to the bottom of the Menu Options, and click Clone.

clone.jpg

 

4. That's it! Your menu element will be cloned directly under the original, in the same row.

 

Menu Element Options

How to Open and Review the Menu Element Options

Click on your menu element, either in the canvas or in the Structure Panel, to see the Menu Options. They will open on the Design Panel.

menu5.jpg

  

Menu Name

menu6_02.jpg

 

This is an internal name for your element, and will only be displayed in the Structure Panel on the left.

menu7.jpg

 

Menu Items

Here you can add and remove items from the menu.

To add an item, click Add item.

menu15_02.jpg

 

To remove an item, click on the X on the right of the item.

Read more on how to add and remove menu items in the section below.

 

Menu Spacing

Increase or decrease the spacing between menu items by clicking on the slider and dragging it left or right. The measurement in pixels will appear on the slider as you drag it.

menu8_02.jpg

 

Menu Style

Adjust these settings to make sure that your menu element matches the rest of your Email.

Separator Alignment Margins

How to Change the Separator of a Menu

In the Separator field, enter the character that will divide or separate menu items.

menu9_02.jpg

 

 

Clone Element

Click Clone to clone this element. The clone will be placed directly under the original, inside the same row.

clone.jpg

 

Adding Menu Items

How to Add Items to a Menu Element

You can add menu items from the Menu Options and then edit the content of the items directly in the canvas.

To open the Menu Options, click on the menu element either on the canvas or the Structure Panel on the left.

 

1. Click Add under Menuitems in the menu options. Add as many as you want to add.

menu15_02.jpg

 

2. Your menu item or items will appear in the menu element.

menu16.jpg

 

3. Click on the menu elements to edit their content.

Keep going until you've added and edited all your items!

menu17.jpg

 

Formatting the Menu Items

How to Format the Text in the Menu Element

1. Once you've added the menu element and its items, click on the menu element to open the inline text editor.

menu18.jpg

 

2. Use the inline text editor to change the style of the text.

menu19_02.jpg

 

A few words about the inline text editor:

FontSizeFormatColourData Tags

How to Change the Font of the Menu Element Items

1. Click on the font button in the inline text editor.

menu19_02.jpg

 

2. Choose a font from the list.

We currently support 7 different fonts: Arial, Comic Sans, Courier New, Georgia, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet Ms and Verdana.

menu20.jpg

 

Something to consider: Some Email clients may not support certain fonts. If this is the case, the Email client will replace the font with a fallback font.

 

Removing Menu Items

How to Remove Items from the Menu Element

To remove items, you must be in the Menu options. Open the Menu Options by clicking on the menu element, either in the canvas or in the Structure Panel.

menu15_02.jpg

 

1. Find the menu item you wish to remove.

menu31_02.jpg

 

2. Click the circle with the "x".

 

Deleting a Menu Element

How to Delete a Menu Element

1. Choose and click on the element you wish to remove.

menu1.jpg

 

2. Click the red x on the top right corner of the element.

menu32.jpg

 

 


 

 

Was this article helpful?