Build depth with images

Stack multiple images, tune their depth and scale, and create a dimensional composition. Transparent foreground images work especially well when you want lower layers to remain visible.

Add text to the scene

Place text alongside image layers, position it horizontally and vertically, and set its depth so it moves as part of the composition.

Effect

Choose No effect to show a static layered composition, or Parallax to make it tilt in response to pointer movement.

Intensity

Controls how strongly pointer position affects the widget's tilt. Increase it for more noticeable movement or lower it for a subtler effect.

Intensity with reduced motion

Sets the parallax strength for visitors whose device requests reduced motion. Set it to 0% to turn off pointer-driven movement for them.

Maximum tilt angle

Sets the maximum rotation used by the effect. Smaller values create a gentle tilt; larger values make the movement more pronounced.

Perspective

Adjusts the apparent depth of the 3D scene. A lower value gives a stronger perspective; a higher value makes it flatter and more restrained.

In widget area

When enabled, the effect responds only while the pointer is inside the widget. When disabled, pointer position elsewhere on the page can influence the widget.

Content type

Choose whether a layer contains an image or text. The selected type determines which layer-specific controls are shown.

Depth

Adjusts the layer's position along the 3D depth axis. Layers at different depths move and scale differently, helping create separation between foreground and background.

Movement strength

Multiplies the depth-based movement of an individual layer. Use 0% to keep that layer from moving with the other layers, 100% for the normal amount, or a higher value for stronger movement.

Scale

Sets the layer's size. A value of 100% is the reference size; a value above 100% enlarges it. A little extra scale can help prevent gaps around moving image layers.

Alignment

Aligns the image layer to the left, center, or right.

Width

Sets the image width. Elementor provides responsive values and the available units, including percent, pixels, and viewport width.

Opacity

Controls image transparency from 0% (invisible) to 100% (fully opaque).

CSS Filters

Adjusts the image's visual appearance using Elementor's CSS filter controls.

Border and Border Radius

Adds and styles an image border, then rounds its corners independently as desired.

Box Shadow

Adds a shadow around the image layer.

Horizontal Position

Positions the text layer to the left, center, or right.

Vertical Position

Positions the text layer at the top, middle, or bottom.

Text Width

Sets the width of the text area within its layer.

Alignment

Aligns text left, center, right, or justified.

Typography and Text Color

Controls the text layer's typography and text color.

Background, Border, and Shadows

Styles the text layer with a background, border, text shadow, and box shadow.

Padding

Sets the inner spacing around the text using pixels, percent, em, or rem units.

Paragraph Spacing

Sets the space after paragraphs inside the text layer. Available units include pixels, em, and rem.

Link Colors

Sets separate colors for links in the text layer and their hover or focus state.

Parallax with image layers

1. Add the widget to an Elementor page.
2. Choose an image for the first, base layer.
3. Add more image layers and arrange them from background to foreground.
4. Adjust each layer's Depth, Movement strength, and Scale.
5. Select Parallax and tune the effect settings.
6. Preview the page and move the pointer to see the layers respond.

Parallax with images and text

1. Add the widget and set an image as the base layer.
2. Add image layers for the foreground elements.
3. Add a layer, choose Text as its content type, and enter your text.
4. Set the text layer's depth and horizontal and vertical position.
5. Adjust its width, typography, color, background, border, and spacing.
6. Select Parallax, tune the effect, and preview the composition.