Sridhar Katakam

Genesis and WordPress Tutorials

Soliloquy slider in Front Page 1 widget area of Digital Pro

by 9 Comments

In my Facebook group a user asked:

is there a way to replace the front page 1 widget area of Digital Pro with a slider?

In this article I share the steps to customize Digital Pro to replace the Front Page 1's background image with a full width Soliloquy slider. Note that we are going to remove the JS code that automatically sets height of this section to viewport height.

At 600px and below we are going to make the caption appear below the slide image.

Live Demo

Step 1

Install and activate Soliloquy.

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

In the Config tab, select "Full Width" for Slider Dimensions and enter your slide images’ width and height.

Screen Shot 2016-06-08 at 9.22.54 AM

[optional] Use this sample HTML for captions:

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

Already a member? Log in below or here.

  • Fantastic tutorial! I’m *so* glad I subscribed. I’ve manually hacked various solutions to this over the last year, and each time it’s been a “reinvent this mess” situation. Clean, done, going to go have lunch. Thanks!

    BTW … I just noticed, in your “[optional] Use this sample HTML for captions:” above, you have an opening H3 tag with a closing *H4* ….

    Great work, again! NICE!

    Chris

    Reply

    • Yes.

      You just need to identify and delete or not add the CSS code that styles the Soliloquy captions similar to the widget text of the theme.

      CSS in Step 4 should then be (not tested):

      /* Front Page 1
--------------------------------------------- */

.front-page-1 {
    /*display: table;*/
    margin-top: 90px;
    /*overflow: hidden;
    table-layout: fixed;
    width: 100%;*/
}

/*.front-page-1 .wrap {
    margin: 0 auto;
    max-width: 1280px;
    padding-left: 40px;
    padding-right: 40px;
}

.front-page-1 .widget {
    margin-bottom: 40px;
}

.front-page-1 .widget-area {
    display: table-cell;
    padding-top: 20px;
    vertical-align: middle;
    width: 100%;
}*/

.front-page-1,
.front-page-1 p,
.front-page-1 .widget-title {
    color: #232525;
}

.front-page-1 .widget_text .widget-title {
    font-family: 'Poppins', sans-serif;
    font-size: 84px;
    font-size: 8.4rem;
    font-weight: 600;
    letter-spacing: -3px;
    margin-bottom: 0;
    text-transform: none;
}

.front-page-1 p {
    font-size: 24px;
    font-size: 2.4rem;
}

.front-page-1 p:last-child {
    margin-bottom: 0;
}

.front-page-1 button,
.front-page-1 input[type="button"],
.front-page-1 input[type="reset"],
.front-page-1 input[type="submit"],
.front-page-1 .textwidget a.button {
    border: none;
    margin-top: 60px;
}

.front-page-1 button:focus,
.front-page-1 button:hover,
.front-page-1 input:focus[type="button"],
.front-page-1 input:hover[type="button"],
.front-page-1 input:focus[type="reset"],
.front-page-1 input:hover[type="reset"],
.front-page-1 input:focus[type="submit"],
.front-page-1 input:hover[type="submit"],
.front-page-1 .textwidget a.button:focus,
.front-page-1 .textwidget a.button:hover {
    background-color: #fff;
    border: none;
    color: #232525;
}

.front-page-1 .soliloquy-container,
.front-page-1 .soliloquy-container * {
    line-height: 2;
}

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

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

.soliloquy-container a.button {
    background-color: #e85555;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 20px 30px;
    margin-top: 60px;
}

.soliloquy-container a.button:hover {
    background-color: #fff;
    color: #232525;
}

@media only screen and (max-width: 1000px) {

    .front-page-1 p {
        font-size: 2rem;
    }

    .soliloquy-container a.button {
        font-size: 1.2rem;
        padding: 10px 20px;
    }

}

@media only screen and (max-width: 840px) {

    .front-page-1 p {
        font-size: 1.5rem;
    }

    .soliloquy-container a.button {
        margin-top: 20px;
    }

}
      Reply
    • >