This tutorial provides the files with modified code that add a slider as the background to the front-page-1 widget area in the Altitude Pro theme by StudioPress.
Update : You can also use this method to add a slideshow of images to any widget background in any genesis child theme.
Rather than give you the modified code, i’ll give you the style.css file and front-page.php file which are commented so you know what code has been changed.
On top of this, i’ll also give you a 2nd method ( in this separate tutorial ) which you can use if you don’t need to populate the front-page-1 widget area with content as each image in the slide enables you to display content over each image anyway, if needed.
All modifications have been completed & tested on a fresh install of the Altitude theme.
Video Demo
Firstly, here’s the finished result:
Here’s the widget settings for the Soliloquy Lite Plugin ( Free Version )
The shortcode for the slider is added to a text widget in the Front Page 1 widget area after creating a slide show.
The premium version of Soliloquy enables yo to add videos to the slider to use a background for the widget area.
Slider Image Sizes
The background images included in the theme images folder are 1600px width by 1050px height. I tested these images in the slider and they work fine. The image size i used in the video is 2000px with by 800px height however it depends on whats in the image and what you want displayed on different screen sizes.
Scroll to front-page-2
Add the following CSS and modify the value for the padding-bottom depending on the size of your slider height:
.front-page-1 {
padding-bottom: 850px;
}
Does this work with ANY slider??
It includes the jQuery for the slider therefore doesn’t use a 3rd party slider plugin. Use this tutorial https://wpsites.net/web-design/altitude-pro-image-slideshow-behind-widget-area/