CMS

The CMS (Content Management System) is an add-on module that allows you to create custom pages for your myClubhouse site. You don’t have to have any knowledge of HTML, as you can use the simple WYSIWYG editor instead.

Glossary

CMS: Content Management System. This allows you to create, edit, and publish your own web pages within your myClubhouse site.

Space: A Space is a group of pages. They will usually be of a similar theme, and will have the same Entitlements.

Block: A section within the CMS page that contains content. Blocks can be divided vertically into Columns, divided horizontally with Components, and help break up the page into smaller sections to make it more manageable.

Component: Components are similar to Blocks and can be used within a Block to add sections of content.

Add Space

Each Space can hold many different pages and can be limited to only be viewed by certain groups of users. Spaces can be used to sort pages into groups to make them easier to navigate and keep pages with a similar theme together. If you want to restrict a page to a different set of users, you will have to create a new Space.

1. Navigate to CMS > Browse Spaces.

2. Click the green “Add Space” button.

   Open

   

3. Complete the wizard:

   Open

   

   1. Name: The name of the Space.

   2. Description: A short description of the Space and the types of pages it will contain.

   3. Code: A short code that will be used as part of the URL for pages in this space.

   4. Owner: This is by default the person creating the Space, but can be changed to any user.

   5. OK: Once happy with the details, click “OK” to create the Space.

4. Click “View” to enter the newly created Space.

Entitlements

These Entitlements will apply to every page within this space. So if you want a Page to only be open to certain users, you will need to create a new Space. The Entitlements will be the same as the defaults set in Entitlements Manager (Admin > Settings > Entitlements Manager) unless changed for this specific Space.

1. View Pages: Users who can view pages in this space.

2. Read Comments on Page: Users who can view comments on pages within this space that have a comment thread.

3. Comment on Pages: Users who can leave a comment on pages within this space that have a comment thread.

4. Moderate Comments on Pages: Users who can remove others' comments on pages within this space that have a comment thread.

5. Create Pages: Users who can create new pages in this space.

6. Edit Pages: Users who can edit existing pages within this space.

7. Publish Pages: Users who can publish pages in this space. This can be used to have a more senior person approve and publish pages created by someone else.

8. Delete Pages: Users who can delete pages within this space.

9. Administer Space: Users who can change the space information and set Entitlements.

10. Create Forum Topics: Users who can create new forum topics within this space.

11. Administer Forums: Users who can administer forums within this space.

12. Post Blog Entries: Users who can post new blog entries within this space.

Add Page

In each Space, you can have many different Pages, each with their own purpose and content. You can link them together with links, or have them each standing alone. Generally, the Pages will all be on a similar theme in one Space, but that is completely up to you.

1. Add Forum

Forums are a place for users to discuss different topics. You can limit who can post, and moderate the entries made by users where necessary. Forums require the Blogs and Discussion Forums Add-on module.

2. Add Blog

Blogs are a place to make small posts or articles on a topic to share with users on your myClubhouse site. You can have users comment on each post, as well as manage who can see the blog. Blogs require the Blogs and Discussion Forums Add-on module.

3. Add Page

A CMS Page can be made up of any content you like, either using the WYSIWYG editor, or using the HTML editor.

Click the green “Add Page” button to get started.

4. Create Copy

You can make a copy of an existing CMS page as a starting point for a similar page. You will have to change the Title of the Page, or the Space it sits within before saving it.

Edit Page

Now it is time to create your page:

Page Details

At the bottom of the Page, it is a good idea to initially set your basic Page information before customising the rest of the Page.

1. Title: The title of the Page, which will also become part of the URL for this Page.

2. Hide Header: If set to “Yes”, the Title won’t appear at the top of the Page.

3. Full width Header: If set to “Yes”, the Title will be the full width of the Page.

4. Space: This is the Space that the Page is in, you can change it to another Space easily here.

5. Comments Thread: If you want users to be able to leave a comment on this page, check this box. Who is able to read or leave a comment will depend on the Entitlements for the Space.

Layout

