Managing the “Parallax Sections”

With Mies, we have set our­selves the task to cre­ate a sim­ple yet flex­i­ble sys­tem to con­trol pages with mul­ti­ple text and images sec­tions with par­al­lax and a host of care­ful­ly designed ani­ma­tions. Let me walk you through the whole sto­ry so you can mas­ter all its strengths.

Pages and Child Pages for Sections

In Word­Press, pages are hier­ar­chi­cal, mean­ing you can assign a par­ent page to each page. We have used this fea­ture to allow you to con­trol the sec­tions of a top lev­el par­ent page. For exam­ple, on our demo “Home” page, first one is the par­ent and the last two are child pages (screen­shot).

Each page in a hier­ar­chy has a Content Area (some­times orga­nized into columns with our Pix­Codes Columns short­code) and a Fea­tured Head­er Area con­trolled by the options bel­low the edi­tor box.


Hero Area

From this sec­tion, you can set the height of the hero area and its con­tents: sub­ti­tle, title, and descrip­tion. In the descrip­tion edi­tor field, you can insert any­thing you like, includ­ing short­codes (screen­shot).

The back­ground image is con­trolled from the right-hand side­bar of the edit page, in the Hero Area sec­tion.

Adding a Slideshow

You can also have a slideshow as the Hero Area back­ground. To achieve this, sim­ply add a gallery to the Hero Area, not a sin­gle image, and we will turn the gallery images into a slideshow (like in the screen­shot bel­low).

The slideshow images are con­trolled via the reg­u­lar Media Library pop­up. You can read more about slideshows here.  Here you can read more about slid­ers.

Adding Videos

Mies also offers Hero Areas with video back­grounds. You can use only YouTube or Vimeo videos (so no self-host­ed videos as back­ground videos — only as con­tent videos as Word­Press allows from the start).

First you need to get the YouTube or Vimeo reg­u­lar URLs (no embed code here — just https://www.youtube.com/watch?v=W2iB2eRGbpA or http://vimeo.com/113311298) and then either by edit­ing the image in the Hero Area (click­ing on it will open the Media Library modal win­dow — like above) or going to Media → Library and edit­ing the image there,  add your URL to the Cus­tom Video URL field. (screen­shot)

You can choose whether to auto­play the video on page load or allow your vis­i­tors to press play. Please note that you should not put con­tent in hero areas that have videos as back­ground with­out auto­play because your vis­i­tors may not be able to click the play but­ton due to the text in front. Here you can read more about videos.

Adding a Location Map

To get your loca­tion across you def­i­nite­ly need some fan­cy maps, and what bet­ter place to put them than the hero areas. Mies has you cov­ered here too, but more about this, in this arti­cle.

You can have unlim­it­ed page sec­tions each with an image, slideshow or map head­er and with our with­out con­tent. Just add as many pages as you want as child pages to a top lev­el par­ent page.

This is it. Quite sim­ple right? We hope you enjoy this wit­ty log­ic we have envi­sioned to help you cre­ate beau­ti­ful­ly ani­mat­ed pages in no time.

Addi­tion­al Read­ings:

Updated on May 8, 2017

Was this article helpful?

Related Articles