WEBINAR: Level Up Your Design Skills With Sticky Elements In Elementor Pro [ADVANCED]

[Music] hi all i'm ziv a web designer and elementals lead educator and welcome to this webinar where we'll go over some cool ways to use the sticky scrolling effect we'll cover the basics and see how you can use this creative feature to build more advanced designs that really make your site stand out so stick around sticky elements are mostly used to keep something in view on the screen when the visitors scroll such as headers nav menus and other elements could be social icons or an air to basket button for example they make it easier to navigate a site and help increase conversion rates but besides for the practical benefits of using sticky elements we can also create more advanced designs with them which is what we'll focus on during this webinar elementor is packed with many creative tools that give you the ability to execute creative ideas in record time and produce designs that would otherwise take much longer to build during this webinar i will demonstrate three creative ways for you to use sticky elements to create stunning visuals i'll start with this awesome vertical timeline where we'll apply basic sticky effects to single elements just like i did with these image widgets creating the illusion they follow the timeline while scrolling down the page then we'll take it up a notch and see how to apply this effect on more advanced designs with multiple elements in intersections and lastly we'll combine what we've learned and create these playful scrolling sections from scratch so you can apply this technique to your own designs to showcase your products or services for example in a way that really does them justice we'll also make sure that they look great on tablets and mobile devices which can be done fairly quickly long story short this webinar will give you a better understanding of elemental sticky feature so you can use it to build more advanced designs in less time you thought possible so let's dive in and start with the first example the vertical timeline okay so let's make a start let's first check out the general concept for this page in order to create the vertical timeline effect what i first did is i made sure that the page has a black background and you can do this in the page settings in the bottom left then in the style tab you can set the body style this way i only set it once and all of the sections that i add will have this background already set up which saves some time next as you can see the first section has two columns and the second section has three just like the following ones they have the same layout but they've got different content also i added some padding to the top and the bottom of the second columns just to create the scrollable space for the sticky effect so that it works properly also the columns they are lined up with each other by setting the same column width in the layout tab now in order to create the white timeline i made sure that throughout the page all second columns they get a white border on the left as you can see in the style tab i set it to solid and i gave it a width and a color and i repeated this process in all of the sections okay now let's look at the sticky image with the date which looks like it's part of the timeline i'll go ahead and delete it so we can build it from scratch first what i'll do is i'll drag in an image widget and i'll select the image with the data icon then i'll align it to the left so it touches the border and also i'll adjust its size a bit in the style tab just play around with the width that's great okay now let's turn it into a sticky element to give it that sticky scrolling effect so it follows the timeline when we're scrolling down the page and to do this i'll go to the image widget's advanced tab then go to the motion effects tab and here is the sticky option can set it to top bottom or none i'll set it to top because when we scroll i want it to stick at the top of the viewport setting it to the bottom makes it stick to the bottom of the viewport which might be useful for different effects you can test to see exactly what works best for you i'll set it back to top and as you can see the image sticks to the top of the viewport but it sticks right at the top and you can change this by using the offset option i'll set it to 200 pixels just so there's a little bit of space between the image and the top of the viewport great now let's see what happens when we continue scrolling the image continues to scroll down the entire page and this is not what we want we can prevent this from happening by using the stay in column option so i'll go ahead and enable it and let's check it out as you can see when we scroll now the image stays in its column and it doesn't continue you can use this effect very easily to turn widgets into sticky elements and they really improve the browsing experience and create a playful ux for your users okay time for our next example so what happens if a design is more advanced and you want to apply the same sticky effect on multiple elements in the column i'll scroll down to the next section and delete this image widget and to create the timestamp what i'll do is i'll use an icon widget and a heading widget and the heading widget i'll rotate with the line of custom css first though in order to keep them in one place what i'll do is i'll drag in an intersection into the column this intersection widget allows you to create nested columns within a section so you can create more complex layouts just like the one we're working on we only need one column so i'll just delete this one over here next i'll drag in the icon and heading widgets for the icon i'll go ahead and hover over the upload svg option and select this svg file i created before i'll align it to the left and in style i'll increase the size of it okay let's preview as you can see it doesn't touch the timeline now this is because the column in the intersection has some default padding so i'll go to the columns advance tab and set it to zero just to remove it next in order to position the heading and the icon widgets next to each other we need to set their width to inline this way widgets only take up their own space in the column so you can position multiple widgets side by side you can do that in the advanced tab under positioning i'll set the width to inline as you can see it doesn't take up 100 of the column's width anymore i'll do the same for the heading widget cool now we have a dedicated tutorial about using the inline option so be sure to check it out and also add a link in the description okay time to change the text i'll go ahead and type the date also another benefit of using a heading widget instead of an image is that you can change the content whenever you want without having to create a new image file next i'll style it a bit change the color and choose a cool font for this design i'll use a custom adobe font and if you want to find out how to integrate your adobe tap kit or custom fonts in elementor we also have a tutorial showing exactly how you'll see it in the description as well okay now that the heading widget is bigger it takes up more height so the icon isn't aligned anymore to make sure that the widgets stay aligned just go to the column settings and set the vertical align to middle okay great now all of the widgets in this column they will automatically align to the middle now it's time to rotate elemento makes it very easy for anyone to build websites without using code but if you want to customize your widgets even more and you know some code you can add custom css to any widgets column and section to help you tweak your designs to get the exact result you want you can find it in the advanced tab and the custom css now to create the rotate effect i will just use a short code snippet to make it appear vertically first type selector this will automatically select the element in our case the widget we want to apply the css to next add the open and close curly braces these mark the beginning and the end of the css code that specifies the style then inside the braces type transform colon rotate this property and value they define a 2d rotation the angle itself is specified in a parameter so add parentheses and inside it add the angle followed by the letters d e g which stands for degrees if you want the text to rotate the opposite way just type negative 90 instead cool so now the heading widget is set to appear vertically now let's position it just a little bit closer to the icon we can do that by adding some negative margin to the widget i'll unlink the values so we can set them individually remember though because we rotated the widget the left margin now is positioned at the bottom and the top margin on the left side so we need to add the negative margin over here to move it closer to the icon great our timestamp is ready time to add the sticky effect instead of adding it to each widget individually just like we did before what we will do now is set the sticky effect to the entire inner section this way all of the widgets inside it become sticky so let's select the inner section and in the advanced tab under motion effects set the sticky effect to top just like we did before i'll set an offset and enable the stain column option let's check it out as you can see it works perfectly just like with an image but now you also have the freedom to add animations to specific widgets you can do that to create an even more custom effect you can tweak this design for tablets and mobile devices by adjusting responsive settings and enabling or disabling the sticky effect on desktop tablets and mobile devices which i'll show you how to do in our final example okay so now that we know how to create sticky elements and use them creatively let's apply our skills and build these playful scrolling sections from scratch it's a little bit more advanced but if you follow along you'll see that it's not that hard it really boosts user experience and is a great way to showcase your products or services and you'll be able to apply this technique to your own designs that really make them stand out we'll also make sure that they look great on tablets and on mobile devices which won't take long okay let's go okay let's first check out the section and see what's going on on the left we have a sticky heading and an image widget with some motion effects and the heading appears behind the image giving it this cool effect when visitors scroll on the right we have divider widgets with text for the product name and features and text editor widgets for descriptions and there's also some images okay so now that we have an idea on the structure of some of the features that we'll be using i'll go ahead and delete the entire section so we can rebuild it from scratch first what i'll do is create a new section with two columns and like with the previous examples for this page i also set the background color in the body now let's add some content to the right column just to create enough vertical space to scroll through the section in the widgets menu i'll just go ahead and search for the divider widget and i'll drop it in the right column we can't see it yet because the default color is black and before we change that what i'll do is i'll add a text element and type the product name okay let's style it i'll set the divider's color to white and in the text drop down i'll go ahead and do the same next i'll just adjust the position to the right and i'll create some space between them then back in the content tab i'll reduce the width a bit just so it fits better okay cool next let's add a text widget for the description i'll go ahead and drag it under the divider then add the text make sure it's not too long and in style i'll just change the color to white as well by the way if you're using the same colors over and over again like the white for example you could create a global color instead of adding custom ones all the time which can help speed up your build process and it also makes it easier to edit your designs the same goes for global fonts i have a dedicated webinar going over the basics so be sure to check it out i've also linked it in the description in this webinar though i'm focusing on the sticky effect and the technical build process so i'm just using custom ones let's move on to the second description which is a specific product feature i want to highlight to save some time i'll just duplicate the divider widget and drag it under the text and then i'll change the text now because the text is shorter i'll also adjust the width a bit okay next i'll duplicate the text widget and position it and also change the text okay time to bring this product to life with some images i'll go ahead and drag in the image widget and choose the image then in the advanced tab i'll just add some padding at the top and at the bottom of the image this not only helps with the composition but it also creates the height that we need for when we add the sticky scroll effect to some of the elements okay let's copy and paste this image under the second text widget and set another image great a column is populated with content and has enough height to scroll through the section now let's adjust the column padding a bit just to tighten up the content so it's aligned with the rest of my page okay time to create the sticky scroll effect in the left column like with the previous example what i'll do is i'll use two widgets and place them in an intersection so first i'll drag one in the column also delete the extra column next i'll drag an image widget inside it and choose the image in style i'll adjust the width just so it fits nicely and like before i'll create some space at the top and at the bottom of the image by adding some padding to the inner column now before i add the heading widget and create the overlap effect i'll first add the sticky effect i'll select the inner section and in the advanced tab under motion effects i'll set sticky to top pay attention that the column has padding so there's no need to use an offset for this example ok now let's enable the stain column option to prevent the intersection from leaving the column it's in great okay time to create the text effect first drag a heading widget above the image i'll add the text and align it to the center next in the style tab i'll make it white and choose a nice font cool okay so now we need to place the heading on top of the image widget and afterwards we need to make sure that it appears behind it to do that i'll use elementor's custom positioning settings in the advanced tab if you are new to this concept we have multiple tutorials covering the basics as well as more advanced ones to give you inspiration so make sure you check them out in the heading widgets advanced tab under positioning i'll choose absolute the widget jumped up because it's removed from the flow of elements on the page so now it doesn't take up any height in the column this way we can position it exactly where we want with the horizontal and vertical orientation offsets i'll go ahead and move it down a bit with the vertical orientation offset okay now it's time to place the text behind the image we can make sure elements appear in front or behind each other by using the z-index i'll select the image and in the advanced tab set the z index to 2. cool you can do this to widgets columns and sections and layer different elements on top of each other the largest z-index value will appear on top okay we're almost done let's add some motion to the heading and image widgets and make sure that it all looks good on tablets and mobile devices i'll go to the motion effects drop down and turn on the scrolling effect i'll add a vertical scroll so the effect is applied when scrolling down the page i'll leave the direction to app so the image moves up when we scroll down the default speed and viewport settings work well here as well so i'll just leave it next let's select the heading widget okay so here's a tip for when using the z-index and custom positioning while in the editor as you can see at times it might be hard to select elements when creating more complex multi-layered designs in this case what i can do is open up the navigator in the bottom left panel it provides easy access to every element in the editor as you can see the image widget is already selected and here is the heading widget okay cool now for the heading widget i'll set it to move down so now the two elements they're moving the opposite direction this way the heading will be fully in view when seeing the section for the first time and then gradually move behind the image and when it reaches the bottom of the column it will stay in it you can play around with these settings till you get the exact effect you're looking for also we have a dedicated motion effects playlist as well to help you achieve cool effects that really make your site stand out by the way if you want to take this design concept a little further what you could do is use three elements instead of two and then apply a z-index to sandwich them and add a motion effect just like you see here it's not that hard to create and also it just requires one line of custom css that creates the transparent outline effect there will be a dedicated tutorial showing you how to do this step by step so be sure to subscribe to our youtube channel and hit the notification bell so you don't miss cool tutorials like these okay we're almost there on desktop it works well but what about the other devices let's switch to tablet mode and see how it looks the effect still works just like in desktop all we need to do is adjust the size of the heading and the image these device icons indicate that we can tweak these settings for tablets and mobile devices so i'll go ahead and increase the image as you can see the value is empty which indicates that it's inherited from the desktop i'll adjust it a bit for tablet that's great now let's fix the heading widget in typography you can see that the size also has device icons okay that's better what i'll also do is decrease the padding in the right column just to give the content a bit more space looks great alright we are nearing the end of this webinar last thing to do is check out the mobile the tweaks that we made for tablets are now inherited for mobile so the image and the heading they look good no need to touch it as you can see the columns on mobile automatically take up 100 of the space which works well for the design you can control this with the column width settings it also has device icons but i'll leave it as is because i want the visitors easily to see the content on mobile screens also since the columns are stacked on mobile the side-by-side part of the effect doesn't display her but our section reads pretty well i have a webinar about all of these responsive settings so make sure to check it out as well if you are new to it alright we're done i hope you managed to follow along and learn some new things during this webinar and feel confident to apply creative sticky scrolling effects to your own website projects they won't only elevate your designs but also help boost user experience and improve conversion rates elemental pro provides you with so many creative tools that give you the ability to turn ideas into real designs that would otherwise take much longer to build for example you could apply the sticky scrolling effect on pop-ups lottie animations or custom menus so play around with your own designs experiment with different widgets and combinations and surprise us with your creations by sharing them in the comments below also be sure to join our facebook group for loads of helpful tips and tricks and become part of our huge elemental community full of like-minded web creators don't forget to subscribe to our youtube channel full of fun tutorials that help you master elementor and lastly on our website check out the help center for easy access to the knowledge base faqs docs and a lot more i will also send you a link to a survey just to give some feedback on this webinar so we can improve them and keep making relevant and to the point webinars so good luck and most of all enjoy being creative thanks for tuning in ciao for now you

Channel: Elementor

Views: 27,696

Keywords:

Id: XiQV4nE8vu8

Length: 30min 0sec (1800 seconds)

Published: Thu May 06 2021