Drag-and-drop editor
Quick Start
Guide
2
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Contents
Introduction 3
Drag-and-drop editor interface 4
Working with elements 6
Adding and moving elements 7
Resizing of elements 8
Editing your template
9
Working with text 9
Editing text 9
Adding formatting 9
Changing the font 9
Changing the text color 10
Changing background color 10
Working with images 11
The images ribbon 11
Uploading an image 11
Inserting an image 12
Replacing an image 13
Editing an image 14
Working with links 15
Using standard links 15
Adding hyperlinks 16
Personalizing your template 17
Reviewing your template 18
Show links 18
Show stats 18
Preview 19
Spam check 19
Editing your HTML 19
Saving your template 20
3
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Introduction
Introduction
This guide is designed to get you up and running with the drag-and-drop editor, so you can start editing your campaigns
and templates right away.
How to get started with drag-and-drop editor
Templates in the Free Template Library with this symbol will open in Drag-and-drop editor.
Just open and save any one of them as a new campaign, and you’re free to start editing.
Any of your existing templates from your own template library can be marked up for editing.
Your IT or webmaster can easily do this marking up for you too. Ask OpenMoves for guidance on this.
4
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Overview of the interface
The drag-and-drop editor ribbon is displayed above your template. This ribbon is dynamic and will change depending
on where you click within the template.
In the drag-and-drop editor, templates are made up of groups of elements.
An element can be text, an image, a combination of an image and text, etc. The
elements can be just dragged and dropped onto your template.
The available elements are displayed on the left side of your screen in the Tools
palette and are made up of the Build and Style tabs. Elements include:
Building Blocks
Images
Background
Borders and Padding
Email Width
You can collapse and expand the list in the Tools palette
by using the arrow buttons.
Building Blocks ImageskedSEO
5
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
But if you click on an image in the template, the ribbon displays image related options. In this case the Tools palette
automatically expands the Images view.
Above the drag-and-drop editor ribbon, there are a few other options available.
In the top right of the screen, there are options to Save your template, view the Utilities drop-down, Test send and
Preview your template in a new window. The Save & Continue button takes you to the next step in the process which
is creating the plain text version of your template. Don’t worry about remembering all of this – we’ll cover everything
in more detail in this guide.
If you click in a text area on the template, then the ribbon will display options related to working with text.
Overview of the interface
Text ribbon
Images ribbon
6
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Working with elements
Each template is made up of different elements and a collection of elements are held in what we call a container.
Let’s take a look at an example.
Each element in this example is outlined in a dotted line so that they are easy to distinguish.
As you rollover an elment, the outline becomes orange and an options bar appears in
the top right corner of the element. Now you can carry out different actions on the
element:
Element A
Element B
Element C
Element A is the container;
Element B holds an image;
Element C and D hold text.
Delete
Duplicate
Move
When you duplicate an element, the duplicate appears
directly below the element you selected.
Original
Original with duplicate beneathSEO
Element D
7
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Working with elements
If the element you select is acting as a container for
other elements, as in this example, then all elements
are duplicated.
When duplicated, all elements appear directly below.
Original
Original with duplicate beneathSEO
You can move existing elements within the template to new positions or
drag in new elements from the Tools palette.
As you drag an element over an area in the template, orange drop-bars
appear above and below each element and container.
These drop-bars make it really easy for you to see where you can place
other elements.
The new element will be inserted either above or below depending on
whether the drop-bar is at the top or bottom of the selected element.
So, if we selected the drop-bar shown in our example, then the new
element will be inserted at top, because the drop-bar we selected is at
the top of the existing element.
New element dragged and dropped into its new position
Adding and moving elements
8
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Resizing elements
When you drop elements onto your template, they automatically resize
based on the available space. Let’s look at a couple of examples:
When you insert an image element into a text
element, then the text will automatically
wrap around the image.
You can also manually change the width of an element.
To do this, hover over the edges of the element until the
double arrow appears.
Now drag the edge of your element left or right to change the width as required.
Release the edge and the other elements within the
container will automatically adjust to t the new element
width.
Layout after element resizing
Our new image
and text elements
automatically
scale to be the
same width as
the new column
container.
9
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Working with text
Working with text
The ribbon within the editor changes depending on whether you are working with text or with images.
Let’s start off by looking at how to add and change
text.
Text ribbon
Images ribbon
Editing text
Using the editor is very similar to using a standard word
processing package. So, to change existing text, simply
highlight it using your mouse and then start typing.
To add text, place your cursor where you want and start
typing!
Adding formatting
To add bullets to text, select the text and click on the Bullet
List drop-down for more selections. You can select either a
bullet point or numbered list.
Other formatting options such as Bold, Italics, Underline,
Strikethrough, Superscript, Subscript and Alignment are also
available from the ribbon.
To change the font
To change the font just select a new font from the drop-down
list. You can also change the size of the font – the text here is
currently Trebuchet MS with a font size of 13px.
Editing your Template
10
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Changing text color
To change the text color, highlight the text and click on the text color drop-down to
display the color palette.You can add and select from My colors, Template colors or
access the color picker through more colors.
Changing background color
To do this, select the element where you wish to change the
background color. Then click the Style tab at the top of the Tools
palette.
There are a number of ways the color can be selected.
Enter HEX color codes
Select from the color picker
Use the slider to adjust the brightness
In each case you will get a live preview of the changes you have
made.
You can see from the example below, the area to be shaded is
highlighted with an orange border as is the selected background
layer in the Tool palette.
Working with text
Editing your Template
Clicking the Add to my colors button will include the color selection within
the My Colors section of the color drop-down.
11
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
When you click on an image within your template, the
ribbon automatically changes and the Tools palette expands
to show all the images you have uploaded.
Before you can drag-and-drop an image onto your template,
you’ll need to upload it in the area we call the Image
Manager.
Uploading an image
From the Images element, click on the Manage Images
button.
The Image Manager will open. Click on the Add button and select the
image you want to upload from your computer. Once selected, the
location of the image will appear in the list.
The images ribbon
The Color Picker let’s you change the background color of the
item, column, container or email. You can also add favorite
colors to My Colors by clicking the Add to my colors button.
The Link button lets you add links to your images. These
could be standard links such as Unsubscribe, Forward to a
Friend or perhaps links to your web landing pages.
There are several image options available covering left, right
and center alignment, image title and spacing. If you have
inserted an image within a text element then the Flow With
Text option will let your text ow around the image.
Working with images
Editing your Template
12
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
You can preview, rename, crop and remove images. Click the
list icon and then rollover the image to see these options.
Once your images appear in the Tools palette, you can drag
and drop them directly onto your template.
Images dropped into your template are automatically scaled
in proportion.
Inserting an Image
You can drop images directly from the Tools palette
into your template.
As you drag the image over the template, the
orange drop-bars we mentioned earlier appear
above and below each element and container.
The image will be inserted either above or below,
depending on whether the drop-bar is at the top or
bottom of the element or container you select.
Working with images
Editing your Template
You can select different image display settings, by list or image, and the size of your image icons as well.
When you click the list icon, you will notice that the width, height and size of the image are all displayed.
You can create folders, if you wish, to group your images together.
To delete an image from your Image Tools palette simply drag the image into the Recycle Bin or click the Delete
button.
list icon
image icon
image icon (small)
image icon
(large)
folder icon
recycle bin
display settings
13
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
If you are inserting an image into a text area, then as you
drag the image over the element, a drop box will appear
where you can place the image. Release the image and it
appears in the template.
Replacing an Image
To replace an existing image,
simply drag the new image over
the existing image and release.
The new image is inserted and
automatically scaled to ll the
element it was inserted into.
Once the image is in your template, you can select the
image and use the resize handle to make the image larger
or smaller.
As you scale the image, the revised sizes (width and
height) are shown in a gray box just above the image.
Working with images
Editing your Template
14
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Manually editing an image
The drag-and-drop editor will automatically scale your images to t the dimensions of an element.
Using the image manager, you can crop an image. First, click
the list icon and then hover over the image to see the crop
option.
Now, select the crop tool and use your mouse to select the
area of the image you wish to keep. Then enter a new name
for the cropped image and click on the SAVE button. Your
original image stays intact.
Working with images
Editing your Template
Crop
15
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
The option to add Links appears on the ribbon
whenever you are working on text or images.
We’ve included some standard links in the
drag-and-drop editor which we know you’ll nd
useful. Obviously one of the standards is the
Unsubscribe link, as that’s required by law!
When adding links to text, you start by typing
the text into the template, then select that
text before you click the Link button.
The standard links we’ve included are Email,
Forward to a friend, Unsubscribe, View in
browser, Double opt-in, Safe Sender Message,
Link to a Document and Link to a microsite.
Adding a link
You can add a standard link, like Forward to Friend, View
in Browser, Unsubscribe, or you can highlight existing
text in your template and hyperlink it to a web address.
You can also change the color of the link and whether it
will appear underlined by selecting one of the two icons
shown on the right.
The create a standard link, enter the URL of the landing
page you wish to the link to go to.
Use the Existing button to display other links you have
already used in the template.
We would recommend that you add a Link name so
that you can easily track which links have clicked when
you’re viewing the reporting.
When you’re ready just click on the Insert button.
Working with links
Editing your Template
16
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
When adding a link to an image, the process is
the same. Enter the URL of the landing page
you wish to go to or use the Existing button to
display other links already used in the template.
Make sure you enter a Link name and if you
want to test the URL, click on the Visit button.
Click Insert when ready and you’re good to go!
Adding a link to an image
Working with links
Editing your Template
17
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
The Personalize option available on the ribbon (when
you’re working on text) lets you insert personal
information relating to each recipient within the body of
the template such as First Name, Company Name, etc.
To use personalization, move your cursor to where you
want the personalization to appear and click on the
Personalize button on the ribbon. In this example we’re
going to insert First Name into our template.
The elds in this section
are default elds
automatically created in
OM3.
The elds in this
section are examples
of the customized data
elds you can create
for your address books.
To see a sample of how your email will look, use the Preview option just above the ribbon.
For personalization to appear in your email campaigns, the customized data elds must be populated when you
upload your contact data. Take a look at the online help in Assistance if you’re not sure how to do this.
You can also add further customized data for each contact such as Salutation, Age, Job Title, Birthday, etc.
These additional elds must be created within your Address Books.
Further information on personalization
Personalizing your email
Editing your Template
18
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
When you click on the Preview link, your template is
displayed without the element and container outlines so
you get a good idea of how it’s shaping up.
The Utilities drop-down tool in the drag-and-drop editor
is a great way to nalize your template by checking
links, spam score, stats, and running a spell check before
sending.
Show Links
When you select the Show Links
option, a Links window appears to
the left of your template.
As you click down the list of links,
the corresponding link is shown in
a box on your template.
Show Stats
When you select the Show Stats option in Utilities, a Stats window appears to the
right of your template.
This provides key information about the content of your template such as word,
character and sentence count, how many links and images you have, and the
overall height of your email.
Reviewing your template
Editing your Template
19
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Preview
When you use the Preview option, a new window opens to
show how your email will look. You can review both the
HTML and plain text versions.
If you wish to preview the template with some
Personalized data, you can search for a particular contact
by entering their email address (for example) in the
Search for box at the top of the window. Click on the
SEARCH CONTACTS button to bring back matching records.
You can click on the SHOW RECENT button to display
the ten most recent contacts you imported and preview
each one in turn. This is a great way to see how any
Personalized data elds will look.
Spam Check
Once you have nished editing and
previewing your campaign, you should
check your template using the Spam
Check option within the Utilities drop-
down.
Your email is passed through the OM3
Spam lter and is scored accordingly. A
new window opens to display the results.
In the rst example, our email has scored
a zero which is good news!
You can click on ‘Show minor points’
to display why the template scores
point, shown on the right in the second
example.
From the minor points list we can see
how certain text within our template is
scoring and this provides the opportunity
to change that text if required.
Previewing your campaign
Editing your Template
20
OpenMoves | 65 Gaines Place | Huntington, NY 11743
www.openmoves.com | [email protected] | 631-546-7779
Editing your Template
Editing your template in HTML
You can view and edit your templates in HTML through the Utlities drop-down and the Edit Source option.
Save your template
You should save any changes to your template on a regular basis by using the Save option. This is
located above the drag-and-drop editor ribbon in the top right of the screen.
You can also use the shortcut of Ctrl+ S if you prefer.
When you click in an editable text box, the text ribbon will also allow you to view and edit specic
sections of your templates in HTML through the HTML button.