• 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

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 :

Register for full access

Related Tutorials

  • AgentPress Pro – Front Page Slider Background

AgentPress Pro Theme Background Image Slider

Reader Interactions

Comments

  1. Mark Roberts says

    June 13, 2019 at 9:24 am

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

    Log in to Reply
    • Brad Dalton says

      June 13, 2019 at 9:32 am

      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?

      Log in to Reply
      • Brad Dalton says

        June 13, 2019 at 9:50 am

        Please send login details to brad@wpsites.net or Facebook messaging http://m.me/wpsites.net

        Log in to Reply
  2. Mark Roberts says

    June 13, 2019 at 8:56 am

    Is there a way to make the slider work with a larger screen size, 1920px?

    Log in to Reply
    • Brad Dalton says

      June 13, 2019 at 9:00 am

      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)

      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.