WP SITES

Log in

Altitude Pro Slider Behind Front Page 1 Widget

—

by

Brad Dalton

This tutorial provides another method for adding a slide show of images behind the front page widgets in Altitude Pro by StudioPress. The solution will also work in any other Genesis child theme for any widget background area and is tested using the front page 1 widget area in Altitude Pro.

Demo Video #

Shows a slide show of images displaying behind the front page 1 widget area in Altitude Pro.

Remove Dark Background Gradient

The above demo also includes the removal of the gradient which darkens the image background by default.

Add the following CSS to line 1382 of style.css.

.front-page-1 .image-section {
    background: none;
    display: table;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}

Here’s the code & installation instructions for logged in members:

Register for full access

Related Tutorials

Comments

11 responses to “Altitude Pro Slider Behind Front Page 1 Widget”

  1. Pamela Blake Avatar
    Pamela Blake

    Hi Brad,
    I have struggled on my own with my limited skills to get this happening and now you have give me a great solution. Thank you!
    Pamela

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Pamela. Thanks for the positive feedback. Here to help anytime.

      1. Pamela Blake Avatar
        Pamela Blake

        Hi Brad,
        I have noticed one issue. When the site first comes up the browser, the slider is not the full depth of the viewport (Chrome). Then if I drag the side of the browser window the slider suddenly appears full depth. Site is: http://updated.corkshill.com.au/. This is the slider page: https://wpsites.net/web-design/altitude-pro-image-slideshow-behind-widget-area/. There is probably a small CSS amendment that I need to do. Do you have a quick suggestion please?
        Kind regards, Pamela

        1. Brad Dalton Avatar
          Brad Dalton

          Which browser are you using and what is the screen size of your machine?

          1. Pamela Blake Avatar
            Pamela Blake

            Hi Brad,
            I am using Google Chrome. I have a large screen 27inch iMac. But it doesn’t matter whether I use the whole of the width screen to open the site or half the width of the screen. When I do first open the site the first-page-1 background, where I have your slider, only shows on ⅔ of the depth of the viewport. Then immediately when I drag to change the size of the viewport the first-page-1 section immediately becomes full depth of the viewport. I have tried various CSS to get it show full depth on first getting the site up but obviously am not targeting the correct element.

            Kind regards,
            Pamela

          2. Brad Dalton Avatar
            Brad Dalton

            See this update https://wpsites.net/web-design/altitude-pro-image-slideshow-behind-widget-area/#full-screen-image

            Note : Code installation is included in monthly membership if you need help.

  2. mcarlyle Avatar
    mcarlyle

    Thanks for pointing me to this tutorial, works well!

    For my images though I need to align them to the bottom and have the overflow at the top. I was doing this with css on just the image.. background-position: 100% 100%;

    Anything I can do to make sure the bottom of the image is always visible?

    Thanks
    Mike

  3. fotod0g13 Avatar
    fotod0g13

    hi Brad,
    So I figured this out using a little bit of persistence on my own- which makes me feel I am learning. No way I would have been able to write the code you did from scratch but was able to figure out what I needed to do to get it to work for my project.

    End result – added new sidebar widget to front page ( #8 ) then took you code using the Soliloquy slider for video made it full width background image for my FrontPage #8

    Thanks for posting the original code

    1. Brad Dalton Avatar
      Brad Dalton

      Good job Scott.

  4. fotod0g13 Avatar
    fotod0g13

    Hi Brad- Sorry for the confusion here. I posted the above in the wrong location.
    I found your tutorial about adding the slider using soliloquy and have gotten it closer but wondering if it is possible to add another background widget to the altitude pro- so It wold have 8 Front page widgets –
    And I would add the video slider to the #8 widget at the bottom of the home page-
    hope above makes sense- thanks

  5. fotod0g13 Avatar
    fotod0g13

    Hi Brad,

    Is there a way to do this using the soliloquy slider to show a video in the front-page 1 background slot?

    Trying to get that using this but not having any luck-

    Here is the URL to where I am working

    http://www.namnounrugcleaningandrestoration.com/

    using Altitude pro as the theme
    Any thoughts are appreciated.

    thanks

    Scott

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.