Skip to main content

Landing Page Template

The Landing Page Template provides CMS users with the opportunity of showcasing content in a multitude of ways. The template provides a wide array of options for customization. New additions include a more emphasized banner image, new page sections and more.

Table of Contents


Display Name

The Landing Page Template uses text entered into Display Name as the text that will be overlaid on the banner image.


A title element defines the title of the document, shown in the browser’s title bar or the pages tab. In the CMS, the Title text box is required to be filled on all pages.


The Description text box should be filled with a brief summary of the information found on the page or the entity featured in the page. In the About UH page, it contains information about the University as a whole.

The figure below better showcases the information found in the About UH page, including Display Name, Title and Description.

Banner image metadata
Display Name, Title and Description for About UH page.

Banner Image

By default, this page region will include the “Display Name” from metadata entered, and display the text as an H1 on the page. Additionally, the image attached can be made to scroll with the page or be fixed which will create a parallax effect as the page scrolls up or down. The “Alt Text” should be entered for all images and will be displayed if the image itself could not be loaded or if screen readers are being utilized. The following figure shows the current banner image on About UH.

Banner image with text overlay.
Banner image text overlay.

Additional Content

The CMS also allows the entry of “Additional Content,” which will be text displayed over the banner image itself. Below is an example of a banner image with placeholder text in “Additional Content.”

Banner image with additional content.
Banner image with placeholder text in "Additional Content."
Page header settings.
CMS interface. Note image has been given a “Fixed” attribute, which will keep it from scrolling with the page.

Page Sections

The content on the page should be contained within one or more Page Sections. Use multiple Page Sections to divide the page up by content types or subjects. There are four Section Types included in this template: Standard Content, Split Content, Cover Photo and Cover Video. Each one of these has different options to better customize content.

Standard Content

This is the most general and versatile Section Type. This Section Type should contain a Section Heading which will be placed on the page as an H2, followed by one or more of the following Content Types: WYSIWYG, Section Links, SPIFF Banks, Carousel, Stats List, Accordion, and Calendar Widget.

CMS interface for standard content.
CMS Section interface. Section Heading will be displayed as an H2 in the page.
Standard content section heading
Section Heading created from the text entered in the previous figure.


Use the WYSIWYG editor to add paragraphs or any other kind of content desired. Click the + icon to add multiple Content areas. Each Content area has a Content Width set to Auto by default, which evenly divides a row on the page by the number of Content areas. Changing the Content Width of an area to a value other than “Auto” will make that specific content area wider than others.

WYSIWYG section interface in the CMS.
WYSIWYG section interface in the CMS.

These are links related to content in the Page Section. We recommend following WYSIWYG content with Section Links. The figure below shows what Section Links look like after a WYSIWYG section.

Section Links output.
WYSIWYG section followed by Section Links.

The CMS will provide the option of selecting the text to be displayed for the link (Link Text), and the option to select whether to link to an internal page or external URL.

Sections links for WYSIWYG.
Section links for WYSIWYG section. Note “Internal Page” has been selected, linking to a page on the CMS.

Using Section Links without a WYSIWYG will produce hyperlinks next to the Section Heading, as seen below.

Section links without a WYSIWYG preceding.
Section built using Section Links without a WYSIWYG preceding it.


A SPIFF Bank is a row of features containing an Image, Heading, Hyperlink, and Teaser Text. The number of Items Per Row can be set as either 2, 3, or 4, with 3 being the default. If six items are created and 3 is set for Items Per Row, a second row of features will be generated.

SPIFF banks on page.
Spiff Banks with 3 items.

In the CMS, selecting a SPIFF Bank section will provide the option of selecting how many items will be displayed per row.

SPIFF Banks CMS interface.
SPIFF Banks options in the CMS.

Following this, the option to add Media for each item is provided. Every Media item can also be given different specifications, like: alternate text, heading, hyperlink and teaser text. The teaser text will be the text displayed below the image and the hyperlink.

A Carousel should be used for sets of items like a SPIFF Bank, but when the number of items is unpredictable. Carousels have the option of displaying between 1 and 6 items per row. Any extra items will be hidden, and only accessible by sliding on clicking on the arrow. We recommend the use of Carousel for news items, events, and other types of non­essential content that could potentially be hidden from the user. The below image shows a carousel that is on the UH News and Events site.

Carousel example.
Image carousel. Note arrow on the right which indicates hidden content.

