Landing Page

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.

When to Use a Landing Page

Use Landing Pages for high-level, main pages and large sections of content that needs careful, editorially controlled structure.

Functionally, a Landing Page allows additional functionalities that may not be available with other content types (such as Topic Pages) in GovHub.

For example, with a Landing Page you can:

  • Drag and drop content as opposed to working solely within the parameters of a text editor box. 
  • Access full-width of a page (optionally, as opposed to defined space reserved for the side navigation)
  • Select from more defined sections (as opposed to a more fluid layout)

Important Note: Don't use a Landing Page for low-level, detail pages or content that should use a specific, pre-structured content type (such as Event, News, How Do I, etc.).

Landing Page Best Practices

  • Landing Pages are not intended to house content, but rather to easily connect users to related content, acting as the starting point for sections of information. Consider Landing Pages a “hub” of related content.
  • Landing Pages work well as the starting point for sections of information. They are typically high in the site navigation, have only short blurbs of text, and lots of links. Landing Pages give you control over the layout with stackable sections.
  • When developing a Landing Page, use common language that is clear, concise and action-oriented.
  • Limit your buttons.
  • Allow for whitespace.

Do not include:

  • 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.


Instructional Visual Steps Below:

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). NoteThis 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). NoteUse 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. NoteThis 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:

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

Add Content to a Section

  1. Click + Add Block in the section you want to add the content.
  2. Use the menu on right side to select the content you want to add. Note: Block options are categorized by Micro-content and Content:
    1. Micro-content is content created specifically to be embedded as a block on another page. Learn about Micro-Content Types.
    2. Content is content that exists on a page of its own. When embedded on the Landing Page, it will display as a type-specific teaser.
      1. For help understanding each content type, deciding which is most appropriate for your needs and or how to complete the setup of a content type, refer to training on those content types.
  3. To rearrange content, drag and drop the content block into different sections and regions in the layout.

Note: Content is formatted based on pre-determined designs and according to the width of the containing section. A Promo, for example will look different in a one-third width block than it will in a full-width block. 


Instructional Visual Steps Below:

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

Remove a Section

  1. Click the X in the upper left corner of the section next to the Configure Section link.
  2. Select Remove to confirm you want to remove the section.

Note: Once you confirm removing a section, this cannot be undone.


Instructional Visual Steps Below:

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


Remove a Block

  1. Select the Edit Icon   in the top right corner of the block.
  2. Select Remove block.
  3. Select Remove from the menu on the right to confirm you want to remove the block. Note: Once you confirm removing a block, this cannot be undone.


Instructional Visual Steps Below:

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


Save Layout and Publish Landing Page

Once your Landing Page is ready to go live, you can either publish it from the Layout page or save your Layout and return to the Edit page.

  1. Publish through the Layout page:
    1. At the top of the Layout page, set the status dropdown to Change to Published.
    2. Click Save Layout.
    3. Other options at this point include:
      1. Click Discard Changes, then Confirm to abandon all unsaved edits and revert to the last saved Layout.
      2. Click Revert to Defaults, then Revert to clear the whole page and start over.
    4. Note: When you publish changes through the Layout tab, you will also publish any unpublished changes in the Edit tab.
  2. Save Layout and publish through Edit page:
    1. At the top of the Layout page, set the status dropdown to any of the following:
      1. Change to Draft (current)
      2. Change to Needs Review
      3. Change to Archived
    2. Click Save Layout.
      1. At this point, you will see the unpublished Landing Page in progress.
    3. Click Edit to get back to the Landing Page container.
    4. Confirm that all fields are correct.
    5. Change the moderation state: Published
    6. Click Save.
    7. Note: When you publish changes through the Edit tab, you will not publish any unpublished changes in the Layout tab.
  3. Confirm that the Landing Page displays as expected.


Instructional Visual Steps Below:

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



Edit an Existing Landing Page

Editing an existing Landing Page in GovHub is a simple process. To learn how to edit an existing Landing Page, refer to the below instructional video link below:

Editing a Landing Page in GovHub.mp4

Edit an Existing Landing Page

  1. Locate the Landing Page you want to edit from the content list.
    1. Filter the list by Landing Page to ease your search.
  2. Select Edit to change the Title, Summary, or Associations of the Landing Page container.
    1. Set the desired moderation state.
    2. Click Save.
  3. Select Layout to change the content that appears on the Landing Page.
    1. Make changes to the layout by adding or removing sections or blocks as described above.
    2. To edit the contents of a block:
      1. Select the Edit Icon in the top-right corner of the block, which looks like a pencil.
      2. Click Configure.
      3. Click Edit.
        1. If you edit a Micro-Content, you will see the Micro-content edit screen. Changes made on this screen will affect the block everywhere it is placed.
        2. If you edit a Content, you will see the Content edit screen. Changes made on this screen may affect the original full-page Content as well as any teasers of it. For example, if you click the edit button on a News teaser, you will edit the original News node which may affect either or both the teaser and the full page, depending on what fields you change.
      4. Edit the content as needed.
      5. Select the desired moderation state.
      6. Click Save. NoteIf you set the moderation state Change to: Published, the block or content will update immediately upon clicking Save, regardless of whether or not you save the Layout of the Landing Page.


Instructional Visual Steps Below:

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



Delete a Landing Page

To remove a Landing Page from your site, either:

  • Change the moderation state to Change to: Archived, or
  • Move it to the Trash.

Archiving or moving a Landing Page to Trash has no effect on the blocks included on the page. All published Micro-content blocks will still be published and available to embed on other pages. All published Content will still be published.


Instructional Visual Steps Below:

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


Commonly Asked Questions:

How many Landing Page(s) can I have on my agency site?

Every GovHub site has at least one Landing Page. For instance, the homepage. The homepage is simply a Landing Page that is marked within the system to be the front page of your site.

The number of Landing Pages needed for your site depends on your agency's content. Again, we typically recommend reserving Landing Pages for top-level menu items.

How can I get assistance with planning & building out a Landing Page for my agency site?

If you need assistance with the planning and development of a Landing Page on your agency site, please open a support request to start the conversation.  Once we understand your needs, we will determine what, if any, cost will be necessary for planning and building the Landing Page(s).