{"id":1437,"date":"2021-06-17T10:45:14","date_gmt":"2021-06-17T10:45:14","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1437"},"modified":"2023-02-22T09:10:50","modified_gmt":"2023-02-22T09:10:50","slug":"webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/","title":{"rendered":"WEBINAR: Level Up Your Design Skills With Sticky Elements [ADVANCED]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1437\" class=\"elementor elementor-1437\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b1ac27b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b1ac27b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-72acc9f\" data-id=\"72acc9f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3bf6f96b elementor-widget elementor-widget-video\" data-id=\"3bf6f96b\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=XiQV4nE8vu8&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-342ca7bf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"342ca7bf\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-58cfa4fc\" data-id=\"58cfa4fc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3d74470a elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"3d74470a\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1031\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1031\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1032\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1032\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1031\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1031\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1031\" tabindex=\"0\" hidden=\"false\"><p>Join Ziv Geurts, Designer &amp; Elementor\u2019s Lead Educator, for a step-by-step walkthrough on how to build more advanced designs with sticky elements in Elementor Pro. He\u2019ll cover the basics and show 3 creative ways for you to take your designs to the next level. 6 Takeaways:<\/p><p>\u2713 Apply sticky effects to single &amp; multiple elements<\/p><p>\u2713 Understand the Stay In Column setting<\/p><p>\u2713 Use offsets and padding to create desirable results<\/p><p>\u2713 Use CSS snippets to edit widgets even further<\/p><p>\u2713 Create cool sticky motion effects with custom positioning and z-index<\/p><p>\u2713 Manage sticky elements on tablet and mobile devices<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1032\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1032\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1032\" tabindex=\"0\" hidden=\"hidden\"><p>hi all<br \/>i&#8217;m ziv a web designer and elementals<br \/>lead educator<br \/>and welcome to this webinar where we&#8217;ll<br \/>go over some cool ways to use the sticky<br \/>scrolling effect<br \/>we&#8217;ll cover the basics and see how you<br \/>can use this creative feature<br \/>to build more advanced designs that<br \/>really make your site stand out<br \/>so stick around sticky elements are<br \/>mostly used to keep something in view<br \/>on the screen when the visitors scroll<br \/>such as headers nav menus and other<br \/>elements<br \/>could be social icons or an air to<br \/>basket button for example<br \/>they make it easier to navigate a site<br \/>and help increase conversion rates<br \/>but besides for the practical benefits<br \/>of using sticky elements<br \/>we can also create more advanced designs<br \/>with them which is what we&#8217;ll focus on<br \/>during this webinar<br \/>elementor is packed with many creative<br \/>tools that give you the ability<br \/>to execute creative ideas in record time<br \/>and produce designs that would otherwise<br \/>take much longer to build<br \/>during this webinar i will demonstrate<br \/>three creative ways for you to use<br \/>sticky elements to create stunning<br \/>visuals<br \/>i&#8217;ll start with this awesome vertical<br \/>timeline where we&#8217;ll apply basic sticky<br \/>effects to single elements<br \/>just like i did with these image widgets<br \/>creating the illusion they follow the<br \/>timeline while scrolling down the page<br \/>then we&#8217;ll take it up a notch and see<br \/>how to apply this effect on more<br \/>advanced designs<br \/>with multiple elements in intersections<br \/>and lastly<br \/>we&#8217;ll combine what we&#8217;ve learned and<br \/>create these playful scrolling sections<br \/>from scratch<br \/>so you can apply this technique to your<br \/>own designs to showcase your products or<br \/>services for example in a way that<br \/>really does them justice<br \/>we&#8217;ll also make sure that they look<br \/>great on tablets and mobile devices<br \/>which can be done fairly quickly<br \/>long story short this webinar will give<br \/>you a better understanding of elemental<br \/>sticky feature<br \/>so you can use it to build more advanced<br \/>designs in less time you thought<br \/>possible<br \/>so let&#8217;s dive in and start with the<br \/>first example the vertical timeline<br \/>okay so let&#8217;s make a start let&#8217;s first<br \/>check out the general concept for this<br \/>page<br \/>in order to create the vertical timeline<br \/>effect what i first did is i made sure<br \/>that the page has a black<br \/>background and you can do this in the<br \/>page settings in the bottom left<br \/>then in the style tab you can set the<br \/>body style<br \/>this way i only set it once and all of<br \/>the sections that i add will have this<br \/>background<br \/>already set up which saves some time<br \/>next as you can see the first section<br \/>has two columns and<br \/>the second section has three<br \/>just like the following ones they have<br \/>the same layout but they&#8217;ve got<br \/>different content<br \/>also i added some padding to the top and<br \/>the bottom of the second columns<br \/>just to create the scrollable space for<br \/>the sticky effect so that it works<br \/>properly<br \/>also the columns they are lined up with<br \/>each other by setting the same column<br \/>width in the layout tab<br \/>now in order to create the white<br \/>timeline i made sure that throughout the<br \/>page<br \/>all second columns they get a white<br \/>border on the left<br \/>as you can see in the style tab i set it<br \/>to solid<br \/>and i gave it a width and a color<br \/>and i repeated this process in all of<br \/>the sections<br \/>okay now let&#8217;s look at the sticky image<br \/>with the date<br \/>which looks like it&#8217;s part of the<br \/>timeline<br \/>i&#8217;ll go ahead and delete it so we can<br \/>build it from scratch<br \/>first what i&#8217;ll do is i&#8217;ll drag in an<br \/>image widget<br \/>and i&#8217;ll select the image with the data<br \/>icon<br \/>then i&#8217;ll align it to the left so it<br \/>touches the border<br \/>and also i&#8217;ll adjust its size a bit<br \/>in the style tab just play around with<br \/>the width<br \/>that&#8217;s great okay<br \/>now let&#8217;s turn it into a sticky element<br \/>to give it that sticky scrolling effect<br \/>so it follows the timeline<br \/>when we&#8217;re scrolling down the page and<br \/>to do this<br \/>i&#8217;ll go to the image widget&#8217;s advanced<br \/>tab<br \/>then go to the motion effects tab<br \/>and here is the sticky option can set it<br \/>to top<br \/>bottom or none i&#8217;ll set it to top<br \/>because when we scroll<br \/>i want it to stick at the top of the<br \/>viewport<br \/>setting it to the bottom makes it stick<br \/>to the bottom of the viewport<br \/>which might be useful for different<br \/>effects<br \/>you can test to see exactly what works<br \/>best for you<br \/>i&#8217;ll set it back to top<br \/>and as you can see the image sticks to<br \/>the top of the viewport but it sticks<br \/>right<br \/>at the top and you can change this by<br \/>using the offset option<br \/>i&#8217;ll set it to 200 pixels just so<br \/>there&#8217;s a little bit of space between<br \/>the image<br \/>and the top of the viewport<br \/>great now let&#8217;s see what happens when we<br \/>continue scrolling<br \/>the image continues to scroll down the<br \/>entire page<br \/>and this is not what we want<br \/>we can prevent this from happening by<br \/>using the stay in column option<br \/>so i&#8217;ll go ahead and enable it and let&#8217;s<br \/>check it out<br \/>as you can see when we scroll now the<br \/>image stays in its column<br \/>and it doesn&#8217;t continue you can use this<br \/>effect very easily to turn widgets into<br \/>sticky elements<br \/>and they really improve the browsing<br \/>experience and create a playful ux for<br \/>your users<br \/>okay time for our next example so what<br \/>happens if a design<br \/>is more advanced and you want to apply<br \/>the same sticky effect<br \/>on multiple elements in the column i&#8217;ll<br \/>scroll down to the next section<br \/>and delete this image widget<br \/>and to create the timestamp what i&#8217;ll do<br \/>is i&#8217;ll use an icon widget<br \/>and a heading widget and the heading<br \/>widget i&#8217;ll rotate with the line of<br \/>custom css<br \/>first though in order to keep them in<br \/>one place what i&#8217;ll do is i&#8217;ll drag in<br \/>an intersection into the column<br \/>this intersection widget allows you to<br \/>create nested columns within a section<br \/>so you can create more complex layouts<br \/>just like the one we&#8217;re working on<br \/>we only need one column so i&#8217;ll just<br \/>delete this one over here<br \/>next i&#8217;ll drag in the icon and heading<br \/>widgets<br \/>for the icon i&#8217;ll go ahead and hover<br \/>over the upload svg option<br \/>and select this svg file i created<br \/>before<br \/>i&#8217;ll align it to the left and in style<br \/>i&#8217;ll increase the size of it<br \/>okay let&#8217;s preview<br \/>as you can see it doesn&#8217;t touch the<br \/>timeline<br \/>now this is because the column in the<br \/>intersection has some default padding<br \/>so i&#8217;ll go to the columns advance tab<br \/>and set it to zero<br \/>just to remove it<br \/>next in order to position the heading<br \/>and the icon widgets next to each other<br \/>we need to set their width to inline<br \/>this way widgets only take up their own<br \/>space in the column so you can position<br \/>multiple widgets side by side<br \/>you can do that in the advanced tab<br \/>under positioning<br \/>i&#8217;ll set the width to inline<br \/>as you can see it doesn&#8217;t take up 100 of<br \/>the column&#8217;s width anymore<br \/>i&#8217;ll do the same for the heading widget<br \/>cool now we have a dedicated tutorial<br \/>about using the inline option<br \/>so be sure to check it out and also add<br \/>a link in the description<br \/>okay time to change the text<br \/>i&#8217;ll go ahead and type the date<br \/>also another benefit of using a heading<br \/>widget instead of<br \/>an image is that you can change the<br \/>content whenever you want without having<br \/>to create a new image file<br \/>next i&#8217;ll style it a bit<br \/>change the color and choose a cool font<br \/>for this design i&#8217;ll use a custom adobe<br \/>font<br \/>and if you want to find out how to<br \/>integrate your adobe tap kit<br \/>or custom fonts in elementor we also<br \/>have a tutorial showing exactly how<br \/>you&#8217;ll see it in the description as well<br \/>okay now that the heading widget is<br \/>bigger it takes up more height<br \/>so the icon isn&#8217;t aligned anymore to<br \/>make sure that the widgets stay aligned<br \/>just go to the column settings<br \/>and set the vertical align to middle<br \/>okay great now all of the widgets in<br \/>this column they will automatically<br \/>align to the middle<br \/>now it&#8217;s time to rotate<br \/>elemento makes it very easy for anyone<br \/>to build websites without using code<br \/>but if you want to customize your<br \/>widgets even more and you know some code<br \/>you can add custom css to any widgets<br \/>column and section<br \/>to help you tweak your designs to get<br \/>the exact result you want<br \/>you can find it in the advanced tab and<br \/>the custom css<br \/>now to create the rotate effect i will<br \/>just use a short code snippet<br \/>to make it appear vertically first type<br \/>selector<br \/>this will automatically select the<br \/>element in our case the widget<br \/>we want to apply the css to<br \/>next add the open and close curly braces<br \/>these mark the beginning and the end<br \/>of the css code that specifies the style<br \/>then inside the braces type transform<br \/>colon rotate<br \/>this property and value they define a 2d<br \/>rotation<br \/>the angle itself is specified in a<br \/>parameter<br \/>so add parentheses and inside it<br \/>add the angle followed by the letters d<br \/>e g which stands for degrees<br \/>if you want the text to rotate the<br \/>opposite way just type negative 90<br \/>instead<br \/>cool so now the heading widget is set to<br \/>appear vertically<br \/>now let&#8217;s position it just a little bit<br \/>closer to the icon<br \/>we can do that by adding some negative<br \/>margin to the widget<br \/>i&#8217;ll unlink the values so we can set<br \/>them individually<br \/>remember though because we rotated the<br \/>widget the left margin<br \/>now is positioned at the bottom and the<br \/>top margin on the left side<br \/>so we need to add the negative margin<br \/>over here to move it closer to the icon<br \/>great our timestamp is ready<br \/>time to add the sticky effect instead of<br \/>adding it to each widget individually<br \/>just like we did before what we will do<br \/>now is set the sticky effect<br \/>to the entire inner section this way all<br \/>of the widgets inside it become sticky<br \/>so let&#8217;s select the inner section and in<br \/>the advanced tab<br \/>under motion effects set the sticky<br \/>effect to top<br \/>just like we did before i&#8217;ll set an<br \/>offset<br \/>and enable the stain column option<br \/>let&#8217;s check it out<br \/>as you can see it works perfectly just<br \/>like with an image<br \/>but now you also have the freedom to add<br \/>animations to specific widgets<br \/>you can do that to create an even more<br \/>custom effect<br \/>you can tweak this design for tablets<br \/>and mobile devices by adjusting<br \/>responsive settings<br \/>and enabling or disabling the sticky<br \/>effect on desktop tablets and mobile<br \/>devices<br \/>which i&#8217;ll show you how to do in our<br \/>final example<br \/>okay so now that we know how to create<br \/>sticky elements<br \/>and use them creatively let&#8217;s apply our<br \/>skills and build these playful scrolling<br \/>sections from scratch<br \/>it&#8217;s a little bit more advanced but if<br \/>you follow along you&#8217;ll see that it&#8217;s<br \/>not that hard<br \/>it really boosts user experience and is<br \/>a great way to showcase your products<br \/>or services and you&#8217;ll be able to apply<br \/>this technique to your own designs that<br \/>really make them stand out<br \/>we&#8217;ll also make sure that they look<br \/>great on tablets and on mobile devices<br \/>which won&#8217;t take long okay let&#8217;s go<br \/>okay let&#8217;s first check out the section<br \/>and see what&#8217;s going on<br \/>on the left we have a sticky heading and<br \/>an image widget with some motion effects<br \/>and the heading appears behind the image<br \/>giving it this cool effect when visitors<br \/>scroll<br \/>on the right we have divider widgets<br \/>with text for the product name and<br \/>features<br \/>and text editor widgets for descriptions<br \/>and there&#8217;s also some images<br \/>okay so now that we have an idea on the<br \/>structure of some of the features that<br \/>we&#8217;ll be using<br \/>i&#8217;ll go ahead and delete the entire<br \/>section so we can rebuild it from<br \/>scratch<br \/>first what i&#8217;ll do is create a new<br \/>section with two columns<br \/>and like with the previous examples for<br \/>this page i also set the background<br \/>color in the body<br \/>now let&#8217;s add some content to the right<br \/>column just to create enough vertical<br \/>space<br \/>to scroll through the section in the<br \/>widgets menu i&#8217;ll just go ahead and<br \/>search for the divider widget<br \/>and i&#8217;ll drop it in the right column<br \/>we can&#8217;t see it yet because the default<br \/>color is black<br \/>and before we change that what i&#8217;ll do<br \/>is i&#8217;ll add a text element<br \/>and type the product name<br \/>okay let&#8217;s style it<br \/>i&#8217;ll set the divider&#8217;s color to white<br \/>and in the text drop down i&#8217;ll go ahead<br \/>and do the same<br \/>next i&#8217;ll just adjust the position to<br \/>the right<br \/>and i&#8217;ll create some space between them<br \/>then back in the content tab i&#8217;ll reduce<br \/>the width a bit<br \/>just so it fits better<br \/>okay cool next let&#8217;s add a text widget<br \/>for the description<br \/>i&#8217;ll go ahead and drag it under the<br \/>divider<br \/>then add the text<br \/>make sure it&#8217;s not too long and<br \/>in style i&#8217;ll just change the color to<br \/>white as well<br \/>by the way if you&#8217;re using the same<br \/>colors over and over again like the<br \/>white for example<br \/>you could create a global color instead<br \/>of adding custom ones all the time<br \/>which can help speed up your build<br \/>process and it also makes it easier to<br \/>edit your designs<br \/>the same goes for global fonts i have a<br \/>dedicated webinar going over the basics<br \/>so be sure to check it out<br \/>i&#8217;ve also linked it in the description<br \/>in this webinar though i&#8217;m focusing on<br \/>the sticky effect<br \/>and the technical build process so i&#8217;m<br \/>just using custom ones<br \/>let&#8217;s move on to the second description<br \/>which is a specific product feature i<br \/>want to highlight<br \/>to save some time i&#8217;ll just duplicate<br \/>the divider widget<br \/>and drag it under the text<br \/>and then i&#8217;ll change the text<br \/>now because the text is shorter i&#8217;ll<br \/>also adjust the width a bit<br \/>okay next i&#8217;ll duplicate the text widget<br \/>and position it<br \/>and also change the text<br \/>okay time to bring this product to life<br \/>with some images<br \/>i&#8217;ll go ahead and drag in the image<br \/>widget<br \/>and choose the image<br \/>then in the advanced tab i&#8217;ll just add<br \/>some padding at the top and at the<br \/>bottom of the image<br \/>this not only helps with the composition<br \/>but it also creates the height that we<br \/>need for when we add the sticky scroll<br \/>effect to some of the elements<br \/>okay let&#8217;s copy and paste this image<br \/>under the second text widget<br \/>and set another image<br \/>great a column is populated with content<br \/>and has enough height to scroll through<br \/>the section<br \/>now let&#8217;s adjust the column padding a<br \/>bit just to tighten up the content<br \/>so it&#8217;s aligned with the rest of my page<br \/>okay time to create the sticky scroll<br \/>effect in the left column<br \/>like with the previous example what i&#8217;ll<br \/>do is i&#8217;ll use two widgets<br \/>and place them in an intersection so<br \/>first i&#8217;ll drag one in the column<br \/>also delete the extra column<br \/>next i&#8217;ll drag an image widget inside it<br \/>and choose the image<br \/>in style i&#8217;ll adjust the width just so<br \/>it fits nicely<br \/>and like before i&#8217;ll create some space<br \/>at the top and at the bottom<br \/>of the image by adding some padding to<br \/>the inner column<br \/>now before i add the heading widget and<br \/>create the overlap effect<br \/>i&#8217;ll first add the sticky effect i&#8217;ll<br \/>select the inner section<br \/>and in the advanced tab under motion<br \/>effects<br \/>i&#8217;ll set sticky to top pay attention<br \/>that the column has padding<br \/>so there&#8217;s no need to use an offset for<br \/>this example<br \/>ok now let&#8217;s enable the stain column<br \/>option to prevent the intersection from<br \/>leaving the column it&#8217;s in<br \/>great<br \/>okay time to create the text effect<br \/>first drag a heading widget above the<br \/>image<br \/>i&#8217;ll add the text<br \/>and align it to the center<br \/>next in the style tab i&#8217;ll make it white<br \/>and choose a nice font<br \/>cool okay so now we need to place the<br \/>heading on top of the image widget and<br \/>afterwards we need to make sure that it<br \/>appears behind it<br \/>to do that i&#8217;ll use elementor&#8217;s custom<br \/>positioning settings in the advanced tab<br \/>if you are new to this concept we have<br \/>multiple tutorials covering the basics<br \/>as well as more advanced ones to give<br \/>you inspiration so make sure you check<br \/>them out<br \/>in the heading widgets advanced tab<br \/>under positioning i&#8217;ll choose absolute<br \/>the widget jumped up because it&#8217;s<br \/>removed from the flow of elements on the<br \/>page<br \/>so now it doesn&#8217;t take up any height in<br \/>the column<br \/>this way we can position it exactly<br \/>where we want with the horizontal and<br \/>vertical orientation offsets<br \/>i&#8217;ll go ahead and move it down a bit<br \/>with the vertical orientation offset<br \/>okay now it&#8217;s time to place the text<br \/>behind the image<br \/>we can make sure elements appear in<br \/>front or behind each other by using the<br \/>z-index<br \/>i&#8217;ll select the image and in the<br \/>advanced tab<br \/>set the z index to 2.<br \/>cool you can do this to widgets columns<br \/>and sections<br \/>and layer different elements on top of<br \/>each other the largest z-index value<br \/>will appear on top<br \/>okay we&#8217;re almost done let&#8217;s add some<br \/>motion to the heading and image widgets<br \/>and make sure that it all looks good on<br \/>tablets and mobile devices<br \/>i&#8217;ll go to the motion effects drop down<br \/>and turn on the scrolling effect i&#8217;ll<br \/>add a vertical scroll<br \/>so the effect is applied when scrolling<br \/>down the page<br \/>i&#8217;ll leave the direction to app so the<br \/>image moves up when we scroll down<br \/>the default speed and viewport settings<br \/>work well here as well<br \/>so i&#8217;ll just leave it next let&#8217;s select<br \/>the heading widget<br \/>okay so here&#8217;s a tip for when using the<br \/>z-index and custom positioning while in<br \/>the editor<br \/>as you can see at times it might be hard<br \/>to select elements<br \/>when creating more complex multi-layered<br \/>designs<br \/>in this case what i can do is open up<br \/>the navigator in the bottom left panel<br \/>it provides easy access to every element<br \/>in the editor<br \/>as you can see the image widget is<br \/>already selected<br \/>and here is the heading widget okay cool<br \/>now for the heading widget<br \/>i&#8217;ll set it to move down<br \/>so now the two elements they&#8217;re moving<br \/>the opposite direction<br \/>this way the heading will be fully in<br \/>view when seeing the section for the<br \/>first time<br \/>and then gradually move behind the image<br \/>and when it reaches the bottom of the<br \/>column it will stay in it<br \/>you can play around with these settings<br \/>till you get the exact effect you&#8217;re<br \/>looking for<br \/>also we have a dedicated motion effects<br \/>playlist as well<br \/>to help you achieve cool effects that<br \/>really make your site stand out<br \/>by the way if you want to take this<br \/>design concept a little further<br \/>what you could do is use three elements<br \/>instead of two<br \/>and then apply a z-index to sandwich<br \/>them and add a motion effect<br \/>just like you see here it&#8217;s not that<br \/>hard to create and also it just requires<br \/>one line of custom css<br \/>that creates the transparent outline<br \/>effect<br \/>there will be a dedicated tutorial<br \/>showing you how to do this step by step<br \/>so be sure to subscribe to our youtube<br \/>channel and hit the notification bell so<br \/>you don&#8217;t miss cool tutorials like these<br \/>okay we&#8217;re almost there on desktop it<br \/>works well<br \/>but what about the other devices let&#8217;s<br \/>switch to tablet mode and see how it<br \/>looks<br \/>the effect still works just like in<br \/>desktop all we need to do is adjust the<br \/>size of the heading<br \/>and the image<br \/>these device icons indicate that we can<br \/>tweak these settings for tablets and<br \/>mobile devices<br \/>so i&#8217;ll go ahead and increase the image<br \/>as you can see the value is empty which<br \/>indicates that it&#8217;s inherited from the<br \/>desktop<br \/>i&#8217;ll adjust it a bit for tablet<br \/>that&#8217;s great now let&#8217;s fix the heading<br \/>widget<br \/>in typography you can see that the size<br \/>also has device icons<br \/>okay that&#8217;s better what i&#8217;ll also do is<br \/>decrease the padding in the right column<br \/>just to give the content a bit more<br \/>space<br \/>looks great<br \/>alright we are nearing the end of this<br \/>webinar last thing to do is check out<br \/>the mobile<br \/>the tweaks that we made for tablets are<br \/>now inherited for mobile<br \/>so the image and the heading they look<br \/>good no need to touch it<br \/>as you can see the columns on mobile<br \/>automatically take up 100<br \/>of the space which works well for the<br \/>design<br \/>you can control this with the column<br \/>width settings<br \/>it also has device icons<br \/>but i&#8217;ll leave it as is because i want<br \/>the visitors easily to see the content<br \/>on mobile screens<br \/>also since the columns are stacked on<br \/>mobile the side-by-side part of the<br \/>effect doesn&#8217;t display her<br \/>but our section reads pretty well<br \/>i have a webinar about all of these<br \/>responsive settings so make sure to<br \/>check it out as well<br \/>if you are new to it alright<br \/>we&#8217;re done i hope you managed to follow<br \/>along and learn some new things during<br \/>this webinar<br \/>and feel confident to apply creative<br \/>sticky scrolling effects<br \/>to your own website projects they won&#8217;t<br \/>only elevate your designs but also help<br \/>boost user experience<br \/>and improve conversion rates elemental<br \/>pro provides you with so many creative<br \/>tools that give you the ability<br \/>to turn ideas into real designs that<br \/>would otherwise take much longer to<br \/>build<br \/>for example you could apply the sticky<br \/>scrolling effect on pop-ups<br \/>lottie animations or custom menus so<br \/>play around with your own designs<br \/>experiment with different widgets and<br \/>combinations and surprise us with your<br \/>creations by sharing them in the<br \/>comments below<br \/>also be sure to join our facebook group<br \/>for loads of helpful tips and tricks<br \/>and become part of our huge elemental<br \/>community full of like-minded web<br \/>creators<br \/>don&#8217;t forget to subscribe to our youtube<br \/>channel full of fun tutorials that help<br \/>you master elementor<br \/>and lastly on our website check out the<br \/>help center for easy access to the<br \/>knowledge base<br \/>faqs docs and a lot more i will also<br \/>send you a link to a survey<br \/>just to give some feedback on this<br \/>webinar so we can improve them<br \/>and keep making relevant and to the<br \/>point webinars so good luck<br \/>and most of all enjoy being creative<br \/>thanks for tuning in<br \/>ciao for now<br \/>youhi all<br \/>i&#8217;m ziv a web designer and elementals<br \/>lead educator<br \/>and welcome to this webinar where we&#8217;ll<br \/>go over some cool ways to use the sticky<br \/>scrolling effect<br \/>we&#8217;ll cover the basics and see how you<br \/>can use this creative feature<br \/>to build more advanced designs that<br \/>really make your site stand out<br \/>so stick around sticky elements are<br \/>mostly used to keep something in view<br \/>on the screen when the visitors scroll<br \/>such as headers nav menus and other<br \/>elements<br \/>could be social icons or an air to<br \/>basket button for example<br \/>they make it easier to navigate a site<br \/>and help increase conversion rates<br \/>but besides for the practical benefits<br \/>of using sticky elements<br \/>we can also create more advanced designs<br \/>with them which is what we&#8217;ll focus on<br \/>during this webinar<br \/>elementor is packed with many creative<br \/>tools that give you the ability<br \/>to execute creative ideas in record time<br \/>and produce designs that would otherwise<br \/>take much longer to build<br \/>during this webinar i will demonstrate<br \/>three creative ways for you to use<br \/>sticky elements to create stunning<br \/>visuals<br \/>i&#8217;ll start with this awesome vertical<br \/>timeline where we&#8217;ll apply basic sticky<br \/>effects to single elements<br \/>just like i did with these image widgets<br \/>creating the illusion they follow the<br \/>timeline while scrolling down the page<br \/>then we&#8217;ll take it up a notch and see<br \/>how to apply this effect on more<br \/>advanced designs<br \/>with multiple elements in intersections<br \/>and lastly<br \/>we&#8217;ll combine what we&#8217;ve learned and<br \/>create these playful scrolling sections<br \/>from scratch<br \/>so you can apply this technique to your<br \/>own designs to showcase your products or<br \/>services for example in a way that<br \/>really does them justice<br \/>we&#8217;ll also make sure that they look<br \/>great on tablets and mobile devices<br \/>which can be done fairly quickly<br \/>long story short this webinar will give<br \/>you a better understanding of elemental<br \/>sticky feature<br \/>so you can use it to build more advanced<br \/>designs in less time you thought<br \/>possible<br \/>so let&#8217;s dive in and start with the<br \/>first example the vertical timeline<br \/>okay so let&#8217;s make a start let&#8217;s first<br \/>check out the general concept for this<br \/>page<br \/>in order to create the vertical timeline<br \/>effect what i first did is i made sure<br \/>that the page has a black<br \/>background and you can do this in the<br \/>page settings in the bottom left<br \/>then in the style tab you can set the<br \/>body style<br \/>this way i only set it once and all of<br \/>the sections that i add will have this<br \/>background<br \/>already set up which saves some time<br \/>next as you can see the first section<br \/>has two columns and<br \/>the second section has three<br \/>just like the following ones they have<br \/>the same layout but they&#8217;ve got<br \/>different content<br \/>also i added some padding to the top and<br \/>the bottom of the second columns<br \/>just to create the scrollable space for<br \/>the sticky effect so that it works<br \/>properly<br \/>also the columns they are lined up with<br \/>each other by setting the same column<br \/>width in the layout tab<br \/>now in order to create the white<br \/>timeline i made sure that throughout the<br \/>page<br \/>all second columns they get a white<br \/>border on the left<br \/>as you can see in the style tab i set it<br \/>to solid<br \/>and i gave it a width and a color<br \/>and i repeated this process in all of<br \/>the sections<br \/>okay now let&#8217;s look at the sticky image<br \/>with the date<br \/>which looks like it&#8217;s part of the<br \/>timeline<br \/>i&#8217;ll go ahead and delete it so we can<br \/>build it from scratch<br \/>first what i&#8217;ll do is i&#8217;ll drag in an<br \/>image widget<br \/>and i&#8217;ll select the image with the data<br \/>icon<br \/>then i&#8217;ll align it to the left so it<br \/>touches the border<br \/>and also i&#8217;ll adjust its size a bit<br \/>in the style tab just play around with<br \/>the width<br \/>that&#8217;s great okay<br \/>now let&#8217;s turn it into a sticky element<br \/>to give it that sticky scrolling effect<br \/>so it follows the timeline<br \/>when we&#8217;re scrolling down the page and<br \/>to do this<br \/>i&#8217;ll go to the image widget&#8217;s advanced<br \/>tab<br \/>then go to the motion effects tab<br \/>and here is the sticky option can set it<br \/>to top<br \/>bottom or none i&#8217;ll set it to top<br \/>because when we scroll<br \/>i want it to stick at the top of the<br \/>viewport<br \/>setting it to the bottom makes it stick<br \/>to the bottom of the viewport<br \/>which might be useful for different<br \/>effects<br \/>you can test to see exactly what works<br \/>best for you<br \/>i&#8217;ll set it back to top<br \/>and as you can see the image sticks to<br \/>the top of the viewport but it sticks<br \/>right<br \/>at the top and you can change this by<br \/>using the offset option<br \/>i&#8217;ll set it to 200 pixels just so<br \/>there&#8217;s a little bit of space between<br \/>the image<br \/>and the top of the viewport<br \/>great now let&#8217;s see what happens when we<br \/>continue scrolling<br \/>the image continues to scroll down the<br \/>entire page<br \/>and this is not what we want<br \/>we can prevent this from happening by<br \/>using the stay in column option<br \/>so i&#8217;ll go ahead and enable it and let&#8217;s<br \/>check it out<br \/>as you can see when we scroll now the<br \/>image stays in its column<br \/>and it doesn&#8217;t continue you can use this<br \/>effect very easily to turn widgets into<br \/>sticky elements<br \/>and they really improve the browsing<br \/>experience and create a playful ux for<br \/>your users<br \/>okay time for our next example so what<br \/>happens if a design<br \/>is more advanced and you want to apply<br \/>the same sticky effect<br \/>on multiple elements in the column i&#8217;ll<br \/>scroll down to the next section<br \/>and delete this image widget<br \/>and to create the timestamp what i&#8217;ll do<br \/>is i&#8217;ll use an icon widget<br \/>and a heading widget and the heading<br \/>widget i&#8217;ll rotate with the line of<br \/>custom css<br \/>first though in order to keep them in<br \/>one place what i&#8217;ll do is i&#8217;ll drag in<br \/>an intersection into the column<br \/>this intersection widget allows you to<br \/>create nested columns within a section<br \/>so you can create more complex layouts<br \/>just like the one we&#8217;re working on<br \/>we only need one column so i&#8217;ll just<br \/>delete this one over here<br \/>next i&#8217;ll drag in the icon and heading<br \/>widgets<br \/>for the icon i&#8217;ll go ahead and hover<br \/>over the upload svg option<br \/>and select this svg file i created<br \/>before<br \/>i&#8217;ll align it to the left and in style<br \/>i&#8217;ll increase the size of it<br \/>okay let&#8217;s preview<br \/>as you can see it doesn&#8217;t touch the<br \/>timeline<br \/>now this is because the column in the<br \/>intersection has some default padding<br \/>so i&#8217;ll go to the columns advance tab<br \/>and set it to zero<br \/>just to remove it<br \/>next in order to position the heading<br \/>and the icon widgets next to each other<br \/>we need to set their width to inline<br \/>this way widgets only take up their own<br \/>space in the column so you can position<br \/>multiple widgets side by side<br \/>you can do that in the advanced tab<br \/>under positioning<br \/>i&#8217;ll set the width to inline<br \/>as you can see it doesn&#8217;t take up 100 of<br \/>the column&#8217;s width anymore<br \/>i&#8217;ll do the same for the heading widget<br \/>cool now we have a dedicated tutorial<br \/>about using the inline option<br \/>so be sure to check it out and also add<br \/>a link in the description<br \/>okay time to change the text<br \/>i&#8217;ll go ahead and type the date<br \/>also another benefit of using a heading<br \/>widget instead of<br \/>an image is that you can change the<br \/>content whenever you want without having<br \/>to create a new image file<br \/>next i&#8217;ll style it a bit<br \/>change the color and choose a cool font<br \/>for this design i&#8217;ll use a custom adobe<br \/>font<br \/>and if you want to find out how to<br \/>integrate your adobe tap kit<br \/>or custom fonts in elementor we also<br \/>have a tutorial showing exactly how<br \/>you&#8217;ll see it in the description as well<br \/>okay now that the heading widget is<br \/>bigger it takes up more height<br \/>so the icon isn&#8217;t aligned anymore to<br \/>make sure that the widgets stay aligned<br \/>just go to the column settings<br \/>and set the vertical align to middle<br \/>okay great now all of the widgets in<br \/>this column they will automatically<br \/>align to the middle<br \/>now it&#8217;s time to rotate<br \/>elemento makes it very easy for anyone<br \/>to build websites without using code<br \/>but if you want to customize your<br \/>widgets even more and you know some code<br \/>you can add custom css to any widgets<br \/>column and section<br \/>to help you tweak your designs to get<br \/>the exact result you want<br \/>you can find it in the advanced tab and<br \/>the custom css<br \/>now to create the rotate effect i will<br \/>just use a short code snippet<br \/>to make it appear vertically first type<br \/>selector<br \/>this will automatically select the<br \/>element in our case the widget<br \/>we want to apply the css to<br \/>next add the open and close curly braces<br \/>these mark the beginning and the end<br \/>of the css code that specifies the style<br \/>then inside the braces type transform<br \/>colon rotate<br \/>this property and value they define a 2d<br \/>rotation<br \/>the angle itself is specified in a<br \/>parameter<br \/>so add parentheses and inside it<br \/>add the angle followed by the letters d<br \/>e g which stands for degrees<br \/>if you want the text to rotate the<br \/>opposite way just type negative 90<br \/>instead<br \/>cool so now the heading widget is set to<br \/>appear vertically<br \/>now let&#8217;s position it just a little bit<br \/>closer to the icon<br \/>we can do that by adding some negative<br \/>margin to the widget<br \/>i&#8217;ll unlink the values so we can set<br \/>them individually<br \/>remember though because we rotated the<br \/>widget the left margin<br \/>now is positioned at the bottom and the<br \/>top margin on the left side<br \/>so we need to add the negative margin<br \/>over here to move it closer to the icon<br \/>great our timestamp is ready<br \/>time to add the sticky effect instead of<br \/>adding it to each widget individually<br \/>just like we did before what we will do<br \/>now is set the sticky effect<br \/>to the entire inner section this way all<br \/>of the widgets inside it become sticky<br \/>so let&#8217;s select the inner section and in<br \/>the advanced tab<br \/>under motion effects set the sticky<br \/>effect to top<br \/>just like we did before i&#8217;ll set an<br \/>offset<br \/>and enable the stain column option<br \/>let&#8217;s check it out<br \/>as you can see it works perfectly just<br \/>like with an image<br \/>but now you also have the freedom to add<br \/>animations to specific widgets<br \/>you can do that to create an even more<br \/>custom effect<br \/>you can tweak this design for tablets<br \/>and mobile devices by adjusting<br \/>responsive settings<br \/>and enabling or disabling the sticky<br \/>effect on desktop tablets and mobile<br \/>devices<br \/>which i&#8217;ll show you how to do in our<br \/>final example<br \/>okay so now that we know how to create<br \/>sticky elements<br \/>and use them creatively let&#8217;s apply our<br \/>skills and build these playful scrolling<br \/>sections from scratch<br \/>it&#8217;s a little bit more advanced but if<br \/>you follow along you&#8217;ll see that it&#8217;s<br \/>not that hard<br \/>it really boosts user experience and is<br \/>a great way to showcase your products<br \/>or services and you&#8217;ll be able to apply<br \/>this technique to your own designs that<br \/>really make them stand out<br \/>we&#8217;ll also make sure that they look<br \/>great on tablets and on mobile devices<br \/>which won&#8217;t take long okay let&#8217;s go<br \/>okay let&#8217;s first check out the section<br \/>and see what&#8217;s going on<br \/>on the left we have a sticky heading and<br \/>an image widget with some motion effects<br \/>and the heading appears behind the image<br \/>giving it this cool effect when visitors<br \/>scroll<br \/>on the right we have divider widgets<br \/>with text for the product name and<br \/>features<br \/>and text editor widgets for descriptions<br \/>and there&#8217;s also some images<br \/>okay so now that we have an idea on the<br \/>structure of some of the features that<br \/>we&#8217;ll be using<br \/>i&#8217;ll go ahead and delete the entire<br \/>section so we can rebuild it from<br \/>scratch<br \/>first what i&#8217;ll do is create a new<br \/>section with two columns<br \/>and like with the previous examples for<br \/>this page i also set the background<br \/>color in the body<br \/>now let&#8217;s add some content to the right<br \/>column just to create enough vertical<br \/>space<br \/>to scroll through the section in the<br \/>widgets menu i&#8217;ll just go ahead and<br \/>search for the divider widget<br \/>and i&#8217;ll drop it in the right column<br \/>we can&#8217;t see it yet because the default<br \/>color is black<br \/>and before we change that what i&#8217;ll do<br \/>is i&#8217;ll add a text element<br \/>and type the product name<br \/>okay let&#8217;s style it<br \/>i&#8217;ll set the divider&#8217;s color to white<br \/>and in the text drop down i&#8217;ll go ahead<br \/>and do the same<br \/>next i&#8217;ll just adjust the position to<br \/>the right<br \/>and i&#8217;ll create some space between them<br \/>then back in the content tab i&#8217;ll reduce<br \/>the width a bit<br \/>just so it fits better<br \/>okay cool next let&#8217;s add a text widget<br \/>for the description<br \/>i&#8217;ll go ahead and drag it under the<br \/>divider<br \/>then add the text<br \/>make sure it&#8217;s not too long and<br \/>in style i&#8217;ll just change the color to<br \/>white as well<br \/>by the way if you&#8217;re using the same<br \/>colors over and over again like the<br \/>white for example<br \/>you could create a global color instead<br \/>of adding custom ones all the time<br \/>which can help speed up your build<br \/>process and it also makes it easier to<br \/>edit your designs<br \/>the same goes for global fonts i have a<br \/>dedicated webinar going over the basics<br \/>so be sure to check it out<br \/>i&#8217;ve also linked it in the description<br \/>in this webinar though i&#8217;m focusing on<br \/>the sticky effect<br \/>and the technical build process so i&#8217;m<br \/>just using custom ones<br \/>let&#8217;s move on to the second description<br \/>which is a specific product feature i<br \/>want to highlight<br \/>to save some time i&#8217;ll just duplicate<br \/>the divider widget<br \/>and drag it under the text<br \/>and then i&#8217;ll change the text<br \/>now because the text is shorter i&#8217;ll<br \/>also adjust the width a bit<br \/>okay next i&#8217;ll duplicate the text widget<br \/>and position it<br \/>and also change the text<br \/>okay time to bring this product to life<br \/>with some images<br \/>i&#8217;ll go ahead and drag in the image<br \/>widget<br \/>and choose the image<br \/>then in the advanced tab i&#8217;ll just add<br \/>some padding at the top and at the<br \/>bottom of the image<br \/>this not only helps with the composition<br \/>but it also creates the height that we<br \/>need for when we add the sticky scroll<br \/>effect to some of the elements<br \/>okay let&#8217;s copy and paste this image<br \/>under the second text widget<br \/>and set another image<br \/>great a column is populated with content<br \/>and has enough height to scroll through<br \/>the section<br \/>now let&#8217;s adjust the column padding a<br \/>bit just to tighten up the content<br \/>so it&#8217;s aligned with the rest of my page<br \/>okay time to create the sticky scroll<br \/>effect in the left column<br \/>like with the previous example what i&#8217;ll<br \/>do is i&#8217;ll use two widgets<br \/>and place them in an intersection so<br \/>first i&#8217;ll drag one in the column<br \/>also delete the extra column<br \/>next i&#8217;ll drag an image widget inside it<br \/>and choose the image<br \/>in style i&#8217;ll adjust the width just so<br \/>it fits nicely<br \/>and like before i&#8217;ll create some space<br \/>at the top and at the bottom<br \/>of the image by adding some padding to<br \/>the inner column<br \/>now before i add the heading widget and<br \/>create the overlap effect<br \/>i&#8217;ll first add the sticky effect i&#8217;ll<br \/>select the inner section<br \/>and in the advanced tab under motion<br \/>effects<br \/>i&#8217;ll set sticky to top pay attention<br \/>that the column has padding<br \/>so there&#8217;s no need to use an offset for<br \/>this example<br \/>ok now let&#8217;s enable the stain column<br \/>option to prevent the intersection from<br \/>leaving the column it&#8217;s in<br \/>great<br \/>okay time to create the text effect<br \/>first drag a heading widget above the<br \/>image<br \/>i&#8217;ll add the text<br \/>and align it to the center<br \/>next in the style tab i&#8217;ll make it white<br \/>and choose a nice font<br \/>cool okay so now we need to place the<br \/>heading on top of the image widget and<br \/>afterwards we need to make sure that it<br \/>appears behind it<br \/>to do that i&#8217;ll use elementor&#8217;s custom<br \/>positioning settings in the advanced tab<br \/>if you are new to this concept we have<br \/>multiple tutorials covering the basics<br \/>as well as more advanced ones to give<br \/>you inspiration so make sure you check<br \/>them out<br \/>in the heading widgets advanced tab<br \/>under positioning i&#8217;ll choose absolute<br \/>the widget jumped up because it&#8217;s<br \/>removed from the flow of elements on the<br \/>page<br \/>so now it doesn&#8217;t take up any height in<br \/>the column<br \/>this way we can position it exactly<br \/>where we want with the horizontal and<br \/>vertical orientation offsets<br \/>i&#8217;ll go ahead and move it down a bit<br \/>with the vertical orientation offset<br \/>okay now it&#8217;s time to place the text<br \/>behind the image<br \/>we can make sure elements appear in<br \/>front or behind each other by using the<br \/>z-index<br \/>i&#8217;ll select the image and in the<br \/>advanced tab<br \/>set the z index to 2.<br \/>cool you can do this to widgets columns<br \/>and sections<br \/>and layer different elements on top of<br \/>each other the largest z-index value<br \/>will appear on top<br \/>okay we&#8217;re almost done let&#8217;s add some<br \/>motion to the heading and image widgets<br \/>and make sure that it all looks good on<br \/>tablets and mobile devices<br \/>i&#8217;ll go to the motion effects drop down<br \/>and turn on the scrolling effect i&#8217;ll<br \/>add a vertical scroll<br \/>so the effect is applied when scrolling<br \/>down the page<br \/>i&#8217;ll leave the direction to app so the<br \/>image moves up when we scroll down<br \/>the default speed and viewport settings<br \/>work well here as well<br \/>so i&#8217;ll just leave it next let&#8217;s select<br \/>the heading widget<br \/>okay so here&#8217;s a tip for when using the<br \/>z-index and custom positioning while in<br \/>the editor<br \/>as you can see at times it might be hard<br \/>to select elements<br \/>when creating more complex multi-layered<br \/>designs<br \/>in this case what i can do is open up<br \/>the navigator in the bottom left panel<br \/>it provides easy access to every element<br \/>in the editor<br \/>as you can see the image widget is<br \/>already selected<br \/>and here is the heading widget okay cool<br \/>now for the heading widget<br \/>i&#8217;ll set it to move down<br \/>so now the two elements they&#8217;re moving<br \/>the opposite direction<br \/>this way the heading will be fully in<br \/>view when seeing the section for the<br \/>first time<br \/>and then gradually move behind the image<br \/>and when it reaches the bottom of the<br \/>column it will stay in it<br \/>you can play around with these settings<br \/>till you get the exact effect you&#8217;re<br \/>looking for<br \/>also we have a dedicated motion effects<br \/>playlist as well<br \/>to help you achieve cool effects that<br \/>really make your site stand out<br \/>by the way if you want to take this<br \/>design concept a little further<br \/>what you could do is use three elements<br \/>instead of two<br \/>and then apply a z-index to sandwich<br \/>them and add a motion effect<br \/>just like you see here it&#8217;s not that<br \/>hard to create and also it just requires<br \/>one line of custom css<br \/>that creates the transparent outline<br \/>effect<br \/>there will be a dedicated tutorial<br \/>showing you how to do this step by step<br \/>so be sure to subscribe to our youtube<br \/>channel and hit the notification bell so<br \/>you don&#8217;t miss cool tutorials like these<br \/>okay we&#8217;re almost there on desktop it<br \/>works well<br \/>but what about the other devices let&#8217;s<br \/>switch to tablet mode and see how it<br \/>looks<br \/>the effect still works just like in<br \/>desktop all we need to do is adjust the<br \/>size of the heading<br \/>and the image<br \/>these device icons indicate that we can<br \/>tweak these settings for tablets and<br \/>mobile devices<br \/>so i&#8217;ll go ahead and increase the image<br \/>as you can see the value is empty which<br \/>indicates that it&#8217;s inherited from the<br \/>desktop<br \/>i&#8217;ll adjust it a bit for tablet<br \/>that&#8217;s great now let&#8217;s fix the heading<br \/>widget<br \/>in typography you can see that the size<br \/>also has device icons<br \/>okay that&#8217;s better what i&#8217;ll also do is<br \/>decrease the padding in the right column<br \/>just to give the content a bit more<br \/>space<br \/>looks great<br \/>alright we are nearing the end of this<br \/>webinar last thing to do is check out<br \/>the mobile<br \/>the tweaks that we made for tablets are<br \/>now inherited for mobile<br \/>so the image and the heading they look<br \/>good no need to touch it<br \/>as you can see the columns on mobile<br \/>automatically take up 100<br \/>of the space which works well for the<br \/>design<br \/>you can control this with the column<br \/>width settings<br \/>it also has device icons<br \/>but i&#8217;ll leave it as is because i want<br \/>the visitors easily to see the content<br \/>on mobile screens<br \/>also since the columns are stacked on<br \/>mobile the side-by-side part of the<br \/>effect doesn&#8217;t display her<br \/>but our section reads pretty well<br \/>i have a webinar about all of these<br \/>responsive settings so make sure to<br \/>check it out as well<br \/>if you are new to it alright<br \/>we&#8217;re done i hope you managed to follow<br \/>along and learn some new things during<br \/>this webinar<br \/>and feel confident to apply creative<br \/>sticky scrolling effects<br \/>to your own website projects they won&#8217;t<br \/>only elevate your designs but also help<br \/>boost user experience<br \/>and improve conversion rates elemental<br \/>pro provides you with so many creative<br \/>tools that give you the ability<br \/>to turn ideas into real designs that<br \/>would otherwise take much longer to<br \/>build<br \/>for example you could apply the sticky<br \/>scrolling effect on pop-ups<br \/>lottie animations or custom menus so<br \/>play around with your own designs<br \/>experiment with different widgets and<br \/>combinations and surprise us with your<br \/>creations by sharing them in the<br \/>comments below<br \/>also be sure to join our facebook group<br \/>for loads of helpful tips and tricks<br \/>and become part of our huge elemental<br \/>community full of like-minded web<br \/>creators<br \/>don&#8217;t forget to subscribe to our youtube<br \/>channel full of fun tutorials that help<br \/>you master elementor<br \/>and lastly on our website check out the<br \/>help center for easy access to the<br \/>knowledge base<br \/>faqs docs and a lot more i will also<br \/>send you a link to a survey<br \/>just to give some feedback on this<br \/>webinar so we can improve them<br \/>and keep making relevant and to the<br \/>point webinars so good luck<br \/>and most of all enjoy being creative<br \/>thanks for tuning in<br \/>ciao for now<br \/>you<br \/><br \/><\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Join Ziv Geurts, Designer &amp; Elementor\u2019s Lead Educator, for a step-by-step walkthrough on how to build more advanced designs with sticky elements in Elementor Pro. He\u2019ll cover the basics and show 3 creative ways for you to take your designs to the next level. 6 Takeaways: \u2713 Apply sticky effects to single [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4148,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,30,34,38,24],"tags":[47],"class_list":["post-1437","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-home-featured","category-home-webinars","category-top-picks-selection-webinars","category-trending-now-selection-webinars","tag-webinars"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Level Up Your Design Skills With Sticky Elements | Elementor Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Level Up Your Design Skills With Sticky Elements | Elementor Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Join Ziv Geurts, Designer &amp; Elementor\u2019s Lead Educator, for a step-by-step walkthrough on how to build more advanced designs with sticky elements in Elementor Pro. He\u2019ll cover the basics and show 3 creative ways for you to take your designs to the next level. 6 Takeaways: \u2713 Apply sticky effects to single [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T10:45:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:10:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Level-Up-Your-Design-Skills-With-Sticky-Elements.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Level Up Your Design Skills With Sticky Elements | Elementor Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/","og_locale":"en_US","og_type":"article","og_title":"Level Up Your Design Skills With Sticky Elements | Elementor Academy","og_description":"Overview Transcript Overview Join Ziv Geurts, Designer &amp; Elementor\u2019s Lead Educator, for a step-by-step walkthrough on how to build more advanced designs with sticky elements in Elementor Pro. He\u2019ll cover the basics and show 3 creative ways for you to take your designs to the next level. 6 Takeaways: \u2713 Apply sticky effects to single [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/","og_site_name":"Academy","article_published_time":"2021-06-17T10:45:14+00:00","article_modified_time":"2023-02-22T09:10:50+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Level-Up-Your-Design-Skills-With-Sticky-Elements.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"35 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"WEBINAR: Level Up Your Design Skills With Sticky Elements [ADVANCED]","datePublished":"2021-06-17T10:45:14+00:00","dateModified":"2023-02-22T09:10:50+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/"},"wordCount":8156,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Level-Up-Your-Design-Skills-With-Sticky-Elements.jpg","keywords":["Webinars"],"articleSection":["Design \/ Layout","home \u2013 featured","home \u2013 webinars","top picks selection \u2013 webinars","trending now selection \u2013 webinars"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/","url":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/","name":"Level Up Your Design Skills With Sticky Elements | Elementor Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Level-Up-Your-Design-Skills-With-Sticky-Elements.jpg","datePublished":"2021-06-17T10:45:14+00:00","dateModified":"2023-02-22T09:10:50+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Level-Up-Your-Design-Skills-With-Sticky-Elements.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Level-Up-Your-Design-Skills-With-Sticky-Elements.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/webinar-level-up-your-design-skills-with-sticky-elements-in-elementor-pro-advanced\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"WEBINAR: Level Up Your Design Skills With Sticky Elements [ADVANCED]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1437"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1437\/revisions"}],"predecessor-version":[{"id":9603,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1437\/revisions\/9603"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4148"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}