There are three options for Carousel Type: Features, Tiles, and Cards. All three display the same information but are formatted and styled differently. Features appear just like a SPIFF Bank. Tiles overlay the Heading and Teaser Text over the Image. Cards display the Heading and Teaser below the Image but aren’t styled as prominently as a Feature.

Stats List

A Stats List prominently displays numerical figures accompanied by a category. Any number of items can be used and they will automatically display in a grid. The list is built from left to right and top to bottom.

Stats list CMS interface
CMS interface for Stats List.
Stats list as seen on a page.
Stats list displayed on page.


The Accordion content type creates collapsible groups identified by its Heading. Headings can be hyperlinks or plain text. Buttons are placed before the Heading which controls the expand/collapse functionality of the Accordion.

Accordion as seen on website.
Accordion section. CT Bauer College of Business accordion is expanded.

Within each accordion group is a WYSIWYG editor. Click the + icon next to each WYSIWYG editor to create multiple columns within an Accordion group. Control the size of the column with the Content Width dropdown.

Accordion editor as seen in the CMS.
CMS Accordion options for content.

Calendar Widget

The Calendar Widget will create a space to showcase events that have been added to a CMS calendar. The widget has the option of displaying the calendar as a list or in a carousel.

Calendar as seen on website.
Calendar widget. Carousel view on left, list view on right.

If not provided with a calendar page, the Calendar Widget will display information from the UH Main Calendar. Users have the option of adding Filter ID's and Content ID's to determine what events will be pulled from the main calendar. Below is a list of available ID's that can be used with the calendar widget.

Calendar widget CMS settings.
Calendar filters available for configuration.

Split Content

This section simply displays Standard Content on one side, with an image or video on the other side. To break up the repetitive nature of the Section Type, the option to reverse the columns is available.

Split content as seen on website.
Split content with reversed column and 50/50 content widths.

The Split Content section will allow images, videos or playlists to be placed in the columns. The image shown above can be replicated selecting a Split Content section, followed by Section Links and then selecting what image to display, as well as column widths.

Cover Photo

A Cover Photo displays an image from edge­to­edge of the page, with an optional Caption Text, and Hyperlink overlaid. The caption can be positioned on the the image (as seen below) or below it.

Cover photo on page.
Cover Photo with overlaid caption text.
CMS settings for cover photo.
Cover Photo interface in the CMS.

Cover Video

A Cover Video is exactly like a Cover Photo, but with a YouTube video instead of an image. When a caption is used, it will fade away when the visitor plays the video or clicks the Watch Now hyperlink. The YouTube Video ID will be the link to the Cover Video that will be played. The ID for any video can be found in the video’s URL, after the “=” sign in the browser’s address bar.

Example: ­- Video ID bolded.

Cover video on page.
Cover Video with caption text overlaid. Text will disappear when video is played.

The CMS provides the option of adding a caption on the video, as an overlay or below it. The Link Text will behave as a Play Button when clicked.

CMS interface for Cover Video.
CMS interface for Cover Video section.

Section Settings

Each of the shown Sections can be assigned with a Background Color, Background Image, and Section ID. When a Background Color is set, foreground text and hyperlink colors are automatically changed to provide adequate contrast. When a Background Image is set, it is recommended that a Background Color is also chosen to match the image and provide adequate foreground contrast. Additionally, the Background Image can be set to be fixed which instead of scrolling with the content on the page, remains fixed and provides a parallax effect as the text scrolls over the background. Section ID can be assigned if On-­Page Navigation is used, but can also be used to as a selector in custom CSS or JS files.

Section settings in CMS.
Section Settings in CMS.

Page Settings

Every page within the CMS has Page Settings which provide different functionality. This interface also provides an option to disable breadcrumbs. The following figure shows the Page Settings interface for the CMS.

Page settings in CMS.
Page Settings in CMS.

As noted above, the Page Settings will allow the inclusion of Custom CSS and JS, as well as enabling Site-wide Customization.

Site Settings

Site Settings allows the selection of any specific Headers and Footers for the page.

Site Settings in CMS.
Site Settings interface showing buttons to pick header and footer.

The default header is included for all pages that do not have a custom header. The same thing applies to the footer.

Note: Only those pages which are in the mechanical site-position of a homepage and which have the role/purpose of a homepage should have a header and/or footer chosen.

Related known issues: