Table of Contents
Overview
How to Do It
Widget Types
Hardcoded Homepages
Enabling Your New Homepage
Website Settings
Related Articles
Overview
The Homepage Builder allows you to easily customize and configure the content of your Catalog’s homepage.
The Homepage Builder is composed of two separate sections: a canvas and a widget library.
Administrators can drag and drop pre-built widgets onto a canvas.
Once a widget is placed onto a canvas, users can click into the different elements to change text, upload images, set hyperlinks, and more!
How to Do It
PATH: Catalog > Pages > Pre-Built Pages
Step 1: Select “Pre-Built Page (home)” under the “TYPE” column to enter the builder.
Step 2: Drag widgets from the library (left-hand side of the page) and drop them onto the canvas (right side of page).
Step 3: Once dragged and dropped, everything within the widget becomes editable.
Widget Types
Overview | Hero Unit | Feature Section Widget | Action Section Widget
Grid Container Widget | Heading Widget | Text Block Widget | Image Widget
CTA Widget | Line Break Widget | Divider Widget
Overview
The Homepage Builder provides 10 types of widgets for you to use:
Hero Unit
Feature Section
Action Section
Grid Container
Heading
Text Block
Image
CTA
Line Break
Divider
Hero Unit
Overview
The Hero Unit is a banner image intended to be placed at the top of a homepage. This widget provides a first glimpse of your institution’s catalog and is meant to act as a prominent piece of your homepage.
Contents
The Hero Unit contains:
Primary Heading (e.g. “University Catalog”)
Secondary Heading (e.g. 2021-2022)
Text Block
Primary Call to Action Button
Secondary Call to Action Button
Hero Image
Customization
Different sections of the Hero Unit have varying levels of customizability.
Primary & Secondary Headings and Text Block - Text
Primary and secondary headings as well as text block can all be edited by clicking into the section and typing in new content.
These sections maintain a standardized font weight and color configured in your website settings.
Primary & Secondary Headings and Text Block - Buttons
Primary and secondary call-to-action buttons can be edited by clicking into the button.
Clicking into the button will open the website settings panel. Users will be given the option to input the URL they’d like the call to action (CTA) to route to and be given an option to open a new tab to follow the link.
Double clicking into the text of the CTA button will allow users to edit the text of the button. Note that this appears in all caps in the editor but will appear as a combination of lower- and uppercase in your catalog, depending on what you input.
Hero Image
Clicking the hero Image will open the Image settings on your left settings bar.
Hovering over the image in the settings bar will give you three options: “Remove Image”, “Show in Full Screen” and “Crop”.
To upload an image to your Hero Unit:
Click “Remove Image”.
The “Upload Image” section will change to show an “Add Image” Icon.
Click “Add Image”.
Select the image you wish to upload.
To maintain accessibility standards, remember to input a description of the image in the “Alt text” section below the “Upload Image” window.
Feature Section Widget
Overview
The Feature Section widget is intended to allow institutions to show prominent information about their school.
It provides a header, a text option, a call to action option, and a thumbnail image.
Thumbnail Image
If you don’t have icons to use here, some institutions use Font Awesome Icons.
Action Section Widget
The Action Section widget provides a template that contains a header, a text section, and two call-to-action buttons.
Grid Container Widget
Overview
The Grid Container widget allows you to build a table with a maximum of three rows and three columns that other widgets can be displayed in.
Populating the Grid
To populate information in the grid, simply drag and drop widgets into the appropriate cells and input information as required.
Heading Widget
The Heading widget allows you to place a header on your homepage canvas.
Headers have five options to place on your page:
Heading Size – Small, Medium, and Large.
Text Alignment – Left, Center, and Right.
Bold Font – Yes/No
Underlined Text – Yes/No
Strikethrough Text – Yes/No
Text Block Widget
The Text Block widget provides a simple text block with six options for how you display information:
Text Size – Small, Medium, Large
Text Alignment – Left, Center, Right
Bold Font – Yes/No
Italic Font – Yes/No
Underlined Text – Yes/No
Strikethrough Text – Yes/No
Image Widget
Overview
The Image Widget allows you to place an image on your homepage canvas.
Image should be between 1600-1800 pixels (width) by 400-700 pixels (height) for it to appear optimally.
How To Do It
Step 1: Drag this widget onto your canvas to see the option to upload an image and assign alternate text.
Step 2:
Click the “Add Image” icon to upload an image from your desktop..
Once an image is uploaded, you will have the option to: Remove Image, Show in Full Screen, or Crop the Image.
CTA Widget
The Call to Action (CTA) widget allows you to place a link on your homepage canvas.
You can:
Insert a URL
Input a Link Title.
Choose between a text link or a button.
Open the link in a new tab or in the existing browser tab.
Display the button in a compact or full-screen size.
Best practice is to use the relative URL (e.g. /courses for Courses and /programs for Programs). This will ensure you link to the course and programs pages for this specific catalog. However, if you use the full URL, confirm the URL links to the correct environment (i.e. In Production, make sure you’re using the Production URL and not linking back to Staging).
Line Break Widget
The Line Break Widget will place a space between content on your homepage Canvas.
Divider Widget
The Divider Widget will place a solid line across the homepage Canvas.
Hardcoded Homepages
PATH: Catalog > Catalogs > (Locate Catalog) > Website Settings
If you have an existing hardcoded homepage, go to Website Settings for your catalog and type “coursedog” into the “Layout name” field.
Enabling Your New Homepage
The Homepage Builder tool will display in your Coursedog interface but, once published, will not display as the homepage on your public-facing catalog right away – you will need to enable it first.
To enable, please reach out to your Customer Success Manager who can enable the feature flag to show your customized homepage on your public-facing website.
Website Settings
Colors and fonts for these widgets are configured via Website Settings.
Learn more – and see final examples – here.