Editor Tab – ClubReady

The email Editor Tab is organized into three main sections, Element, Style, and Layer, each offering specific tools to create professional, branded emails. The Element section provides drag-and-drop content blocks like text, images, dividers, and social media icons, while the Style section controls your email's overall appearance including colors, fonts, buttons, and layout dimensions. The Layer section allows you to manage and modify the various content tiles you've added to your email, adjusting their arrangement and properties as needed. Together, these sections give you complete control over both the content and design of your email templates.

Before You Begin

Make sure you have the following before getting started:

Permissions required:
- Club Setup: Can Access Setup
- Club Setup: Can Access Email Templates Setup
Access path: Navigate to Setup > Communications > Email Templates, select a template, and click the Editor tab.

Current Limitations:

Full-template HTML export is not currently available in the email editor. HTML source code can only be accessed on a per-section basis. If you need to copy a complete email template, you will need to extract the source code from each section individually.
At this time, the behavior of Text & Headings settings may not always produce a visible change in the canvas; particularly in templates where individual block-level formatting is already present or in templates converted from HTML.
The Image content block has limited editing capabilities and is not highly dynamic within the editor. Images should be preconfigured to meet your needs prior to upload, as extensive in-editor adjustments are not currently supported. Use the Image content block to drag and drop your preconfigured image into the template. Learn more about adding an image with our help article: How-to: Add an Image to an Email Template in ClubReady.

Element

Content

Drag and drop the content type tile onto your editing workspace.

Content Block	Description
Text	A text block with options to edit fonts, dimensions, typography, and formatting.
Image	An image block with settings for image selection, dimensions, border, block layout, and button options.
Divider	Creates a dividing bar with options to edit height, dimensions, alignment, and color.
Spacer	Creates a spacer with options to edit height and color.
Navbar	A navigation bar typically displayed at the top of the email, allowing you to link to sections such as Home, About, and Contact.
Social	Displays social media icons linked to your preconfigured accounts as specified in your General Communication Settings.

Text Toolbar

The Text toolbar gives you quick access to the formatting and editing tools. Use it to adjust text style, size, and alignment, insert images or links, add lists, and more. Simply click on the Text element section for the text or content you want to change, then click the appropriate option on the toolbar to apply it. This toolbar is only available for the Text element.

Text Toolbar Option	Description
Link	Inserts a clickable hyperlink into your email that directs readers to an external webpage, a specific URL, or a resource outside of ClubReady.
Image	Inserts a photo or graphic into your email by selecting from your content library or dragging and dropping a file directly into the editor. Accepted file formats are .jpg, .jpeg, .png, and .gif.
Merge Tags	Dynamic placeholders that automatically pull real information from ClubReady, such as a member's name, membership details, or PIN code, and insert it into the email at the time it is sent. Use the Merge Tags option to browse and insert available tags directly into your template.

Layout

The Layout selection offers preconfigured sections with their percentage allocations in the library option, making it easier for you to insert and create subsections of your content.

Style

Email Settings

Setting	Description
Template Background	Sets the outer background color that frames your email.
Content Background	Sets the background color for your main message area.
Width	Controls how wide your email displays. A width of 600px is recommended for optimal viewing across mobile and desktop.
Margin Top/Bottom	Adds spacing above and below your content for better readability.

Text & Headings

The Text & Headings settings control the global typography defaults for your email template, including font family, size, and color for body text and heading levels (H1–H3). These settings are intended to establish baseline styling across the template rather than override formatting that has been applied individually to specific content blocks.

Please Note: If you have already applied custom formatting directly to a text block (such as a specific font size or color), those block-level settings will take precedence over the global defaults set here. Changes made in Text & Headings are best applied before formatting individual content blocks, or when building a template from scratch, to ensure consistent styling throughout.

Setting	What It Controls
Paragraph, H1, H2, H3	Global default styles for each text type.
Font	Default typeface applied across the template.
Size	Default font size for each text level.
Color	Default text color across the template.
Line Height	Default spacing between lines of text.
Style	Default formatting such as bold, italic, or underline.
Letter Spacing	Default spacing between individual characters.
Align	Default text alignment.
Padding	Default internal spacing around text elements.

Buttons

Setting	Description
Font	Sets the typeface for button text.
Style	Applies formatting such as bold, italic, or underline to button text.
Text Color	Sets the color of the text that appears on the button.
Button Color	Sets the background color of the button itself.
Font Size	Controls how large or small the button text appears.
Line Height	Controls spacing between lines when button text wraps to multiple lines.
Letter Spacing	Adjusts spacing between individual characters.
Padding	Adds internal space around the text to make buttons larger and easier to click.

