Guide to Creating Landing Pages
Strategies and best practices around building successful landing pages
Purpose of a Landing Page
Landing pages are used to market to visitors an overview of a topic or theme and function as means for them to take an action.
On nature.org, we use landing pages to promote actions such as How to Help, provide overviews about Who We Are, drive awareness around Our Priorities, and share information from chapter programs and regions of Where We Work.
In this guide, you will learn best practices around how to construct your landing page that takes into account content strategy, optimal user experience, page layout design, and components that can be used on the AEM landing page template.
What a landing pages are and are not
Landing pages can be:
- A hub with pathways (call to actions) to other pages
- A page with lead generation goals
- A page that provides succinct messaging that links to more detailed information
Landing pages are not:
- Detailed article pages
- A page with no call to action(s)
Below are listed five key sections that can help you plan and strategize an approach to creating and building landing pages:
1 - Framing a clear content strategy
2 - Structuring the landing page
3 - Building a good landing page layout
4 - Avoiding bad landing page layouts
5 - Using components in Landing & Campaigns pages
1. Framing a clear content strategy
Every build of a landing page should start with a goal. To help define the goal, consider what exactly you’re trying to have your landing page solve for.
Start evey page build with a content brief the outlines the following details:
What is the goal of the page?
What are the call to actions?
Who is your target audience?
What would you like users to do?
What do you expect success to look like?
2. Structuring the landing page
Like a narrative, the structure of a landing page should open with a beginning (header) and close with an end (footer). In between is the body that represents the main content of the page.
To understand how to best construct a page, follow the inverted pyramid format: provide most important information at the top and increase in detail the further the story progresses.
1. The head - Most prominent information
The purpose of the head is to offer a framing to the user of where they are and what they should expect to see on the page. This area should include the navigation header, hero with a clear header text, and introductory messaging. This area could also function as a call to action given this is the most highly viewed area.
2. The body - Main content
The body if where you position the key content you want users to explore or learn more about relating to the topic of the page. The content in the body should add context and expand on the goals of the page. The body is where you would add call out feature blocks, videos and call to action links, and supporting details.
3. The details - Related information
The details should be positioned towards the end of the page where users who make it far enough down would be presented with further information. This is where related articles or content would be best situated.
4. The tail - Footer
End the page with takeaways for the user, whether it’s providing additional resources, download links, email sign up, or a call to action to navigate them elsewhere like a related page or its parent page. The page footer would be the very last item users encounter on the page.
3. Building a good landing page layout
Here are the fundamental design strategies to building an effective landing page layout:
1. Show a variety of components
Break up your content by using a variety of different components to vary the layout of the page. This will help guide the user through content that appears digestible and visually engaging. See more about how chunking your page content could better optimize the user experience.
2. Include clear call to actions across the page
Clear and meaningful CTAs could deepen the user’s journey as well as help you achieve your desired goals for users to accomplish. Call to action goals for users could include: building their awareness, engaging with content, signing up for newsletters, downloading resources, or getting involved with your mission.
Introduce call to actions throughout the page with clear messaging as to what the linked page entails. Always frame every call to action with “What value is this call to action serving the user and the goal of the page?”
3. Keeping the page organized and succinct
It’s natural to feel compelled to try to fit as much as possible on a page because you want your user to get as much information as possible before they bounce off. Overloading the page, however, can also mean leading to overloading your visitors with information that they’re unlikely to retain.
Organize your page with key sections and goals for each section (see Inverted Pyramid above), and keep your content succinct. If your landing is serving to present distinguished sections, consider using Tabs Container (C19) to section off different sub pages. Or, use Anchor Links (C56) to allow users to jump across the page.
Keep in mind that most users are likely scanning your page. How can you get information across as clearly as possible?

