Support & Training

Reference Guide - Content Blocks

The information provided is a reference to the material that was covered in the Clubhouse Online e3 Content Blocks webinar.

The page also contains some additional tips that were discussed during the webinar.

The easiest way to access the Support Portal is by way of the orange e3 Help button at the top right of the Club Central (the administrative portion of the website). Clicking on the e3 Help button will open the support site in a new window.

Note:If the pop-up blocker is enabled on the browser, it will block the help site from opening. Please Allow the pop-up to open the site, then re-click the orange e3 Help button.

Accessing the Content Area

Logging In

An administrator will have access to the Editable Content Area to add, edit or delete content on the website after logging into the website. To access the Content Area:
  1. Login to your site
  2. Click on your name then select Switch to Club Central from the drop down menu
  3. From within the Club Central Dashboard, click on the Pages tile to access the Editable Content Area

Pages Application Overview

Pages Application split screen explanation >>

The Pages application is split into two sections:
  • Content Tree: This will list all the pages created for the site along with the modules (left hand side)
  • Editable Content Window: This will display the available content blocks for any page selected in the Content Tree, and is where widgets can be added/edited/deleted on the page (right hand side)
 
 

Content Management Icons >>

The Content Management icons located above the Content Tree can be used to manage pages and include the following:
 
Creates a new page
Deletes a page
Creates a copy of a page and adds it to a new location within the Content Tree
Moves a page to a different location in the Content Tree (ex. moving a child page from one parent page to another)
Moves a page either up or down within in the Content Tree

Status Indicator Icons >>

This status indicator represents a page content that is in an Unpublished status on the site.
This status indicator represents a page content that has been updated and Saved but not Published on the site.
This status indicator represents a page content that has been Saved and Published on the site.

Creating a New Page

How to Create a New Page

Clubhouse Online offers a variety of page templates that can be selected when creating a web page. Each template has a Full Width content block, which takes up the full width of the page, and any other content blocks applicable to the template. Content blocks are indicated in the name of the template via the number and size of the columns.

To create a new page:

  1. Select the location of the new page
    • If the new page is to be visible in the top navigation, select the Root Level page
    • If the new page is a child for an existing page, select that particular parent page
  1. Click on the + sign located abovt the Content Tree
  2. Select Page (menu item)
  1. Enter the Page name
  2. Select a template (view template examples)
Note: In the event that a different template is more suitable for the page content, the page will have to be deleted and recreated. Once a template has been saved, it cannot be changed.
 
  1. Click Save ​
           
 
Note: The newly created page will appear at the bottom of the Content Tree, and can be moved by selecting the page and using the Up and Down arrows located above the Content Tree.
 

Page Hierarchy

Once a new parent page has been created, it will appear at the bottom of the Content Tree. If, however, the page was added as a child page to an existing parent page, the page will appear at the bottom of the list of existing child pages.

The order of the items in the Content Tree from top down reflect the order of the pages in the navigation menu from left to right. To view child pages, click the + sign beside the parent page in the Content Tree. 

 
 
 
 

Content Blocks Overview

Content blocks are the editable areas on a web page that allow us to add widgets to a page. The content blocks available will depend on the template you selected, and each content block is labelled within a template.

Each template has a Full Width content block, which takes up the full width of the page. All the other content blocks will have a margin on both sides of the page with the background colour of your site, and the width of these content blocks adds up to 1140 pixels wide. So for example, in a 70/30 template like seen on Member Central, the 70 and 30 indicate the percentage the content blocks will take up of that 1140 pixel width. On mobile view, any templates that have a left & right content block, such as the 70/30 template, the content block on the left will always appear above the content block on the right, regardless of the size of the content block.

A widget will only appear in the selection window of a content block if it is compatible with that specific content block. Below is a list broken down by widget size, and indicates which content block those widget sizes can be found in. Widget sizes can also be found here.

Extra Large Widgets

  • Full Width Page Banner
  • Full Width Content

Large Widgets

  • 100% Content
  • 70% Main Content

Small Widgets

  • 50% Main Content
  • 30% Side Content

Widgets Overview

What are Widgets?

Widgets are the building blocks of your website. They help you build complex content without requiring any knowledge of code. They allow you to mix & match that complex content without having to worry about whether it will work or not. Widgets can be easily re-arranged or edited on the fly and are the base of each content page. All you have to do is add a widget to a content block, enter your content, and save

