TABLE OF CONTENTS


When should you use the Landing Page?


The landing page is an alternate option available to supplement the Home Page template. While the Home page template is designed to showcase the variety of your programming (e.g. through the Home Page Carousel), the Landing Page template is a more immersive layout that showcases the story of your company or program.

The Landing Page Template can serve as your Home Page, or it can be used as a landing page for a program like an education department. Both layouts help users get an overview of what you offer, and navigate to deeper pages to get more detail.


Landing Page Content Blocks

The landing page is a vertically-scrolling full screen page with several flexible content blocks that can be included, repeated, and sorted to build a full experience and promotions for more detailed pages and events. You can add as many blocks of as many different types as it takes to "tell the story" of your company


Feature
A full-screen image or background video block with a title, button, and teaser to promote a marquee event or page.

Since version 2.2, you can align feature titles and buttons to top, center, bottom, left and right, and choose from a selection of lightening or darkening overlays to make your content pop.


Link Cloud
A full-screen image or background video block with a flexible number of buttons that serve as call to actions to a large navigation tree or menu.


Promo Grid
Similar to the Home Page promos, this promo section offers a flexible layout for 2-8 promos per section.
Promos are laid out in 3 or 2 columns depending on device size and number of promos, or a single column on mobile.

Since version 2.2, you can select spacing between promos or no spacing for larger promo blocks.


Full-width Promo
A full-width call to action


Text Section


A flexible text block to deliver a headline, short introductory piece of text, or embedded form

Media and Text

(New in 2.2).  A two-column text and image block to lock up a visual, text summary and call to action or media embed.


Event List, Grid or Carousel
A range of formats to display your upcoming or a category of events.

Post List

A range of formats to display recent blog posts (latest or latest in a category)


Map
A tour or venue map with either upcoming events or manual pins.


Video Gallery
A 2-column responsive layout for your featured videos. The layout works for 1 - 6 videos.


Partner / Sponsor Gallery
A rotating carousel of sponsor logos








Instagram Gallery


Social Share

A simple social share call to action that matches options available on events.








Landing Page Controls


To add a content block, click the "Add Content" Block button. You can then drag and drop your content block to create your desired order. We recommend that you begin your page with a feature.

Add a Feature


  • Set a Background Image. Because this image displays full screen, make sure you use the provided Photoshop template to manage any critical content. We do not recommend including text or images within the background image unless it is properly centered with plenty of negative space.
  • If you experience too much undesired cropping on mobile, you can set an optional Background Mobile Vertical Image to optimize your crop for mobile browsing.
  • You can set an optional Background Video, which creates a looping video experience behind the text of the feature.  Always set a fallback Background Image when setting a Background Video.  To optimize the experience and page load time, follow the guidelines for mastering your video and optimizing compression and limit your video to 20 seconds.  Background Video automatically plays when the page loads but does not play or include audio - it creates a visual experience only which is best practice required by browsers.
  • Set a Feature Title, Feature Teaser, Button Link, and Button text to create a call to action for the feature.


Add a Promo Section


  • Click the "Add Promo" button to add 2-3 promos.  If you only include 1 promo, it will display as a feature because of layout constraints, which may create unexpected image results.
  • Promos work the same as they do on other layouts with a slightly different image size - each includes a Title, teaser, Target (link) and Image. With this version of the promo, the entire Promo is displayed as a button so your Title serves as button text.
  • Promo sections can also include flexible design options to create visual interest.  You can include a unique Background Color for each Promo section, or even include a repeating Background Texture to create a full brand experience.

Add a Video Section


  • Click "Add Video" to add a video.  For each Video, paste either a Vimeo or Youtube link (in the format https://www.youtube.com/watch?v=XXXXXXXXXX)  The video should automatically embed - if it doesn't, you may need to check your videos privacy settings.  Facebook and Instagram videos will also work, but should be balanced visually because they often have unusual aspect ratios.  Note that Facebook videos are often set to private and cannot be embedded on other sites without approval from the author.
  • Video sections also include a unique Background Color for each section, or can include a repeating Background Texture to create a full brand experience.


Add a Map Section


  • The standard Map block controls are included in this content block.  Select either "Manual Locations," "Display All Events and Venues" or "Display Selected Events".
  • If you select Manual Locations, click "Add Location" and create a title and look up the address to create each pin on your map.
  • If you select a Display Events option, make sure all your venues have a Location (map) field set or event instances in those venues will not display.
  • If you select "Display Selected Events," search for and select all the events you want to include on your map. As these events close, you'll want to continuously curate this map to display your next set of events.
  • Also set an optional Map Heading to create a title heading for this section.
  • Map sections can also include a unique Background Color for each section, or can include a repeating Background Texture to create a full brand experience.


Add an Event List Section


  • You may need some Groundplan Support when setting up your Instagram Feed block for the first time.
  • Under 'Plugins', activate the Smash Balloon Instagram Feed plugin.
  • Authenticate your company Instagram user account.  Login using your company account to Instagram.
  • In WordPress, go to Instagram Feed >> Settings and click the blue "Connect an Instagram Account" button.
  • Select whether your connecting a personal or business feed (these are different account types in Instagram, choose the appropriate type.)
  • Allow WordPress to access your instagram data.  Confirm that you're connecting the correct account.
  • You should now see a green account summary under "Instagram Accounts".

  • Edit your Landing page, and add an "Instagram Grid Gallery" content block.
  • Choose the number of recent posts to display and the number of columns to display them in (1-4 typically looks best).  



Sticky Submenu

Since version 2.2, Landing Pages now have the option of adding an additional sticky submenu for that landing page or group of landing pages. This can be a useful feature to connect related landing pages together , e.g for a multipage digital annual report, education section, audio tour menu, etc.

The submenu appears under the main navigation, and includes an optional call to action (e.g. a donate button):

The submenu is also sticky - it will lock to the top of the page as the user scrolls.

To enable the Submenu

  1. Go to Appearance >> Menus, and click "create a New Menu."
  2. Add items to the menu including your landing page, and save the menu. This menu will be used on all related landing pages, so include any page that will feature the menu. Do not apply the menu to any display location, as this would replace your main menu.
  3. Edit your landing page.  Under Landing Pack Sticky Submenu, select "Enable Submenu"


  4. Select a background color for your menu
  5. Select the menu you created in step 2 under "Submenu"
  6. Add a menu Label, e.g. "Menu" or "{Section} Menu"
  7. Add an optional Call to action link and button label.
  8. If you enable the submenu on other pages, make sure the values for Submenu, Background color, Menu Label, and Calls to action are always the same on all related pages. This will help users navigate through the section.