Sridhar Katakam

Genesis and WordPress Tutorials

How to Replace Home Section 1 Parallax section in Parallax Pro with a Soliloquy Slider

by 6 Comments

In the members-only forum a user asks:

I would like to replace Parallax Pro front page 1st image with a slider.
Can you modify this tutorial: https://sridharkatakam.com/how-to-replace-front-page-1-image-section-with-a-soliloquy-slider-in-altitude-pro/ to work with Parallax Pro?

In this tutorial I share the steps for replacing the homepage section 1 having the Parallax background image in Parallax Pro front page with a full width Soliloquy (commercial plugin) slider.

parallax-pro-front-page-soliloquy

Included is the markup for captions and the corresponding styling so they look like the content in Home Section 1's text widget from the standard Parallax Pro demo.

At lower widths, we shall set the captions to be displayed below the slide images.

parallax-pro-front-page-soliloquy-mobile

Step 1

Install and activate Soliloquy.

Create a new slider and upload your slider images.

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

Already a member? Log in below or here.

  • Great Tutorial !

    Now the only thing is, I would like to use it with the combination, Genesis WP, BeaverBuilder and Dynamik. Could that be done as well ? What should be different ?

    Thanks,
    Hans

    Reply

  • Hi, thanks so much for the tutorial and your site. I believe I’ve implemented the tutorial correctly (though I did need to add the Soliloquy shortcode to Widget Area 1 to get the slideshow to display). The slideshow is behaving as expected, however, when I scroll down, the slideshow “comes with me”, ie, it moves in unison with widget area 2, as opposed to how parallax sites typically behave, appearing to “slide behind.” Any input?

    Here’s a good example of the intended effect in action: aldenharlow.com

    Reply

  • Where can I find the info from ‘Step 2’ to modify? Where is ‘js/parallax.js’? Can you clarify please?

    Step 2
    In js/parallax.js comment out or delete

    $(“.home-section-1”).css(“backgroundPosition”, “50% ” + -(scrolltop/6) + “px”);

    Reply

  • I encountered a problem when using this manual… In the end I found out that the cause was in step 6 The css supplied there uses #home-section-1 ( id )
    when it should be .home-section-1 (class)
    Once you change the css on the relevant places the steps work fine…

    Reply

  • I was SO excited to get this to work and followed all of the directions but never had my original layout for Home Section 1 replaced with a slider. Where do you add the slider #? There is no mention of that part.

    Reply
    • >