Managing the “Parallax Sections”

With Mies, we have set ourselves the task 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.

Pages and Child Pages for Sections

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, first one is the parent and the last two are child pages (screenshot).

Each page in a hierarchy has a Content Area (sometimes organized into columns with our PixCodes Columns shortcode) and a Featured Header Area controlled by the options bellow the editor box.


Hero Area

From this section, you can set the height of the hero area and its contents: 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, simply add a gallery to the Hero Area, not a single image, and we will turn the gallery images into a slideshow (like in the screenshot bellow).

The slideshow images are controlled via the regular Media Library popup. You can read more about slideshows here.  Here you can read more about sliders.

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 — only as content videos as WordPress allows from the start).

First you need to get the YouTube or Vimeo regular URLs (no embed code here — just https://www.youtube.com/watch?v=W2iB2eRGbpA or http://vimeo.com/113311298) and then either by editing the image in the Hero Area (clicking on it will open the Media Library modal window — like above) or going to Media → Library and editing the image there,  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 that have 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 definitely need some fancy maps, and what better place to put them than the hero areas. Mies has you covered here too, but more about this, in this article.

You can have unlimited page sections each with an image, slideshow or map header and with our 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.

Additional Readings:

This article applies to Mies, and Rosa as they share the same underlying structure.

Updated on May 8, 2017

Was this article helpful?