CMS Widgets

Widgets are data-driven content elements that can be included in bocks and columns within any CMS page (or the Home page). They auto-update themselves based on the data they are based on which means you don’t have to change the content, it will change automatically.

This guide is about Widgets, to learn more about blocks, and other types of content that can be included in a CMS page, as well as the CMS module in general, read this guide here: CMS

1 Advert
2 Blog
3 Common Links
4 Event List
5 Excel Table
6 Image Carousel
7 Important Messages
8 Member List
9 Membership Categories
10 News & Announcements
11 Photo Gallery
12 Twitter Feed
13 Related articles

Advert

Adverts are a way for you to include a link to another webpage with an image that encourages users to click it. This can be used to advertise a product or service, but could also be used as an alternative to a general link.

In a new block or column, click “Widget”.
Select “Advert” in the Widget list.
Click “OK”.
Click “Configure”.
Complete the wizard:
1. Image: Select an image for the advert.
2. Image Scaling: This specifies how the image will fit into its container. Choose from the following options:
  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 dimension. E.g. grow the image until its height matches the block's, with space on either side.
  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. Alt text for Image: Increase the accessibility of your page by writing a description for the alt text for the image for users who are using a screen reader.
5. Link URL: Enter the URL the advert will take you to.
6. Google Analytics Event Settings: If you are using Site Analytics, you can set up an Event to analyse when users click on this advert and track it in Google Analytics.
7. Page Jump Links: You can add a button at the top of the page to jump to this component when clicked. Enter the link name (for the link itself) and the caption (for the button).
8. Device Visibility: This page element can be hidden on devices of different sizes by de-selecting the appropriate options. E.g. If you do not want it displayed on mobile phones, de-select the “Phones” option.
9. Custom CSS: If you have added any custom CSS in Site Styles & Colours, you can add CSS classes here that you want to be applied to this component.
10. OK: Once happy, click “OK” to save the Advert.

Blog

Use the Blog widget to show the feed from specific Blogs or tags within your myClubhouse site. The number of posts being shown can be limited so that the widget fits comfortably in with the design of your page.

More information on blogs can be found in this guide here: Blogs

In a new block or column, click “Widget”.
Select “Blog” in the Widget list.
Click “OK”.
Hover over the widget and click the “Cog” in the top right-hand corner.
Complete the Wizard:
1. Displayed Entries: Choose between entries from one blog, or from any blog matching selected tags.
2. Blog: If “Entries from a particular blog” was chosen in step a, select the Blog from the dropdown.
3. Matching Tags: If “Entries with particular tags” was chosen in step a, type in all tags you want included, separating each with a comma. There is also a check box if you want posts have to match ALL of the tags in order to be included in the feed.
4. Caption: The title that will appear at the top of the Widget.
5. Icon: This icon will appear next to the caption at the top of the Widget.
6. Entry Count: The maximum number of entries to be displayed. If there are not enough entries in the blog, then the limit will not be reached.
7. Colours: Set the colours for the widget.
  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 the 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.
  5. Background: Select the background colour of the Blog Feed.
  6. Border: Select the colour of the Feed borders.
8. Page Jump Links: You can add a button at the top of the page to jump to this component when clicked. Enter the link name (for the link itself) and the caption (for the button).
9. Device Visibility: This page element can be hidden on devices of different sizes by de-selecting the appropriate options. E.g. If you do not want it displayed on mobile phones, de-select the “Phones” option.
10. Custom CSS: If you have added any custom CSS in Site Styles & Colours, you can add CSS classes here that you want to be applied to this component.
11. OK: Once happy with the details, click “OK” to show the new Blog Feed.

Common Links

The Common Links widget lets you include a group of menu links on your CMS page. They can either be fixed or dependent on the viewing user’s role on the website.

Read this guide to learn all about Common Links: Common Links Widget/Home Page Links

Event List

Event List widgets allow you to display a selection of Events on other pages. This is an effective way to grab the users' attention and increase sign-ups for upcoming events.

There are separate settings to do with Event Lists in each Event under the “Promotion” tab, find more about this and Events in general in these guides: How to Create a Single Event | How to Create an Event Series

