Section Landing Page Template

The Section Landing Page templates are designed to be an entry point into a section of your website. They provide more visual elements and a layout that falls in between the homepage of website and a standard internal page. The Section Landing Page templates are only available in the Mason2022 design template.

The most common use case for these templates is the first page of a section, where they can act as a visually appealing introduction to your content and provide visitors with the tools to engage further, beyond that landing page.

The Section Landing Page template is highly configurable and comes with several built in features. We will go through each of those, provide guidance on how they work and share some best practices for each.

Banner Images

The template comes with a pre-configured banner image. Currently we provide four versions of the template, each with a different Mason-themed image. The banners are meant to decorative and are not changeable beyond choosing between the four options.

Section Landing Page One

Section Landing Page Two

Section Landing Page Three

Section Landing Page Four

Your page title and simple breadcrumbs linking back to the homepage of your website will display over top of the banner image in white text. The breadcrumbs go two levels deep, operating on the assumption that this template is being used as a page one click away from your homepage. For example, as the first page of a tab in your audience navigation.

Action Buttons

The template comes with three actions buttons. By default, the buttons will have the following values:

• Request Info, linking to https://www.gmu.edu/admissions-aid/request-information
• Apply Now, linking to https://www.gmu.edu/admissions-aid
• Visit Mason, linking to https://www.gmu.edu/admissions-aid/visit-explore

All three elements of each button are configurable. On the page editing form for this template, there are nine fields that allow you to enter custom text, a custom link and/or a custom icon for each button. We recommend reaching out to us for help using the custom icons.

The buttons are turned on by default but you can disable them using the new Hide Action Buttons field on the page editing form. Use care when entering custom text values to ensure that your text fits nicely within the button. When using this feature you have to option of using three buttons or none. To maintain visual consistency within the layout, the page doesn't allow you to remove or add individual actions buttons to this area.

Default Buttons

Custom Buttons

Left-Hand Navigation

Below the buttons and to the left of the main content, a navigation area is available. This feature works the same way that the side navigation works on standard pages. It will be generated automatically based on the published pages in a section. If the template is being used with a stand-alone page, no navigation links will appear the main content will extend left into that space. 

We recommend keeping your navigation links at the same length or shorter than the height of your main content. This helps to keep the page layout visually consistent. There are additional areas of the page to add more links, if needed.

Main Content Field

Below the buttons and to the right of the side navigation is the main content field. This field works the same way that the main content field on a standard page works. You can use any of the tools available in the WYSIWYG editor.

We recommend keeping this content reasonably short and compelling. This area is meant to be a welcome into a given section for the visitor.

Main Content Button

Under the main content is an optional button that you can configure to a destination of your choosing. Ideally, this button would work hand-in-hand with your main content. For example, if your main content is discussing the graduate-level offerings in your unit, this button could link over to your Graduate Programs page.

The page edit form has two new fields for configuring this button; Main Content Button Text and Main Content Button Link. If either field is left empty, the button will not display on the page.

Image and Content Block Area One

Below the main content and main content button is the first of two sections that display content side by side. This first section uses the standard page image upload, positioned on the left, and a content block, positioned on the right.

Page Image

To add an image, use the standard page image upload tool and select the "Top" position. The image will be constrained by the layout, however, we recommend using an image that is large enough to fill the entire allowed area. The recommended dimensions are 562x477 pixels.

Content Block

This area will hold a single content block and display the content within the block. The standard use case would be a block of text or resource links. To configure this block, create or identify a block that you want to use. Look in the address bar for that block and find the ID. On the page edit form, enter that ID in to the new Content Block One field.

If the image or content block is not configured, that object will not display. For this section, we recommend using both items to keep the page balanced. If neither item is configured, this section will not show.

Page Image on the left with Text Content Block on the right

Additional Text Area

Below the first Image and Content Block area is the Additional Text area. On the standard page template, this area displays on the right side of the page as a sidebar. On this template, it acts as an additional content area in the main body of the page. This change in position fits with the vertical orientation commonly found in landing pages these days. The focus is on the main content area.

This field works the same way that the main content field works. You can use any of the tools available in the WYSIWYG editor.

Again, we recommend keeping this content reasonably short and compelling. This area could also be used for custom visual elements, as shown below.

Additional "Sidebar" Content

Within the Additional Text Area, below the content, any other "sidebar" items used on the page will show. An example is a standard page content block set to the sidebar variant. While adding this additional "sidebar" content is possible and may be appropriate for some use cases, it isn't part of the concept for the page. We recommend chatting with us if you think you might want to use these tools.

Image and Content Block Area Two

This is the second of the two side by side content areas. This area is made up of two content blocks, displayed side by side. While these can be two blocks of text or resource links, we recommend the more visual option of using a text or resource link content block on the left and a content block with an image on the right. To configure the blocks, create or identify blocks that you want to use. Look in the address bar for each block and find the ID. On the page edit form, enter that IDs in the new Content Block Two and Content Block Three fields. For the image block, you can use the WYSIWYG editor to add an image to the content area field for the block. Just like the section above, the recommended dimensions are 562x477 pixels.

The content block title will appear for the content block on the left but not for the one on the right. If a content block is not configured, one will not be displayed. Just like the first side by side area, we recommend using two items here. If no items are configured, this section of the page will not be displayed.

Horizontal Cards

Below the second side by side section are three horizontal cards. These cards make use of the page article tool. You can configure these by identifying three articles on you website. On the page edit form, use the Associate Articles tool to find and associate the three articles you want to display. That's it! The article thumbnail image will be used for the card image and the article title and excerpt will show on the card. You can link out to article content, an article redirect that goes anywhere or leave both the main content and URL fields in the article blank to have a card that is not clickable and simply displays a short bit of information.

While you can add fewer than three or more than three articles, the display will not look good if you do. While we may develop more options for this tool in the future, we recommend sticking to three cards to start.

Additional Page Tools

Below the horizontal cards, you can use some of the additional page tools, available on the standard page template. We have configured the associated events and the page content blocks. Both of these work the same as on the standard page template and will display under the primary landing page content. We recommend using these sparingly and thoughtfully. If you have used all of the features available on this template, adding these additional items could stretch your page to a length that many visitors will not make it all the through.

Sidebar Page Content Block

If you do add page content blocks and configure them as a sidebar block, they will display in between the Additional Text area and the Second side by side display.

Setting up this template

As we begin to make this template available, editors will need to reach out to the CHSSWeb team to have it enabled on this website. Your website must have moved into the Mason2022 theme for the template to be available.

Example Uses

See the page template in action on the 2023 Design Preview website.