User Guide

Content Containers

  • The website is designed to allow two content area widths on desktop screens
    • Full width: content will fill the entire browser width
    • Content Width: content will be contained within the content area (1080px on desktop screens)
  • Select the “Default” Page Template in the Page Attributes section to apply the content container to all content
  • Select the “Full Width” Page Template in the Page Attributes section to avoid the content container to be applied to all content

Header Slider

  • To add an image slider at the top of the page, create the slider in Slider Revolution and then add the slider shortcode in the Additional Page Options section in the right hand sidebar of the page edit screen.

Page Title

  • To show the page title at the top of the page, check the “Show Page Title” checkbox in the Additional Page Options section in the right hand sidebar of the page edit screen.
  • This will show the title entered at the top of the page.
  • The title will show below the header and above all content (including the header slider)

 

Shortcode User Guide

General Note

When entering any shortcode, always use normal RETURN to create new paragraph, instead of using CTRL + RETURN to create line break. New paragraphs are ignored between shortcodes, so no padding / margins are added, but if you use CTRL + RETURN the line break is forced to show.

1) Content Shortcode:

Syntax: [content]

Description:

  • Use this shortcode to set content to the 1080px content width only
  • This should be used for regular text content and content tabs
  • Do NOT use content blocks shortcode inside [content] shortcode, because:
    • Content blocks with image set to content – border between blocks will not be full width
    • Content blocks with image set to background need to show full browser width

2) Content Blocks Shortcode:

Syntax: [content_blocks]

Description

  • Content Blocks are block sections which are defined in the page itself (in the Content Blocks section) and then added to the page with this shortcode
  • Each content block can contain a background image, content image(s), text content, buttons, tabs, tables etc

Attributes

  • All that has to be defined is the “Section” (i.e. [content_blocks_section_1])

Options:

Show Image As
  • Background = image will fill the background for the entire width of the block regardless of browser width
  • Content = image will show as an image within the content area
Show Image Behind Content
  • Show image behind main content = this only applies if the image is a background image.  If checked, then the background image will also be shown behind the content in the second content block
Main Content Column Side
  • This defines what arrangement applies to the content blocks:
    • Right First = the blocks will alternate left and right with the content of the first block on the right
    • Left First = the blocks will alternate left and right with the content of the first block on the left
    • Right All = the blocks will all be aligned with the content of all blocks on the right
    • Left All = the blocks will all be aligned with the content of all blocks on the left
    • Custom = when you select Custom, you can then define the content side for each block individually.  The option appears at the bottom of each block “Main Content Side”
Blocks Width
  • Same as main container = this restricts the content of the blocks to the width of the main content (1080px)
  • Full Width = this allows the content to extend beyond the content area to a maximum of 800px width for content
Minimum Block Height
  • This defines the minimum height for the block.  This allows a background image to have a minimum height when the content is very short and would otherwise crop the image too heavily

Margin

  • Margin defines the margins around the Content Blocks.  Note that this does not apply to background blocks.
  • Options: ‘0’ or ’10px’ defines same margin for all, or ’30px 0′ where first value is top/bottom and second is left/right or ’30px 0 0 0′ where values are top, right, bottom, left to define each separately

3) Content Tabs Shortcode:

Syntax: [content_tabs]

Description

  • Content Tabs are tab sections which are defined in the page itself (in the Content Tabs section) and then added to the page with this shortcode

Attributes

  • All that has to be defined is the “Section” (i.e. [content_tabs_section_1])

 

WYSIWYG Guide

Heading 1 (30px)

Heading 2 (26px)

Heading 3 (24px)

Heading 4 (20px)

Heading 5 (18px)
Heading 6 (16px)

 

This is a paragraph. This is a bold text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a bold and italic text. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. This is italic text. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. This is a text with strikethrough.

Heading fonts are Google font Cinzel

Paragraph font is Google font Raleway

This is a horizontal LINE:

You can add this from Insert > Horizontal Line


 

