Full width Soliloquy slider below header in Parallax Pro

This tutorial provides the steps to display a full-width slider using the free version of Soliloquy plugin, Soliloquy Lite below the header in Parallax Pro.

Step 1

Install and activate Soliloquy Lite.

Create a slider named say, Front page Slider and upload/select your desired slide images. In this example, I’ve used images sized 1600 x 700.

In the Config tab, enter the width and height of your slide images in the Slider Dimensions.

Step 2

Edit front-page.php.

a) Below

//* Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

add

//* Add Soliloquy slider below header
add_action( 'genesis_after_header', 'sk_full_width_slider' );

b) Before

genesis();

add

function sk_full_width_slider() {
	if ( function_exists( 'soliloquy' ) ) {
		soliloquy( 'front-page-slider', 'slug' );
	}
}

Replace front-page-slider with the slug of your slider.

Step 3

Edit style.css.

a) In .parallax-home .site-inner, replace

margin-top: 70px;

with

margin-top: 0;

b) Below that, add

.parallax-home .soliloquy-container {
	margin-top: 70px;
	max-width: 100% !important;
	max-height: none !important;
}

.parallax-home .soliloquy-container .soliloquy-image {
	width: 100%;
}

c) In 960px media query

replace

.parallax-home .site-inner {
	margin-top: 0;
}

with

.parallax-home .soliloquy-container {
	margin-top: 0;
}