TrueDepth Parallax Overview

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

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.‍

‍
How To Set-Up And Use PureSlider

Note: The Mocha Demo video tutorial goes into how to add and setup Parallax on your Weebly website.

Option 1: Use The Mocha Page Builder

The Mocha 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.

‍
Option 2: Change Header Type

If you'd just exclusively like to add TrueParallax, you can simply click on the "Pages" tab in Weebly

• Click on 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."
  

Editing And Using Parallax

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.

‍
Adding Background Images

Note: The Mocha Demo video tutorial goes into how to add and setup Parallax on your Weebly website.

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.

Uploading An Image Into A Parallax Section

​Notice the black sections throughout the page. Above them is a parallax section. To add an image, click on the button for the appropriate section, and then click anywhere in the middle of the section.

After you add the background image, click on the button again to "lock" it. You'll notice that the image shifts a bit back into a correct position. If any issues arise, please contact us.

Removing 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.

Deleting The White Drag And Drop Sections In Between The Parallax Sections (If Option 2 Used To Add Parallax)

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.

‍