Managing the “Parallax Sections”
With Mies, we have set ourselves to create a simple yet flexible system to control pages with multiple text and images sections with parallax and a host of carefully designed animations. Let me walk you through the whole story so you can master all its strengths.
Creating the Page Structure
In WordPress, pages are hierarchical, meaning you can assign a parent page to each page. We have used this feature to allow you to control the sections of a top-level parent page. For example, on our demo “Home” page, the first is the parent, and the last two are child pages (screenshot). To understand how to create child pages, you can read this article and check out the video below:
Each page in a hierarchy has a Content Area and a Hero Area controlled by the options below the editor box. Depending on what you want to achieve with that page, you can change the Page Template and discover areas like Projects List or Maps Coordinates.
Using the Hero Area
You can set the hero area’s height and its contents from this section: subtitle, title, and description. In the description editor field, you can insert anything you like, including shortcodes (screenshot).
The background image is controlled from the right-hand sidebar of the edit page, in the Hero Area section.
Adding a Slideshow
You can also have a slideshow as the Hero Area background. To achieve this, add a gallery to the Hero Area, and we will turn the gallery images into a slideshow, like in the video below.
The slideshow images are controlled via the regular Media Library popup. You can read more about slideshows here.
Adding Videos
Mies also offers Hero Areas with video backgrounds. You can use only YouTube or Vimeo videos (so no self-hosted videos as background videos).
First, you need to get the YouTube or Vimeo regular URLs (no embed code here – just https://www.youtube.com/watch?v=dQw4w9WgXcQ or https://vimeo.com/298638056). The next step is to edit the Hero Area image by clicking on it and opening the Media Library modal window or going to Media → Library and editing the image there. Once it’s opened, add your URL to the Custom Video URL field (screenshot).
You can choose whether to autoplay the video on page load or allow your visitors to press play. Please note that you should not put content in hero areas with videos as background without autoplay because your visitors may not be able to click the play button due to the text in front. Here you can read more about videos.
Adding a Location Map
To get your location across, you need some fancy maps, and what better place to put them than the hero areas. Mies has you covered here too. Read more about how to add a location map in this article.
You can have unlimited page sections, each with an image, slideshow, map header, with or without content. Just add as many pages as you want as child pages to a top-level parent page.
This is it. Quite simple right? We hope you enjoy this witty logic we have envisioned to help you create beautifully animated pages in no time.