Links

Setting	Description
Color	Sets the color that links display as throughout your email, typically your brand color or a standard link blue.
Style	Applies formatting such as bold, italic, or underline to make links stand out within your content.

Web Fonts

Setting	Description
Custom Font	Enables the use of a custom font by providing its web font details.
Font Name	The exact name of the custom font to be applied (e.g., "Montserrat", "Open Sans").
Font Address	The URL where the font file is hosted, typically a Google Fonts link or a hosted font file on your own web server.

Layer

The Layer panel gives you a structural overview of everything in your email template, displayed as a hierarchy of sections, columns, and content blocks. Rather than clicking directly on elements in the canvas, you can use the Layer panel to navigate, select, and reorganize your content; which is especially useful in more complex templates.

What You Can Do in the Layer Panel

Capability	Description
Navigate and select content blocks	Click any item in the Layer panel to instantly highlight and select it in the canvas, without having to click directly on it in the editor. Particularly helpful when elements are small, overlapping, or difficult to click on.
Understand your email structure	The Layer panel displays your full email hierarchy (sections → columns → blocks) at a glance, making it easier to understand how your content is nested and organized without scrolling through the canvas.
Select hard-to-reach elements	If a block is nested inside another block, very small, or sitting behind another element, selecting it from the Layer panel is often the easiest way to access it.
Reorder content	Use the drag and drop functionality within the Layer panel to rearrange sections and content blocks without manipulating them directly on the canvas.

A Note on Usability in Converted Templates

If your email template was built from an existing template or converted from HTML, the Layer panel may not always reflect a clean or intuitive hierarchy. In these cases, element names may be generic, nesting may appear inconsistent, and drag and drop reordering may not behave as expected. If you find the Layer panel difficult to navigate in a converted template, the following approaches may help:

Work directly on the canvas for simple edits where elements are easy to select.
Use the Layer panel selectively; for example, to identify where a specific block sits in the structure, even if reordering via the panel is not practical.
For significant structural changes to converted templates, rebuilding the affected section from scratch using the Element and Layout tools may produce more predictable results than attempting to reorganize via the Layer panel.

Editor Toolbar Options

Icon	Button	Description
Monitor icon	Desktop	Switches the editor view to show how your email will display on desktop screens.
Phone icon	Mobile	Switches the editor view to show how your email will display on mobile devices.
Trash/bin icon	Delete	Removes the selected content block, section, or template item.
Eye icon	Preview	Opens a preview of how your email will appear to recipients.

Frequently Asked Questions

Q: Can I export the full HTML for my entire email template?
A: Not at this time. HTML source code can only be accessed on a per-section basis in the current editor. If you need to copy a complete template, you will need to extract and combine the source code from each section individually. This is a known limitation, and the article will be updated if full-template export becomes available.

Q: I changed the font and color settings under Text & Headings, but nothing changed in my email. Why?
A: This is a known limitation. Text & Headings settings are intended to apply global typography defaults, but they may not always produce a visible change; especially if individual content blocks already have their own formatting applied, or if the template was converted from HTML. Block-level formatting will generally take precedence over these global settings.

Q: Why isn't the Layer panel reflecting a clean structure for my template?
A: If your template was built from an existing template or converted from HTML, the Layer panel may not always display an intuitive hierarchy. Element names may appear generic, and drag and drop reordering may not behave as expected. In these cases, it's often easier to work directly on the canvas, or to rebuild the affected section using the Element and Layout tools for more predictable results.

Q: What's the easiest way to select a content block that's hard to click on in the canvas?
A: Use the Layer panel. If a block is nested inside another block, very small, or overlapping with other content, selecting it from the Layer panel is typically more reliable than trying to click it directly in the canvas.

Q: Can I use the Layer panel to reorganize my email layout?
A: Yes, in most cases. The Layer panel supports drag and drop functionality, allowing you to rearrange sections and content blocks without manipulating them directly on the canvas. Keep in mind that this functionality may be less reliable in templates converted from existing or HTML-based templates, where structure may not be as clean.

Q: Can I crop, resize, or edit my image directly within the email editor?
A: You can adjust certain layout properties for an image within the editor, such as dimension (width, fixed or full width, height) and padding (top/bottom, left/right). However, the Image content block does not support more advanced editing such as cropping, filters, or other modifications to the image itself. Images should be preconfigured to meet your needs before uploading, then added to your template using the Image content block's drag and drop functionality. For step-by-step guidance, see How-to: Add an Image to an Email Template in ClubReady.