The landing page is a new template available in the 1.4 Release of Groundplan Theme (Sept 2019).


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 Components

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.


Promo Section
Similar to the Home Page promos, this promo section offers a flexible layout for 2-8 promos per section.


Full-width Promo
A full-width call to action


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


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

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)



Text Section


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


Partner / Sponsor Gallery
A rotating carousel of sponsor logos


Instagram Gallery







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


Add an Instagram Gallery

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