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 you 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;
}
Not plug and play with latest altitude theme.
Line numbers are not correct. Found proper locations manually.
After doing that there was empty gradient space at the bottom. This code made it go away (in additional css).
.front-page-1 .image-section {
display: none;
}
Hope this helps someone.
Hello Alex, If you need a tutorial updated to work with the latest version, you are welcome to ask. Thanks for posting this. I believe the other method which i linked to in the post is a better solution.
Can you think of any reason why a small part of the slide show and the navigation “dots” are at the bottom of my website?
https://kenahosting.com/HipPops/
I don’t know why it did that…any ideas?
Hello Kena. I think the reason for this is because you’re not using the slider plugin the code is tested with which is Soliloquy. Please use Soliloquy or this tutorial which uses jQuery https://wpsites.net/web-design/altitude-pro-image-slideshow-behind-widget-area/ This is the best solution in my opinion.
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/