WP SITES

Log in

After Header Parallax Image

—

by

Brad Dalton

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

Comments

3 responses to “After Header Parallax Image”

  1. Erica Sloan Avatar
    Erica Sloan

    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?

    1. Erica Sloan Avatar
      Erica Sloan

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

    2. Brad Dalton Avatar
      Brad Dalton

      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

Leave a Reply

Join 5000+ Followers

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