Sridhar Katakam

Genesis and WordPress Tutorials

Soliloquy slider in Business Pro

by 9 Comments

Updated on April 26, 2018

In the members-only forum, a user asked:

Hi!

I see you have done some tutorials for other themes like Showcase Pro to replace the hero video with a Soliloquy slider. I would like to do the same thing with the Business Pro theme. Could you please provide a tutorial for that customization?

Thank you!

This tutorial provides the steps to replace background video in Front Page 1 section of Business Pro with a Soliloquy slider.

We shall style the slide captions to appear overlayed on top of the images similar to the text in the Front Page 1 widget.

Tested in Business Pro v1.0.4.

Step 1

Install and activate Soliloquy (premium version).

Create a slider named say, Home Slider and upload/select your desired slide images.

a) In the Config tab, set Image Size to Full Width and enter the images' width and height.

b) If you would like to show captions on top of individual slides, use this sample HTML and modify:

<h1>Create your website with Business Pro</h1>

<p>Everything you need to create your own beautiful website.</p>

<a href="#custom_html-5" class="button accent">See Our Services</a>

Make sure to click the "Save Metadata" button.

c) In the Mobile tab check "Show Captions on Mobile?".

Step 2

Edit front-page.php.

Change

// Get custom header markup.
ob_start();
the_custom_header_markup();
$custom_header = ob_get_clean();

// Display Front Page 1 widget area.
genesis_widget_area( 'front-page-1', array(
    'before' => '<div class="front-page-1 page-header" role="banner" ' . business_custom_header() . '>' . $custom_header . '<div class="wrap">',
    'after'  => '</div>',
) );

to

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

Already a member? Log in below or here.

  • Thanks for this tutorial! How would I replace the featured image area on one page with the Soliloquy slider?

    Reply

  • Hi!

    This has been great!

    I just used it again on another site with Business Pro, but now it is not full width. As you can see it is in the middle, but much smaller.

    http://www.sonipakdesign.com/rpm

    What do you think I did wrong. The only thing I can think of is that for this site I am using Business Pro 1.0.6.

    Thanks!

    Reply

    • Try adding this CSS:

      .front-page-1 .soliloquy-container .soliloquy-image {
    width: 100%;
}

@media only screen and (min-width: 768px) {

    .front-page-1 .widget {
        max-width: none;
        width: 100%;
    }
}

@media only screen and (min-width: 1280px) {

    .front-page-1 {
        height: auto;
    }

}
      Reply

      • This helped to make it larger, but still not full width. I even tried going back to v1.0.4 to see it that would help.

        Any other thoughts? Should I have replaced some CSS with what you provided above or just added it to the bottom?

        Thank you!

        Reply

  • Hi Sridhar,

    I don’t see :

    .front-page-1 {
    padding: 30vh 0 25vh;
    }

    in the 896px min-width media query (style.css).

    Using the latest version of Soliloquy Pro (as of 2018-06-18).

    The following code is in the media query (line 4222) :

    .front-page-1,
    .front-page-2,
    .front-page-3,
    .front-page-4,
    .front-page-5,
    .front-page-6 {
    padding: 12rem 0;
    }

    Reply
    • >