This template adds parallax to the background image sections in the front page of the new version of the Genesis Sample child theme by StudioPress.
The background image sections move at a different speed to the overlaying widget content when scrolling, creating the parallax scrolling effect you see in the following demo video :
Demo Video #
Shows the parallax scrolling effect applied to the background image sections on the Genesis Sample themes front page template.
You can also use this template on any single page, post or custom post type using this method.
Call-to-Action Widget #
Note : Also includes the following single column Call-to-Action widget before the footer which only displays on the front page. All other pages may use the 3 column footer widgets.
The download folder also includes a front page template with widget areas and image sections enabling you to add images via the customizer to create the parallax effect.
Installation #
There’s 3 steps relating to usage of the files inside the download folder for logged in users :
Step 1 : Upload the folder named parallax to the Genesis Sample theme folder.
Step 2 : Upload the front-page.php file to the Genesis Sample theme folder.
Hey Brad. Instal as simple as pie. Do you maybe have any great tips and tricks for CSS for mobile? Maybe an example URL? The new homepage is looking pretty sorry on my iPhone.
Hello Steve. Please link to your site.
http://www.opusuno.com/new/
Re-read my reply and reads pretty knee-jerky and terse. Sorry. Wasn’t intended to be.. was running with my hair on fire last week. If you want to delete this thread and point me to a better way to communicate LMK> Any help is appreciated.
FYI.. I tried to re-install everything to fix myself, except now no images are appearing? Weird.
Made a temp account for you too
Brad/TEMPADMIN2020
Great tutorial Brad. The only issue I’m having is that I cannot get the images to display. I replaced the default one’s by loading my own to the media library but still cannot make them show up. What I do get is background color #000 on section 1,3 and 5. Everything looks right & there are no obvious errors. I’m using WP 5.2.2, Genesis 3.0.2 and Genesis Sample 2.10.0. Any ideas?
This is caused by changes to the Genesis Sample child theme relating to child theme handle for inline styles which is used to add the images which i’ve written about here.
Here’s the fix i added to the tutorial https://wpsites.net/web-design/add-parallax-to-genesis-sample-theme/#new-genesis-sample-versions
I haven’t updated the code in the download folder because they may change it back.
Let me know if you want me to send you the updated files.
Thanks Brad. Didn’t see the code fixes below the download – my bad. I also received the files. Thank you very much. Works great!
You’re welcome. I added the fix after seeing your comment.