Coursedog

Submit a Ticket My Tickets
Welcome
Login  Sign up

Using the Homepage Builder

Table of Contents

Overview
How to Do It
Widget Types
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:

  1. Hero Unit

  2. Feature Section

  3. Action Section

  4. Grid Container

  5. Heading

  6. Text Block

  7. Image

  8. CTA

  9. Line Break

  10. 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:

  1. Primary Heading (e.g. “University Catalog”) 

  2. Secondary Heading (e.g. 2021-2022)

  3. Text Block

  4. Primary Call to Action Button

  5. Secondary Call to Action Button

  6. 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: 

  1. Click “Remove Image”.

  2. The “Upload Image” section will change to show an “Add Image” Icon.

  3. Click “Add Image”.

  4. 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

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: 

  1. Heading Size – Small, Medium, and Large.

  2. Text Alignment –  Left, Center, and Right. 

  3. Bold Font – Yes/No

  4. Underlined Text – Yes/No

  5. Strikethrough Text – Yes/No

Text Block Widget

The Text Block widget provides a simple text block with six options for how you display information: 

  1. Text Size – Small, Medium, Large

  2. Text Alignment – Left, Center, Right

  3. Bold Font – Yes/No

  4. Italic Font – Yes/No

  5. Underlined Text – Yes/No

  6. 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). 

    • If you wish to link to a custom page from one of these CTAs, you determine the URL for the custom page by first adding the custom page to a navigation and then using the slug defined there. 

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.


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.

Related Articles



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.