Skip to main content
3D Parallax Element

Create a customizable 3D parallax element with up to 4 layers

Webydo Support avatar
Written by Webydo Support
Updated over 11 months ago

Step 1: Drag and drop the 3D Parallax Element onto the canvas.

Step 2: The default element will look like this:

Step 3: You can resize the button, like you would any element, by dragging the bounding box handles or by writing values in the Design Panel. By default, the element will be set fit to width; to turn this off open the Design Panel and uncheck the box to the left of Width. 

Step 4: Use the properties panel to edit each image layer. The layers work from back to front, with the background being the base layer and layer 4 the top layer. 

Perspective Intensity: Allows you to choose the intensity of the overall element. 

To upload your images, click on the image icon for each layer. 

Each layer can be edited separately. You are able to edit the opacity, size, position and level of 3D effect for each layer independently.

Opacity: edit the opacity of your layer.

Size: edit the size of your image, relative to the size of the entire element. 

H Position from Center: edit the horizontal placement of your image from the center of the layer. A negative number will push it to the left, and a positive number will push it to the right.

V Position from Center: edit the vertical placement of your image from the center of the layer. A negative number will push it to to the top, and a positive number will push it to the bottom.

Level of 3D Effect: edit the level of hover effect for the layer. The higher the number, the more the element will shift from it's original position. The minimum level is 50, this will match the level of movement for the background layer.

You are also able to turn layers off completely by unchecking the box to the left of the layer name. 

Step 5: Link your new 3D Parallax element to a Page, Link or Anchor. 

Step 6: Preview or Publish your site, and hover your mouse over your new element you have just created. 

Did this answer your question?