4. Avoiding bad landing page layouts
To ensure your layout is dynamic and engaging, we advise to avoid constructing your layout with these examples:
1. Avoid making your page too text heavy.
Text heavy pages will deter users from staying on your page. Too much written content can overwhelm users, making it difficult for users to remain fully engaged and interested. Remember that landing pages are not article pages. If there is a lot of information to be formatted on the page, consider using components that can hide and expose content at the users’ will, such as the Image and Text Expansion component (C89), Interactive Tiles (C133), or Accordion (C54).
2. Avoid making the top of the page too vague or too detailed.
Make the intro of the landing page clear with a non-ambiguous header. Having a short descriptive overview could help make clear the purpose of the page. However, including too much detail at the top could detract users from furthering their journey on your page.
3. Avoid stacking the same components on top of one another.
Use varied components to display your content to ensure the page layout feels diverse and dynamic. Unless you’re using components that are meant to be grouped as a collection, such as Feature Content Blocks (C13), finding other component variations can help make the call to actions stand out more prominently.
4. Avoid stacking full bleed image based components on top of one another.
White space can help give the page a sense of visual break. When the page is filled with edge-to-edge full bleed visual components could make the page feel heavy and clustered. For instance, avoid stacking a Full Width Image (C10) immediately above or below a Full Bleed Featured Content (C13).
5. Using components in Landing & Campaigns pages
The Landings and Campaigns page template has a large number of available components and six template regions.
The header and footer regions have inherited components in place already. The remaining sections — Hero, Intro, Body, Ending — are where you can configure components accordingly. Each section has certain allowed components. Click into the template section tabs to find which components are available under each section.
*Important Note:
Open container component can only be used with approval. Submit a digital request for usage of the component.
Available components by sections
-
Hit Shift-Z to see full view of prototype.
C01 Header (Inherited)
-
Hit Shift-Z to see full view of prototype.
C08 Hero Image w/ CTA
C09 Hero Image
C35 Connect Callout
C49 Menu Navigation
C122 Progress Tracker
C123 Table (Please reach out to Global Digital for support around configuration)
C127 Split Hero (Light)
C127 Split Hero (Dark)
C128 Immersive Hero
Width and Separator
-
Hit Shift-Z to see full view of prototype.
C11 Title Text Call to Action
C12 In-Page Navigation - Buttons
C12 In-Page Navigation - Tiles
C41 Find a Local Chapter
C45 Visual Listing - Square Thumbnails
C45 Visual Listing - Icons
C45 Visual Listing - Document Download
C59 Find a Local Event
C104 Feature Collection
C122 Progress Tracker
Width and Separator
-
Hit Shift-Z to see full view of prototype.
C10 Full Photo Divider CTA
C11 Title Text Call to Action
C12 In-Page Navigation - Buttons
C12 In-Page Navigation - Tiles
C13 Featured Content
C19 Tab Container
C20 Rich Text Editor (RTE)
C21 Resource Listing
C23 Featured Number List
C24 Map
C25 Related Events
C26 Media Gallery
C27 Related Articles (Manual or Auto) - 3 up
C27 Related Articles (Manual or Auto) - 4 up
C27 Related Articles (Manual or Auto) - 5 up
C27 Related Articles (Author)
C28 Block Quote
C36 Signup Email Form (Country and State configurations are optional.)
C38 Image (Medium, Large and Full bleed variations)
C39 YouTube Video
C41 Find a Local Chapter
C45 Visual Listing - Square Thumbnails
C45 Visual Listing - Icons
C45 Visual Listing - Document Download
C47 Related People
C49 Menu Navigation
C52 Text 4-up Links
C54 Accordion
*C63 Open Container Component
C66 Visual Download - Single Large
C66 Visual Download - Listicle
C67 Timeline
C70 Callout
C73 Audio
C74 Text List Callout - Horizontal
C74 Text List Callout - VerticalC79 Text Asset Component
C88 Partner Brand
C89 Image and Text Expansion
C96 Image Slider
C104 Feature Collection
C105 Statistics - 4-up (one column)
C105 Statistics - 6 up (two column)
C106 Pie Chart
C107 Column Chart
C108 Line Chart
C111 Image Mosaic
C117 Scrolling Slideshow
C120 Interactive Points Over Image
C121 Image Collage
C122 Progress Tracker
C123 Table (Please reach out to Global Digital for support around configuration.)
C126 Overview and Chart
C129 Visual Grid Listing
C130 Storytelling
C131 Vertical Timeline
C133 Interactive Tiles (Click into first tile to see the modal interaction.)
Width and Separator
-
Hit Shift-Z to see full view of prototype.
C02 Footer (Inherited)
Filling out the Landing & Campaigns page properties:
- Audience tag: Use ONLY if you are creating a campaign page with a specific and exclusive audience in mind that you are targeting.
- Content Type: Required, single select. Choose the content type that most accurately describes your page.
- Company Tag: Generally do not use. These will be largely set up at launch. Specific pages (such as Careers) and teams (such as the Magazine) will have company tags to identify their content.
- Geographic Location Tag: Multi-select. Required. Select only 1.
- Places we Protect Tag: Unlikely that this will apply. Use only if the campaign is about a specific place we protect (e.g. a land deal). Do NOT tag all the places benefitting from a campaign
- People Tag: Do not use.
- Topic Tag: Tag the main topics of the page only. Include the top 1 or 2 tags.
