Page Comparison

Updates

03/02/23 - removed 'none' as a section background color when building a Landing Page and set the default option to 'White'.
02/07/23 - removed Organization and Table of Contents as embeddable elements. 
10/17/22 - Changes to Layout Builder to improve user experience for content editors.
09/07/22 - Changes to Layout Builder to improve user experience for content editors.
12/17/20 - Small Title styling added for sections.

...

• Anything that will take much more than a quick glance to comprehend, for instance:

  • Large blocks of text

  • Videos

  • Social media feeds (exception for elected officials)

• Anything someone wouldn’t understand if this is the first page they see on your site:

  • Insider jargon

  • Detailed explanations or information

Landing Page Development

Developing a Landing Page is an easy yet multi-step process which entails:

1.) Creating the Landing Page Container,

2.) Layout Selection/Add Content and

3.) Publish Landing Page.

Creating the Landing Page Container

1. Log into your agency website.
2. Click on Add Content.
3. Select Landing Page.  
4. Add Title (required).
   1. The Title is required so that the Landing Page can be found in the back-end of the system.
   2. It will not appear on the Landing Page itself.
5. Add Short Title (optional).
   1. The Short Title will replace the title in URLs, navigation, and anywhere the page is linked to from other content across the site.
6. Select the Include Navigation? checkbox if you want the Landing Page to display with the side navigation visible (optional).
7. Add a Label (optional).
   1. This will only display in very specific circumstances and in most cases can be skipped.
8. Add Summary (optional).
1. Add a short statement to summarize the page’s content or purpose. In most cases, this will not show on the page itself but will be used in any links to the page that are configured to include a description.
9. In the Associate this Content with box…
   1. Associate the Landing Page by Selecting (optional): 
      
      1. Program or Service References
      2. Division / Section
      3. Categories
10. For the moment, leave the moderation state to Save as: Draft.
    1. Until you complete the next phase – Adding Layout and Content – the page will appear empty.
11. Click Save.

...

Note: Hover over image to see the associated step(s) outlined above.

Adding Layout and Content

GovHub allows you to customize the layout of a Landing Page by stacking Sections of various layouts and or by adding Blocks of content to each section. 

When creating a new Landing Page, a default layout section is provided. Because there is no way to change the layout of the section, once created, click the X next to the Configure Section link if you decide not to use it. 

1. Click + Add Section link in the middle of your screen.
2. Select the preferred layout for the section:
   1. One full-width column
   2. Two columns, with a 2/3-width region on the left and a 1/3-width region on the right
   3. Two columns, with a 1/3-width region on the left and a 2/3-width region on the right
   4. Three equally-sized columns
3. A Configure Section box will open up to allow you to do the following:
   1. Enter a Section title (optional). Note: This title will display at the top of the section, so leave the field blank if the section does not need a title.
   2. Select a Background color (optional). Note: Use the drop-down selector to see what colors are available in your agency specific palette.
      1. The lightest background color in every palette is White.
      2. To remove the background color, click on the X on the right side of the selector. Note: This is the same as selecting White as the background color.
         1. If the Landing Page includes side navigation, all sections should have a white or no background color.
   3. Select a Background Image (optional) only if the selected layout is one full-width column. Note: This option is not available for any other layout option. 
      1. Select an image from the system library. Once selected, indicate if you want the image to:
         1. Style as Superhero
         2. Toggle Transparency
4. Read more (optional). Link that shows the content of the two items below when Read More text and URI have a value. Note: Make sure link text is descriptive to ensure accessibility. 
   1. Add Text - works when "Read More Link" has a value. 
   2. URI - start type in field to find the content you want to add. 
5. Click Add section.
6. To edit the section title or background, click Configure Section to return to the options.

Instructional Visual Steps Below:

...