Coursedog

Submit a Ticket My Tickets
Welcome
Login  Sign up

Using the Homepage Builder

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


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

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


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 at least 1216 pixels wide 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.

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

Overview | Widget: Hero Unit | Widget: Feature Section & Heading
Widget: Action Section
 | Widget: CTA/Buttons

Overview

The below guide details how website settings apply to the different elements of the Homepage Builder.


Widget: Hero Unit

#

Element

Code Name

Setting Field

Typeface Setting Field (Code)

1

Hero section background color

theme 

Theme Color


2

Hero Main Heading

theme-lightest 

Theme Lightest Color

H1 Headers > Typeface 
(h1HeaderFontTypeface)

3

Explore Courses CTA bg
Text color

theme-lightest
theme

Theme Lightest Color
Theme Color

Interface Text

(interfaceFontTypeface)

4

Explore Programs CTA bg Text color 

theme-light
theme-lightest

Theme Light Color
Theme Lightest Color

Interface Text

(interfaceFontTypeface)



Widget: Feature Section & Heading


#

Element

Code Name

Setting Field

Typeface Setting Field (Code)

5

Headings 
Large: h1
Medium: h2
Small: h3

h1HeaderFontColor
h2HeaderFontColor
h3HeaderFontColor

H1 Headers
H2 Headers
H3 Headers

Respective Typeface field of heading

6

Headings 
Large: h1
Medium: h2
Small: h3

h1HeaderFontColor
h2HeaderFontColor
h3HeaderFontColor

H1 Headers
H2 Headers
H3 Headers

Respective Typeface field of heading

7

Feature Section body

Hardcoded value

Not used yet 

Body Text

(textFontTypeface)

8

Feature Section CTA

theme

Theme Color

Default font face for whole website

(baseFontFace)



Widget: Action Section


#

Element

Code Name

Setting Field

Typeface Setting Field (Code)

9

Headings 
Large: h1
Medium: h2
Small: h3

h1HeaderFontColor
h2HeaderFontColor
h3HeaderFontColor

H1 Headers
H2 Headers
H3 Headers

Respective Typeface field of heading

10

Action Section body

Hardcoded value

Not used yet 

Body Text

(textFontTypeface)

11

Learn More CTA bg
Text color


theme
Theme-lightest


Theme Color
Theme Lightest Color

Interface Text

(interfaceFontTypeface)

12

Contact Us CTA bg
Text color 

theme-lightest
theme


Theme Lightest Color
Theme Color

Interface Text

(interfaceFontTypeface)


Widget: CTA/Buttons


#

Element

Code Name

Setting Field

Typeface Setting Field (Code)

13

CTA (Link) Text color

theme

Theme Color

Default font face for whole website

(baseFontFace)

14

CTA (Button) bg
Text Color

theme
hardcoded

Theme Color
Not used yet

Default font face for whole website

(baseFontFace)


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.