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.
Click here to get full access to this tutorial & other theme specific tutorials like it.
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;
}