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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

After Header Parallax Image

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.

Register for full access

Related Tutorials

  • Templates To Add Unique Hero Image After Header With Overlaying Content In Parallax Pro
  • Genesis After Header Parallax Templates
  • How To Add Parallax To Front Page 1 Widget In Any Genesis Child Theme

After Header Image Parallax Pro Theme

Reader Interactions

Comments

  1. Erica Sloan says

    October 11, 2018 at 9:05 pm

    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?

    Log in to Reply
    • Erica Sloan says

      October 11, 2018 at 9:06 pm

      Correction: When I use this tutorial https://wpsites.net/web-design/genesis-responsive-after-header-featured-image-using-background-position-cover/ it works

      Log in to Reply
    • Brad Dalton says

      October 12, 2018 at 10:56 pm

      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

      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.