Landing Page

Landing Pages should be content hubs for large sections of your site.

When to Use a Landing Page

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

Functionally, there are some differences between Landing Pages and other content types (such as Topic Pages) in the GovHub. Landing Pages use:

  • Drag and drop (as opposed to a text editor box)
  • Full-width of page (optionally, as opposed to defined space reserved for the side navigation)
  • Defined sections (as opposed to a more fluid layout)

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

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

Every GovHub site has at least one Landing Page: the homepage. The homepage is just 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. We typically recommend reserving Landing Pages for top-level menu items.

Quick Tips for Effective Landing Pages

  • Use common language that is efficient, brief, and action-oriented
  • Limit your buttons
  • Allow for whitespace

Don't include

  • … anything that will take much more than a quick glance to understand:

    • 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

How to Start

Once we understand your needs, we will determine what, if any, cost will be necessary for planning and building the Landing Pages. Please open a support request to start the conversation.

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.
  • Landing Pages function significantly differently from other D8 content types.

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.

Adding Layout and Content

You can customize the layout of your Landing Page by stacking Sections of various layouts. Then add Blocks of content to each section.

The Layout initially provides one default section which you do not have to use. Since there is no way to change the layout of a section, once created, click the next to the Configure Section link if you don't want to use it.

Add a Section

  1. Click + Add Section link in the middle of your screen.
  2. Select which layout you need for this 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. Enter a Section title (optional).
    1. This title will display at the top of the section, so leave this blank if the section doesn't need a title.
  4. Select a Background color (optional).
    1. Use the drop-down selector to see what colors are available in your palette.
    2. The lightest background color in every palette is White.
    3. You can also remove the background color with the X on the right side of the selector.
      1. This is, in effect, the same as selecting White as the background color.
    4. If the Landing Page includes side navigation, all sections should have a White or no background color.
  5. If the Section uses the layout with one full-width column, you can choose to show a Background image (optional).
    1. Select an image from the system library.
  6. Click Add section.
  7. To edit the section title or background, click Configure Section to return to the options.

Simple wireframes of the possible layouts for a new Section.

Add Content to a Section

  1. Click + Add Block in the area you want to add the content.
  2. Use the menu on right side to select the content you want to add. 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 or deciding which is most appropriate for your needs, 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. 

Remove a Section

  1. Click the next to the Configure Section link.
  2. Select Remove from the menu on the right to confirm you want to remove the section.

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

Remove a Block

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

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 to Change to: 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.

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.
        1. If 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.

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.