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

WP SITES

2899

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Apply Parallax To Header Hero On Any Page Type in Essence Pro

If you want to apply the Parallax scrolling effect to the header hero on page types other than the front page, you’ll need to make the code load on pages other than the front page.

The solution in this tutorial enables you to apply the Parallax scrolling effect to the header hero on any page/post type so the hero image moves at a different speed to the overlaying content when scrolling the page.

Watch Demo Video #

Show’s the parallax effect applied to the header hero image on all single posts and the blog page template in the Essence pro child theme by StudioPress.

A member asked :

Is it very complicated to apply the code in this tutorial to other pages, specifically the Blog and single posts with featured image?

The answer is no, it only requires a few steps.

There’s 3 steps relating to usage of the code in the download folder which enables you to do this.

Register or login to access the download folder :

Register for full access

Related Tutorials

  • How to add Parallax Scrolling effect to Header Hero in Essence Pro

Essence Pro Theme

Reader Interactions

Comments

  1. David Bega says

    May 5, 2023 at 7:29 pm

    Hi Brad,
    I would like to make fixed on scroll hero images on all pages on computer screen (without changing images dimensions).

    For mobile, I prefer to keep it as it is in the original Essence Pro theme.

    Log in to Reply
    • Brad Dalton says

      May 6, 2023 at 8:53 am

      I don’t have a tutorial for that. You can request a quote for a custom tutorial.

      Log in to Reply
  2. David Bega says

    May 5, 2023 at 2:32 pm

    Hi Brad,
    Thanks for great tutorials.

    The CSS styling in your example changes all pages hero image to full screen.
    I would like to keep the original Essence Pro design where the front page image is full height, but images on other pages are not full height.
    As well, the script change alignments of images, and they all look stretched.

    Is there a way to make the hero images on all pages fixed on scroll ONLY without changing any of the website look?

    Cheers

    Log in to Reply
    • Brad Dalton says

      May 5, 2023 at 3:43 pm

      Hi David. I thought you wanted to use a different image on mobiles not parallax?

      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.

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Contact
  • Terms
  • Genesis WP Tags
  • WooCommerce