Genesis Tutorials

Slider Behind Site Header & Home Featured Widget In AgentPress Pro

This solution replaces the background image which that displays behind the site header and home featured widget area with a slider.

AgentPress Front Page Slider

The code in this tutorial produces a similar result to this tutorial, however it uses a slider plugin rather than jQuery added to your theme files.

In this case, we only replace the image with the slider between specific screen widths which are are 1023px and 1600px.

When the screen width is greater than 1600px, the default background image is displayed.

Demo Video #

Shows the slider images displaying in replace of the background image behind the home featured widget area in the AgentPress Pro child theme by StudioPress.

Installation – Support Included #

There’s 3 steps :

Step 1 – Install the Responsive WordPress Slider – Soliloquy Lite and create a new slider named Slider using the following configuration settings. The slider slug, needs to be named slider as it matches the slug in the PHP code added in step 2.

Slider Settings

Step 2 – Upload the front-page.php file replacing the default front page template in the AgentPress Pro themes root directory.

The modified front-page.php file contains the following code already added to the file between lines 28 – 38 :

Related Tutorials

5 replies on “Slider Behind Site Header & Home Featured Widget In AgentPress Pro”

That’s what I thought but when I change to 1920px it’s removing the image and slider on anything over 1600px

Tested and works.

@media screen and (max-width: 1023px), (min-width: 1920px)

@media screen and (min-width: 1023px) and (max-width: 1920px)

Also set the slider settings to 1920px width

Did you clear caching?

Change the width in the following lines of CSS from 1600px to 1920px

@media screen and (max-width: 1023px), (min-width: 1600px)

@media screen and (min-width: 1023px) and (max-width: 1600px)

Leave a Reply

Your email address will not be published. Required fields are marked *