For more information on the widgets available and how to configure them, view our Widget Types section.

Add a Widget

  1. Click on the hamburger menu on the content block that you'd like to add a widget to
  2. Click Add new widget


 
  1. Click on the applicable widget and click Select
  2. Configure the widget
  3. Click Save & Close from the widget configuration window
  4. Save the page

Edit a Widget

  1. Click the gear icon beside the name of the widget
  2. Click Configure
  1. Make applicable changes
  2. Click Save & Close from the widget configuration window
  3. Save the page

Copy a Widget

Copy 1 Widget >>


This feature allows you to copy a widget to a content block of the same size on any page.
  1. Click the gear icon beside the name of the widget
  2. Click Copy

  1. Click the hamburger menu beside the content block you'd like to paste the widget to
Note: Widgets can be pasted into a similar size content block. The Widget Sizes article indicates what size content block a widget can be copied to.
  1. Click Paste
  2. Make applicable changes to the widget
  3. Click Save & Close from the widget configuration window
  4. Save the page

 

Copy all Widgets in a Content Block>>


This feature allows you to copy all existing widgets from one page to another within the same size content block. 
  1. Click the hamburger menu beside the content block
  2. Click Copy all

  1. Navigate to the page on the Content Tree that you would like to copy the widget to
  2. Click the hamburger menu beside the content box you'd like to paste the widgets to
Note: Widgets can be pasted into a similar size content block. The Widget Sizes article indicates what size content block a widget can be copied to.
  1. Click Paste
  2. Make applicable changes to the widget
  3. Click Save & Close from the widget configuration window
  4. Save the page

Move a Widget

  1. Hover over the 4 arrows icon on the widget name
  2. Click and drag the widget above or below an existing widget within the same content block
  3. Save the page

Delete a Widget

Delete 1 Widget >>


  1. Click the gear icon beside the name of the widget
  2. Click Remove
  3. In the pop up, click OK
  4. Save the page

 

Delete all Widgets in a Content Block >>


  1. Click the hamburger menu beside the content block
  2. Click Remove all widgets
  3. In the pop up, click OK
  4. Save the page

Utilizing the Editor Tool Bar in a Content Area

Widgets with the Editor Tool Bar

The following widgets utilize the editor tool bar:
  • Expandable Content
  • Tabbed Content
  • Text Area

Inserting Text

Text can be added by typing directly into an editable content area, or it can be transferred from an external source such as another site or a Word document. To paste text from an external source, place your cursor in the content area where the text should appear and click ctrl + v on your keyboard. Some formatting will be kept with the copied content including bold and italics, however text colour and style will not transfer. Links will also transfer, and it is recommended to double click on the link to ensure it is set properly. If you click ctrl + shift + v on your keyboard, this will remove ALL formatting and styling for the copied content. To format or style the text use the styling tools in the Content Editor (particularly by applying Heading Tags using the Format dropdown).

Uploading and Inserting an Image

  1. Place your cursor in the editable content area where the image is to be inserted 
  2. Click Insert/Edit Image or Media (Film strip icon) on the Content Editor

 
  1. From the Insert image or Media dialog screen, select the Media Libraries tab
Note: Any PDF or image that will be used on the site must be uploaded into the Media Libraries. If PDF and/or images are uploaded in the Content Tree (the "Content" Tab), it will increase the load time for the site and also make it difficult to locate the content pages.
  1. Select a folder to upload the image
    • We recommend creating folders in the Media Library to better organize files. To create a new folder:
      1. Click on the + sign
      2. Enter in a name for the folder
      3. Click OK to save the new folder
  2. Click Upload
Note: Please edit, crop and resize (as appplicable) an image before uploading it to the Media Libraries. This will reduce the size of the image and the amount of time it takes to load when people are viewing the website. Labelling the image will also make it easier to search for the image (using the Search option) in the Media Libraries.
  1. In the File Upload window, locate the image
  2. Click Open to upload the image
  3. Click Save & Close once the image has been uploaded

Inserting Hyperlinks

There are 4 types of links that are commonly used:

Link to an Internal Content Page >>

  1. Highlight the text (or click on the image to select it) that will appear as a link
  2. Click the Chain Link icon
  1. In the Insert Link window, click on the Content tab
  2. Select the page from the Content Tree
  3. Click Save & Close
