For basic email editor guidance, be sure to check out Email Editor: Quick Orientation & Core Concepts.

Click to select the element you want to work with. A blue box will form around the element with an icon in each corner:

And the Details on the right will dynamically change to fit whatever element you choose to work with.

When entering or editing text, a format bar will appear above the text element. Set the format the way you want and start typing. If you want to change existing text format, simply highlight the word(s) to reformat and then make changes in the format bar. For example, to make “my” bold, you’d highlight “my” and then click the B icon.

The format bar gives you a lot of control:

The Paragraph Format list lets you determine whether the element’s paragraph format is Normal, Heading 1, Heading 2 or Heading 3. You can set the format for each paragraph type using the Details panel on the right. (You can also set the format for hyperlinks.)

You can use Link to make several types of links:

· Hyperlink to a web page

· Hyperlink to an existing anchor in your template

· Hyperlink to an FTP site

· Open a new email message

· Click-to-Call link

You can click PREVIEW and see your link in action—it will work exactly the same for your template recipients as it works for you.

Variable Tags are a bit special. See the next section below for more information on them.

A Variable Tag is a piece of text in your template that will automatically update when messages are sent out. For example, you can personalize each template that goes out by starting it with “Hello” followed by the guardian’s first name.

Variable tags can be replaced with text (e.g. the director’s first name), images (e.g. your logo), even social media icons (e.g. the Facebook link icon).

To insert a variable tag, simply put your cursor in the text where you want the variable tag to appear, click the Variable Tag button at the end of the format bar, and then select the variable tag you want to insert from the list.

Note that the list describes guardian information using the word “Guardian”, for example “GuardianFirstName”. But the tag that gets inserted will use the word “Lead”, for example “{{LeadFirstName}}”.

You can see an example of what an email might look like with variable tags by clicking PREVIEW. If the variable tags are replaced by example data in the preview, they will be replaced by real data when the template is sent to a guardian. If the variable tag simply disappears in the preview, then that information is missing from the system.

For example, if you put in the following merge variables at the bottom of your template…

{{LocDirectorFirstName}} {{LocDirectorLastName}}

{{LocDirectorPhoneNumber}}

{{LocDirectorEmailAddress}}

…but the preview only shows…

Janie Smith

jsmith@gaiachildcare.com

…then it means Janie’s phone number is missing from her profile. Just go to Settings > User Information and edit her profile to add her missing phone number.

Variable tags that get replaced by words (including names, etc.) can be formatted just like any other text. Simply format the variable tag, and the text that it gets replaced with will be the same format as the tag.

When you first drag the Image element into your work area, it will ask you to double-click to change the image:

Double click to select an image to insert. You can double-click the image at any time to change it.

Using the controls above the image, you can add alternative text for screen readers to read for visually impaired guardians and/or you can make the image a link.

In the Details panel on the right, you can change the size of the image by expanding Element Size. You can make any image smaller by moving the Image size slider. (You can’t make them bigger; they start out full size and making them bigger would pixilate them.)

Within the Element Size section, you have a “Fluid on mobile” option. When the template is viewed on a cell phone, if this is enabled the graphic will automatically resize to fit the cell phone’s width.

The Details panel also allows you to center (or de-center) the image or add Padding, Margins, and/or Borders. (See the Common Element Details section below for more on how to use color, padding, margins, and border controls.)

When you first drag the Button element into your work area, it will invite you to click the button label to change it:

Click to change the label as desired. A format bar similar to the one that appears for the Text element will appear so you can format the text. (Other format controls can be found in the Details panel on the right. Keep reading.)

If you want your button to do something, don’t forget to put something in the Link field above the button. Buttons can be made to open web sites, open FTP sites or start email messages. You can even have the destination link be a merge variable tag. (See Variable Tags above.)

In the Details panel on the right, you can change the size of the button by expanding Element Size. “Fluid on mobile” is one of your options: when the template is viewed on a cell phone, if this is enabled the button width will automatically expand to fit the cell phone’s width.