Pages are made up of one or more Blocks.

Blocks are made up of one or more Columns (up to 12).

Columns are made up of one or more Components.

Components contain your content including text, images, and Widgets.

Blocks

Every CMS page is broken down into Blocks to help organise content. Blocks are stacked vertically and can be moved around.

Once you have a Block in place, you can add Blocks in above or below, as well as move Blocks up or down 1 place to change the order they appear on the page.

Cut Blocks

Any Block can be cut and pasted to somewhere else in the page, or another CMS page.

1. Click the scissors to cut the Block.

2. Navigate to the destination for the Block.

3. Click either “Paste Above” or “Paste Below” to insert the Block.

Copy Blocks

Any Block can be copy and pasted to somewhere else in the page, or another CMS page.

1. Click the papers to copy the Block.

2. Navigate to the destination for the duplicated Block.

3. Click either “Paste Above”, “Paste Below”, or the clipboard (paste Block here) button to insert the Block.

Columns

Each Block can be divided into up to twelve Columns. The width of each column is defined in 1/12ths of the total available width. So the width of a Column can be: 1/12, 1/6, 1/4, 1/3, 5/12, 1/2, 7/12, 2/3, 3/4, 5/6 or the entire width. Each Column can be treated differently using a series of Components in the section below, and can have a different background to the other Columns (see the Background section below). When the page has to resize for different screens (such as mobiles), some Columns may end up dropping to a lower line. For example, if you had a small Column to the right with some links in, on a mobile, this would drop down below the main Column.

To add a Column, click one of the vertical lines above a Block to put a new Column in.

You can change the width of a Column by dragging the small arrow above the divider to where you want the Column to be.

To delete a Column:

1. Click “Edit” to edit the Block.

2. Click the red dustbin on the first Component in the column.

3. Click “Delete” to remove the Column.

4. Repeat steps 2 and 3 for each component in the Column.

Note: You must have more than one Column in the block to delete the Column.

Margins

You can define a margin of any width which will be placed between each of the columns in a block. You can also define a margin at the top or bottom of each Component or Block.

To do this, simply drag the white square at the centre between 2 columns, or at the top/bottom of the Block/Component to the desired size.

Width

A block can have 3 different width options:

Fixed Width: This is the default option. The Block will be in the centre with a blank space to both the left and right of the Block.

Full Background: The content of the Block will be the same width as Restricted Width, but the background colour or image will stretch to the edge of the page.

Full Width: The Block, including content and background, will be the whole width of the page.

Different Blocks can also be set to be different widths.

Height

Blocks are set to be as tall as the content within them. Since version 5.16.38, this cannot be overridden. Padding/Margins can be added (as shown above) to increase the height of a content Component or Block.

Background

Each block can have a different background colour or image.

1. Click the paint bucket button.

2. Choose the background:

   1. Colour: Select the colour for the background.

      1. None: No background colour.

      2. Reference Colour: Select a variation from your site’s Primary or Secondary colours.

      3. Select Colour: Select any colour from the picker, or enter the RGB value. You can also use the slider to adjust the opacity of the background.

      4. Black: The background will be black.

      5. White: The background will be white.

   2. Image: Select the image for the background.

      1. Click “Select Image”.

      2. Choose an image that has been previously uploaded.

      3. Or you can click “Upload” to upload a new image to use.

      4. Once you’ve selected an image, click “OK”.

      5. Adjust the image using the sliders.

      6. Parallax scrolling: If selected, the background image won’t move when the content on top of it does when scrolling.

   3. Both: If you select both an image and a colour, the colour will need to have its opacity reduced in order for the image to appear behind it. You can do this by using the slider next to the colour picker.

   4. OK: Once you are happy with the background, click “OK” to save it.

Content

For each block, or column, you can choose different options for the content:

Widget

Widgets are data-driven content elements that can be used within CMS pages that will update automatically when the data they are based on changes.

Read this guide to learn all about Widgets: CMS Widgets

Text

