Adding Parallax Sections with TrueParallax

TrueParallax is a 3D parallax technology built into Oxygen. It lets you create gorgeous mobile-responsive parallax sections on your Weebly website.

How Does TrueParallax Differ from Weebly's Parallax

Weebly does offer "parallax" background images as part of their Weebly sections element, but its very different from what we offer. Weebly's parallax offering is just a fixed background image. Our TrueParallax actually moves the image as the user scrolls down, simply at a slower rate, creating a 3D illusion of depth. Furthermore, our TrueParallax works on mobile, whereas Weebly's solution does not.

Mobile Responsive

TrueParallax works on any device, mobile or desktop, whereas Weebly's parallax solution only works on desktop devices and won't scroll on mobile.

‍
3D Depth Parallax

Weebly's parallax isn't "true" parallax, as it doesn't simulate 3D depth. TrueParallax creates an illusion of depth via rate changes.

‍
Integrated Code

TrueParallax leverages integrated native dependency-free code, yielding faster website speeds & loading for better SEO performance.

How to Add TrueParallax to Your Weebly Website

Let's go through the procedure of adding TrueParallax sections to your Weebly website.

Step 1: Add the TrueParallax section to your website via either the Oxygen Page Builder, or Header Type selection.

The first step is to actually add the TrueParallax sections onto the page you're building. You can do this in two different ways, as outlined below:

1. Option 1: Use the Oxygen Page Builder - For those who want to use TrueParallax in combination with other Oxygen specialty features (such as PureSlider header sliders). The Oxygen Page Builder lets you create website page layouts and designs that you can then import into Weebly. In the Page Builder, you can create your own desired page layout by dragging and dropping parallax sections in any configuration you want. There is no limit on the number of parallax sections included via this approach. Click here to see instructions on getting started with the Page Builder.
2. Option 2: Change the Header Type of a Page - For simpler layouts, if you just want to have a normal drag and drop page with a set number of parallax sections. If you'd just exclusively like to add TrueParallax, you can simply do the following: In the "Pages" tab in Weebly --> Create a new page (or click on an existing one) --> Click the "header type" dropdown in the left hand column --> Scroll through the header type options. You'll see Parallax-5 for example, the number defines how many parallax sections are in the page. So if you're seeking to add five Parallax sections, you'd select "Parallax-5."

Note: After adding TrueParallax, we recommend a quick browser refresh prior to editing it.

Step 2: Add Your Own Background Image to TrueParallax

By now, you should've created a page with your desired amount of parallax sections.

​If you added TrueParallax by setting the header type to Parallax (option 2) instead of using the page builder (option 1): the number of parallax sections in a page is proportional to the number of white non-parallax sections. For example, if you chose "parallax-3" as your header type, you'll have three parallax sections and three white content sections in an alternating pattern.

To Add Background Images, You'll Need to Lock & Unlock Background Editability

To add an image, click the "Toggle Background Editability" button that is below the parallax section you wish to edit. Clicking this button will "unlock" the section, making it possible to click on it and upload your own custom image.

After you click the button to "unlock" the parallax section, click on the section itself. You should see a pop-up appear, letting you upload your own custom image.

Upload your desired image. After it's done uploading, click the button again to "relock" the section. You'll notice the image you uploaded will shift into its correct position.

After you "relock" the section, you'll be able to drag and drop Weebly elements on top of the section. For instance, you can add text and forms on top of the parallax section.

When adding background images to your parallax sections, please ensure that your background images are large enough to cover the entire screen. Therefore, we recommend uploading high quality images that have a resolution of at least 1920 x 1080. Any smaller and the images may not stretch to fill the section, leaving white space.

How to Remove an Image in a Parallax Section

To remove a background image, click on the "toggle" button again and hover over the bottom of the image. You'll need to scroll until the section is right in the middle of the screen. Hover over the image until you see a small popup appear with a trash icon. Click on it to delete the image. If nothing pops up, it means you have to toggle the background editability again.

Adding Content into the Parallax Sections

Simply drag 'n drop elements from the sidebar into the parallax sections to drop them in place. The more items you drop, the bigger the parallax sections get. They will automatically adjust their height to accommodate your content. If you need more padding between the edges of the parallax section and your content, use the "spacer" Weebly element.

If you're using a TrueParallax Header Type (instead of Page Builder), Here's How to Delete the White Non-Parallax Sections if Need Be

You may notice that your parallax pages have white content spaces in between parallax sections. What if you don't want a white content space? Or if you want only parallax images? The solution is very simple. If you don't add any content to the white sections in between the parallax image sections, they will disappear on the live version of your website.