• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Add Slider Background To Front Page 1 Widget In Altitude Pro

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.

slider-settings

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.

Register for full access

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;
}

Related Tutorials

  • Replace Front Page 1 Widget With Slider In Altitude Pro Theme
  • Customize Slider Captions Over Each Image Using Soliloquy

Altitude Pro

Reader Interactions

Comments

  1. Alex Oreshkin says

    August 31, 2020 at 8:09 am

    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.

    Log in to Reply
    • Brad Dalton says

      August 31, 2020 at 9:04 am

      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.

      Log in to Reply
  2. Kena Peterson says

    August 21, 2020 at 9:14 pm

    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?

    Log in to Reply
    • Brad Dalton says

      August 22, 2020 at 5:45 am

      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.

      Log in to Reply
  3. Philip Macaulay says

    July 26, 2018 at 8:58 am

    Does this work with ANY slider??

    Log in to Reply
    • Brad Dalton says

      July 26, 2018 at 11:08 pm

      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/

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.