This is a paragraph with increased indent. This is a text with a different color. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a paragraph with center aligned text. This is a link. (Hovered links in main paragraph content are blue (#2e62cd) and in footer they are black (#000)) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a paragraph with right aligned text. Superscript text. Subscript text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a paragraph with justified text. This is a underlined text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a numbered list

By pressing a RETURN in your keyboard, a next item will automatically be created. You can press RETURN again (immediately after a first RETURN), in order to end the list and start a new paragraph. You can also press a TAB in your keyboard in order to start a sub list.

  1. Item 1
  2. Item 2
  3. Item 3
    1. Item 3.1
    2. Item 3.2
  4. Item 4

 

This is a bulleted list

By pressing a RETURN in your keyboard, a next item will automatically be created. You can press RETURN again (immediately after a first RETURN), in order to end the list and start a new paragraph. You can also press a TAB in your keyboard in order to start a sub list.

  • Item 1
  • Item 2
  • Item 3
    • Item 3.1
    • Item 3.2
  • Item 4

 

This is a blockquote:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

This is a table:

Text goes here Text goes here Text goes here Text goes here Text goes here
Text goes here Text goes here Text goes here Text goes here Text goes here
Text goes here Text goes here Text goes here Text goes here Text goes here

This is a table with header row at the top:

To create the header row:

  • select the header row
  • then click on the Table icon > Row > Table Row Properties
  • set Row Type to Header
Title Here Title Here Title Here Title Here Title Here
Text goes here Text goes here Text goes here Text goes here Text goes here
Text goes here Text goes here Text goes here Text goes here Text goes here

This is a Vimeo / YouTube video:

You can add a YouTube or Vimeo video by pasting the URL of the YouTube / Vimeo video into the WYSIWYG editor section and it will automatically be converted to the video as below:

Demo Tabs Section

This Is A Tab Title

This Is A Sub Title For Tab #1

All content that can be added in the main page content area, can also be added into a tabbed section where each section of content is contained within a tab.

This enables you to show a large amount of content within a page without it looking excessively text heavy.

When the website switches to mobile view, the horizontal tabs will become vertical accordion sections.

Nunc pharetra sodales felis, sed lobortis diam suscipit at. Proin feugiat in mi vitae convallis.

Nullam scelerisque, turpis vitae tincidunt porta, justo lorem auctor dolor, at blandit tellus ipsum lobortis turpis. Morbi id neque sed tellus rhoncus ullamcorper eget sit amet quam. Nullam consequat rutrum dui, quis tristique risus venenatis et.

Donec sagittis, augue nec dictum mattis, ligula ex ullamcorper turpis, aliquam vulputate felis leo at lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur volutpat sapien nec purus congue dictum. Donec nunc massa, ultricies at ornare sit amet, placerat vel elit. Suspendisse nulla tortor, consequat quis libero non, mollis imperdiet velit. Nullam consequat rutrum dui, quis tristique risus venenatis et. Donec sagittis, augue nec dictum mattis, ligula ex ullamcorper turpis, aliquam vulputate felis leo at lacus.

Tab #2

This Is A Sub Title For Tab #2

All content that can be added in the main page content area, can also be added into a tabbed section where each section of content is contained within a tab.

This enables you to show a large amount of content within a page without it looking excessively text heavy.

When the website switches to mobile view, the horozontal tabs will become like vertical accordion sections.

Nunc pharetra sodales felis, sed lobortis diam suscipit at. Proin feugiat in mi vitae convallis.

Nullam scelerisque, turpis vitae tincidunt porta, justo lorem auctor dolor, at blandit tellus ipsum lobortis turpis. Morbi id neque sed tellus rhoncus ullamcorper eget sit amet quam. Nullam consequat rutrum dui, quis tristique risus venenatis et.

Donec sagittis, augue nec dictum mattis, ligula ex ullamcorper turpis, aliquam vulputate felis leo at lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur volutpat sapien nec purus congue dictum. Donec nunc massa, ultricies at ornare sit amet, placerat vel elit. Suspendisse nulla tortor, consequat quis libero non, mollis imperdiet velit. Nullam consequat rutrum dui, quis tristique risus venenatis et. Donec sagittis, augue nec dictum mattis, ligula ex ullamcorper turpis, aliquam vulputate felis leo at lacus.

Tab #3

This Is A Sub Title For Tab #3

All content that can be added in the main page content area, can also be added into a tabbed section where each section of content is contained within a tab.

This enables you to show a large amount of content within a page without it looking excessively text heavy.

When the website switches to mobile view, the horozontal tabs will become like vertical accordion sections.

Demo Content Blocks – Image Content

Content Block With Single Image 1/2 , 1/2

  • In Content Block options, set multimedia column type to “Single Image”
  • Select the image
  • Check the “Show Border” option
  • Set the Block Columns Size to 1/2 and 1/2 columns

Block With Slider 1/2 , 1/2

  • In Content Block options, set multimedia column type to “Slider Revolution – Multi Image”
  • Create the Slider Revolution Slider with the images you want to show
  • Insert the Revolution Slider Shortcode in the slider shortcode box
  • Check the “Show Border” option
  • Set the Block Columns Size to 1/2 and 1/2 columns
Title 1 Title 2
Field 1 Content for Field 1
Field 2 Content for Field 2
Field 3 Content for Field 3

BOOK NOW

Block With Custom Content Table – 1/3, 2/3

  • Set content block to “Custom Content.”
  • Add custom content (table) in WYSIWYG editor.
  • Any table will auto format to show title row formatting.
  • Add Book Now button with shortcode [button_1] (set in buttons section in block editor page (below Main Content Column editor))
  • Set block columns size to 1/3 and 2/3 columns (meaning content block is 1/3 and main content is 2/3)
  • Input this content in Main Content Column WYSIWYG editor.
  • Note: whilst block columns are set to 1/3 and 2/3 the custom content table can be set to the right hand side of the screen in the shortcode (set content_column to “left”)

Block With Single Image, 2/3, 1/3

  • In Content Block options, set multimedia column type to “Single Image”
  • Select the image
  • Check the “Show Border” option
  • Set the Block Columns Size to 2/3 and 1/3 columns

Demo Content Blocks – Image Background

Avalanche Training For Sledders

Our Vision: To deliver an Avalanche Course that is rider orientated, with emphasis on proper trip planning, rescue practice, safe terrain negotiation and hazard awareness on a snowmobile.

Real, practical training for all mountain snowmobilers.

Avalanche Training For Sledders

Our Vision: To deliver an Avalanche Course that is rider orientated, with emphasis on proper trip planning, rescue practice, safe terrain negotiation and hazard awareness on a snowmobile.

Real, practical training for all mountain snowmobilers.