Note: A hyperlink can be opened/tested in Preview mode or on the Live Site; it cannot be opened/tested in Edit mode.

Optional Link Parameters

The following parameters can be configured for an Internal Content Page hyperlink:
  • Target: Configures how the destination link will be opened when clicked on. To set the target:
    1. Click on the Target tab
    2. Click the dropdown menu for Target
    3. Select one of the options
      • We recommend setting this to New Window(_blank) for any destination link that takes the target audience to a 3rd party site or PDF
    4. Click Save & Close
  • Advanced: Configures the link to appear as a button style
    • The color of the button will be the default color scheme applied to the club's website. To enable button styling for a link:
      1. Click on the Advanced tab
      2. Click the check box for Button Styling
        • ​​If the button styling check box is not visible in the window, click the Tab key on the keyboard to tab down to the option
      3. Click Save & Close

Link to a PDF >>

  1. Highlight the text (or click on the image to select it) that will appear as a link
  2. Click the Chain Link icon
  1. In the Insert Link window, click on the Media Libraries tab
  2. Search for the PDF file to insert as a link
    • To Upload the PDF into the Media Libraries:
      1. Select a folder​​
      2. Click Upload
      3. In the File Upload window, locate the file
      4. Click Open to upload the image
  3. Click Save & Close
Note: A hyperlink can be opened/tested in Preview mode or on the Live Site; it cannot be opened/tested in Edit mode.

Optional Link Parameters

The following parameters can be configured for a PDF hyperlink:
  • Target: Configures how the destination link will opened when clicked on. To set the target:
    1. Click on the Target tab
    2. Click the dropdown menu for Target
    3. Select one of the options
      • We recommend setting this to New Window(_blank) for any destination link that takes the target audience to a 3rd party site or PDF
    4. Click Save & Close
  • Advanced: Configures the link to appear as a button style
    • The color of the button will be the default color scheme applied to the club's website. To enable button styling for a link:
      1. Click on the Advanced tab
      2. Click the check box for Button Styling
        • ​​If the button styling check box is not visible in the window, click the Tab key on the keyboard to tab down to the option
      3. Click Save & Close

Link to an External Site >>

  1. Highlight the text (or click on the image to select it) that will appear as a link
  2. Click the Chain Link icon
  1. In the Insert Link window, click on the Web tab
  2. Type in or paste the URL for the external site
  3. Click Save & Close at the bottom of the window
Note: A hyperlink can be opened/tested in Preview mode or on the Live Site; it cannot be opened/tested in Edit mode.

Optional Link Parameters

The following parameters can be configured for a hyperlink:
  • Target: Configures how the destination link will be opened when clicked on. To set the target:
    1. Click on the Target tab
    2. Click the dropdown menu for Target
    3. Select one of the options
      • We recommend setting this to New Window(_blank) for any destination link that takes the target audience to a 3rd party site or PDF
    4. Click Save & Close
  • Advanced: Configures the link to appear as a button style
    • The color of the button will be the default color scheme applied to the club's website. To enable button styling for a link:
      1. Click on the Advanced tab
      2. Click the check box for Button Styling
        • ​​If the button styling check box is not visible in the window, click the Tab key on the keyboard to tab down to the option
      3. Click Save & Close

Link to an Email Address >>

  1. Highlight the text (or click on the image to select it) that will appear as a link
  2. Click the Chain Link icon
  1. In the Insert Link window, click on the Email tab
  2. Enter the email address in the To field
    • The following field are optional and will be pre-populated in an email when the target audience clicks on the email address hyperlink:
      • CC: Carbon Copy recipient
      • BCC: Blind Carbon Copy recipient
      • Subject: The Subject line of the email
      • Message Body: The main message of the email
  3. Click Save & Close
Note: A hyperlink can be opened/tested in Preview mode or on the Live Site; it cannot be opened/tested in Edit mode.

Previewing & Publishing a Page

Previewing a Page

Preview Mode allows an administrator to preview and test content (such as hyperlinks) before the page is published on the live site. To view preview a page, switch to Preview Mode. Clicking on the Default screen size will allow the administrator to view content and how it will appear on various devices.

Publishing a Page

Status Indicator Icons 

This status indicator represents a page content that is in an Unpublished status on the site.
This status indicator represents a page content that has been updated and Saved but not Published on the site.
This status indicator represents a page content that has been Saved and Published on the site.
 

