Parallax Image

Basic Content - Parallax Image

The Parallax Image element will insert an image at its "full size" and pin it into the site.

Drag and drop the More Column Content element from the Website Editor Sidebar into the column space where you want to add the Parallax Image element.

img

This will open the Choose Content window.

img

Clicking the Parallax Image element will now drop it into the column space you selected.

There is no default image selected when inserting the element. An image should be added to make use of this element. Below is an example image:

img

This provides the effect when scrolling of the image maintaining its position while scrolling displays more of the image in the vertical direction.

img

Edit Parallax Image

Add Image

To add an image to the Parallax Image element, click the "cog" icon and then click the "pencil" (edit) action icon. This will display the Choose Image window to be used with this specific element.

img

Clicking the Edit Element button in the Website Editor Sidebar will also open the Choose Image window to be used with this specific element.

Height

The main property of the Parallax Image element to be edited is the Height which is measured (by default) as a percentage of the browser's viewport size (see w3Schools' Responsive Web Design - The Viewport for a definition of this property). Using this value as a percentage helps maintain an appropriate size for both desktop and mobile devices.

NOTE

The Parallax Image will only display the vertical scrolling direction for its image.


Also see Common Element Actions for more details on managing the Parallax Image element.

Last Updated: 2/28/2020, 4:29:59 PM