In a new block or column, click “Widget”.
Select “Event List” in the Widget list.
Click “OK”.
Hover over the widget and click the “Cog” in the top right-hand corner.
Complete the Wizard:
1. Mode: Choose between “Publicised Events”, meaning all Events in the Events Calendar (that the user has permission to view); “Event Stream”, meaning all Events in a particular Event Stream; or “Custom Event List” to set criteria of Events to be included in the List.
2. Caption: The title that will appear at the top of the Widget.
3. Icon: This icon will appear next to the caption at the top of the Widget.
4. Colouring: The date blocks next to each Event can be styled to match either the site styles and colours, the Event type, the organising branch, or the organising section.
5. Event Count: The maximum number of Events to be displayed. If there are not enough Events to be displayed, the limit will not be reached.
6. Event Selection: If the “Custom Event List” mode was selected above, set the criteria to define which Events will appear in the Events List. If multiple criteria are set, Events must match all criteria in order to be included in the Event List.
  1. Event Types: Select all Event Types you wish to include in the Event List.
  2. Organising Branches: Select all Branches whose Events you wish to include in the Events List.
  3. Organising Sections: Select all Sections whose Events you wish to include in the Events List.
  4. From Date: Select the start date to include Events after this date.
  5. Until Date: Select the end date to include Events before this date.
  6. Single-Day Events: If checked, any Event that starts within the date range will be included. This includes single-day Events, Instances in a Series, and multi-day Events which start in the date range.
  7. Multi-Day Events: If checked, single Events that start and end on different days but pass through the date range will be included.
7. Colours: Set the colours for the widget.
  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.
  5. Background: Select the background colour of the Events Feed.
  6. Border: Select the colour of the Feed borders.
8. Page Jump Links: You can add a button at the top of the page to jump to this component when clicked. Enter the link name (for the link itself) and the caption (for the button).
9. Device Visibility: This page element can be hidden on devices of different sizes by de-selecting the appropriate options. E.g. If you do not want it displayed on mobile phones, de-select the “Phones” option.
10. Custom CSS: If you have added any custom CSS in Site Styles & Colours, you can add CSS classes here that you want to be applied to this component.
11. OK: Once happy with the settings, click “OK” to save the Events List.

Excel Table

If you have an existing table in Excel (or similar), you can import it into a CMS page in place of copying and pasting it into the page. This can also be especially useful if the information in the table needs updating regularly as you can just swap the file out for an updated version.

Read this guide to learn all about Excel Tables: CMS Tables | Excel Table Widget

Image Carousel

An Image Carousel is a slideshow of images that can be configured to show different images to different users.

Read this guide to learn all about Image Carousels: Image Carousel

Important Messages

The Important Messages widget will show appropriate messages depending on the user who is logged in. This includes reminders for the Membership Secretary about subscription expiries, pending actions for Event organisers, and the items in a user's basket.

In a new block or column, click “Widget”.
Select “Important Messages” in the Widget list.
Click “OK”.

Member List

Member List widgets can display the members from a specified Member List, along with chosen fields about each of them. These will update anytime the Member List changes.

To learn more about Member Lists in this guide here: Member Lists

In a new block or column, click “Widget”.
Select “Member List” in the Widget list.
Click “OK”.
Click “Configure”.
Complete Wizard:
1. Mode: Select either to use an existing Member List or a unique fixed set of members.
2. Member List: If Member List was selected, specify the Member List you wish to display by selecting from the dropdown.
3. Name: If “Specific Members” was selected, add names of specific users to the widget using the green plus button, typing at least 3 characters of their name in the box, and then selecting it from the dropdown. You can reorder the names by clicking the 3 lines button (next to the green plus button) and dragging to reorder.
4. Title: The title that will appear at the top of the widget.
5. Display Format: Choose between “Contact cards”, “Table”, or “List”, each with their own layout. “Contact cards” are small boxes with the selected Fields and Attributes for each member within it, “List” is similar, but there is only 1 per line. This is a good option if including the biographies field. “Table” shows the Member List in a table format.
6. Restrict Member List: If set to yes, the user will only be shown what they have the Entitlement to see. For example, if you have a Member List widget on a public page, but only current members have permission to look up other members, the widget will appear blank to anyone who is not signed in as a current member.
7. Restrict Member Data: If set to yes, the user will only be shown the member data they have access to. For example, if one of the members in the list doesn’t share their email, this won’t be displayed to those who don’t have access to see hidden email addresses.
8. Show Fields: Select which Fields you want to include for each User in the Member List.
9. Show Attributes: Select which User Attributes you want to include for each User in the Member List. More information on User Attributes can be found in this guide: How to Add Custom Fields (User Attributes) to the Member Directory
10. Page Jump Links: You can add a button at the top of the page to jump to this component when clicked. Enter the link name (for the link itself) and the caption (for the button).
11. Device Visibility: This page element can be hidden on devices of different sizes by de-selecting the appropriate options. E.g. If you do not want it displayed on mobile phones, de-select the “Phones” option.
12. Custom CSS: If you have added any custom CSS in Site Styles & Colours, you can add CSS classes here that you want to be applied to this component.
13. OK: Once happy with the details, click “OK” to show the Member List.

