• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Parallax To Genesis Sample Theme

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.

Register for full access

Related Tutorials

  • Copy Front Page Template With Unique Widget Areas Using Different Background Images – Parallax Pro
  • Parallax Pro Front Page As Page Template – Easy Setup Version
  • How To Add Parallax To Front Page 1 Widget In Any Genesis Child Theme

Parallax Pro Theme

Reader Interactions

Comments

  1. Steve Bell says

    July 9, 2020 at 1:07 am

    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.

    Log in to Reply
    • Brad Dalton says

      July 9, 2020 at 1:26 am

      Hello Steve. Please link to your site.

      Log in to Reply
      • Steve Bell says

        July 13, 2020 at 5:01 pm

        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

        Log in to Reply
  2. Mike Childress says

    July 22, 2019 at 9:34 am

    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?

    Log in to Reply
    • Brad Dalton says

      July 22, 2019 at 11:11 am

      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.

      Log in to Reply
      • Mike says

        July 22, 2019 at 12:32 pm

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

        Log in to Reply
        • Brad Dalton says

          July 22, 2019 at 11:26 pm

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

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.