• 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

Replace Home Section 1 Background Image With Slider in Parallax Pro

This tutorial provides the code which enables you to replace the home section 1 background image in the Parallax Pro child theme by StudioPress with a full width responsive slider covering the entire widget background and site header background.

Watch the following demo video to see exactly what the tutorial provides :

Responsive Menu

1. You can also display the slider images behind the site header, site and menu as seen in the above video screencast. You’ll need to add a few lines of CSS to do this which are provided below for logged in members.

or

2. Leave the site header background as is and only display the slider behind the home section 1 widget background.

Here’s what the slider looks like if you keep the default site header background :

Code Installation

Once you download the folder below for logged in users, there’s 3 steps :

Step 1 : From the download folder, upload the folder named slider to the Parallax Pro theme folder.

Step 2 : From the download folder, copy the PHP code between lines 8 – 18 from the front-page.php file and paste it after the opening php tag in the Parallax Pro themes front-page.php file.

Register for full access

Parallax Pro Theme Slider

Reader Interactions

Comments

  1. Bryan Arwood says

    June 27, 2021 at 1:07 am

    This is awesome! Just what I was looking for and very easy to implement. Thanks for the tutorials and the code, Brad!

    Log in to Reply
    • Bryan Arwood says

      June 27, 2021 at 1:10 am

      Is there a way to add the little “page dots” at the bottom of the slider?

      Log in to Reply
      • Brad Dalton says

        June 27, 2021 at 6:35 am

        Hello Bryan. This slider doesn’t include pagination however you can add it using custom code or you could add the navigation using another slider however there is extra work involved in providing that solution which requires a custom tutorial request.

        Log in to Reply
  2. Debbie Hastings says

    February 15, 2021 at 7:01 pm

    Hey Brad – question: how do you adjust the speed? I’d like to slow the rate of change down.

    Log in to Reply
    • Brad Dalton says

      February 15, 2021 at 7:12 pm

      Change the value for the duration : The amount of time in between slides expressed as the number of milliseconds in backstretch-set.js on line 18.

      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.