Create an email for a mailing campaign

The Artlogic email 'Compose' tool lets you design beautiful HTML emails. This guide will give you a basic understanding of how to use it.

Getting started

Create a new email

1. Go to Marketing > Email Marketing Campaigns > Compose/Edit emails.
2. Click the 'New record' button at the bottom of the page. The new email will open in a new tab.

When you start a new email, you will be asked to choose a template or start with a blank one. Once you’ve made a choice you have to save the record (the page is disabled until then).

The compose screen

After saving the new record you'll see the compose screen.

This screen is divided into two main sections - the 'page' on the left and the 'panel' on the right. The page is where the content of the email is composed and displayed. The panel is where you find all the tools to add objects to the page and modify the appearance and behaviour of the different components of the email. The panel changes depending on the context, e.g. when you select an object on the page.

To return to the main panel, just click anywhere on the page outside of the objects, or use the 'close' button at the bottom of the panel.

Adding content to the page

We add content to the page by adding 'objects'. In the 'objects' section in the main panel you will find a selection of objects to use. Just drag an object from the panel onto the page.

Adding text

There are a number of objects that contain text. For a simple block of text, drag the 'Text block' object onto the page. Empty text fields display some placeholder text - just click inside the text area and it will disappear. Now you can type your own text.

The text toolbar

To change the appearance of a small portion of text, use the text toolbar that appears when you highlight some text. The text toolbar provides the following options:

• Bold (makes the selected text bold)
• Italic (makes the selected text italic)
• Strikethrough (draws a line through the selected text)
• Underline (draws a line under the selected text)
• Hyperlink (makes the selected text clickable)
• Colour (changes the colour of the selected text)

Adding clickable links

To add a clickable link, select the text that you want to make clickable, then click on the 'link' icon in the text toolbar. This will show a text input for you to enter the URL that you want the text to link to. When you've entered the URL, hit the 'enter' key.

Tip: if you wish to enter the link to the recipient's 'Email Preferences' page so they can update their mailing settings, enter exactly this as the URL - https://app.artlogic.net/#site#/public/email_preferences/#uid# (this link appears automatically in your email footer as well)

Adding images

There are a number of objects that contain images, like the grids. Empty images are displayed as grey boxes.

1. To add a simple image, drag the 'Full-width image' object onto the page.
2. To add an image, click on the image upload button that appears when you move your cursor over the image box.
3. Now you can select an image from your device and upload it.
4. Once the upload is complete, the image will appear in the image box.

Personalise your email campaigns (merge tags)

Artlogic Mailings supports merge tags that allow you to personalise your emails so your bulk emails appear in your recipient's inboxes addressed to them individually. The following merge tags can be used within the content of an email:

• {firstname}
• {lastname}
• {fullname}
• {email}
• {organisation}

These tags will be replaced by the corresponding value in each contact record. 

Moving objects around the page

When you drag an object onto the page you can decide where it should appear on the page. To move an object that's already on the page, click on the drag handle that appears when you move the cursor over an object, and drag it above or below other objects. A blue line indicates where the object will appear when you let go.

Adding space between objects

When you have multiple objects on the page, you might want to adjust the space between them. You can do this in the object settings - select an object and use the 'Space above' and/or 'Space below' sliders under 'Layout settings'.

Changing the width of the page

To change the width of the page, go to 'Page settings' in the main panel and use the slider labelled 'Container width'.

Saving your email

To save the changes you make to your email, click on 'Save page' at the bottom of the main panel. The button turns blue when there are unsaved changes on the page.

Preview your email

While the compose screen gives you a good indication of what your email will look like, there are things like placeholders that won't show in the actual email you send out. That's why it's good to check your email in the preview mode while you're making changes. Preview mode also gives you a view of what your email will look like on a phone. You can activate the preview mode by click on 'Preview' at the bottom of the main panel.

Preview your emails in preview mode on both desktop and phone using the icons at the top of the page - your emails will always look different on a phone!

Duplicating an email

If you want to create an email that is very similar to an email you've already made, you can duplicate it with the 'duplicate record' button in the record edit panel. To get to the record panel, click on the pencil button at the top right of the panel.

Deleting an email

To delete the entire email record, click on the pencil button at the top right of the panel to open the record edit panel. Then click on the 'Delete this record' button. A duplicate record will be created and opens in a new tab.

Page settings vs Object settings

While it's possible to change things like text styles for each individual object, you should consider whether you want the settings to apply to the whole page. If that's the case you should make the change in page settings. When you make a change in the object settings, the change will only be reflected in the currently selected object.

