Managing the “Parallax Sections”

With Rosa, 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.

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.

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

If you choose the “Slideshow Head­er” Page Tem­plate from the right side­bar, anoth­er “Slideshow Set­tings” sec­tion will appear under the edi­tor, to allow you to add the images for the slideshow and con­trol its set­tings (screen­shot).

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 Area. Rosa has you cov­ered here too.

If you choose the “Map Head­er” Page Tem­plate, a new “Map Coor­di­nates & Dis­play Options” sec­tion will appear from where you can your loca­tions. (screen­shot)

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:

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

Updated on May 8, 2017

Was this article helpful?