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.