[Resolved] Insert background images (slider effect) in Page Hero Element without plugin?

Home Forums Support Insert background images (slider effect) in Page Hero Element without plugin?

  • This topic has 32 replies, 3 voices, and was last updated 11 months ago by David.
Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #685186
    Elizabeth

    Hi there,

    I’ve been using Generate Press for awhile now and I’m THRILLED about the new Elements section! SOOO great, thank you! For the home page of a site I’m working on, I’d like to use more than one custom background image under the text and button in the page hero element. Is there a way to code that in? If not, once I install a slider plugin (usually use meta slider) how do I set it the slider short code to be the background and sit below the text and button elements of the page hero? I’d like to avoid having any text or anything else in the plugin if possible.

    Please advise, thanks!

    -Liz

    GP Premium 1.7.2
    #685231
    David
    Staff
    Customer Support

    Hi there,

    you can try absolutely positioning the slider behind the content.
    To do this give the Hero a Element Class eg. slider-hero

    Then add your content you want display in front followed by the slider shortcode wrapped like so:

    <div class="background-slider">
        slider shortcode
    </div>

    Then add this CSS:

    .slider-hero {
        position: relative;
    }
    .background-slider {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
    }

    Just need to make the slider is full width and responsive.

    #685310
    Elizabeth

    Hi,
    Thanks for the prompt response. When I follow your instructions, it doesn’t put the slider behind the text but below it. It also affect the entire home page, making the entire page background the image or color indicated in the hero background info? Any other ideas?

    I wish I could simply select multiple images from my media in the “Custom Image” section, for which a slider would then be generated (eliminating the need for any plugin). Or at least a way to paste the slider shortcode under “custom image”… any chance that could be an update soon?

    TIA!

    -Liz

    #685324
    David
    Staff
    Customer Support

    Can you make sure you have added slider-hero to the Element Classes field.
    You will also need to ensure that their is no background image and any background color is transparent.
    If you do the above and it still doesn’t work can you leave the code in place and provide a link to the site.

    #691495
    Elizabeth

    Hi, here’s the link: http://enunziato.com/SBP1B/

    Right now I’ve left the code in, but the text is still above the slider and the slider – and all home page sections below it – are now oddly cropped on the sides (not full width/parallax as they should be). There’s also a an advanced section in MetaSlider for CSS but when I put the slider-hero class designation there it doesn’t make a difference.

    Help please 🙂

    -Liz

    #691506
    David
    Staff
    Customer Support
    #691548
    Elizabeth

    Hi David,

    Thanks for your quick reply: That correction indeed makes the element fall behind the text – I can’t believe I didn’t notice the name discrepancy and fix it myself lol. However, now it’s forcing all the element’s properties on the entire home page – the text, link colors, cropping, etc. It’s also forcing the element behind EVERYTHING on the home page, which makes the text that I don’t want overlaying the slider hero section up…

    -Liz

    #691689
    David
    Staff
    Customer Support

    Lol – i went all back to front with that one 🙂
    EDIT:
    Fixed the HTML now 🙂 honestly i blame running out of coffee

    #691789
    Elizabeth

    😂 Same here!! I could’ve fixed that if I’d bothered to use my own brain first, sorry!

    I’m still only having one issue though: the slider’s still “pulling” past the element boundary and onto the other sections, for some reason. Can you take another look? I’ve made the element background color green for now so you can see how the slider acts outside where it should be locked. No setting changes in Masterslider seem to have an effect…

    -Liz

    #691810
    David
    Staff
    Customer Support

    My coffee machine broke and i only got it repaired 2 days ago – its definitely to blame lol

    Ok so try changing your Header Element top and bottom padding to 19% and 18% respectively.
    Might need to adjust the Site Header Offset…. but we’ll see.

    #692722
    Elizabeth

    Hmmm… that adjustment helps it look better in a standard view, but in mobile it’s all wonky and it’s still allowing the element’s text to slide away from the image (slider) below and overlap the home page section below.

    -Liz

    #692876
    David
    Staff
    Customer Support

    So for mobile, may i suggest not having the Merge with Site Header?
    Then reduce the Mobile Padding on the Hero.

    #729056
    Elizabeth

    Hi again David,

    it’s been awhile but I’m returning to this project (Monday deadline! lol). This slider solution is still not working, it slides behind the background of the page elements below rather than stopping/cropping within the header when the page size is adjusted. Can you take another look please? thanks

    -Liz

    #729080
    David
    Staff
    Customer Support

    Ok, so lets try a different approach.
    Can you:
    1. Comment out the CSS that i provided for the Slider positioning.
    2. In the Hero editor adjust your code so it is like this ie. slider comes first and the titles are wrapped:

    <div class="background-slider">
        slider shortcode
    </div>
    <div class="hero-title">
        <h1>My H1</h1>
        <h3>My H3</h3>
    </div>

    3. Remove the left and right padding for the hero.

    Once thats done, let me know and i can give you some other CSS

    #729091
    Elizabeth

    Ok, I did that but now it’s situated below the slider and the slider is below the nav and top bar (not merged with it/behind it as desired).

    -Liz

Viewing 15 posts - 1 through 15 (of 33 total)
  • You must be logged in to reply to this topic.