This download includes 2 templates which enable you to add a image after the header with the Parallax Effect.
You can overlay either the (1) post/page title or (2) widget content which moves at a different speed to the image on scroll creating a parallax effect.
Here’s the demo video showing what each template does.
Demo Video #
Tested after installation in the Parallax Pro & Genesis Sample child themes by StudioPress.
Shows the featured image used as the parallax image on selected single posts and pages. Also shows the fallback image used when no featured image set.
The templates are named :
- Parallax Single Title – This file is named parallax_single_title.php
- Parallax Single Widget – This file is named parallax_single_widget.php
The Parallax Single Title template displays the entry title and post info which includes the author name and post authors archive link outside the loop.
Installation – Included #
There’s only 3 steps relating to installation of the code in the download folder :
Step 1 : Upload the folder named parallax to your child themes root directory like this :
How could I minimize the size of that background image, to let’s say 300px high?
There would be at least 3 ways to do this :
You could modify the value for this CSS declaration
height: calc(100vh - 66px);when used with theYou could use jQuery to control the height.
You could crop the image to a height of 300px.
Thank you so much!