This is the most common Content type chosen. This will allow you to write any formatted text in the Block or Component. The WYSIWYG editor allows you to just type, or copy and paste the appropriate information in, as well as add images and links. You can also enter into HTML mode for those who have the appropriate knowledge.

1. HTML: Click this button to enter HTML mode, where you will see the HTML for any existing content in the block/column. You can also write using HTML mark up in this mode. You can find an introduction to HTML here: HTML Tutorial

2. Format: Click this button to change to a preset text sizes, for things like titles and subtitles, as well as bits of text you want to stand out such as quotes or code. Highlight text and select the Format type, or select the Format type and start typing.

3. Style: Click this button to change to a preset text style. This can be used when you want something to stand out from other normal text such as for code. Subscript and superscript are also kept here. Highlight text and select the Style, or select the Style and start typing.

4. Bold: Toggle Bold on and off.

5. Italics: Toggle Italics on and off.

6. Strikethrough: Toggle Strikethrough on and off. Strikethrough will be a single line through the middle of the text, like this.

7. Lists: Choose between an ordered (numbered) list, or an unordered list (bullet points). If selecting an existing list, you can also choose to indent or outdent highlighted parts of a list from this menu.

8. Image: Click to add an image into the block/column. Either upload a new image or select one already uploaded

9. Video: Click to embed a video into the block/column. Enter the link to the Video Embed Code or Youtube/Vimeo Link into the box (best to use copy and paste) and click “Insert”.

10. File: Add a file to your page with this button. Enter a name that will be shown for the file, and then click to upload the file.

11. Table: Use this menu to insert a table, as well as access all the table-related options to edit existing tables. Read more about tables in this guide here: CMS Tables

12. Link: Click to add, edit, or remove a link from text. You can enter the URL of where you want the link to go, change the text that is displayed for the link, and choose if the link opens in a new tab, or in the current tab. Read more about Links in this guide here: CMS Links

13. Align: Choose how to align the text: Left, Right, Centre, or Justified.

14. Text Colour: Set the text colour. You can also highlight text here too.

15. Size: Set the text size.

16. Line Height: Set the line height here.

17. Fullscreen: Click to enter full screen mode, to open the Block/Component into a full screen view for easier editing. Click the button again to exit full screen mode.

Once you are happy with the content, click “Done” in the top right to exit the Block so you can edit another.

Markdown

Markdown is an alternative to the text content type. It does not rely on HTML for styling, but instead uses its own syntax. Links, images, lists, and more can be included in a component of this type. This cheatsheet will help you with the syntax: https://commonmark.org/help/

When you have finished editing the component, click “Close Markdown Editor” to save it.

Image

An image that will take up the whole Block/Component.

1. Click “Image”.

2. Complete the wizard:

   1. Image:

      1. Choose an image that has been previously uploaded.

      2. Or you can click “Upload” to upload a new image to use.

      3. Once you’ve selected an image, click “OK”.

   2. Image Scaling: Choose which mode you want for how the image will be manipulated to fit best onto the page.

      1. Stretch to fit: The image will be stretched horizontally to fill the space.

      2. Scale up/down to fit: Shrink or grow the image until the height or width fills the space, leaving blank space on the opposite plane. Eg. Grow until the height of the image matches the Block, and blank space to the left and right of the image.

      3. Cover and clip: Grow or shrink the image to fill the space, cropping out any that overflows.

      4. No change to dimensions: No change to the dimensions of the image. Anything outside of the space limits will be cropped, keeping the section of the image in the centre.

      5. Scale down to fit: Maintain the ratio of the image and shrink it to fit within the space, leaving blank space at the sides or top and bottom where necessary.

   3. Image Height: Set the height of the image.

   4. Frame Style: Select the style for the border of the image.

      1. None: The image will have no border.

      2. Simple border: The image will have a thin 1 pixel border around the edge of the image.

      3. Photo frame: The image will have a thicker 5 pixel border around the edge of the image.

   5. Border Radius: Set a figure to round the corners of the image and the border. Leave blank to leave corners square.

   6. Alt text for Image: Increase the accessibility of your page by writing a description for the alt text of for the image for users who are using a screen reader.

   7. Link URL: Enter the URL the image will take you to. (optional)

   8. Padding: Padding is blank space around the edge of the image. Different values can be set for each side of the image.

   9. OK: Once happy with the image, click “OK” to place it into the Block/Component.

