• 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

Altitude Pro Slider Behind Front Page 1 Widget

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

  • Add Background Color To Width of Text

Altitude Pro Slider

Reader Interactions

Comments

  1. Pamela Blake says

    October 10, 2019 at 10:23 pm

    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

    Log in to Reply
    • Brad Dalton says

      October 10, 2019 at 10:45 pm

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

      Log in to Reply
      • Pamela Blake says

        October 11, 2019 at 5:31 pm

        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

        Log in to Reply
        • Brad Dalton says

          October 13, 2019 at 8:30 am

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

          Log in to Reply
          • Pamela Blake says

            October 13, 2019 at 1:13 pm

            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

          • Brad Dalton says

            October 14, 2019 at 7:13 am

            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 says

    December 5, 2016 at 8:44 am

    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

    Log in to Reply
  3. fotod0g13 says

    November 1, 2016 at 1:20 pm

    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

    Log in to Reply
    • Brad Dalton says

      November 1, 2016 at 2:57 pm

      Good job Scott.

      Log in to Reply
  4. fotod0g13 says

    November 1, 2016 at 9:27 am

    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

    Log in to Reply
  5. fotod0g13 says

    November 1, 2016 at 9:04 am

    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

    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.