Homepage layout overview

Transcript

Introduction

Welcome to the GovCMS Content Administration Training series. Hi, I'm Ivan from Salsa Digital and in this video, we'll break down and discuss each region which is displayed on the default GovCMS homepage with demo content. We'll cover the following two topics:

1. All the different regions on a GovCMS site and the default homepage 
2. And you'll learn how to use Contextual links to access common tasks

Homepage layout

So here is the homepage of a freshly installed GovCMS site with demo content. The homepage is split into various horizontal sections, often referred to as "regions". So starting at the top, we have: 

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 (which can be modified by the way)
4. Informational text with a link to a page with further details
5. Some more informational text using different colours for the background and text
6. Listings of content, rendered as "tiles", with links to the actual content
7. Then a section with a secondary navigation menu at the bottom

The top section which contains the site logo and the main navigation menu (the first two sections) is usually referred to as the "header", while the section at the very bottom of the page (down here) is referred to as the "footer". 

Backend vs frontend

Now just remember that GovCMS allows web developers and designers to change the look-and-feel, the style and layout of the homepage and other pages.  Your GovCMS site will look visually different from this site.

However, the content administration experience will be consistent across GovCMS sites, because this task is performed after you log in to the administrative interface or the backend, which is consistent across GovCMS.

Contextual links

So while we're still on the homepage, let's try hovering with the mouse over the various sections of the page.  Notice that on some of them a small round button with a pencil icon appears in 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. If we go and hover over a content item in the content example section, you can see that we can edit and delete the content item image directly from here. If we go and edit this content item image, we're redirected to the edit form. We can modify what is required then click on Save and we have redirected back to the homepage. You'll most likely use the contextual links to edit content. 

Recap

Let's now recap what we covered in this video. First you learnt about the different regions on the default homepage. Then we looked at how to use the contextual links to edit content.