Content Blocks
Content Blocks will be used to create the content in the email design. Existing blocks from a template can be edited or new ones can be added on to the canvas. After a content block has been added to the canvas and selected, each block will have its own set of properties to be customized.
If the new campaign was created using the Start from Blank option, remember a Row must be dragged and dropped on to the canvas before a content block could be added.
How to Add a Content Block
- Assuming a campaign is already created.
- Log in to website and access Email Marketing Module.
- Select Email Campaigns from the left navigation.
- Select checkbox next to the campaign name and click Edit button from Action Bar.
- If the name of the campaign was clicked on instead of using the checkbox, the Email Campaigns overview will display.
- Click Edit button from the Action Bar or on the right, click Edit Email Design.
- If a campaign has a Sent status, the Edit Email Design link will be disabled
- Within the Edit HTML window, the Content tab on the right should be selected by default.
- Click and Drag the desired content block onto the canvas on the left.
- Drop the content block in to a row or column on the canvas.
Select the Content Block for more details
-
Text, merge fields and hyperlinks can be added using this content block.
-
Images can either be uploaded into the Media Library, or pulled in with a URL. They could also be linked with a hyperlink.
-
Image and Text to be added within the same content block. The image could be linked with a hyperlink.
-
Option to add two to four placeholder images that can either be uploaded into the Media Library, or pulled in with a URL. The image could be linked with a hyperlink.
-
Include a YouTube or Vimeo video link in the email. Please note - Videos cannot be embedded in an email.
-
Inserts a call-to-action button that will be hyperlinked.
-
Inserts a horizontal divider in the message.
-
Adds linkable social media icons.
-
Inserts a block of HTML code. When working with the HTML blocks, moderate degree of coding knowledge will be required to use this block.
-
Add RSS content to an email, such as a blog feed.
Text Content Block
The text content block could be used to add text, merge fields and hyperlinks. Each Text Block has Text properties and a separate content editor tool bar will display across the top to create custom content. Text can be entered manually or copied from another source such as a Word document. However, when text is pasted it could include hidden code and the formatting may change based on the defaults set up in the Theme section of the email marketing module. After the content has been pasted, all the formatting that was applied in Word could be removed and the text could be formatted appropriately using the tools below to customize the email design.
Text Properties
Each text content block will have its own set of Text properties. Select the text content block and in the right pane the Text Properties will display. Click the x beside text properties, if changes are no longer required in the text content block.
- Link Color - Color for hyperlinks in this content block.
- Background Color - Color for the text content block.
- Spacing - Top, bottom, left and right padding can be adjusted.
- Convert to HTML - Converts all the styling that has been applied to this content block into HTML code. Once it is converted, the properties to edit the styling will no longer be available. The content block is now a HTML content block and changes will have to be made in code in the HTML Properties.
Content Editor Toolbar
The Content Editor toolbar will display across the top of the campaign when a text content block is selected.
- Format - Assign predefined Text color, size and font for heading tags and body text from Theme tab.
- Font - There are different types of fonts available to choose from. Custom fonts cannot be added.
- Font Size - Customize the font size using options in drop-down or type font size to be applied.
- Line Height - It is the vertical distance between different lines of text. It is set as Default but it can be customized using options in drop-down or type line height to be applied.
- Font Color - To change the font color, simply click on the font color A icon. Choose from a variety of colors or add a hex code for the color.
- Text Highlight Color - Changes the background color for the text selected. Choose from a variety of colors or add a hex code for the color.
- Bold - Add bold style to the selected text, by clicking B icon.
- Italics - Add Italics style to the selected text, by clicking I icon.
- Underline - Add underline style to the selected text, by clicking U with underline.
- Strikethrough - Make text display with a strikethrough line across the text horizontally, by clicking the S with a line across the middle.
- Superscript and Subscript - Add a superscript and subscript by selecting the text and choosing the superscript and subscript options.
- Numbering - Add a numbered list to email by selecting the text and choosing this option.
- Bullets - Add bullet points to email by selecting the text and choosing this option.
- Text Alignment - Aligning the text to center, left, right or justified is easily possible by selecting the text and choosing the alignment option.
- Hyperlink - To add a link, highlight the text and go to the chain-link icon.
- Remove Link - Remove the link by selecting the text with the link in it and then click on the Remove link icon.
- Remove Formatting - While copying from an external source, the external formatting comes with it. It will lead to an inconsistent rendering of text in the email. To remove external formatting, highlight the text and click on T with strikethrough icon to Remove Formatting.
- Merge Fields - option to personalize email using contact field information.
Merge Fields
Email designs can be personalized for individual recipients, which tends to increase response rates for email campaigns. A personalized greeting, such as "Hi Jonas" is friendlier and inviting than a generic greeting. Personalization could be created using merge fields in the email marketing module, where the merge field is found in the square brackets. Each merge field represents one contact field.
For example Hi [Contact.First Name], could be included in the email design and the information in the first name field, will substitute the square brackets when the email is sent as part of the greeting.
- Possible outcomes when using the First Name field as the merge code [Contact.First Name]
- First name field = Jonas, the email would be sent as Dear Jonas.
- First name field = empty, the email would be sent as Dear.
Add Merge Fields
- On the left click on the Text content block.
- The content editor tool bar should appear across the top.
- Place cursor where the merge field should be added.
- Click [ ] square bracket icon from the content editor tool bar, the drop-down will display fields to select from.
- Select field from list to be used as merge field. The field selected will be added to the text content block in between square brackets.
- Remember to add comma or any punctuation after the merge field.
- If the wrong field was selected, delete the merge field code including the square brackets.
- Repeat steps 3 - 6.
After adding a merge field to the email design, click
Preview & Test button found at the top right, to see the fields substituted with different values when the email campaign is sent.
More details on previewing merge fields.
Hyperlinks
Hyperlinks could be used to show contacts additional information that is on a website, file or make it easier for them to contact the club with an email or phone number link. These links are usually added into an email campaign using the Text content block. Hyperlinks could also be set up using the Button or Image content blocks.
Add a Hyperlink
- On the left click on the Text content block.
- The content editor tool bar should appear across the top.
- Type and select text to be hyperlinked.
- Click chain link icon from the content editor tool bar.
- In the dialog box, select from the following options:
- Link Type: Select from the drop-down. The information to complete the link will vary depending on which options is selected.
- URL
- Type or paste in the link that contacts should be redirected to.
- It is recommended to use the full URL format, such as: http://www.clubname.com
- The link will provide access to related, publicly accessible link destinations, such as a website, online document, or an online video.
- Both HTML and plain text email designs can contain URL links.
- Email Address
- Email Address: Type in email address to be prepopulated in To field when link is selected.
- Message Subject: Optional to have subject line prepopulated.
- Message Body: Optional to have content in the message body prepopulated.
- When the recipient clicks on the link, it will launch or prompt to launch their local email client, the email address, subject and body of the message would be prepopulated.
- Phone Number
- Phone Number: type in phone number to be accessed through mobile device using phone dialer.
- Link a PDF or Image
- File Upload Choose button - select file or image to be opened in a browser when the link is selected.
- When a PDF is included in an email campaign, it will appear in the form of a hyperlink rather than an attachment to the campaign. This format is utilized to reduce the overall size of the campaign in order to prevent truncation that can occur with larger campaigns. In other words, contacts seeing the campaign cut off.
- Tool Tip Text
- (Optional) Identifies the text is linked and what it is about or even provide simple instructions such as Sign Up Today.
- Depending on the email interface, the tooltip may appear when a recipient hovers over the link.
- For example, the tooltip will not display for outlook users.
- Only works for text links, they do not appear on hover for image or button links.
- Track Links
- By default, links are tracked in Campaigner. To track which links contacts are selecting within the campaign.
- Click the toggle to disable track links.
- Reporting Name
- After the URL, email, phone or file has been added in the previous fields, the Reporting name will be added automatically.
- The reporting name can be renamed to make it more suitable for reporting purposes. To identify which link was selected instead of the entire URL in the report.
- Type the new name in the Reporting Name box.
- Click Save, to complete the hyperlink.
After adding a hyperlink to the email design, click
Preview & Test button found at the top right, to test the tool tip and make sure the hyperlink is redirecting correctly.
More details on testing hyperlinks.
Link is created and added into the Text Content Block. The styling of the link could be edited.
Reminder the color could be set on different levels:
- Theme tab, the color and whether links should be underlined.
- Text content block using the Text Properties, the color could be changed for a specific Text content block.
- Text content block using the content editor, the color could be changed for a specific link selected.
Edit Hyperlink
To make changes to the link, use the same steps to create the hyperlink, using the chain link icon from the content editor tool bar.
- Select text to be hyperlinked.
- Click chain link icon from the content editor tool bar.
- In the dialog box, make changes
- Click Save, to complete the hyperlink.
- Remember to click Preview & Test button found at the top right, to test the tool tip and make sure the hyperlink is redirecting correctly. More details on testing hyperlinks.
Remove Link
When a hyperlink is no longer needed. The chain link with an x icon could be used or simply delete the text from the text content block.
- Select text to be hyperlinked.
- Click chain link with a x (Remove) icon from the content editor tool bar.
- The link will be removed immediately.
- If this was done error use the undo arrow or press CTRL - Z on keyboard to undo.
Image Content Block
Images are usually added into an email campaign using the Image Content Block. There are two other content blocks that could be used and they are Caption and Collage. Images can be uploaded into the Media Library directly or using an image URL. They could be uploaded ahead of time or while the campaign is being edited. After an image is added, it is recommended that the alternate text be added within the image properties for each image. It is optional to add a hyperlink to each image.
Choose or Change an Existing Image
- On the left click on the image content block.
- On the right, the Image Properties will display.
- Beside Select an Image, click on one of these options:
- Choose an image if there's no image. The Select an image dialog box will display.
- Change select a different image to replace a placeholder or existing image. The Select an image dialog box will display.
- In the Select an image dialog box, the Media folder will be selected by default with images already uploaded to the email marketing module.
- On the left, double-click Media folder to view and select subfolder(s).
- On the right additional folders or images will display. Use the vertical scroll bar to see additional images.
- 3 view modes:
- List View
-
Thumbnail View
-
Displays thumbnail of image and name of image
-
Hover over thumbnail of image and Select button will display, click Select to add image to canvas.
-
4 squares icon will display - click to switch to Large Thumbnail view.
-
3 dots - click to access
-
Delete
-
move to another folder
-
Edit image
-
Large Thumbnail View
-
Displays thumbnail of image, name of image, last modified date and time and files size.
-
Hover over thumbnail of image and Select button will display, click Select to add image to canvas.
-
3 bullet points icon will display - click to switch to List view.
-
3 dots - click to access
-
Edit image
-
move to another folder
-
Delete
To Add New Image
It is recommended that images be edited, cropped, resized and renamed, using any photo editor tool, before uploading into the email marketing media library.
-
In the Select an image dialog box, select folder for image to be added to.
-
Click
Upload button at the top right, to find and upload image from computer.
-
At the top in a green box "1 file uploaded successfully" message will display temporarily on screen.
-
Image should display in folder selected. If it doesn't, click a different folder and then the correct folder and image should appear.
-
Hover over thumbnail of new image added and click
Select to add image to canvas.
Edit an Image
This allows the image to be edited using editing tools within the email marketing module.
-
On the left click on the image content block.
-
On the right, the Image Properties will display.
-
Beside Select an Image, click on one of these options:
-
In the Edit image dialog box, the image will be displayed in the middle with 5 options choose from.
-
Transform - change size of image.
-
Filters - change color filters including making an image black and white.
-
Adjust - brightness, saturation, contrast, gamma, clarity, exposure, shadows and highlights.
-
Text - add text to overlay on top of image, font, size and color of text can be edited.
-
Focus - determine a section of the image to be focused, where as the other areas will be blurred out.
-
Click Undo to revert changes.
-
Click Save as Copy to save edits with a new file name for the image.
-
Click Save Edits to overwrite the original image uploaded into the media library with new changes made.
-
Click X in the Edit image dialog box, to exit without saving any changes.
Delete an Image
-
On the left click on the image content block.
-
On the right, the Image Properties will display.
-
Beside Select an Image, click on one of these options:
-
In the Select an image dialog box, the Media folder will be selected by default with images already uploaded to the email marketing module.
-
On the left, double-click Media folder to view and select subfolder(s).
-
On the right additional folders or images will display. Use the vertical scroll bar to see additional images.
-
Click 3 dots for the image
-
Select Delete.
-
Image is deleted from Media Library and no longer accessible.
Image URL
If the administrator does not have the image on their computer but it has already been uploaded to the ClubHouse Online website Media Libraries, the Image URL option can be used to insert the image in to the email campaign.
-
Login to the ClubHouse online website as usual.
-
Click Planet icon in top left to open Application List.
-
Select Content Management.
-
Select Media Libraries.
-
Click Pencil icon beside Site Media
-
Find folder that has image and click on the image.
-
File tab - Click on
permanent link and it will open in a new browser tab.
-
Copy the entire link URL from the address bar.
-
Go back to the Email Marketing program and access the campaign to edit HTML.
-
Paste into Image URL field in Image Properties.
Alternate Text
Alternate Text, could display as tooltips for users who disable image displays in email interfaces. Depending on the email interface, the alternate text may appear when a recipient hovers the cursor over the image placeholder, providing a user-friendly description of the missing image. By default, the file name of the image is used if alternate text was not manually entered. The alternate text could also be used by speech readers to describe images.
- On the left click on the image content block.
- On the right, the Image Properties will display.
- Under Alternate Text, type in a description for the image.
- Preview & Test mode could be used to test the alternate text.
- Remember the alternate text may not work on all email interfaces.
Link (Optional)
After an image has been added to an email campaign, it is optional to link the image to a URL, email address or even a PDF.
-
On the left click on the image content block.
-
On the right, the Image Properties will display.
-
Under Link (Optional), click Add Link button.
-
- Default Size - Toggle off and the image width slider will appear.
- Image Width - Adjust image width within a column.
- Image Alignment - Choose from left, center and right alignment within a column.
- Border Style - If a border is added, determine the color, thickness and type of border.
- Spacing - Top, bottom, left and right padding.
- Convert to HTML - Converts all the styling that has been applied to this content block into HTML code. Once it is converted, the properties to edit the styling will no longer be available. The content block is now a HTML content block and changes will have to be made in code in the HTML Properties.
Button Content Block
When a club wants to encourage contacts to view or do something, Example" Register Today". A call to action, which is a word or phrase that prompts action can be created using a button or text link. Buttons could be added to an email so the hyperlinks aren't overlooked as text links. Depending on the email interface, the button corner rounding option may not display, as a result they will view it as a rectangular button.
- On the left click on the button content block.
- On the right, the Button Properties will display.
- Button Text - Enter the call to action text to display on the button.
- Button Link - click Add Link button.
- Button color, text font and size could be edited.
- Button Corner Rounding: determine if the corners should be rounded or not using the slider or type in a number between 0 - 30.
- 0 = rectangle, 30 = pill shape
- Corner rounding may not work on all email interfaces. As a result contacts will view it as a rectangular button.
- Border Style - If a border is added, determine the color, thickness and type of border.
- Button Alignment - Choose from left, center and right alignment within a column.
- Default Size - Toggle off and the button width slider will appear.
- Button Width - Adjust button width within a column.
- Spacing - Top, bottom, left and right padding.
- Convert to HTML - Converts all the styling that has been applied to this content block into HTML code. Once it is converted, the properties to edit the styling will no longer be available. The content block is now a HTML content block and changes will have to be made in code in the HTML Properties.
Image below is showing the button properties for Register Today button. Dining Menu button has no border, and button corner rounding set to the max 30.
Video Content Block
In the body of the email campaign a still frame image with a hyperlink to a video could be added. Videos cannot be embedded in an email.
- The video first has to be uploaded to YouTube or Vimeo.
- After it has been uploaded, copy the video link from YouTube or Vimeo and paste it into the Video URL section of the video content block in the email marketing module.
- On the left click on the Video content block.
- On the right, the Video Properties will display.
- Video URL - Paste in a YouTube or Vimeo link here.
- Video links will open and play in a new tab.
- The video thumbnail will automatically be added to the email campaign.
- Under Alternate Text, type in a description for the thumbnail or the video in case the thumbnail image does not load.
- Default Size - Toggle off and the button width slider will appear.
- Video Width - Adjust image of thumbnail width within a column.
- Video Alignment - Choose from left, center and right alignment within a column.
- Border Style - If a border is added, determine the color, thickness and type of border.
- Spacing - Top, bottom, left and right padding.
- Convert to HTML - Converts all the styling that has been applied to this content block into HTML code. Once it is converted, the properties to edit the styling will no longer be available. The content block is now a HTML content block and changes will have to be made in code in the HTML Properties.
Divider
Inserts a horizontal divider line into any column in the email campaign.
- On the left click on the Divider content block.
- On the right, the Divider Properties will display.
- Line Style - Determine the color, thickness and type of line.
- Line Width - Adjust width of line within a column.
- Spacing - Top and bottom padding.
- Convert to HTML - Converts all the styling that has been applied to this content block into HTML code. Once it is converted, the properties to edit the styling will no longer be available. The content block is now a HTML content block and changes will have to be made in code in the HTML Properties.
HTML Content Block
Instead of adding text, images, buttons etc... manually using the various content blocks, a section or the entire email can be created by inserting a block of HTML code that was generated from another program. When working with the HTML blocks, moderate degree of coding knowledge will be required to use this block. If there are any errors with the code the Web Support team will not be troubleshooting the html code.
- On the left click on the HTML content block.
- On the right, the HTML Properties will display.
- Copy the HTML code from the other program and paste into the box provided.
- The content should appear on the left in the email campaign.
Caption Content Block
Caption combines the options found in a Text and Image content block into one. Instead of moving the content blocks around to redesign the look of the email, caption properties could easily be used to change the layout along with a few extra properties. Images can be uploaded into the Media Library directly or using an image URL. They could be uploaded ahead of time or while the campaign is being edited. After an image is added, it is recommended that the alternate text be added within the image properties for each image. It is optional to add a hyperlink to each image.
- On the left click on the Caption content block.
- On the right, the Caption Properties will display.
- Layout Properties
- Layout - Decide whether the image should be on the left, right top or bottom.
- Image Stacking - this option only appears if the left or right layout is selected and affects mobile view.
- Disabled - image and text will appear beside each other on one row, even in mobile view.
- Enabled - image will display stacked above or below the text on its own row in mobile view, depending if the left or right layout was selected.
- Width - use the slider to determine how much width the image is going to take 25, 40, 50, 60 or 75% of the content block.
- Vertical Alignment - should the text be aligned top, center or bottom.
- Border Style - Determine the color, thickness and type of line for the border.
- Image Properties
- Select an image - click Choose if image has not been added or change, edit, remove to update image, follow Add New Image instructions from Image Content Block.
- Image URL - use this to add image if it is not uploaded to the Email Marketing media library. Follow Image URL instruction.
- Alternate Text - type in a description for the image in the even the image doesn't load or to be used with speech readers.
- Link(Optional) - click Add Link button.
- Default Size - Toggle off and the image width slider will appear.
- Image Width - Adjust image width within a column.
- Background Color - select background color for image, this will only display if image width is not set to 100 or spacing is not set to zero.
- Image Alignment - Choose from left, center and right alignment within a column.
- Border Style - If a border is added, determine the color, thickness and type of border.
- Spacing: Top, bottom, left and right padding.
- Text Properties
- Link Color - color for hyperlinks in this content block.
- Background Color - Color for the text content block.
- Spacing - Top, bottom, left and right padding can be adjusted.
- Convert to HTML - Converts all the styling that has been applied to this content block into HTML code. Once it is converted, the properties to edit the styling will no longer be available. The content block is now a HTML content block and changes will have to be made in code in the HTML Properties.
Social Content Block
Adds linkable social media icons. The logo for each of the services are already pretty set and cannot be changed. Select the service, enter the url link and decide on a few styling options.
- On the left click on the Social content block.
- On the right, the Social Properties will display.
- Services - By default Facebook and X services will already be added. Select the pencil or trashcan icon beside each service to make changes.
- Pencil icon - Reveals the options to update information for the service.
- URL - Enter the clubs Facebook URL.
- Alt Text - Enter alternate text.
- Click Done to save changes
- Click Cancel and Facebook service options will collapse.
- Trashcan icon - Remove service from the email campaign.
- Reorder Services - After all the services have been added, the order they appear can be changed.
- Ensure each service is collapsed, and then click and drag to reorder.
- Add Service - drop-down lists social services to choose from. Facebook, X, LinkedIn, Instagram, Pinterest, YouTube, Snapchat, Email Address and Website.
- Select the service and click + to the right of the service.
- It will be added to the services list and the email campaign on the left.
- Size - Select icon size to be displayed, small, medium or large.
- Orientation - Select how icons should be displayed, horizontal or vertical.
- Alignment - Select how icons should display in a column, left center or right.
- Color - Select from color, black or white.
- Transparent Background - enable or disable the background.
- Spacing - Top, bottom, left and right padding can be adjusted.
- Convert to HTML - Converts all the styling that has been applied to this content block into HTML code. Once it is converted, the properties to edit the styling will no longer be available. The content block is now a HTML content block and changes will have to be made in code in the HTML Properties.
Collage Content Block
Option to add two to four images to create a collage, when 3 or 4 images are selected there are layout types to choose from.
Images can be uploaded into the Media Library directly or using an image URL. They could be uploaded ahead of time or while the campaign is being edited. After an image is added, it is recommended that the alternate text be added within the image properties for each image. It is optional to add a hyperlink to each image.
- On the left click on the Caption content block.
- On the right, the Caption Properties will display.
- Layout - Decide how many images to have in the collage, 2, 3 or 4
- Layout Type - Only appears when 3 or 4 images are selected from layout. Select layout type to use. which
- Image Stacking - this option affects mobile view.
- Enabled - images will be stacked below each image on its own row in mobile view.
- Disabled - image will display as per the layout type selected, even in mobile view.
- Spacing: Bottom padding.
- Image Properties
- Click pencil icon beside image # to make edits.
- A thumbnail with a solid black square represents which image is going to be edited.
- The image properties will expand to edit one image at a time.
- Select an image - click Choose if image has not been added or change, edit, remove to update image, follow Add New Image instructions from Image Content Block.
- Image URL - use this to add image if it is not uploaded to the Email Marketing media library. Follow Image URL instruction.
- Border Style - If a border is added, determine the color, thickness and type of border.
- Alternate Text - type in a description for the image in the even the image doesn't load or to be used with speech readers.
- Link (Optional) - click Add Link button.
- Reorder Images - After all the images services have been added, the order they appear can be changed.
- Ensure each service is collapsed, and then click and drag to reorder.
- Spacing: Top, bottom, left and right padding for the entire collage.
- Convert to HTML - Converts all the styling that has been applied to this content block into HTML code. Once it is converted, the properties to edit the styling will no longer be available. The content block is now a HTML content block and changes will have to be made in code in the HTML Properties.
RSS Content Block
RSS stands for Rich Site Summary or Really Simple Syndication. An RSS feed, if a club already has one set up, it could display a page to see articles with headlines, summaries, and update notices. If a club uses the RSS content block and encounter any errors with the content, the web support team will not be able to assist, as the RSS feed is being pulled from a third-party source.
- On the left click on the RSS content block.
- On the right, the RSS Properties will display.
- Click Insert RSS button.
- In the Insert RSS Content dialog box, fill in the options accordingly
- Click Insert to save changes.
Under
Alternate Text, type in a description for the thumbnail or the video in case the thumbnail image does not load.
- Background: Color or image or border style for the row.
- Spacing: Top and bottom padding.
- Column Style: Background color, style or alignment for a column.
- Spacing Within Columns: Padding.
- Caption - Image and Text to be added within the same content block.
- Collage - Option to add two to four placeholder images that can either be uploaded into the Media Library, or pulled in with a URL.
- Video - Include a YouTube or Vimeo video link in the email. Please note - Videos cannot be embedded in an email. This block allows a still frame image to be used, with a hyperlink to the video.
- Button - Inserts a call-to-action button that will be hyperlinked.
- Divider - Inserts a horizontal divider in the message.
- Social - Adds linkable social media icons.
- HTML - Inserts a block of HTML code. When working with the HTML blocks, moderate degree of coding knowledge will be required to use this block.
- RSS - Add RSS content to an email, such as a blog feed.