• 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

Parallax Page Template for Genesis

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

  • Add Parallax To Genesis Sample Theme
  • Copy Front Page Template With Unique Widget Areas Using Different Background Images – Parallax Pro

Parallax Pro Theme

Reader Interactions

Comments

  1. Erica Sloan says

    October 11, 2018 at 7:21 pm

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

    Log in to Reply
    • Brad Dalton says

      October 11, 2018 at 10:27 pm

      What theme are you using?

      Log in to Reply
    • Brad Dalton says

      October 12, 2018 at 7:49 am

      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.

      Log in to Reply
  2. vaporcillo says

    April 28, 2016 at 7:57 am

    Hello Brad.

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

    Thanks in advance!

    Log in to Reply
    • Brad Dalton says

      April 29, 2016 at 4:55 pm

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

      Log in to Reply
  3. jasonhodge says

    June 6, 2015 at 4:14 pm

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

    Log in to Reply
    • Brad Dalton says

      June 6, 2015 at 5:36 pm

      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?

      Log in to Reply
      • jasonhodge says

        June 8, 2015 at 5:12 pm

        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.

        Log in to Reply
        • Brad Dalton says

          June 8, 2015 at 5:20 pm

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

          Log in to Reply
          • jasonhodge says

            June 8, 2015 at 11:28 pm

            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?

          • Brad Dalton says

            June 9, 2015 at 6:09 am

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

  4. Kristie Hill says

    June 3, 2015 at 8:33 pm

    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?

    Log in to Reply
    • Brad Dalton says

      June 4, 2015 at 7:07 am

      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.

      add_action( 'genesis_after_header', 'parallax_custompage_widgets', 25 );

      Also may need to adjust the CSS:

      .parallax-home .site-inner {
      	margin-top: 0px;
      	max-width: 100%;
      	padding: 0px!important;
      }

      Added

      padding: 0px!important;

      to the above CSS rule to remove the padding before the footer.

      Log in to Reply
      • Kristie Hill says

        June 4, 2015 at 9:12 pm

        perfect. thank you!

        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.