Membership Categories

The Membership Categories widget allows you to include all or a selection of Membership Prices. This would allow you to create a custom Membership Rates & Discounts page, rather than using the default one. If you choose to do this, you may want to update the URL for the menu item, this guide should help: How to Customise the Main Menu

In a new block or column, click “Widget”.
Select “Membership Categories” in the Widget list.
Click “OK”.
Hover over the widget and click the “Cog” in the top right-hand corner.
Complete the Wizard:
1. Caption: Set the title of the widget, this will appear at the top.
2. Icon: Choose an Icon to appear alongside the Caption at the top of the widget.
3. Mode: Select the Mode for the Membership Categories.
  1. All Member Categories: All Membership Categories will be displayed. Categories that are set to “Invitation Only” will not be displayed.
  2. Section: Select a Section from the dropdown to display all the Membership Categories assigned to that section. Categories that are set to “Invitation Only” will not be displayed.
  3. Selected Categories: Select any combination of Categories from the dropdown. Categories that are set to “Invitation Only” will be displayed.
  4. All Horse Categories: All Horse Membership Categories will be displayed. Categories that are set to “Invitation Only” will not be displayed.
4. Colours: Set the colours for the widget.
  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.
  5. Background: Select the background colour of the Category table.
  6. Border: Select the colour of the table borders.
5. Page Jump Links: You can add a button at the top of the page to jump to this component when clicked. Enter the link name (for the link itself) and the caption (for the button).
6. Device Visibility: This page element can be hidden on devices of different sizes by de-selecting the appropriate options. E.g. If you do not want it displayed on mobile phones, de-select the “Phones” option.
7. Custom CSS: If you have added any custom CSS in Site Styles & Colours, you can add CSS classes here that you want to be applied to this component.
8. OK: Once happy with the details, click “OK” to show the Membership Categories.

News & Announcements

The News & Announcements widget allows you to post brief text updates for frequent display on the homepage. These can be anything from reminders to sign up to events, or notifying of maintenance happening at the club. Each post can be set to expire after a certain length of time, meaning the page doesn’t get bogged down by out-of-date posts.

Read this guide to learn all about News & Announcements: News & Announcements

Photo Gallery

The photo gallery is a viable alternative to the Image Carousel for presenting a sequence of pictures on a CMS page. The images are arranged in a collage-style layout, and you have complete control over the order and size of each one.

Read this guide to learn all about Photo Galleries: Photo Galleries

Twitter Feed

Display tweets from any Twitter account using this Widget.

In a new block or column, click “Widget”.
Select “Twitter Feed” in the Widget list.
Click “OK”.
Click “Configure”.
Complete the wizard:
1. Twitter Code: In a separate tab/window go to https://publish.twitter.com and enter your Twitter handle. Select “Embedded Timeline” for the display option. Then copy the code produced and paste it into the “Twitter Code” field on your CMS page.
2. Twitter URL: When the Code is entered above, this will be automatically filled with the link to your Twitter page.
3. Caption: The title for the widget.
4. Height: Set the height of the widget. Note: The Twitter feed will likely be longer than this, so will have a scroll bar to move within the widget, separate from the one for the whole page (if required).
5. Page Jump Links: You can add a button at the top of the page to jump to this component when clicked. Enter the link name (for the link itself) and the caption (for the button).
6. Device Visibility: This page element can be hidden on devices of different sizes by de-selecting the appropriate options. E.g. If you do not want it displayed on mobile phones, de-select the “Phones” option.
7. Custom CSS: If you have added any custom CSS in Site Styles & Colours, you can add CSS classes here that you want to be applied to this component.
8. OK: Once happy with the details, click “OK” to save the new Twitter Feed. If you only see the caption after saving, please refresh the page.