Algoma Module Guide

This guide provides a visual map & guide to all of the modules available for building pages on the site. For the most part, any modules that have orange text or backgrounds will respect the primary colour scheme of the page they are included on.

The modules are divided into groupings based on their types. Quick links to the groupings below:

(1) Utility Modules –  Modules like Table, Breadcrumbs & Basic Editor
(2) Page Intro Modules – These modules contain the heading & subheading groupings that typically appear at the top of the page.
(3) Text Layout Modules – These modules contain various text layouts, including Heading & Text Repeater.
(4) Section Header Modules – Heading & subheading groupings that appear within the body of the page
(5) Photo & Text Layouts – Columned layouts for displaying photos and text. Typically appear in the body of pages.
(6) Accordions – Accordion modules.
(7) Sliders – Modules that contain content in carousels or sliders.
(8) Feeds – Modules that pull in feeds from other pages or sources.
(9) Buckets – Columned content groupings that typically occur at or near the bottom of the page and drive to other pages.
(10) Banners – Coloured banner sections.
(11) Link layouts – layouts for organizing lists of links.
(12) Photo Spreads – Image driven layouts, many with captions. Typically occur on high level pages.
(13) Hero Headers – Full width hero headers typically used on top level pages.
(14) Special – Highly specialized modules that typically appear on few pages across the site.
(15) New – Added in the Summer 2022 website refresh

– – – SPACER – – –

This module is used to create horizontal space between other modules. It includes options for different heights and background colours.

(1) Utilities

(1a) Breadcrumbs

(1b) Table

A flexible table that allows you to add as many columns and rows as needed.

(1c) – WYSIWYG Editor

This module is similar to the default WordPress editor. It does not come with built in style or structure, but allows you an array of options within the editor to add styles. This module is useful for adding forms that span the full width of the container or creating any content that spans the full width of the container that does not fit in other modules.

Has access to a variety of styling options through the formats drop-down:

Heading Styles

Link Buttons

Text Links

& more

(1d) – Contact Form

Inserts a contact form. Accepts the ID of the Gravity Form form you would like to use.

(2) Page Intro Modules

These modules contain the heading and subheading groupings that typically appear at the top of the page.

(2a) – intro with cta & contact sidebar

This module is a 2 column layout which features heading, subheading, and body text and a CTA box with contact details in the second column. Below are shown the three alignment options within the module.

(2b) Intro with CTA 3 Button Sidebar

This module is similar to the above, however, it allows for the user to include a button link & two text links in the sidebar. There is an optional content body & sidebar body, but typically the module is used with only subheading text and sidebar links.

(2d) – Intro with Image Right

(2d) – Intro Text Only

(2e) – Intro with Left IMage & Multiple Contact Sidebar

This module contains a page heading/subheading layout, includes an image under the subheading and allows for multiple contacts in the right sidebar. The number of contacts is up to the user, as they can add more by choosing to add a row.

(2f) – Intro with Video

This module creates a page intro with left-hand image which opens a YouTube video when clicked. This module can also be used without the heading and subheading fields filled, instead using the body field’s “Formats” drop-down for styling if a video needs to be included within the body of the page. See Human Resources for example.

(3) Text Layouts

(3a) – Heading and Text Repeater

This module allows you to easily build single column layouts with repeated heading and text. Add a new row any time that you need a new heading. There are multiple width options. You can add form code to the body sections if you need to include a form with one of these width options.

(3b) – 2 Column Text Editor

This module is two column text layout. Each column is split evenly across the page container.

(3c) – 2 Column Left Text with Right Small Heading and Text Repeater

This module creates a text layout with heading, subheading and body fields on the left, and the option to repeat a small heading and text layout on the right. 2 heading size options, and background colour options.

(4) Section Headings

Heading and subheading groupings that appear in the body of the page.

(4a) – Small Width Centered Heading with Subheading

(4b) – Half width centered Heading Block with Button

(4c) – Left Aligned Heading Block with Optional Right Link Column

(5) Photo & Text Layouts