Publishing a Page

In the event that the content on the Live Site differs from that of Preview mode, it is possible that the page has not been Published since it was last updated. In order to Publish a page the administrator will need to click on the Publish button located at the top of the Content Area next to the Save button. Once a page has been Published, all saved changes will now be visible on the live site. The Publish button will only be visible for a page if the content on the page has been Saved first.
 

Note: It is important to remember to establish the Security settings (Permissions) before Publishing a page for the first time. For more information, please visit the Security section under the Properties Tab or visit the Configuring Page Security section on our Help Site.

Form Tab Overview

Form Tab Overview

The Form Tab provides an administrators the ability to change the name of a page, and to set a Publish from and Publish to date for a page. 

Changing the Name of a Page

  1. Enter the new name of the page in Document name
  2. Click Save
  3. Click Publish
Note: Changing the name of a page will not change the hyperlink; the hyperlink for the page will remain the same.

Setting a Publish from and/or Publish to Date

  1. Enter a new date by clicking on the Calendar icon or selecting Now
  2. Click Save
  3. Click Publish
Note: A page will automatically unpublish from the site on the Publish to date, if entered.

Properties Tab Overview

General

The General option provides a breakdown of basic information for the page including:
  • Page name: Current name of the page
  • Created by: Who created the page
  • Created: When the page was created
  • Last modified by: The last person to modify the page
  • Last modified: When the page was last modified
  • Live URL: Clicking the hyperlink will open the page in a new tab with the full URL for the page in the address bar; this is a way to access the page if it has been hidden from the navigation

Metadata

The Metadata option provides an administrator the option to enter Search Engine Optimization tags to a page. For assistance on how to insert the tags, please view the Basic SEO Guidelines document or contact our Web Support Team.

Navigation

The Navigation options provides an administrator the ability to control the way a page behaves on the website.
  • ​Menu Caption: Controls the name of the page in the navigation
  • Show in Navigation: Indicates if the page should be displayed in the navigation on the live site

Versions

The Versions option displays previously saved and/or published versions of the page. To revert the page back to a previous version:
  1. Click on the Roll back version arrow under Actions
  2. Click OK in the window prompt
Note: This tab only displays the last 10 versions of the page. If the Ver. number has a decimal number, it indicates a page save, and if the Ver. number has a whole number it indicates a page publish.

Security

The Security option allows an administrator to set the securtity persmission for a page and control who can see the content on this page. To set up Security Permissions for a page:
  1. While in Edit Mode, select the page in the Content Tree
  2. From the Content Area, click on the Properties Tab 
  3. Select Security from the list of menu items
  4. Click Add Roles
  5. Checkmark the box for the applicable role. The most common roles used are:
    • Members: Sets the page to be visible only once a member has logged into the site
    • Not Authenticated Users: Sets the page to be visible on the public side of the site and will disappear from the navigation once a member logs into the site
    • Everyone: Sets the page to be visible to both the public and once a member has logged into the site; the page will be visible to everyone regardless if they are logged into the site or not
  6. Click Select
  1. In Users and Roles, click on the role that was just added
  2. Under Access rights, checkmark the box beside Read under the Allow column
  3. Click Save to confirm your changes
  4. Under Access, set Requires authentication:
    • ​​If a page is set to the Member role, click Yes
    • If a page is set to the Not Authenticated Users or Everyone roles, click Inherits (No)
  5. Click Save to confirm your changes
Note: For assistance on how to set up security for a page, please visit our Configuring Page Security section.

Deleting & Recovering a Page

Deleting a Page

To delete a page, simply click and highlight the page that needs to be deleted and click on the Trash can icon. Do note that if a Parent page is deleted, it will delete all the pages underneath it.
 

Recovering a Deleted Page

  1. Click on the Globe icon in the top left corner (Open Application List)
  2. Enter Recycle Bin in the search box and click on the Recycle Bin application
  3. Click on the check box for the page(s) that are needed to be restored
  4. Scroll down to the bottom of the page: the two drop downs should be set to Selected Pages and Restore
    • If restoring a child page, the parent page HAS to be restored as well
  5. Click OK
  6. Click OK on the window prompt
Note: If a page is restored, double check the security settings as these are usually removed when a page is deleted. The page will not automatically publish once it is restored.