WP SITES

Log in

Add Parallax To Genesis Sample Theme

—

by

Brad Dalton

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.

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.

Register for full access

Related Tutorials

Comments

7 responses to “Add Parallax To Genesis Sample Theme”

  1. Steve Bell Avatar
    Steve Bell

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Steve. Please link to your site.

      1. Steve Bell Avatar
        Steve Bell

        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

  2. Mike Childress Avatar
    Mike Childress

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Mike Avatar
        Mike

        Thanks Brad. Didn’t see the code fixes below the download – my bad. I also received the files. Thank you very much. Works great!

        1. Brad Dalton Avatar
          Brad Dalton

          You’re welcome. I added the fix after seeing your comment.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.