-
AuthorPosts
-
November 26, 2021 at 1:53 pm #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?
November 28, 2021 at 12:31 am #1330710Hey 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
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
and import a free slider that has the effect you like and see how they did it.
Best regards,
MikeNovember 29, 2021 at 3:32 pm #1330857Hi 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”November 30, 2021 at 3:13 pm #1331007Hi,
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,
MikeNovember 30, 2021 at 4:52 pm #1331026Hi 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…
December 1, 2021 at 6:00 am #1331084Hi,
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:
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,
MikeDecember 3, 2021 at 4:30 pm #1331484Hi again Mike,
thats really amazing work. Incredible service.
Thank you:)
RolfDecember 3, 2021 at 5:10 pm #1331491Hi 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;
}December 4, 2021 at 5:37 am #1331516Hi 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,
RikardDecember 7, 2021 at 3:13 pm #1331866Hi 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,
RolfDecember 8, 2021 at 4:54 am #1331913Hi 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 -
AuthorPosts
- You must be logged in to reply to this topic.