| Table of Contents | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
The new Clubessential Email Editor allows for email design flexibility offered with the convenience of a drag and drop interface. Easily create stunning emails based off of pre-designed templates, or create your own in a few easy steps. The new Clubessential Email Editor separates the concepts of the email body (settings applied to the entire message), structures (rows of the content in the message), and content (text, images, buttons, etc). These elements can be added, removed, or rearranged by simply dragging and dropping options from the content panel to the body of the email. Use Case(s) Website Admins and Editors will use the Extended New Editor when updating content and imagery in Emails. |
...
This video provides an overview of how to use the Extended Editorthe New Editor.
Note: Sections of the video have been referenced below with corresponding times in the video for ease of access
...
|
|---|
Accessing the Tool
Click to Edit: Access the Editor by clicking on any Click to Edit button on the website.
Editor Tools
The Quick Tab Toolbar and the Menu Bar of the Editor contain the main tools that will be used to edit content.
Quick Tab Toolbar
The Quick Tab Toolbar contains commonly used icons and options to format content.
Save: Sets changes live immediately.
Undo/Redo: Reverse to previous step, or re-do previous undone step. Click the small down-arrow to the right of the buttons, to see (and optionally select) a list of the latest steps to undo or redo.
Cut/Copy: Cut and Copy content within the editor.
Paste as Plain Text: Effective June 5th, 2017, Paste as Plain Text is on by default, which means that all formatting will be stripped from outside sources by default. In order to keep formatting, click the Paste as Plain Text in order to keep formatting.
Style Tags: Font options that were determined during the design phase. Apply Style Tags to change the font throughout the content.
Font Options: Additional font options that may be used.
Image Explorer: Opens the Image Explorer for adding imagery to the content area.
Insert Table: Allows for a table to be added.
Insert Hyperlink: Used to insert various hyperlinks such as: event links, article links, document links, page links, or to remove hyperlinks.
Insert Snippet: Snippets are dynamically populated based on information in the Directory and Accounting system. Snippets may be used to personalize pages (Examples: Member Name, Email Address, Minimum Left Unspent).
Format Stripper: Used to remove hidden style codes from the content.
Menu Bar
...
Page: Here we can save our work, access logs, and save drafts and templates.
Save as Draft: Save page changes for later. This will not publish the changes live, and allows the page to be worked on at a later date. Once saved, Drafts are stored (and retrievable) under Revisions.
...
...
Save as Template: Save Pages as Templates. A Template is a pre-formatted file that serves as a starting point for a new document in the future. Oftentimes, templates are used in conjunction with Email.
To save new template, name the template, click on the desired folder location to save template, and then click Save Template.
Revisions: Shows previous version of the page changes. May be used to load an older version of content to the page. This is where we access Drafts and Logs after we Save as Draft.
Format: Alternate ways to address font styling.
Tables: Different Options for working within tables.
Adding Content
Inserting Content
Content can be added by directly typing into the editor, or by copying from an outside source and pasting into the editor. If copying from another source, please use the Paste as Plain Text function as detailed below.
Copy content from another source like Word by highlighting the text and using CONTROL + C to Copy.
Once the content is in the Editor, highlight the text and apply various Style Tags as needed.
...
Heading 1: typically used for Page Titles
...
Heading 2-6: used for various sub-headings
Normal: used main body text
...
Inserting Images
Images must first be uploaded to the Image Explorer before they can be used on the website.
Access the Image Explorer from the Quick Tab Toolbar or from the Menu Bar under Insert > Image.
Quick Tab Tool Bar
Menu Bar
Choose the Folder in which your image is located.
- Double click on the Image Name to Insert onto page.
Styling Images
Add styling Images such as wrap text and padding.
Right click on the Image > Image Properties
Choose Text Alignment to have content wrap around the image.
Add Padding to create space between the image and content.
Common Padding Sizes: 5px, 10px, 15px, 20px.
Below, we can see we have space, or Padding, between the image and the content.
Inserting Tables
...
Click on the Table function from the Quick Tab Toolbar, or use the Menu Bar, Insert > Table
Quick Tab Toolbar
Menu Bar
Choose the amount of rows and columns for the table and the table will automatically be inserted on the page.
Click mouse inside cell of inserted table and start typing. Cell will expand.
Styling Tables
Right click on the inserted table, and choose Table Properties.
Apply styling to the Table or Cells.
Adjust Table Width or Height by adding a percentage or pixels.
It is best to not assign a height as the table will grow with the amount of content
It is best to assign a 100% width to the table so it spans the full content area.
- Adjust Cell Width or Height by adding a percentage or pixels
- Useful when wanting each cell to have a fixed width or height
- Apply content position to the table.
- Apply content position to the cells.
- Apply padding to cells using the Style Builder option.
Save/Publish Content
When finished editing, click Save to publish changes and exit the Editor.
FAQs
Q: I copied content into the editor, but the font does not match the styling of the website font.
A: Be sure to use the Paste as Plain Text function when copying font from an outside source. Copying from another source will copy over the font styling from the outside source. Once you use the Paste as Plain Text, you can then use the Style Tags to apply the appropriate font designated for the site design.
Q: What is the best way to format a list of names or contact information on a page?
A: An easy way to style names or contact information using multiple columns is by using tables. This way, the information can line up properly by applying styling to cells, rows, or columns.
Q: I need to add an image to my page, how do I add it?
A: First, the image must be added to the Image Explorer. After the image in in the Image Explorer, you can then use the Insert > Image function in the editor which will access your library database from the Image Explorer.
Best Practices
When copying content from an outside source, always use the Paste as Plain Text function to strip outside formatting. This will ensure that the proper pre-defined font options are applied to the content.
Using additional font options is not recommended as it is best to streamline content font. It is best to only use the Style Tags option.
Resize and Crop Images prior to using imagery on the website to ensure the proper dimensions rather than resizing on the page.
Remember to Save after edits are made or edits may be lost. Once Saved, the changes will publish live.
Downloadable Guide
...
To create an email using the new email editor, begin by clicking the “Click to Edit - New” button on the email compose screen:
Working With Templates
When you first access the new Clubessential Email Editor, you will be taken to the Template Manager. This allows you to quickly start an email from a template.
The all-new template manager functions as a repository for all of your new editor email templates, and you can save and categorize all of your templates.
We’ve also provided a number of themed templates for newsletters, events, and more. You can change the logos and colors on these messages to match your brand to quickly and easily compose a great looking message.
Once you’ve chosen a template, you can easily edit content, images, and hyperlinks within the template.
Composing an Email
To begin formatting your email, choose your desired content options by dragging them to the center of the content panel.
Body
The Body of the email is the foundation, by which general settings are applied and inherited by the structure and content blocks. For example, if you choose a certain font within the message settings on the Body tab, then all content will inherit the exact same font type.
NOTE: While the new Clubessential Email Editor offers the flexibility of customizing your email design, it is important to keep consistency with your designs that reflect the branding for your private club. To access your branding guide for specifications on font and colors, hover over Admin > Click on Style Guide.
Structure
The Rows tab is where you can determine the types of rows you would like to add to the message. The rows will hold various content types within it. Using the row options, easily create one column, two columns, and various sized columns for the body of the email.
Every row will have its own settings, which allows for flexibility in your design. For example, you can select a background color for the entire row, just the message area, or a specific column within it.
Content
The content tab is where you will add various content elements to the structure. Drag and drop your content options, like text, images, a button, etc. to your structure and then you can begin editing.
Images
All images used with the new Clubessential Email Editor will be separate from the Image Explorer from the website. Once an image block is added, you can add images by clicking “Browse” or by simply dragging images from your computer to the image block.
Message Preview
Preview your messages before sending them out with the Message Preview feature. This will allow you to see how the email will display on mobile and on a desktop. Click Actions > Preview.
Saving the Message
Once your email is composed, you can click the save button at the top right and continue to send the email as you would with the old editor.
NOTE: It is very important that once you have created an email in the new email editor that you DO NOT edit the contents with the old email editor, as the content will behave unpredictably. Likewise, inserting HTML content from old email editor templates into the new editor is not recommended.
Saving Templates
To save your email as a template for future use, use the “Save as Template” option under the Actions menu at the top left.
While the template functionality has changed, you can still save your email as a draft as you would have with the old editor.