Sridhar Katakam

Genesis and WordPress Tutorials

How to replace Front Page 1 image section with a Soliloquy slider in Altitude Pro

by 26 Comments

In this tutorial I show how a full width responsive Soliloquy (commercial plugin) slider can be set up in Altitude Pro below the header.

altitude-pro-soliloquy

Install and activate Soliloquy. Create a slider and upload/select your images. In this example I have used images that are 1600 x 1050. In Config tab, set 'Full Width' for 'Slider Dimensions' and enter your images' width and height.

Screen Shot 2015-07-03 at 8.03.55 pm

Step 1

At Appearance > Customize, remove the background image for Featured Section 1.

Step 2

In front-page.php replace

genesis_widget_area( 'front-page-1', array(
'before' => '<div id="front-page-1" class="front-page-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
'after' => '</div></div></div></div>',
) );
view raw gistfile1.php hosted with ❤ by GitHub

with

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

Already a member? Log in below or here.

  • Would you consider doing a how to for layerslider and Altitude Pro. as i am wanting to use over lays on my Altitude Pro site

    Reply

  • Hi. The only thing that i think i should change is

    .front-page-1 .soliloquy-container {
    margin-bottom: 0 !important;
    }

    to

    .front-page-1 .layerslider-container {
    margin-bottom: 0 !important;
    }

    Reply

  • Sridhar, are there any tweaks necessary if I were to adjust (shorten) the image height on the Soliloquy settings and of course use photos with dimensions that match the stated size? I’m finding that 1600 x 1050 images are falling off the bottom of the screen and not fully visible.

    Reply

        • What I observed is whatever if you leave front-page 2 blank then front-page 3 won’t scroll. If you leave front-page 2 and 3 blank then front-page 4 won’t scroll.

          If you goto the bottom of the page and then scroll to front-page-2 then it will take you to the top of the page (front-page-1).

          Reply

          • I think I found the solution. In your code step # 2, instead of removing 2 div sections, just remove the div “wrap” section. keep everything else same. it works

          • I take it back. No luck. Scrolling works if I use above trick but then css gets messed up.

          • Sridhar,

            I did little research and in my view home.js is causing the problem. In your step # 2 you took out image div element. Height of image section is dynamic and decided by following code in home.js.
            // Image Section Height
            var windowHeight = $( window ).height();

            $( ‘.image-section’ ) .css({‘height’: windowHeight +’px’});

            $( window ).resize(function(){

            var windowHeight = $( window ).height();

            $( ‘.image-section’ ) .css({‘height’: windowHeight +’px’});

            });
            since we do not have image in front-page 1, the next page starts from the top.

            Your thoughts?

  • Is there a way to do this so that the slider acts like the other background image sections? On mine it no longer stretches to just fill the screen, but depending on the width it might be taller than the screen.

    Reply

  • Hey Sridhar,
    I could use this one for a client of mine (still offline site though)) but can you tweak this so you could still get some text on top of the slider?

    Cheers,
    Hans!

    Reply

  • Not having the pro version of Soliloquy, I have no widget to use. So I paste the shortcode into a text box in the Widget area 1 instead.

    But I get about 700px of white space above the image. If I try to negate that by adding margin-top:-700px to .front-page-1, then the slider covers up the header area. Help or suggestions?

    Reply
    • >