Skip to main content
Are you okay? Emergency/Crisis UOIT Home

Content modules

Home page modules are blocks of content that appear on the home page. You can customize the placement and size (width) of modules to suit their content and your needs or preference.

Sizing of home page modules will always be arranged in a grid of thirds - a single module can be one third the width of the page, two thirds, or span the full width of the page. On medium screen sizes, there is an additional option of half of the page width. On small screen sizes, modules with span the full width of the page. 

Screenshot of content modules

All of the modules on the page should fill the grid for each screen size. If a module does not fit on the current grid row, it will drop down to the next row. When creating modules and setting module widths, ensure that the widths of all modules add up to fill the grid of thirds for each screen size.  

Note that some module types have a set size for certain screen sizes, which you cannot adjust. 

Module types

  • Custom module

    A custom module can contain regular text/image content or a video.

    1. On your website, edit the home page (main index page).
    2. Edit the first default Module section or create an additional module by clicking the green plus icon underneath the Module section label.
      Open Module section screenshot

    3. Select Custom module in the Module Type option. A custom module editor section will appear.  
      Select custom module screenshot

    4. Enter the module heading in the Module heading field.
    5. Select the module width for large and medium screen sizes (the default module width for small screen sizes is full width). For each screen size, ensure that the widths for any additional modules before/following this module add up to fill the grid of thirds. 
    6. For text/image content, select the Standard option in the Content type field. To embed a video, select Video.
    7. You can reorder modules by clicking on the navy upwards/downwards arrows for each module. Delete a module by clicking on the red minus icon. 
      Reorder of remove module screenshot

    Standard content:

    1. Enter the text/image content in the Content WYSIWYG editor.
      • To create a list of "Quick links", create a bulleted list of links.
      • Highlight the entire list. From the Styles dropdown list, select module_home_quickLinks. Your bulleted list of links should appear as a stylized list of button links. 

    For example:

    These module settings in the CMS ... 

    Module settings in CMS

    ... will produce a module that appears as follows:

    Module example

    Video:

    1. Enter the title of the video in the Video title field.
    2. Copy and paste the YouTube embed code in the YouTube embed code field (contact the Web Team if you are unsure of how to do this or where to find the embed code). 
    3. Enter a short description of the video content in the Video caption/description field.

    For example:

    These settings in the CMS...

    Video module settings in the CMS

    ... will produce a module that appears as follows:

    Video module example

  • News feed

    A news feed module automatically pulls news articles related to a particular faculty/department/category that have been published to the UOIT News site (news.uoit.ca) and adds them to your home page. 

    News articles are written and published by Communications Officers in the Department of Communications and Marketing. To submit a news article, send a request to communications@uoit.ca. If a News category for your department or website does not already exist, request a new category so that any articles related to your department or website can be tagged with this category when the article is published. 

    1. If a News feed RSS block has not been created, send a request to Web Team to have this RSS feed created.
    2. On your website, edit the home page (main index page).
    3. Edit the first default Module section or create an additional module by clicking the green plus icon underneath the Module section label.                                                                                                                                       Select module screenshot

    4. Select News feed in the Module type option. A news feed editor section will appear.                                                                                                                                       Select news feed module type option

    5. In the Feed block field, browse to and select the RSS feed block created by the Web Team. Alternatively, the Web Team can add this block to the page for you. 
    6. Enter the module heading in the Module heading field. 
    7. Select the module width for large screen sizes (the default module width for medium and small screen sizes is full width). For each screen size, ensure that the widths for any additional modules before/following this module add up to fill the grid of thirds. 
    8. You can reorder modules by clicking on the navy upwards/downwards arrows for each module. Delete a module by clicking on the red minus icon.                                                                                                                                       Reorder and delete module screenshot

  • Events feed

    An events feed module automatically pulls events related to a particular faculty/department/category that have been published to the UOIT Event Calendar (events.uoit.ca) and adds them to your home page. 

    To submit an event to the calendar, fill out the Event Submission form. If an event category for your department or website does not already exist, request a new category so that any events related to your department or website can be tagged with this category when the event is submitted. Event submissions are reviewed by Communications Officers in the Department of Communications and Marketing. Inquiries related to Event Calendar submissions can be sent to communications@uoit.ca

    1. If an Event feed RSS block has not been created, send a request to Web Team to have this RSS feed created.
    2. On your website, edit the home page (main index page).
    3. Edit the first default Module section or create an additional module by clicking the green plus icon underneath the Module section label. select module screenshot

    4. Select Events feed in the Module type option. An events feed editor section will appear.                                                                                                                                       Select News Feed Module option screenshot

    5. In the Feed block field, browse to and select the RSS feed block created by the Web Team. Alternatively, the Web Team can add this block to the page for you. 
    6. Enter the module heading in the Module heading field. 
    7. Select the module width for large screen sizes (the default module width for medium and small screen sizes is full width). For each screen size, ensure that the widths for any additional modules before/following this module add up to fill the grid of thirds. 
    8. You can reorder modules by clicking on the navy upwards/downwards arrows for each module. Delete a module by clicking on the red minus icon.                                                                                                                                       Reorder and delete modules screenshot

  • Social media feed

    A social media feed automatically pulls posts from a social media channel and adds them to your home page. You can include posts from Twitter, Facebook, or YouTube. 

    1. If a code block for each channel type has not been created, send a request to Web Team to have these code blocks created. 
    2. On your website, edit the home page (main index page).
    3. Edit the first default Module section or create an additional module by clicking the green plus icon underneath the Module section label.                                                                                                                                       Select module screenshot

    4. Select Social media feed in the Module type option. A social media feed editor section will appear.                                                                                                                                       Select social media feed screenshot

    5. In the Channel dropdown field, select the type of channel (Twitter, Facebook, or YouTube). 
    6. Enter your channel username in the Channel username field (e.g. for UOIT's Facebook channel, the username is "MyUOIT").
    7. Enter your channel homepage URL in the Channel page URL field (e.g. "https://www.facebook.com/myuoit")
    8. In the Code block field, browse to and select the code block created by the Web Team. Alternatively, the Web Team can add this block to the page for you. 
    9. You can reorder modules by clicking on the navy upwards/downwards arrows for each module. Delete a module by clicking on the red minus icon.                                                                                                                                       reorder and delete module screenshot