Managing the “Parallax Sections”

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

How to make a child page and link it to a parent page

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 below the editor box.


Editing the Content Area

This is the area where you can create the text and images sections displayed side-by-side like in this example. To understand how to create and edit them, you can read this article or you can watch the video tutorial below.

From this section, you can set the height of the hero area where you have three options: half, two thirds, full height. You can also add the hero content: subtitle, title, and description. In the description editor field, you can insert anything you like, including shortcodes.

The background image for the Header Area is controlled from the right-hand sidebar of the edit page, in the Featured Image section.

Adding a Slideshow

If you choose the “Slideshow Header” Page Template from the right sidebar, a new “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 from the Page Attributes section (screenshot), a new “Map Coordinates & Display Options” section will appear from where you can add your locations. (screenshot). You can read more about adding a location map in this article.

You can have unlimited page sections, each with an image, slideshow, 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:

Updated on September 14, 2020

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.