WP SITES

Log in

Parallax Page Template for Genesis

—

by

Brad Dalton

This tutorial includes the code which creates a new custom page template for the Parallax child theme by StudioPress.

Note : This new solution adds the Parallax Pro themes front page template to the new version of the Genesis sample child theme by StudioPress.

No need to add the parallax script or CSS as thats already included in the theme.

The template can also be used on any Genesis child theme by adding the additional jQuery script and CSS which is included in this post. Its been added to the Genesis Sample child theme which you can simply download and install.

Here’s the result using the Parallax template on a page in Minimum Pro.

parallax-page-template

Download the Parallax child theme & Parallax Page Template for Genesis

Register for full access

Related Page Templates

Comments

15 responses to “Parallax Page Template for Genesis”

  1. Erica Sloan Avatar
    Erica Sloan

    Is there a way to use different background images than the ones used on the homepage?

    1. Brad Dalton Avatar
      Brad Dalton

      What theme are you using?

    2. Brad Dalton Avatar
      Brad Dalton

      Yes however this would require a different template coded to allow upload of custom images. How many pages did you want to use this template on? And the template depends on whether you’re using Parallax Pro or another child theme.

  2. vaporcillo Avatar
    vaporcillo

    Hello Brad.

    Can I add a gradient layer above the parallax pictures like the altitude them?

    Thanks in advance!

    1. Brad Dalton Avatar
      Brad Dalton

      I would look at how its done in Altitude Pro and try that method and code with the Parallax page template.

  3. Parallax Page Template For Use On Unlimited Pages in Genesis

    […] Parallax Page Template for Genesis with Widget Areas […]

  4. jasonhodge Avatar
    jasonhodge

    I have it uploaded but now I’m not sure how to create a new page using this template. What am I missing?

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Jason

      Just create a new page and then select it from the drop down menu under the Page Attributes meta box on the Edit Page screen. Are you using Parallax Pro?

      1. jasonhodge Avatar
        jasonhodge

        Yes, I’m running Parallex. I found what you are talking about now. Thank you! I can select Parallex Page Template.
        Now my question is, how do I edit it like I did on the original homepage? It looks just like my other pages. Forgive me for not completely understanding what to do, but to me it looks just like very other page.

        1. Brad Dalton Avatar
          Brad Dalton

          The code you add to functions.php creates new widget areas you populate like the front page widgets.

          1. jasonhodge Avatar
            jasonhodge

            Sadly, I need a little more direction. I can’t figure out where to go from here. I’m sorry. Any chance you can show more of what to look for after the previous steps?

          2. Brad Dalton Avatar
            Brad Dalton

            Send me FTP or cPanel access and i’ll fix it for you Jason.

  5. Kristie Hill Avatar
    Kristie Hill

    Okay, I added this to my minimum pro theme for a landing page I’m working on. The only thing I can’t figure out is how to get it outside the minimum pro wrap so that the pictures can extend the full screen (instead of the 1140 content area)

    http://blogambitions.com/pinterest-ebook-coming-soon/

    Suggestions?

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Kristie.

      They do extend full screen width in my solution but the result maybe different on other themes

      You can change the hook from genesis_loop to genesis_after_header on line 57 of the page_parallax.php file. This worked for the Minimum Pro theme and may not be needed on other themes.
      [code]
      add_action( ‘genesis_after_header’, ‘parallax_custompage_widgets’, 25 );
      [/code]

      Also may need to adjust the CSS:
      [code]
      .parallax-home .site-inner {
      margin-top: 0px;
      max-width: 100%;
      padding: 0px!important;
      }
      [/code]

      Added [code]padding: 0px!important;[/code] to the above CSS rule to remove the padding before the footer.

      1. Kristie Hill Avatar
        Kristie Hill

        perfect. thank you!

Leave a Reply

Join 5000+ Followers

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