• Controlling the structure of your message
• Adding content to your message
• Adding text
• Adding an image
• Adding a button
• Adding a divider
• Adding a spacer
• Adding social buttons
• Embedding custom HTML
• Setting a background color or image
• Specifying a subject for your message
• Designing for mobile devices
• Copying and pasting content
• What can't you do with the email editor?
• Approximating text wrapping
Using the email editor, you can design complex emails more easily, with a consistent and predictable appearance across different platforms, devices, and email readers.
Note: The redesigned email editor is only available when designing manual emails and manual email templates. The legacy email editor is still being used for event emails and automatic emails such as membership emails, invoices, and receipts.
Designing an email with the email editor is like using building blocks: you stack different kinds of layouts on top of each other to form the structure of your message. Then, you can add your content by inserting different gadgets into the various cells within your structure.
Note: The building block approach produces more consistent results than copying and pasting formatted content from another source. You can still copy and paste formatted content but with less predictable results, and without the ability to access the underlying HTML code.
Controlling the structure of your message: Layouts
To assemble the structure of your email message, stack one or more layouts on top of each other. Each layout occupies a single row within your structure.
Layouts are containers that consist of one or more cells or columns into which you can insert your content.
The following layouts are available:
Layout type | Column width (px) |
|---|---|
| 1 column | 600 |
| 2 column | 300, 300 |
| Left sidebar | 200, 400 |
| Right sidebar | 400, 200 |
| 3 columns | 200, 200, 200 |
Important Note: These column widths do not apply on mobile devices. On mobile devices, all content is displayed in a single column, stacked on top of each other.
You can change the layout type for an existing layout within the layout settings.
Adding an email layout
To add a layout, drag the type of layout you want to add from the Layouts panel on the left, then drop it where you want it to add it.
While dragging a layout over the content area, the blue line indicates a possible target destination for the layout.
You can also add a single-column layout by clicking + Add layout.
Moving an email layout
To move an existing layout, move your pointer to the left or right of the layout cell(s) then use the Move icon to drag the layout to a different location.
Duplicating an email layout
To duplicate an existing layout, move your pointer to the left or right of the layout cell(s) then click the Duplicate icon.
Deleting an email layout
To delete an existing layout, move your pointer to the left or right of the layout cell(s) then click the Delete icon.
You will be asked to confirm the deletion of the layout.
All gadgets within the layout will be deleted along with the layout.
Layout settings
To view the settings for a layout, move your pointer to the left or right of the layout cell(s) then click the Edit icon.
For each layout, you can adjust the following settings:
Setting | Description |
|---|---|
| Layout type | Allows you to switch to a different type of layout. When you switch to a layout with fewer columns, the content will be stacked within one of the remaining columns. When you switch to a layout with more columns, one or more empty columns will be added. |
| Background color | The background color of the layout. To change, click the current color then pick a color from the palette that appears, or enter a hexadecimal value for the color you want, or enter RGB values. |
| Background image | An image to be displayed as the layout background. After you click the Insert image button, you can choose a picture to be inserted from the pictures already in your account, or upload one or more new pictures then choose one of them to be inserted. For more information on inserting images, click here. Using the Repeat setting (below), you can control whether and how the image is repeated. After inserting an image, options will appear allowing you to replace or remove the image. |
| Repeat | Controls whether the background is repeated horizontally or vertically, or tiled (repeated both horizontally and vertically), or not repeated at all. |
For each column within the layout, you can adjust the following settings:
Setting | Description |
|---|---|
| Background color | The background color of the column. To change, click the current color then pick a color from the palette that appears, or enter a hexadecimal value for the color you want, or enter RGB values. |
| Padding | The amount of extra space – in pixels – that appears between the content in the column and the outer limits of the column. You can set top, bottom, left, and right padding separately. |
| Borders | Controls whether a line appears on one or more sides of the column. You can control whether a border appears separately for each side. For each border, you can control the width and control of the border, and the border style (solid, dotted, dashed, or double). |
Adding content to your message (gadgets)
To add content to your email message, you drag and drop gadgets where you want them to appear. You can drop the gadget into any cell within any layout, and add multiple gadgets to a single cell.
There are different types of gadgets for different types of content. The following gadget types are available:
- Text
- Image
- Button
- Divider
- Spacer
- Social buttons
- Custom HTML
The custom HTML gadget allows experienced users to add and format content using HTML code.
Note: We strongly advise you not to embed videos into email messages because most email readers do not support them. Instead, we suggest inserting an image of the video that links to the video. For a professional look, you can overlay a play button on your video thumbnail.
For more information on each gadget type, see below.
Adding an email gadget
To add content to your message, drag the appropriate gadget from the Gadgets panel and drop it where you want the content to appear. You can drop the gadget into any cell within any layout, even if the cell already contains a gadget.
When dragging a gadget over layout cells, the blue line indicates a possible target destination for the gadget.
Moving an email gadget
To move a gadget, hover over the gadget and use the Move icon to drag the layout to a different location.
Duplicating an email gadget
To duplicate a gadget, hover over the gadget and click the Duplicate icon.
The duplicate gadget will be placed below the original gadget within the same layout cell. You can then move it to a different layout cell.
Deleting an email gadget
To delete a gadget, hover over the gadget and click the Delete icon.
You will be asked to confirm the deletion of the gadget.
Adding text
To add text to your message, drag a text gadget from the Gadgets panel and drop it where you want the text to appear. You can drop the gadget into any cell within any layout. If the cell already has content, you can drop the gadget above or below another gadget.
You then click the text gadget and start typing. Using the options on the text editor toolbar, you can control the appearance of your text, and add links and macros. For more information on editing and formatting, see below.
You can copy and paste preformatted content, but you won't be able to tweak the underlying HTML, and the results won't be as consistent across different platforms and email readers.
Editing and formatting text
The text editor toolbar appears above the content area when you click a text gadget.
Using the options on the text editor toolbar, you can format your text, and insert links and macros. The following toolbar options are available.
Icon | Option | Description |
|---|---|---|
 | Undo | Undoes the latest editing action within the current text gadget. You can undo up to 10 of your most recent editing actions within the current text gadget, but only until you shift focus to another gadget. |
 | Redo | Redoes the latest action that you just undid within the current text gadget. You can redo up to 10 of your most recent editing actions within the current text gadget. |
 | Ordered list | Formats the currently selected paragraph(s) as a numbered list. |
 | Unordered list | Formats the currently selected paragraph(s) as a bulleted list. |
 | Indent | Indents the currently selected paragraph(s). |
 | Outdent | Reduces the ident of the currently selected paragraph(s). |
 | Left justify | Left justifies the currently selected paragraph(s). |
 | Center | Centers the currently selected paragraph(s). |
 | Right justify | Right justifies the currently selected paragraph(s). |
 | Full justify | Applies full justification to the currently selected paragraph(s). |
 | Font color | Changes the color of the currently selected text. |
 | Highlight | Changes the background color of the currently selected text. |
 | Bold | Bolds the currently selected text. |
 | Italic | Italicizes the currently selected text. |
 | Underlined | Underlines the currently selected text. |
 | Superscript | Formats the currently selected text as superscript. To view this option, click the dropdown icon beside the underline icon. |
 | Subscript | Formats the currently selected text as subscript. To view this option, click the dropdown icon beside the underline icon. |
 | Strikethrough | Crosses out the currently selected text. To view this option, click the dropdown icon beside the underline icon. |
 | Text style | Applies a text style to the currently selected paragraph(s). You can choose from the following styles: Normal, H1, H2, H3, H4. These styles are separate from the text styles defined on the Colors & styles screen. |
 | Text font | Controls the font used by the currently selected text. You can enter the font size yourself or selecting a value from the drop-down list. |
 | Font size | Controls the size of the currently selected text. |
 | Line height | Controls the vertical space (in pixels) between lines within the currently selected paragraph(s). Also known as line spacing or leading. If you select the Auto option, the default line height will be applied. |
 | Links & anchors | Allows you to link the currently selected text to an external site or email address, or to a page or event on your WildApricot site. You can also insert an anchor so that recipients can jump to a specific section within your message. For instructions on inserting links and anchors, click here. |
 | Insert macro | Inserts a macro that is replaced by specific information about the recipient or your organization. For instructions on inserting macros, click here. |
 | Insert file | Inserts a link to a file stored on your WildApricot site. For more information, see Inserting documents and files. |
 | Copy | Copies the currently selected text. |
 | Paste | Pastes content from the clipboard. When pasting formatted content, the editor will try to preserve as much of the formatting as possible, but will discard any incompatible formatting – formatting that it cannot reproduce itself. For more information, see Copying and pasting formatted content (below). |
 | Format painter | Copies formatting without copying the text itself, allowing you to apply formatting from one chunk of text to another. After you copy the formatting, you can apply the formatting to an entire paragraph by clicking within the paragraph without selecting any text, or apply it to a chunk of text by selecting the text you want to apply the formatting to. |
 | Clear formatting | Clear all character formatting – formatting applied directly to text – within the currently selected text. Does not remove the applied text style. |
