Many users of Ultimatum ask us how to achieve the Parallax effect in the child themes they are making. Whilst it is possible to add the effect using a plugin, this tutorial will take a look at the features already built-in to Ultimatum.
What IS the Parallax Effect?
Is is an effect that gives the viewer the impression that a view is moving as they do; a trick of perspective (the word parallax derives from the Greek word parallaxis, which means alteration). Imagine you were in a corridor with a window in it and you were walking along the corridor as you look out of the window. The view you would see moves as you do. Web design Parallax is the same; as the site visitor scrolls the page, the ‘window’ (a container on the page) moves, and so what you see ‘through’ that ‘window’ also moves. Why use it? Because it draws the eye and focusses the eye of the site visitor to that element, holding their attention. Place some information over the container and you make its message stronger.
When to Use the Parallax Effect
The effect works best if the parallax container is some way down a long page. Preferably towards or at the bottom of the screen when the page is first opened, the page should scroll far enough to move it up and off the top of the page. And you need a message to put over it. Because text over images is often hard to read, you might try a simple trick like having the image in a monotone, an effect most image editors can easily achieve.
Ultimatum has Native Parallax Support
How to do it in Ultimatum
Insert a row in a layout where you want the Parallax effect.
In the bottom left find the edit icon and open the Wrapper CSS panel.
In the ‘Background Color and Image’ accordion, insert the desired background image and set ‘Image Repeat’ to No Repeat.
In the ‘Additional Classes’ accordion, give it a Custom CSS Class: parallax. If you want to give it some height and make it responsive, give it a second custom CSS class. I am going to add a class called parallax-1. In custom CSS I set this to:
That’s it you have a parallax section in your layout.
This was really helpful article thanks
Great post! Thank you for this. One question. Is there a way to use this within a page in a instead of creating a row in the Ultimatum layout?
It should work for any element, as long as you can set the image to the background. The article shows it being done inside a post!
Hi Trevor, I’m an absolute beginner of ultimatum, I’m just trying to make some initial training. I did it all, but, where should I add this text?
Ask me in the support forums