The Details panel also allows you to center (or de-center) the button, modify the text font or color, add Padding, Margins, and/or Borders. (See the Common Element Details section below for more on how to use color, padding, margins, and border controls.) Finally, under Button Background you can change the button’s color or give it a hover color—changing the button’s color when a user puts their mouse over the button.

When you first drag the Button element into your work area, a basic gray line divider appears:

In the Details panel on the right, you can add padding to your divider, increasing the amount of blank space above and/or below it. In the line section you can change the color or even make it transparent (if you simply want some empty space). You can also change the thickness of the line and/or change the style to any of the following:

· Solid line

· Dotted line

· Dashed line

· Double solid line

If you know HTML and want to do something other than what the controls allow, you can enter HTML code directly into the template. You could do your entire template as HTML code inside a code element, or you could have most of your template be created using other blocks and elements and simply have one or more sections designed via HTML.

There are two downsides to using a Code element (besides needing to know HTML):

· There is some risk of your HTML code having unintended consequences on the rest of the template, for example creating conflicts between the code you write and the code that otherwise governs the template.

· The template editor will show your code element AS a bunch of code.

On the other hand, contrary to what the editor says, previewing your code DOES work.

With that out of the way, when you drag a Code element into your work area, you get a block of code, an opportunity to give your code element a title, and a button to edit your code:

Simply click the button and code away. 😊

When you first drag the Box element into your work area…

…it can look like you didn’t really do much of anything:

However, if you look in the breadcrumbs, you’ll see there is a box there…

…and in the Details pane you have styling options.

Boxes are designed to surround other elements, for example to create emphasis. For example, if your template had a baby blue background but you wanted to create a dark blue sidebar, you could create a multicolumn (see below), put a box inside the left column, color the box background dark blue, and then drop white text inside the box:

The Details panel allows you to manage Padding, Margins, and/or Borders. (See the Common Element Details section below for more on how to use color, padding, margins, and border controls.) You can also add a background color to the box, as shown in the example above. And finally, you can use Element Visibility to decide whether the box appears when viewed on a mobile device, when viewed on desktop, both (or neither?).

Like Box, the Multicolumn element is for giving structure to your template. It allows you to place content side-by-side when viewed on a desktop, as in the blue sidebar example above. Columns also automatically rearrange to stack on top of one another when viewed on mobile.

And like box, multicolumn doesn’t do much by itself; you must drag other elements into each of the columns you create.

When you first drag a Multicolumn into your work area, it defaults to two equally sized columns for you to drag more elements into:

In the Details section, you have a Multicol section that gives you a lot of control over your columns. You can:

· Add more columns

· Resize columns so they are not equally sized

· Control how the columns stack on mobile (left on top, right on top, etc.)

· Add spacing between the columns (when viewed on desktop)

· Add spacing between rows (when viewed on mobile)

And like with the Box, you can use the Details panel to determine whether columns will appear or disappear on mobile or desktop, and you can add a background color to your multicolumn element.

Color selectors are commonly found for most elements, blocks and the body background itself. They default to a hexadecimal number and include a circle showing the color along with a dropper icon:

You have several ways to select or change a color:

1. If you know the hexadecimal value for the color you want, you can click to edit the existing value:

2. You can instead click to edit the existing value and type the name of the color you want:

3. You can click either the colored circle or the dropper to get a color selector:

Many elements allow you to put borders, margins and padding around them.

· Border: a (usually) visible rectangle around your element

· Margin: space outside the border; space between the border and neighboring elements

· Padding: space inside the border; space between the border and the element it surrounds

Borders, margins and padding have thickness, measured in pixels. More pixels means a larger border, margin or padding.

Here are two photos without any border, margin, or padding:

Let’s add a border, some margin, and some padding to the photo on the right:

Notice how the borders, margins and padding are equal on all four sides? If you want to make the thicknesses different on different sides, enable “Separate”

Border radius gives a rectangle rounded corners. This is a Detail that can be set for borders and buttons.