Adding Online Content to the Ordering Page

Within a Clubhouse Online website, the Online Ordering page can have content appear in the Banner Zone above the module or in the Footer Zone below the module. This content can be created and modified by adding Widgets to these Widget Zones.

The available Widgets for these zones are as follows:

Text Area - Extra Large Widget

The Text Area Widget consists of an editable content area and the rich content editor tool bar. The widget is configured by utilizing the WYSIWIG (What You See Is What You Get) editor to add text, images, hyperlinks, etc. in the content area.

Note: By defualt the Text Area - Extra Large Widget has been added to both these zones.

Configuration

Any field marked with a red asterisk (*) is required in order to save the widget. Once all the applicable fields have been configured, click Save & Close to save the widget. 

  • Theme:* choose between 1 of 3 custom themes that have been applied to the website
  • Columns: choose between 1 to 3 columns; each column will have its own Content Editor; the columns will display left to right on a desktop screen and top to bottom on a mobile device
  • Text: utilize the Content Editor to add content to the widget

The Content Editor will allow you to manipulate your content using the editor's toolbar. The toolbar is sectioned into the following categories:

  • Formatting Tools
  • Font Tools
  • Paragraph Tools
  • Insert Tools
  • Editor Tools

Static Image Banner Widget

The Static Image Banner Widget displays a single banner image. The widget is configured by setting the banner height to 25%, 50%, 75%, or 90% of the browser height, and adding the banner image. Depending on the height configuration, optional fields can be added to the image which include a title, sub title, logo, and button link based on the selected theme's primary colour.  The content is a static overlay on top of the image.

Configuration

Any field marked with a red asterisk (*) is required in order to save the widget. Once all the applicable fields have been configured, click Save & Close to save the widget.

Default

  • Theme:* choose between 1 of 3 custom themes that have been applied to the website
  • Banner Height: choose the height of the banner as it will appear on the page
    • 25% Banner Height: will include title due to the smaller sized image
    • 50% Banner Height: will include title and subtitle
    • 75% and 90% Banner Height: will include all features
  • Content Alignment: controls the alignment of the overlay content (logo, title, etc.); options include top, center and bottom
  • Banner Image:* choose an image by clicking Select and choosing the image from the Media Libraries
  • ​Title Only: will only display the title
    • Enabling this option will only display the title, which can be split into two lines and choose the font size
  • Logo: choose a logo by clicking Select and choosing the image from the Media Libraries
  • Logo Size: will control the size of the logo; options include Small Logo, Medium Logo and Large Logo
  • Title: enter a title for the image
  • Subtitle: enter a subtitle for the image
  • Enable Scroll: checkmark the Enable Scroll checkbox to include a down arrow on the image that can be clicked on and will take the user to the next widget

Button

  • Enable Button: checkmark the Enable Button checkbox to turn on the button link that will display on the image banner. If enabled, there is the option of adding up to 3 button links; the first button link and text is required
    • Button Link:* click Select and choose where the user will be directed to when they click on the link 
      • Web: if you want to link to an external site
      • Media Libraries: if you want to link to a PDF
      • Content Tree: if you want to link to an internal page; select the page on the Content Tree that you want to link to
    • Button Text:* enter the text that will display as the button link

How To 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.
  3. Click on the applicable widget and click Select.
  4. Configure the widget.
  5. Click Save & Close from the widget configuration window.
  6. Click on Save and then click on Publish.

How to To Edit a Widget

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

How to Remove a 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