Columned layouts for displaying photos and text. Typically appear in the body of pages.

(5a) – 2 Column Photo/Content No Subheading

This module provides a 2 column layout with an image column and a content column. There are options to change the heading size and to display the image either left or right.

(5b) – 2 Column Photo Content with Subheading – sm heading

This module is similar to the module above. However, the column widths are slightly different, and this module has no button option and contains a subheading input in addition to heading and body.

(5c) – 2 Column Photo Content with Subheading – Lg heading

This module is similar to the module above, but with a larger heading style and smaller image.

(5d) – 2 Column Photo Content with Subheading – Wide Left Column

Similar to above modules. Left column width is bigger than right regardless of image layout. Has optional button.

(5E) – Two Column Text with Optional Right Image

(5f) – 2 Column Half Content with Optional Image

This module is a 2 column layout, but the image and text are stacked so that 2 blocks of image and text sit next to each other. There are two heading options and the image and buttons are optional.

(5g) – 2/3 Width Stacked Optional Image and Content

This module contains a single stacked column which takes up 2/3 of the page container. The image and link buttons are optional.

(5h) – 2 Column with Right Image and Bottom Small Heading & Text

(6) Accordions

(6a) – 1 Column Flexible Width

This accordion has a single internal column. The column can be set to various widths. This accordion can also accept tables by adding a Table row in the “Flexible Accordion” section after the body. To continue body text after adding a table, Add Row again and choose Flex Body.

(6b) – 2 column

This accordion has 2 internal columns & includes an optional heading and subheading to the accordion itself.

(7) Sliders

(7a) – Testimonial Slider

This module allows you to create a testimonial slider. Every row added creates a new slide in the slider. For best results, edit testimonial body to similar lengths for every slide within slider.

(7b) – Team Member Slider

This module allows you to choose from a list of team members from the team posts and display their images in a carousel on the page. The various link options allow control over whether to link to a modal with bio or contact info. Options are displayed below. Click link to view differences.

Link to Bio Modal Chosen

Link to Contact Modal chosen

No link chosen

(7b) – Content and Image Slider

This module is a slider that contains text on the left hand and an image on the right hand of each slide. They are linked and slide together. The two heading and background options are shown below.

For best results, edit content of each slide to similar lengths and use image dimensions shown below.

(7d) – Image Only Full Width Slider

(7e) – Content Only Slider

This slider contains slides with a single column heading and subheading and two column text body content It has options for background colour, heading size, and whether to display the number of slides at the bottom of slider.

(8) – Feeds

(8a) – News Module

Brings in the 4 most recent news posts. Check a category or categories in the categories options if you would like to bring in recent posts only from a certain category.

(8b) – Social Media Module

Pulls in social media feeds. Defaults to 1 post from Twitter, Instagram, Facebook. Option to choose to pull 3 posts from algomaresearch twitter account instead.

(8c) – Single Twitter Feed

Pulls latest post from a single twitter feed. Default is Asima Vezina, but this can be overridden by including a different twitter name in Twitter Name field. Options for white or grey background.

(8d) – Events Carousel

Pulls upcoming event titles and times and displays them in a carousel.

(9) – Buckets

(9a) – 3 Column image and content

This module is a 3 column section with image, heading, body and link. It is typically found at or near the bottom of a page in order to drive to other sections of the site. There are multiple background options for this module that are shown below.

(9b) – 3 Column Coloured BlockS

This module creates 3 columns of coloured blocks with heading, content and link. Typically used at or near the bottom of the page to drive to other sections. Creates a flexible number of blocks, each with a unique colour, up to 5 blocks.

(9c) – Contact Blocks

This module allows for the addition of 3 column content blocks. Typically used at the bottom of the page. Can add as many as required and will sit 3 across at desktop. Use the Formats dropdown to choose “Bold Black Text” for contact name. Use “Shift+Enter” in order to create line breaks without space as in other contact blocks throughout site.

(9d) – 3 Buckets Large Left 2 Stacked Right

This module is typically used at or near the bottom of the page in order to drive to other sections of the site.

