In a parallax slider the background images move slower than the page while you scroll. It adds depth without extra content. Parallax is part of Gutenslider Pro. (Updated for Gutenslider 7.0.)
Turn it on
- Select the slider.
- Open the Effects panel and turn on Parallax.
- Choose the direction (the image moves up or down while you scroll) and the amount. Small amounts look calmer.
The effect shows on the page, not in the editor. See it on the examples page.
In Gutenslider 7.0 the parallax is done with CSS instead of a script, and it stays still when the visitor’s system asks for reduced motion.
Setup 1: a photo portfolio
- Transition slide, two slides per view (one on phones).
- Content mode fixed, with one heading, for example “Portrait photography”.
- Parallax down, a small amount.
Setup 2: a holiday rental
- Your best photos of the place, alignment wide.
- Parallax on, direction up.
- Changing content with a short line per room, and a booking button on the last slide.
Tips
- Use photos with some room at the top and bottom: parallax crops a little more of the image.
- Combine parallax with shape dividers for sections that flow into each other.