Sridhar Katakam

Genesis and WordPress Tutorials

How to replace Front Page 1 image in Aspire Pro with rotating images using Backstretch and Soliloquy

by 7 Comments

In the members-only forum a user asked:

I know you been asked for this tutorial on various other themes, wonder if you can put a tutorial to replace Aspire Pro's main home page image with a slider.
thank you in advance!

In this tutorial we are going to replace the single background image for Front Page 1 section in Aspire Pro with a set of images uploaded to a Soliloquy slider and displayed with a fading effect one after the other cycling via Backstretch.

Step 1

Install and activate Soliloquy (free lite or the premium one) plugin.

Create a slider named Home and upload/select the desired background images. Since we are going to just use it as an easy way to manage the background images, settings in Config, Mobile and Misc tabs do not matter and need not be configured.

Step 2

Upload jquery.backstretch.min.js to js directory.

Create a file named say, backstretch-set.js in the same location having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Sridhar, this is a very good tutorial, thank you!
    However, my slider of choice is Revolution Slider and I wonder how can I use revolution slider instead of soliloquy…

    Thanks again!

    Reply

  • This is great thanks. The only problem i had with implementing this is the slider images wont show, it remains with bg-1.jpg as default.

    Can i go into the code and tell it to default to [soliloquy id=”21″]

    Reply

  • Hello, I followed the instructions and added a text widget with the soliloquy short code to my frontpage-1, but neither my slider or the default image shows. the shortcode looks like this: [soliloquy id=”1859″]

    So I followed your instructions you gave in a reply above that said to add to the functions.php the code here: https://sridharkatakam.com/automatically-change-slugs-match-titles-soliloquy-sliders/

    Still cannot get this to display. What am I doing wrong?

    Reply

    • I see that you are using bottom margin at various media queries for .soliloquy-theme-base .soliloquy-caption-bottom .soliloquy-caption-inside. Instead, increase the bottom CSS property’s value for .soliloquy-container .soliloquy-caption.soliloquy-caption-bottom.

      Reply
    • >