(10) Banners

(10a) – Full Width Info w/ Button

This is a full width coloured banner that contains heading, text, and link and optional second link. There are options available to set the background colour to either the primary page colour or to grey. Typically this module is used with short body text, but if the body text is longer and begins looking too squished, you can select the “Wide Content” checkbox to allow the text to grow wider.

(10b) – 2 Column Info with Button

(10c) – 2 Column Text List with Coloured Background

(10d) – 2 Column with Breakout Background Colour

(11) – Link Layouts

(11a) – Links List with PDF Icons (optional heading)

(11b) – 2 Column Links List with Banner Background

(11c) – 3 Column Table with Center Links

This module creates a 3 column table, with a styled text link in the centre of the table.

(12) – Photo Spreads

(12a) – Single Image Contained

This module inserts a single image. It has 2 width options, full-width and 2/3 width. The full width image is typically used at the top of pages that require an image, but do not use the hero header modules.

(12b) – 2 Photo Breakout with Caption

This module is a captioned photo layout. It breaks out of the standard text width and onto the margins of the page at desktop. It is used primarily on the home page or other high level pages.

(12c) – 2 Image Left Breakout with Caption

Similar to above, but with a different photo layout.

(12d) – Contained Image with Caption

This module is a single image with caption. It does not break onto the margins of the page, and has 2 options for the placement of the caption’s coloured border.

(12e) – Contained 2 image offset grid with captions

This module is similar to module (12b), however, it does not break out of the standard text area, and the border colours will reflect the primary colour of the page that it is on. This module is typically used on overview level pages.

(12f) –  1 image contained with caption right

As above, typically used on overview pages that are not the Home page.

(12g) – 2 column side by side image with caption

(13) – Hero Headers

These modules are the hero sections that appear on top-level pages across the site. When using, ensure that “Use Header with White Text Colour” checkbox is checked on page, as this will allow these headers to sit under the navigation.

(13a) – Hero Slider

This module creates a hero slider that accepts multiple images. There are 2 options for the slider, one to create a homepage slider with text headings over the images, or one to create a slider that is simply images with captions.

(13b) – Hero Image

Single hero image no slider.

(14) – Special

These are modules that tend to have very specific functionality and/or styles and typically occur on few pages throughout the site.

(14a) – Centered Heading with Iframe

This module is primarily found on the program pages in order to bring the course listings in through iframe. If you need to include an iframe, but don’t want the specific styling assigned to this module, you can use module (1c) and include the full iframe code within the text tab.

(14b) – Content with Bio Sidebar

This module provides a left side heading, subheading and body, while the right column contains an image, name, and bio link pulled from the Team posts. The right column functions in the same way that the team member slider does. Choose the team member you would like to include, and they will be displayed.

(14c) – Dropdown Content Change with Video

Accepts a YouTube embed URL and image. Also accepts rows of content which will make up the content of the different views based on which select option is chosen. The heading for each row of the “Content Repeater” will automatically be set as the corresponding select option in the select box. The Optional Static Text contains a row of text at the bottom of the module that does not change regardless of the select option chosen.

(14d)  – Timeline

Brings in the Timeline module. Timeline events are set in the Timeline Events posts, and are sorted by category. Choose a category from the module dropdown in order to bring only those timeline events into the module.

(14e)  – Map Layout

This module creates the map layout with the locations of all the campus’s as found on the Contact page. If the Google maps links need to be updated, you can find the link by going to the address in Google maps, clicking “Share” and copying the link found in the share popup.

(14f) – Content Picker with Colour Block Header

Allows you to enter content that will be associated with a select field. When select option is selected the corresponding content will show. (Similar in function to module 14c)

(14i) – SPECIAL – Dropdown PDF Links

This module allows you to link to PDF’s through a select option. When the select option is chosen, the corresponding PDF link will open in a new tab.

(14j) – 3 Column Image and Content with 2 Links

This module allows you to create repeating 3 column image and content patterns. This module includes 2 links that are not styled as buttons, making it different from module 9a. This module is used on the Program overview page.