This download adds a widget area after the header with a background image.
The widgets background image moves at a different speed to the overlaying content when scrolling, creating the effect you see in the following demo video :
Parallax Demo #
Shows the default image added to the customizer displayed after the header on all pages of the Genesis Sample child theme.
Tested using the new Genesis Sample child theme by StudioPress.
Note : The solution also includes code to use the featured image or a custom image added using WordPress or ACF custom fields otherwise the default image set in the customizer is shown.
You can change the image using the customize > Image After Header setting. Otherwise, add a default named parallax.jpg to your themes parallax > images folder.
Installing Parallax Files #
There’s 3 steps relating to use of the files inside the download folder :
Step 1 : Upload the folder named parallax to your child theme folder.
I’ve tried repeating these steps 5 times using the featured image option on Parallax Pro and I can’t figure out what I’m doing wrong. Nothing is showing up even though I have a Featured Image set.
When I follow the steps to add a responsive image without the Parallax effect (https://wpsites.net/web-design/responsive-image-after-header-on-single-pages-in-genesis/) it works! How do I add the Parallax effect to that?
Correction: When I use this tutorial https://wpsites.net/web-design/genesis-responsive-after-header-featured-image-using-background-position-cover/ it works
Nothing will work if the After Header widget area is empty.
Once you add a widget to this area, the code executes outputting HTML. The reason for this is that you don’t want the code executing if there’s no featured image or content as it will look very strange without these elements.
The code uses is_active_sidebar https://codex.wordpress.org/Function_Reference/is_active_sidebar