Landing Pages

Content Type for Top-Level Webpages

Summary

Landing Pages are used for top-level pages on your website to provide visitors with a broad overview of topics and to point them to more detailed content elsewhere (usually Site Pages.) The Landing Page content type is often used as a Home Page or the first page in a new section under the Main Menu. Landing Pages use Bands to organize content into columns. Landing Page Bands may have up to four columns and can be customized in a variety of ways. An upgraded user interface for Landing Pages rolled out in 2024. Visit Landing Page Enhancements to explore the changes.

Audience

  • Publishers can edit and save existing Landing Pages.
  • Web Managers create new Landing Pages, and add them to the Menu.

Learn more about Platform User Roles and Permissions. 

How To

  • 1

    Create a Landing Page

    New Content Types are created using the Content menu in your toolbar. To create a new Landing Page, navigate to: Content > Add Content > Landing Page.

    Cursor selecting the Landing Page content type from the Add Content menu.

    Begin filling out the form. Fields marked with an asterisk (*) are required.

    • Title - Enter the page name here. Include important keywords in the title to improve the search results. The optimal title length is less than 60 characters, including spaces. Example: Macrodata Refinement
    • Hide Title on Page - If desired, check the box to hide the title on the page.
    The title Macrodata Refinement has been added to the Create Landing Page form field.
  • 2

    Main Image

    On Landing Pages, if a Main Image is added, it appears at the top of the page. The page's Title is overlaid on top of the image with a colored rectangle between the text and image. The rectangle is added to ensure that there is enough visual contrast so that the text is readable. Learn about Color Contrast for Digital Accessibility. 

    Example of the Page Title over the Landing Page Main Image

    Dimensions and Resolution

    The ideal dimensions for a Landing Page Main Image are 2880px wide x 1254px high. This is true whether or not there is a search box or Hero Image, as is often the case with Home Pages. The recommended minimum resolution is double the desktop view size for clearer, better-looking images on high resolution screens. Download an image to use as a template.

    Note: Do not put important content in the bottom left corner of the image. The platform places a colored square containing the Page Title on top of the image in this corner and will obscure content.

    Alternative Text

    All meaningful images must have descriptive alternative text (alt text) to be accessible for visitors with low or no vision. If the image does not convey meaningful information and is purely decorative, check the box for Decorative Image and leave the Alternative Text field empty. This allows screen reading software to skip over the image. Learn more about Alternative Text. 

    Add a Main image to a Landing Page
    • Main Image - Select the Add Media button to add a Main Image.
    • The Media Library opens. Select the desired image, or upload a new image and select it.
    • Select Insert Selected.
    • A thumbnail of the image you selected now appears. 
    A Main Image thumbnail appears instead of the Add media button.

    Summary

    • Summary - Briefly describe the contents of the Landing Page. The Summary appears in search engine results with the link. Provide a Summary to enhance Search Engine Optimization (SEO). Note: When left blank, the Summary field uses an excerpt from the Page Content as the summary.
    Providing a summary of your content improves Search Engine Optimization or S.E.O. and helps visitors decide if they want to follow the link.
  • 3

    Create and Customize a Band

    Create new Band

    Page content is organized using Bands. The page must have at least one band. Landing Page Bands may contain up to four columns. If desired, you may insert multiple Bands, which will stack one on top of the other. See the Bands Help Topic. 

    • In the Bands section, insert a Band. Select the Add button, indicated by a blue square containing a white plus sign.
    Add new band to a Landing Page
    • A dialogue box appears, prompting you to Create new Band. Only the Column Layout is required. You may choose to customize a variety of settings:
      • Band Title
      • Column Layout*
      • Background Image
      • Text Color
      • Size - Padding
      • Size - Width
      • Size - Statistic Card
    Create a Band dialogue box

     

    Accordion

    Customize Band Settings

    Tab/Accordion Items

    Text entered in this field appears across the top of the band, centered horizontally and styled as Heading 2. The default text color is a dark color from your website's Color Palette that is readable against the white background. This color can be customized under the Text Color option. Learn about Color Contrast for Digital Accessibility. 

     

    Example of a 2 column band layout containing text and profile card components
    Band Settings Example: Band Title centered at top of band; Layout 2 Column (2/3 - 1/3); No background image; Text color None; Padding Medium top/bottom padding; Width None; Statistic Size None. Text component in 2/3 column on the left. Profile Card component in the 1/3 column on the right. 

     

    The column layout you select when inserting a Band determines which content Components you may insert. Some Components are better suited to wider columns, while others are better suited to narrower columns. 

    Select one of six column layout options
    Example: The 1 Column layout is selected.
    • Select the desired layout*. There are six column layout options to choose from:
      • One column
      • Two columns, split evenly
      • Two columns, one-third on the left and two-thirds on the right
      • Two columns, two-thirds on the left and one-third on the right
      • Three columns, split evenly
      • Four columns, split evenly 
    • The remaining band settings are optional. Select Save to begin inserting Components into the band.
      • To return to the Band Settings, select Edit indicated by the pencil icon on the Band Toolbar. See the Bands Help Topic. 
    Best Practices 

    Before selecting a background image, consider the content that the band will contain. If you plan to include a Text Component, ensure that the background image is not too busy with distracting elements. Adjust the Text Color as needed to provide readable contrast. 

    In this example, a background image of a mountain stream has been added to the band. The Text Color has been set to Light Text to make the Band Title and Text Component more readable, but still lacks sufficient contrast over some of the rocks and rapids. The Profile Card in the right column, however, is still readable and stands out against the background image. Suggested solutions include removing the background image, or using a different Component in the first column.

    Example of a band with a background image and white text. Ensure the text is readable against the background.
    Band Settings Example: Band Title centered at top of band; Layout 2 Column; Background Image of a mountain stream; Text color Light Text; Padding Medium top/bottom padding; Width Limit Content to Large Width; Statistic Size None. Text component in column on the left. Profile Card component in the column on the right. 
    Add a background image to a band by selecting add media.
    • Select the Add Media button to add a background image to the band.

     

     

    • Text Color - Choose a text color option:
      • None - Default dark primary text color from your website Color Palette on a white background. May be compatible with a light background image; use discretion.
      • Dark Text - Black text on the Secondary light background color from your website Color palette. May be compatible with a light background image; use discretion.
      • Light Text - White text on the dark primary background color from your website Color Palette. May be compatible with a dark background image; use discretion. Example below.
    Example of a band with light text and a dark background color added automatically.
    Band Settings Example: Band Title centered at top of band; Layout 2 Column (2/3 - 1/3); No background image; Text color Light Text (automatically adds a dark background color from your website Color Palette); Padding Medium top/bottom padding; Width Limit Content and Background to Large Width; Statistic Size None. Text component in 2/3 column on the left. Profile Card component in the 1/3 column on the right. 

    Padding creates space vertical whitespace above and/or below the Component inside the Band. Larger padding allows content to "breathe" and helps the visitor focus on different pieces of content. Smaller padding brings similar content closer together, helping the visitor understand their relationship. Experiment with the padding of each Band stacked on your page to achieve the desired appearance. 

    Whitespace is not necessarily white in color. If you add a Background Image, the image will fill the padded area. Likewise, if you select the Light Text Color, the padding will be the dark primary background color from your website Color Palette. For example, the image below shows a Light CTA Card inside a Band. The Text Color is light so the background is dark green. As the padding size is increased, the green background grows taller.

    The progression of band padding from no padding to small, medium, then large padding is illustrated with a CTA card.
    Above: A light CTA card sits inside a band with a dark green background color. Padding increases from left to right, illustrating the drop-down menu options.
    Band padding options

    Medium top/bottom Padding is the default setting. To change the padding, select the desired setting from the drop-down menu.

    • None
    • No Top/Bottom Padding
    • Small Top/Bottom Padding
    • Medium Top/Bottom Padding (Default Setting)
    • Medium Top Padding Only
    • Medium Bottom Padding Only
    • Large Top/Bottom Padding
    • Large Top Padding Only
    • Large Bottom Padding Only

     

    You can specify how wide the Band and its content appear on the page. The default setting for Band Width is Limit Content to Large Width. 

    Band width setting options drop-down menu.
    Width Options and Apperance
    • Limit Content and Background to Large Width - Both the Band's background and the content contained within the Band are constrained to the Large Width. (Top Band in Example 1 image). 
    • Limit Content to Large Width - Only the content is constrained to the Large Width, but the Band's background spreads across the full width of the page. (Default; Middle Band in Example 1 image). 
    • Full Width - Both the Band's background and the content contained within the Band will spread across the full width of the page. (Bottom Band in Example 1 image). 
    Example 1 
    A page with 3 identical bands but only the band width setting is changed for each to show how they compare.
    Each of the Bands above contain the same content and use all the same settings, except for Band Width. The Band Width settings from top to bottom are: Limit Content and Background to Large Width; Limit Content to Large Width; Full Width. 

     

    Example 2
    Band with a background image of a Blue Ridge mountain vista and two-column layout.
    Band Settings Example: No Band Title; Layout 2 Column (2/3 - 1/3); Background Image of a Blue Ridge mountain vista; Text color Light Text; Padding Large top/bottom padding; Width Limit Content to Large Width; Statistic Size None. Text component in column on the left contains a Heading 2, brief text and a .jpg image of a downloadable coloring page with Smokey the Bear. Text component in the column on the right contains a .png image of the U.S. Forest Service logo. 

     

    Five Bands are stacked on top of each other, each containing a Statistic Card that decreases in size as the page goes down.
    Numbers change size based on Band Statistic Size settings.

    Statistic Size - This setting controls the size of the numerical data entered on any Statistic Card Components that are inside this particular Band. All Statistic Cards within the same Band will be the same size. For a variety of Statistic Card sizes, insert multiple bands. 

    • None (Default, 100%) 
    • 110%
    • 90%
    • 80%
    • 70%
  • 4

    Add Content Components

    Best Practices

    Write for your audience's needs in plain and direct language. Not sure where to begin? Use a tool to help simplify your writing, such as the Hemingway Editor, and consider our Writing for the Web training. 

    Paragraph Components

    Page content is added with Paragraph Components. These pre-designed modules allow you to insert different types of content and place them in the order you want on your page. 

    Add Component buttons are outlined in red.
    • Select the Add Component button, indicated by a gray square containing a plus sign.
    • A dialogue box appears, prompting you to Choose a Component. The column layout you selected when inserting a Band determines which content Components you may insert. 
    • Select the desired Component and provide the appropriate content. Each Component has its own Help Topic for guidance.
    • Repeat these steps as needed to add the desired number of Bands and content Components to the page. 
    Example band that contains a video card and event card.
    Component Examples: A Video Card Component in the left column provides a tour of the North Carolina company, Mt. Olive Pickles. An Event Card Component in the right column provides details for the annual New Year's Even Pickle Drop. 
    Accordion

    Component Options by Column Layout

    Tab/Accordion Items

    Components available in a one-column Landing Page band

    This column size can contain the following Components: 

    • Article Card
    • Carousel
    • Contact Card
    • CTA Card
    • Event Card
    • iFrame
    • NC Map
    • Quick Links
    • Spotlight
    • Statistic Card
    • Tabs/Accordion
    • Text
    • Video Card
    • View Embed
    • Webform Embed

    Components available in a two-column Landing Page band

    This column size can contain the following Components:

    • Article Card
    • Contact Card
    • CTA Card
    • Event Card
    • Heading Title
    • iFrame
    • NC Map
    • Profile Card
    • Quick Links
    • Spotlight
    • Statistic Card
    • Tabs/Accordion
    • Text
    • Video Card
    • View Embed
    • Webform Embed

    1/3 Column Component Options2/3 Column Component Options
    Components available in a one-third-size-column Landing Page band
    This column size can contain the following Components: Article Card, Contact Card, CTA Card, Event Card, Heading Title, Profile Card, Quick Links, Statistic Card, Text, Video Card, View Embed, Webform Embed. 

     

    Components available in a two-thirds-size-column Landing Page band
    This column size can contain the following Components: Article Card, Contact Card, CTA Card, Event Card, Heading Title, iFrame, NC Map, Profile Card, Quick Links, Statistic Card, Tabs/Accordion, Text, Video Card, View Embed, Webform Embed. 

     

    Components available in a three-column Landing Page band

    This column size can contain the following Components:

    • Article Card
    • Contact Card
    • CTA Card
    • Event Card
    • Heading Title
    • iFrame
    • Profile Card
    • Quick Links
    • Statistic Card
    • Text
    • Video Card
    • View Embed
    • Webform Embed

    Components available in a four-column Landing Page band

    This column size can contain the following Components:

    • Article Card
    • Contact Card
    • CTA Card
    • Event Card
    • Heading Title
    • Profile Card
    • Quick Links
    • Statistic Card
    • Text
    • Video Card
  • 5

    Home Page Popular Topics

    This section only applies if:

    • the Landing Page serves as your website's Home Page and
    • the Home Page Search Block is enabled. 

    Disregard this section if the Landing Page you are editing is not a Home Page with the Search Block enabled. 

    Accordion
    Tab/Accordion Items

    Best Practices

    Use analytics to determine which topics are most popular among your visitors. The search terms and most popular pages in your website analytics dashboard will help you identify which pages or topics are being looked for most often. 

    The links you provide for Home Page Popular Topics appear beneath the search bar on the home page when the appropriate block is enabled.
    Example: When you add Home Page Popular Topics, they appear beneath the search bar of your Home Page Search Block. 

    Instructions

    Home Page Popular Topics are featured links that appear below the search bar when using the Home Page Search Block. It provides quick access to content that your visitors frequently search for.

    • URL - Start typing the Title of the content and select it from the options, or paste an external URL.
    • Link Text - Enter the text you want to display for the featured link.
    Home Page Popular Topics form
  • 6

    Menu Settings and Navigation

    Main Menu

    To add this page to the Main Menu, follow Step 2 of the Menu Structure & Navigation Help Topic.

  • 7

    Save

    Unlike Site Pages, Landing Pages only have two states: Published or Unpublished. Draft and Needs Review are not options. After a Landing Page has been published, the Save button automatically publishes any changes to content. 

    Landing pages only have two states: Published or Unpublished. The setting is controlled with this checkbox.

    Checkbox: The state you want the content to be in the next time you select the Save button.

    • Published - This content is available to the public. Only a Web Manager can choose this state.
    • Unpublished - This content may have been available to the public at one time, but is not now. Only a Web Manager can choose this state.

    Delete: Deleted Content Types cannot be recovered. If you may need this content again in the future, it is best to change the state to Unpublished.

    Save often as you work on your content to avoid losing work due to timing out or navigating away from the page.