The Frontend Homepage Layout

Example Homepage

The screenshot below shows what the default front page of a freshly installed GovCMS site (with some demo content added) looks like.

Image of example GovCMS Homepage

Overview of homepage regions

The horizontal sections are also often referred to as “regions”. From top to bottom, these are:

1. The Site logo and search bar.

2. The Main navigation menu.

3. A “hero” block with a full-width image and a welcome message.

4. Informational text with a link to a page with further details.

5. Some more informational text using different colours for background and text.

6. A listing of some pieces of content, rendered as “tiles”, with links to the actual content.

7. A section with a secondary navigation menu.

The top section that contains the site logo and the main navigation menu (sections 1 and 2 in the screenshot above) is usually referred to as the “header”, while the section at the very bottom of the page (7) is referred to as the “footer”.

Tip: Remember, because GovCMS allows web developers and designers to lay out and style the site according to the needs of each agency, the homepage and other pages may differ visually to the GovCMS site you will use during a training course.

However, the content administration experience will generally be consistent across GovCMS sites, because this task is performed after you login to the administrative interface.

Contextual Links

Hover your mouse over the various sections of the page. Notice that for some of them, a small round button with a pencil icon appears over the top-right corner. These are called “Contextual Links” and they provide an easy way to quickly access some common tasks, related to the element the contextual menu belongs to. In the left-hand screenshot below you can see what the contextual icon looks like when hovering over one of the tiles in the Content example (demo). When you click on the pencil icon, the available actions/tasks are revealed, as shown in the screenshot below.