Genesis After Header Parallax Template

This download includes 2 templates which enable you to add a image after the header with the Parallax Effect.

You can overlay either the (1) post/page title or (2) widget content which moves at a different speed to the image on scroll creating a parallax effect.

Here’s the demo video showing what each template does.

Demo Video #

Tested after installation in the Parallax Pro & Genesis Sample child themes by StudioPress.

Shows the featured image used as the parallax image on selected single posts and pages. Also shows the fallback image used when no featured image set.

The templates are named :

  1. Parallax Single Title – This file is named parallax_single_title.php
  2. Parallax Single Widget – This file is named parallax_single_widget.php

The Parallax Single Title template displays the entry title and post info which includes the author name and post authors archive link outside the loop.

Installation – Included #

There’s only 3 steps relating to installation of the code in the download folder :

Step 1 : Upload the folder named parallax to your child themes root directory like this :

Related Templates


Comments

3 responses to “Genesis After Header Parallax Template”

  1. Chavi Rokach Avatar
    Chavi Rokach

    How could I minimize the size of that background image, to let’s say 300px high?

    1. There would be at least 3 ways to do this :

      1. You could modify the value for this CSS declaration height: calc(100vh - 66px); when used with the

      2. You could use jQuery to control the height.

      3. You could crop the image to a height of 300px.

  2. Erica Sloan Avatar
    Erica Sloan

    Thank you so much!

Leave a Reply

Join 5000+ Followers

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