Object settings

The object settings panel is where you find all the controls for each object. These can differ between different types of objects - for example, an object containing images might give you some image specific controls, while a button will give you controls to change the appearance of the button.

Items within objects

Some objects can contain multiple items. For example, a three-column grid will contain an items spread across the rows and columns. These items can be administered from within the object settings, where they are listed in the 'Items' section. From here you can add new items, reorder items with drag and drop, remove items and in some cases modify some of the properties of each item (for example you can make items in a grid clickable).

Saving an object

Similarly to the page settings, you may want to re-use an object that you have made with all of it's settings. Click on the object to open the object panel, then click on 'Save object' at the bottom of the panel.

You should see the saving options, including a text input to name your saved object. Saved objects will show in the main panel in the 'Saved objects' section, unless you save an object as a header or footer, in which case it will show in the 'headers/footers' section.

Creating and saving groups of objects

Using the 'Group' tool, you can select a bunch of objects and group them into a single object. You can now save them for use in another email, or move them as a single item.

Select one of your objects to show the object panel. Then click on 'Group objects' at the bottom of the panel. This will activate the grouping mode. Now you can select all the other objects that you want to include in your group. The selected objects will have a blue border. Once you've selected all the objects, just click on 'Confirm group' in the grouping panel.

Your objects have now been packed into a group. Now when you move the group you will be moving all of the objects within it. And when you save the group it will be saved with all of the objects it contains.

Grouped objects may be saved in the same way as any other object - simply click on it and click 'Save object' at the bottom right of the window.

Unpacking a group

Grouping objects gives you the benefit of moving multiple objects at once, as well as being able to re-use a group of objects. However, you lose the ability to modify the settings for individual objects within the group. If you need to change the settings for an object within a group, you can simply unpack the group by selecting the group to show the group panel and clicking on 'Unpack group'.

Saving the page settings

If you send out regular emails with a consistent design, consider saving your page settings. This way you'll save time because you don't have to set everything up from scratch every time. To save the page settings, go to the main panel and click on 'Save page settings...' at the bottom of the panel. You can save the page settings for yourself so that only you can see the saved settings, or for everyone. When making a new mailing to use your saved settings, go to 'Page settings' in the main panel, and select your settings from the dropdown menu in the 'Saved settings' section.

Setting up headers & footers

Headers & footers are a great example of objects that you would want to save to reuse in lots of different emails. There are a number of objects that cover the basic layouts for headers and footers. Here's an example:

Let's say we want a footer with our logo on the left and some social media icons on the right.

In order to make this, we'll need the 'Image + icons' object. We'll start by dragging it out onto the bottom of the page.

Now that it's on the page, let's upload a logo by clicking on the image upload button that appears when we hover over the grey area on the left. You can adjust the size of the image using the 'Image size' slider in the object settings.

To add the icons, click on the grey icon placeholders to open the icon panel.

From here you can set the icon to one of the built-in icons, or upload your own. Further down in the icon panel you can add a link to your icon, for example to link to your Instagram page.

For our example, we've used Instagram, Pinterest and Twitter icons. Once you've selected an icon, click on the next empty icon on the page to select the icon for that one until you've set all of the icons.

In our example, we want the icons to be white on a red circle background. Rather than doing this in the icon settings for each individual icon, we'll do it in the icon settings within the object settings. This way we just have to make changes in one place.

First, click on the object to open the object settings. Change the icon colour by clicking on the colour selector. You can choose a colour in the colour picker or type in a HEX colour value.

Then use the next colour picker to change the background colour.

To make a circle, drag the 'Roundness' slider all the way to the right.

Now we can adjust the padding and the size to get the right style. When you increase the padding the icons will appear smaller - you can compensate this by increasing the size.

When your footer looks the way you want it to, it's time to save it so that you use it for future emails. Select the object to reveal the object settings, and click on 'Save object'.

Type in the name of your footer and select 'Footer' in the dropdown menu next to 'Save as'. This will ensure that your saved object appears in the 'Headers & Footers' section in the main panel. When you make your next mailing and want to apply the header/footer, from there you can simply drag it out onto the page.

Ready to send your mailing?

Before you send your mailing in a campaign, you'll need to make sure your newly composed mailing is 'Live'. Click the pencil edit icon in the top-right hand corner of the mailing compose screen to access this options. 

This is also where you can add your email's 'Preview text'. Read more about this and why it's important here.

Send your mailing in a campaign

1. Send a mailing campaign
2. Email logs and analytics