⚡ Create a Sticky Scrolling Effect Using Elementor

wonder how to create this trick well if you stick around we'll do this step-by-step let's go to editing with Elementor open navigator and let's stick it to the side here let's create our first section click on the plus sign now in the navigator let's give it a name for easy reference click on the section handle to enter its settings and under style let's set a background color will go with this light gray now drag in a head language it Center it will write app features and let's set the style for it wait uppercase etc now duplicate and type in our subtitle and also under style let's play with the settings a little now drag in a divider drop it under the subtitle and under settings again we'll play with it a little bit let's set some padding from the top under advanced let's add 100 pixels from the top now moving on to the next section let's pick a three-column section this time and name it let's also add color to the section and now drop an image in the middle column and under style let's play with the settings a little change the width to 80% and under advanced let's set the most important settings for this effect sticky top now we need to add another image here so let's click the column handle style background overlay and let's choose the same image again let's change the settings position center Center repeat no repeat size contain and let's lower the opacity to 0.1 we can see the overlay image sticking under the image so to fix this go under advanced and add a two pixels padding all around now you can see it's a perfect fit back to our image under advanced scrolling effect let's set the offset to 250 and the effects offset to a hundred and as you can see we have the beginning of our effect let's add some more painting to the section so click the section handle and under the Advanced tab padding let's add 50 pixels to the top and a hundred pixels to the bottom moving on let's drag in an image box widget change the title let's erase some of the text choose an image and let's play with the style reduce the spacing with set to 35 and under the title let's change the color the size the weight the description also let's change it a little line height 1.6 great now drag in an image and under style change the width to 52 and align to left in the column setting let's add some padding 30 pixels around in the image box widget let's add under the Advanced tab some animation let's set it from the right duration fast delay 200 milliseconds now we'll add animation to this line almost the same as the image box we'll add a fade in first and 600 milliseconds now let's add our left content copy and paste here also copy then paste let's swap places change the image to this one also the alignment to the right let's change the image box image change the title the animation duration fading from left and 1100 milliseconds now to the column content position bottom moving on in the navigator let's duplicate this section change its name now the first thing we notice is that the image from the top section is covering our new image from the section we're working on so let's quickly fix this with two simple settings click the first mobile image and other advanced z-index set it to 1 now click the image from the second row bar under advanced z-index set it to 2 and immediately we see the problem is solved now let's change the section settings under style let's change the background color to this pink now the image let's change it to a different one don't forget we need to change the columns image as well so under background overlay change the image now I'll fast forward a little bit because I'm quickly changing the columns content now to the third part will start from duplicating the first section in the Navigator because it's pretty similar to the third one we're creating now so duplicate and now also let's drag it to the bottom and change its name as you can see the second mobile is showing on top of the third one so just like previously we set its Z index so under the image settings advanced set it to three and as you can see it's now under the image now before we change the main image let me quickly change the side columns just like I did before so I'm fast-forwarding here that's it we're almost done now to our main image under advanced this time we want to set the sticky to none because this will be the last image that we scroll so you can see it's stopping but we can still see the first and second section images this is because they are still sticking and we don't want to cancel it so let's find out how to make it appear as though from a certain point they are invisible let's add a new section one column and let's name it hide mobile will give this section as the index that will be higher five so it will hide everything behind it we'll give it a color this gray you can see it already hides a little now under layout minimum height set it to 400 we can still see the mobile here on the bottom so we go to the height mobile section settings and under advanced margin we'll set an - margin of 300 now we see it covers our mobile so let's click the arrow down so to better see when to step it now the image let's change the z-index property so it will appear on top of the hide mobile section let's set it to six so back to our - margin let's see where would be a good place to stop we see here is a good spot we don't see the Mobile's behind it now you see there hidden but the hide mobile section covers our text here so let's click the column settings advanced set the z-index to a higher number as well let's set it to 10 and now you see it's visible again so now we'll start from the top we see we got the effect the first mobile goes under the second the second Mobile's under the third one and then we stop the other two mobile images actually keep on scrolling only we hit them we just have to remember to keep hiding them as long as the page goes on now let's update the page and view it we see the effect and the animations from right to left the stop part and also the part that hides the mobile phones from the first and second sections and on the way back we see it also works when scrolling from bottom to top now back in editing let's just add an extra designer's touch clicking the Navigator on the first mobile section under the section settings style shape divider bottom let's add a tilt give it a color and a height 80 and let's slide the flip here I'll add some padding from the bottom as well let's change it to 150 pixels and now let's do the same for section number three only this time from the top tilt same color same height no flip this time add some height from the top 100 pixels so now let's view what we've created [Music] that's it hope you enjoyed these cool tips and tricks tutorials don't forget to subscribe to our YouTube channel for more tips and tricks like this see you later

Channel: Elementor

Views: 417,932

Keywords: sticky, wordpress, theme builder

Id: pQGPBCta4Ac

Length: 11min 24sec (684 seconds)

Published: Mon Sep 03 2018