Managing the “Parallax Sections”

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

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.

The background image is controlled from the right-hand sidebar of the edit page, in the Hero Area section.

Adding a Slideshow

If you choose the “Slideshow Header” Page Template from the right sidebar, another “Slideshow Settings” section will appear under the editor, to allow you to add the images for the slideshow and control its settings (screenshot).

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 Area. Rosa has you covered here too.

If you choose the “Map Header” Page Template, a new “Map Coordinates & Display Options” section will appear from where you can your locations. (screenshot)

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?