Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1330598

    Hi support,

    I’ve made an advanced slider for this page:

    On the top part of the page you see the Advanced Layerslider

    On the next part of the page you see a colorselection where the background is fixed while the front elements move on top of it. Great effect. Can you tell me how I do that for the background in the advanced slider?

    #1330710

    Hey AuroraArcus,
    Thanks for the link to your site, I believe you want your layers to slide up from the bottom and out through the top, select your layer and use the Opening & Ending Transitions
    2021-11-27_171958.jpg
    You can read more in the LayerSlider Documentation, as it is actually a separate plugin that allows us to add to our Enfold theme.
    Another option would be to go to the LayerSlider Template Store
    2021-11-27_019.jpg
    and import a free slider that has the effect you like and see how they did it.
    2021-11-27_020.jpg

    Best regards,
    Mike

    #1330857

    Hi Mike,

    thanks a lot fo your reply.

    Haha, everything just went north. That wasn’t the plan.

    It was supposed to stay on the page and then the background would be fixed, while the elements on top kind of float, just like you see on the section with these words on this page: https://nordicanalytics.dk/
    “LOYAL VÆRDISKABENDE INNOVATION”

    #1331007

    Hi,
    Sorry I don’t believe that I understand what you are trying to achieve, I see the fixed image behind the “Our values” time line, but I don’t understand how you want scroll applied to the layerslider, there is only one slide so your not using the scroll function to switch slides?
    Are you trying to have a transparent layerslider element and show the fixed body image behind it? I don’t believe that is possible because the layerslider would have to be placed inside of another element like a color section, but you can’t do that with the layerslider element.

    Best regards,
    Mike

    #1331026

    Hi again Mike,

    no probs

    is it because you’re using mobile to view it? On Mac the elements in the front are floating:)

    Thats correct, im not using the scroll function, just the ability to easily manipulate the elements inside it.

    “Are you trying to have a transparent layerslider element and show the fixed body image behind it? ” Yes I guess so. If you by transparent mean, that they are floating in front of the background…

    #1331084

    Hi,
    Thanks for the feedback, I believe that I have achieved this on a test page for you, please check this page.
    I first made a copy of your page, and copied your slider to “test slider copy” then I removed the background image from the test slider:
    2021-11-30_001.jpg
    then I added this css to your Quick CSS:

    #top.page-id-2004 #main {
        background-repeat: no-repeat;
        background-image: url(https://nordicanalytics.dk/wp-content/uploads/2021/11/gbnm.png);
        background-position: 50% 50%;
        background-attachment: fixed;
    }
    
    #top.page-id-2004 #layer_slider_1 {
    	background: transparent;
        background-color: transparent;
    }
    

    please clear your browser cache and check.

    Best regards,
    Mike

    #1331484

    Hi again Mike,

    thats really amazing work. Incredible service.

    Thank you:)
    Rolf

    #1331491

    Hi again Mike,

    I tried to do the same for this next page called https://nordicanalytics.dk/trader-voice/ and using the advanced slider called “Trader voice front page copy”. I can see that for the other page you used #top.page-id-2004 #main to communicate with the background.

    How do I find out what the “#top.page-id-2004 #main” is called for the advanced slider on https://nordicanalytics.dk/trader-voice/ ?

    Im trying to use this background image url on that one, but I dont know what #top.page-id-2004 #main is called:

    #top.page-id-2004 #main {
    background-repeat: no-repeat;
    background-image: url(https://nordicanalytics.dk/wp-content/uploads/2021/11/Unavngivet-1920-x-1920-px-1920-x-2500-px-1.png);
    background-position: 50% 50%;
    background-attachment: fixed;
    }

    #top.page-id-2004 #layer_slider_1 {
    background: transparent;
    background-color: transparent;
    }

    #1331516

    Hi Rolf,

    The page ID class can be found in the body element, if you inspect the page using your browser. You can also find it in the URL on the backend, when editing the page in question. If you want to apply the same CSS for the new page, then please use this:

    #top.page-id-1361 #main {
    background-repeat: no-repeat;
    background-image: url(https://nordicanalytics.dk/wp-content/uploads/2021/11/Unavngivet-1920-x-1920-px-1920-x-2500-px-1.png);
    background-position: 50% 50%;
    background-attachment: fixed;
    }
    
    #top.page-id-1361 #layer_slider_1 {
    background: transparent;
    background-color: transparent;
    }

    Best regards,
    Rikard

    #1331866

    Hi again Rikard and Mike,

    I’ve put in the code and then when I removed the background in the adv layer, the footer starting popping up in the top of the page. FYI i added the background again, just so it doesnt look broken if customers should arrive in the meantime…

    Also, when I inspect the homepage, Im unable to find #top.page-id-1361 #main any where. Can you direct me? I’m asking because I’ll add another page to the homepage and want to add that function to it…

    Best regards,
    Rolf

    #1331913

    Hi Rolf,

    We would need to see the actual problem in order to help you out, would you be able to create a test page? If you inspect the page you want to know the page ID class of, then it’s located in the body tag: https://snipboard.io/8JrWCc.jpg.

    Best regards,
    Rikard

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