Web Manual: Landing Page

Welcome to the landing page. This will probably be the most complex content type available to use. The use case for this type of page is building a complex page that requires different unique features. We'll explain what makes the landing page unique below.

Masthead

The first thing you'll see is a mandatory title field. After the title, you'll see that there are different types of mastheads to select from. This is unique to the landing page content type. 

  • Add Masthead - Complex
  • Add Masthead - Simple

In the edit page, you'll see image references to what each type of masthead will look like and what the different color selections are. This will help guide you in your selection. For the complex mastheads, you will select a color option. If you want to include an image, you will need to upload an image to trigger an image to show up.

For example: select 'Light blue upper, medium blue lower' and then add an image to trigger the 'Light blue upper, image lower'

Do note that  alt text is now mandatory for accessibility purposes. It can be helpful to learn how to write good alt text

Below is an image of the masthead guide you will see in the edit area. This was added via the 'Insert from Media Library' option

Masthead style options

Body

After the masthead, you'll have the body section. This section is where the wysiwyg is located. It is identical to the other content types. You can find instructions on the wysiwyg here

Custom Content Regions

This section is unique to the landing page type and is located below the body. They add extra features to a page that you would not be able to build out in the wysiwyg. 

Custom Content Region: Card Group

This is the tab content area. With both this and the featurette above, the region width is contained and the region spacing is margin: loose.

This is the tab content area. With both this and the featurette above, the region width is contained and the region spacing is margin: loose.

This is the custom content regions: text option. Background colour is light grey, region spacing is margin: loose, and text region width is contained. This plain text region is helpful if you want to add another text region below another custom content region.

Section Title before region (max 255 characters)

Custom Content Region: Text + Links Region

This is the Custom Content Region: Text + Links Region. The add page width top border is toggled. This text area is the region text. 

Section Title before region (max 255 characters)

Image of the main mall fountain.

Custom Content Region: Text + Links + Image Region

This is the Custom Content Region: Text + Links + Image Region. The add page width top border is toggled. This text area is the region text. 

Musqueam First Nation land acknowledegement

UBC Science acknowledges that the UBC Point Grey campus is situated on the traditional, ancestral, and unceded territory of the xʷməθkʷəy̓əm.

Learn more: Musqueam First Nation

Faculty of Science

Office of the Dean, Earth Sciences Building
2178–2207 Main Mall
Vancouver, BC Canada
V6T 1Z4
UBC Crest The official logo of the University of British Columbia. Urgent Message An exclamation mark in a speech bubble. Arrow An arrow indicating direction. Arrow in Circle An arrow indicating direction. A bookmark An ribbon to indicate a special marker. Calendar A calendar. Caret An arrowhead indicating direction. Time A clock. Chats Two speech clouds. External link An arrow pointing up and to the right. Facebook The logo for the Facebook social media service. A Facemask The medical facemask. Information The letter 'i' in a circle. Instagram The logo for the Instagram social media service. Linkedin The logo for the LinkedIn social media service. Lock, closed A closed padlock. Lock, open An open padlock. Location Pin A map location pin. Mail An envelope. Mask A protective face mask. Menu Three horizontal lines indicating a menu. Minus A minus sign. Money A money bill. Telephone An antique telephone. Plus A plus symbol indicating more or the ability to add. RSS Curved lines indicating information transfer. Search A magnifying glass. Arrow indicating share action A directional arrow. Twitter The logo for the Twitter social media service. Youtube The logo for the YouTube video sharing service.