To change the image, hover over the image and click the “cog” in the top right hand corner.

Delete

If you want to remove the Block entirely, you can hover over the Block and click the dustbin delete button.

Note: You must have more than one Block on the page in order to delete an entire Block.

Components

Each Block can be divided not only into Columns but also into components. Components stack vertically within a Block to allow you to include multiple separate sections within the same Block. Each Component can be of any of the normal content types (as explored above) as well as having separate backgrounds to the rest of the Block.

1. To add a new Component, click the above or below arrow to insert the new Component in relation to the current one.

2. Components can be copied or cut, and then pasted to somewhere else in the page, or another CMS page. Insert a new block and click “Paste” for the content option.

3. Click the paint bucket to change the Component’s background. The instructions are the same as the Block background instructions above.

4. Components can be deleted by clicking the dustbin button.

5. For Text and Markdown Components, you can configure extra settings for the Component:

   1. Has Caption: If you would like the Component to have a title (similar to those on widgets), set this to yes. You will then be able to type the caption and select an icon to appear next to the caption.

   2. Padding: Padding is blank space around the Component. You can set different values for each of the four sides of the Component.

   3. Colours: Set the colours for the Component.

      1. Icon: Select a colour for the Icon next to the Caption.

         1. Default: The default colour settings for the widget.

         2. Reference Colour: Select a colour based on the Primary or Secondary colour, as set in Site Styles & Colours.

         3. Select Colour: Select any colour from the colour picker. You can also set the opacity using the slider to the right of the picker.

         4. Black: Set the colour to black.

         5. White: Set the colour to white.

      2. Caption: Select a colour for the Caption at the top of the widget.

      3. Underline: Select a colour for the line beneath the Caption.

      4. Text: Select the text colour for the Widget.

   4. Text Size: Set the default text size for the Component. This can be overridden for sections of the text using the text size tools or editing the HTML.

   5. Line Spacing: Set the default size between lines for the component. This can be overridden for sections of the text using the line spacing tools or editing the HTML.

   6. OK: Once you are happy with the settings, click “OK” to apply them to the Component.

Device Specific Components

You can set Components to be visible only on certain devices. This is split into mobile, tablet, and desktop. While myClubhouse is fully dynamic and adjusts to different screen sizes, you may still want to tailor certain aspects to not appear on some devices.

To toggle the component, simply click the icon for the phone, tablet, or desktop.

If it is green, it will show on the appropriate sized device, if it is red, it will not. So in the example below, the Component will only show on a desktop sized screen.

Workflow

Save Draft

This button will save the work on the current CMS page, but not make it viewable to everyone who has viewing rights for the page. It is a good idea to click this regularly to save any progress, otherwise if the site times out after approximately 30 minutes of inactivity, all progress could be lost.

Publish

This button will make the current version of the page live, and will be viewable by anyone who has viewing permissions for the space. This is a separate Entitlement so that there can be a final sign-off process if you want to control what gets published.

Cancel

Click the “Cancel” button if you want to abort any changes you have made since last saving the page as a draft or publishing the page and revert the page back to the most recent draft or published version.

Versions

Each time a page is published, it gets saved as a new version of the page. This means that you can keep track of older versions, or revert to an old one. Older versions can be deleted from the dropdown at the bottom of the CMS page (when not in editing view) by clicking the red “X” next to the version. If you delete the newest version, the page will revert to the next latest version. The most recent version can also be “Un-published” which will move it back into a “Draft” state.

Add to menu

Once you have created your CMS page, it is a good idea to add it to the menu so that users can find it. Wherever you choose to put it, it will only appear for users who have permission to view the page. Follow this guide to help you add your CMS page to the menu: How to Customise the Main Menu

Related articles