WP SITES

2720

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

    • 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?

      • 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.

          • 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?

    • 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.

Leave a Reply