Text gadget settings
Within the settings for each text gadget, you can set a background color and control padding.
To set a background color for the text gadget, click the current color setting then pick a color from the palette that appears, or enter a hexadecimal value for the color you want, or enter RGB values.
Padding is the amount of space – in pixels – that appears between the content in the gadget and the outer limits of the gadget. You can set top, bottom, left, and right padding separately.
To display the settings for a text gadget, simply click the gadget. The settings for the gadget will appear in the settings panel on the right.
Adding an image
To add an image to your message, drag an Image gadget from the Gadgets panel and drop it where you want the image to appear. You can drop the gadget into any cell within any layout. If the cell already has content, you can drop the gadget above or below another gadget.
After you've dropped the image gadget, click on it, then click the Insert image button to choose the image you want to appear.
From the window that appears, you can choose a picture to be inserted from the pictures already in your account, or upload one or more new pictures then choose one of them to be inserted.
Important Note: We strongly advise you not to paste images into the editor. Pasting copied images without saving them to your files and uploading them via the Insert image function can cause problems with your page's display.
You can navigate between folders in your account, and switch from icons view to details view, where additional file information is displayed.
Pro Tip: For optimal load times, an uploaded image should not exceed 200 KB in size.
For information on adding a background image, see Setting a background color or image (below).
Image gadget settings
Within the settings for an image gadget, you can control the image's position, width, background color, and padding, and format it as a link to an external site, an email address, or to a page or event on your WildApricot site.
If you want to link a picture to a file on your WildApricot site, you need to copy the file URL (beginning with /resources) from your Files screen before pasting it on the Insert link dialog.
To display the settings for an image gadget, simply click the gadget. The settings for the gadget will appear in the settings panel on the right.
The following settings are available for image gadgets.
Setting | Description |
|---|---|
| Insert/Remove image | Click the Insert image button to add an image. Click the Remove image button to remove the image. |
| Position | Controls where the image appears within the gadget (left, center, right). |
| Width | The width of the image. (The height of the image will be automatically adjusted to maintain the image proportions.) Regardless of the value you enter here, the actual image width will not exceed the column width. For example, if the column width is 200 pixels and you enter an image width of 300, the actual image width will be 200 (minus any padding you may have applied). |
| Link | If you want your image to be a clickable link, click the Insert link button and choose where you want the link to go. You can choose to link to an external site, an email address, or to a page or event on your WildApricot site. If you want to link a picture to a file on your WildApricot site, you need to copy the file URL (beginning with /resources) from your Files screen then paste it on the Insert link dialog. For more information on inserting and editing links, see Inserting links. |
| Image alt text | The alt (alternative) text description of the image. Alt text is displayed within the image container if the image cannot be displayed. Alt text also helps search engines understand the purpose of the image. Alt text should be short and descriptive. |
| Background color | The background color of the gadget. The background color will appear if the image has a transparent background or doesn't occupy the entire gadget. To set the background color, click the current color setting then pick a color from the palette that appears, or enter a hexadecimal value for the color you want, or enter RGB values. |
| Padding | The amount of extra space – in pixels – that appears between the image and the outer limits of the gadget. You can set top, bottom, left, and right padding separately. |
Adding a button
To add a button to your message, drag a button gadget from the Gadgets panel and drop it where you want the button to appear. You can drop the gadget into any cell within any layout. If the cell already has content, you can drop the gadget above or below another gadget.
Within the settings for the button gadget, you can control the appearance of the button and link it to an external site or email address, or to a site page or event on your WildApricot site.
To display the settings for a button gadget, simply click the gadget. The settings for the gadget will appear in the settings panel on the right.
The following settings are available for button gadgets.
Setting | Description |
|---|---|
| Insert/Edit link | Click the Insert link button to choose what the button links to, or the Edit link button to modify an existing link. You can link to an external site or email address, or to a page or event on your WildApricot site. If you want to link the button to a file on your WildApricot site, you need to copy the file URL (beginning with /resources) from your Files screen then paste it on the Insert link dialog. For more information on inserting and editing links, see Inserting links. |
| Label | The text that appears on the button. |
| Position | The position of the button within the cell (left, center, or right). |
| Font color | The color of the button label. |
| Font size | The size of the button label. |
| Font family | The font used by the button label. |
| Font style | The style of the button label (normal, bold, italic). |
| Button color | The color of the button. |
| Button roundness | The roundness of the button corners (aka border radius) in pixels. |
| Border style | Controls whether a border appears around the button, and if so, the style of the border. By default, there is no button border. To display a border around your button, choose a border style of Solid, Dotted, Dashed, or Double. |
| Border color | The color of the button border. This setting is ignored if the Border style is set to None. |
| Border size | The width of the button border. This setting is ignored if the Border style is set to None. |
| Inner padding | The space (in pixels) between the button label and the edge of the button. You can control the inner padding separately for the top, bottom, left, and right sides. |
| Background color | The background color of the gadget. The background color will appear if the image has a transparent background or doesn't occupy the entire gadget. To set the background color, click the current color setting then pick a color from the palette that appears, or enter a hexadecimal value for the color you want, or enter RGB values. |
| Padding | The amount of extra space – in pixels – that appears between the button and the outer limits of the gadget. You can set top, bottom, left, and right padding separately. |
Adding a divider
A divider is a horizontal line used to separate sections within your message.
To add a divider to your message, drag a divider gadget from the Gadgets panel and drop it where you want the button to appear. You can drop the gadget into any cell within any layout. If the cell already has content, you can drop the gadget above or below another gadget.
Within the settings for a divider gadget, you can control the line style (solid, dotted, dashed, or double), the line color, the line height, and padding.
By default, dividers are added with a top and bottom padding of 16 pixels.
Adding a spacer
A spacer is an area of blank space. You can insert a spacer to provide separation between gadgets, though you can also achieve this by adjusting the padding within gadget settings.
To add a spacer, drag a spacer gadget from the Gadgets panel and drop it where you want the space to appear. You can drop the gadget into any cell within any layout. If the cell already has content, you can drop the gadget above or below another gadget.
Within the settings for the spacer gadget, you can control the height of the blank space. The width of the blank space is controlled by the layout cell where the spacer appears.
Adding social buttons
You can add buttons to your message that link to your various social media accounts.
To add social media buttons, drag the social buttons gadget from the Gadgets panel and drop it where you want them to appear. You can drop the gadget into any cell within any layout. If the cell already has content, you can drop the gadget above or below another gadget.
Within the settings for the social buttons gadget, you can control the orientation (horizontal or vertical), horizontal alignment (left, center, right), and button size (16 to 60 pixels), and define the link for each button. As well, you can set the background color and padding for the gadget.
To define the links for each button, click Button links within the social buttons gadget settings, then edit each link to point to your social media page or site.
For example, if your association has a Facebook page, you would add your page name to the end of the Facebook URL.
Note: Button links must begin with either http:// or https://
To remove a social button, remove the corresponding URL from the Social button links dialog. Buttons with empty URLs will not appear as part of the gadget.
To change the button order, drag and drop a button within the dialog.
Embedding custom HTML in an email
You can include custom HTML in an email using the Custom HTML gadget. Navigate to Communication > Email and select Compose email.
In the email editor, drag the Custom HTML gadget from the Gadgets side panel and drop it where you want the content to appear. You can drop the gadget into any space within any layout. 
To insert your custom HTML code, click Add HTML code in the settings panel on the right side of the screen. This opens the code editor in a popup window.
In the window that appears, enter your code then click Save. Do not include iframes or JavaScript in your code. 
After you save, you'll see the rendering of your code in the spot where you placed the Custom HTML gadget.
Setting a background color or image
You can set a background color and/or background image for your entire message, or for any layout. For individual gadgets, you can set only the background color.
When you set both a background color and a background image, the background color will show through if the background image has a transparent background or doesn't occupy the entire content area.
Background images are not automatically resized to fit the area in which they appear, so you should resize your images to the column width before inserting them. The column widths for each layout type are listed here. The background image for the entire message is not limited by layouts, but by the width of the email client. Widths of 800 or 1200 pixels are typically used.
The options to set a background color or background image for layouts and gadgets appear within the layout settings and gadget settings, respectively. The options to set a background color and background image for your entire message appears within the General settings panel. To display the General settings panel, click the following icon in the upper right corner of the content area:
To set the background color, click the current color setting then pick a color from the palette that appears, or enter a hexadecimal value for the color you want, or enter RGB values.
To choose a background image, click the Insert image button within the general settings or layout settings then pick the picture to be inserted from the pictures already in your account, or upload one or more new pictures then choose one of them to be inserted.
For more information on inserting images, click here.
After you've chosen the background image, you can use the Repeat setting to control whether and how the image is repeated. You can choose to repeat the background image horizontally or vertically, or both horizontally and vertically (tiled).
To replace a background image, click the Replace image option within the general settings or layout settings. To remove the background image, click the Remove option.
Specifying a subject for your message
To specify the subject of your message, click the Recipients tab
And enter the subject in the Subject field
The subject can be a mix of characters and macros, allowing you to personalize your message with information like the recipient's name.
To insert a macro, click within the subject line where you want the macro to appear then type { within the Subject field, or click the { } at the end of the Subject field. A list of available macros appears with sample data, drawn from your own contact information, beside each macro.
The subject you enter is also used to identify the email within the email log and the list of draft emails.
Designing for mobile devices
To display your message on mobile devices, content from multi-column layouts are stacked one on top of another. The order in which content is stacked is left to right, top to bottom.
If you have multiple gadgets in the same column, those gadgets will be stacked on top of each other, followed by the content of the next column.
If you want the gadgets that appear at the top of each column to be displayed ahead of the gadgets below them, then place the gadgets from the top and bottom rows in separate layouts, rather than the same one.
Copying and pasting content
You can copy formatted or unformatted text into a text gadget.
Note: If you paste formatted content you won't be able to access its underlying HTML, and results will be less predictable than if you had assembled your email using the layouts and gadgets provided.
To paste content copied from another source, click the text gadget where you want the content to appear then press Ctrl + V on Windows or Command + V on a Mac.
When pasting formatted text, the editor will try to preserve as much of the formatting as possible, but will discard any incompatible formatting – formatting that it cannot reproduce itself.
When pasting from sources that store images using URLs – such as Google Docs, web pages, and emails – any images included in the content will get pasted. When pasting from other sources – such as Microsoft Word – images will be discarded.
Important Note: We strongly advise you not to paste images into the editor. Pasting copied images without saving them to your files and uploading them via the Insert image function can cause problems with your page's display.
To clear all character formatting – formatting applied directly to text, rather than through text styles – select the text you wanted cleared, click the More menu within the text editor toolbar and select the Clear formatting option.
To completely avoid introducing formatting issues, we suggest that you avoid copying and pasting content.
What can't you do with the email editor?
- Adjust column widths
You can add 1-column, 2-column, and 3-column layouts of equal widths, and left sidebar and right sidebar layouts with one column half the width of the other. - Insert a table
You can stack multiple layouts in any combination without using tables. If you still need to insert a table to display tabular data, you can insert the HTML for a table into a custom HTML gadget. - View the underlying HTML code for each cell
You can insert your own HTML code into a custom HTML gadget. - Wrap text around an image
You can copy and paste content with text wrapping, or insert an HTML gadget and add code to wrap text around an image. Alternatively, you could arrange text gadgets above, below, and beside an image gadget to approximate text wrapping. For details, see below.
Approximating text wrapping
The new email editor does not support text wrapping around an image, but you can approximate the effect using multi-column layouts. The steps involved are described below.
- Position a single column layout above and below a left or right sidebar layout, as shown below.
- Add text gadgets to the top and bottom layouts, and to the wider of the two sidebar layouts.
- Add an image gadget to the narrower of the two sidebar layouts.
- Add the image to the image gadget, and add the text you want to appear above, below, and beside the image.
After adjusting the padding of the various columns, you'll end up with something like this in desktop view...
... and something like this in mobile view:
