{"id":1507,"date":"2021-06-17T12:27:26","date_gmt":"2021-06-17T12:27:26","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1507"},"modified":"2023-02-22T09:40:45","modified_gmt":"2023-02-22T09:40:45","slug":"sticky-inner-section-improvements-in-elementor-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/","title":{"rendered":"Sticky Inner Section Improvements"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1507\" class=\"elementor elementor-1507\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e34c064 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e34c064\" 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-1864d0c0\" data-id=\"1864d0c0\" 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-44708758 elementor-widget elementor-widget-video\" data-id=\"44708758\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=G7rQnqZQAqw&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-72c5b339 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"72c5b339\" 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-19cfc1ca\" data-id=\"19cfc1ca\" 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-238efdd elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"238efdd\" 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-3721\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-3721\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-3722\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-3722\" 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-3721\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3721\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3721\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial we will learn how to use Elementor\u2019s Inner Section widget to create sticky effects that stay in their columns. The example will demonstrate how to use animations and sticky effects while scrolling through a section. This tutorial will cover:<\/p><p>\u2714\ufe0e How to use sticky inner sections that stay in their columns<\/p><p>\u2714\ufe0e How to set up a section to create the sticky effect<\/p><p>\u2714\ufe0e How to use animations that display on sticky inner sections<\/p><p>\u2714\ufe0e And much more!<\/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-3722\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3722\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3722\" tabindex=\"0\" hidden=\"hidden\"><p>hey there it&#8217;s ash from elementor<br \/>ever wanted to create those side-by-side<br \/>sticky layouts but couldn&#8217;t get them to<br \/>stay in their columns<br \/>today i will show you how to use inner<br \/>sections to create advanced<br \/>customized sticky layouts that won&#8217;t<br \/>leave their columns<br \/>gain more control over your<br \/>intersections and maintain a clear and<br \/>consistent experience on your website<br \/>let&#8217;s find out how that works as you can<br \/>see i have created a section with three<br \/>columns<br \/>i have already added some content to the<br \/>first and third columns so you can go<br \/>ahead and add any content that you like<br \/>make sure your content creates enough<br \/>vertical space to scroll through the<br \/>section<br \/>now let&#8217;s build our inner section on the<br \/>widgets menu<br \/>drag and drop the intersection widget<br \/>here<br \/>and delete the extra column<br \/>back to the widgets menu drag in the<br \/>image widget and choose the image of<br \/>your preference<br \/>select the inner section and go to the<br \/>advanced tab<br \/>under motion effects enable the sticky<br \/>effect by selecting one of these two<br \/>options<br \/>depending on your design you might want<br \/>the inner section to stick to the top or<br \/>bottom<br \/>in our example we want the inner section<br \/>to stick to the top<br \/>so we&#8217;ll select this one<br \/>if we try to scroll we will see that the<br \/>inner section sticks to the top just<br \/>like we set it to<br \/>but it sticks right at the top we can<br \/>control the distance between the top of<br \/>the window<br \/>and our section by using the offset<br \/>option<br \/>set it to 250 pixels and let&#8217;s try<br \/>scrolling again<br \/>that looks much better what happens<br \/>though if we continue scrolling<br \/>the image keeps following the screen on<br \/>the entire web page<br \/>even after the section is over<br \/>you can easily control this by enabling<br \/>the staying column option<br \/>this will make the element stay inside<br \/>its column helping you to create<br \/>customized designs and control the<br \/>motion of your elements<br \/>let&#8217;s go one step further and combine<br \/>another motion effect to see how they<br \/>work together<br \/>select your image and in the advanced<br \/>tab<br \/>go to motion effects we&#8217;ll make this<br \/>image rotate while we scroll down<br \/>so let&#8217;s enable the rotate option and<br \/>customize it a bit<br \/>now if we try to scroll we will see that<br \/>the motion effect stops when the<br \/>intersection becomes sticky<br \/>this happens because the effect by<br \/>default is set relative to the viewport<br \/>we can make this work by selecting the<br \/>effect to be relative to the entire page<br \/>instead<br \/>now if we test it again the motion works<br \/>great while scrolling<br \/>play around with your sticky inner<br \/>sections that stay in their columns<br \/>use it for hamburger menus<br \/>or cool timelines<br \/>make beautiful designs and take your<br \/>creativity even further<br \/>share with us your unique creations and<br \/>don&#8217;t forget to like and subscribe to<br \/>our youtube channel for more videos and<br \/>tutorials<br \/>thanks for watching<br \/>you<\/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 In this tutorial we will learn how to use Elementor\u2019s Inner Section widget to create sticky effects that stay in their columns. The example will demonstrate how to use animations and sticky effects while scrolling through a section. This tutorial will cover: \u2714\ufe0e How to use sticky inner sections that stay in [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4417,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Sticky Inner Section Improvements - 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\/sticky-inner-section-improvements-in-elementor-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky Inner Section Improvements - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we will learn how to use Elementor\u2019s Inner Section widget to create sticky effects that stay in their columns. The example will demonstrate how to use animations and sticky effects while scrolling through a section. This tutorial will cover: \u2714\ufe0e How to use sticky inner sections that stay in [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T12:27:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:40:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Sticky-Inner-Section-Improvements_replace.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1082\" \/>\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=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sticky Inner Section Improvements - 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\/sticky-inner-section-improvements-in-elementor-pro\/","og_locale":"en_US","og_type":"article","og_title":"Sticky Inner Section Improvements - Academy","og_description":"Overview Transcript Overview In this tutorial we will learn how to use Elementor\u2019s Inner Section widget to create sticky effects that stay in their columns. The example will demonstrate how to use animations and sticky effects while scrolling through a section. This tutorial will cover: \u2714\ufe0e How to use sticky inner sections that stay in [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/","og_site_name":"Academy","article_published_time":"2021-06-17T12:27:26+00:00","article_modified_time":"2023-02-22T09:40:45+00:00","og_image":[{"width":1920,"height":1082,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Sticky-Inner-Section-Improvements_replace.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Sticky Inner Section Improvements","datePublished":"2021-06-17T12:27:26+00:00","dateModified":"2023-02-22T09:40:45+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/"},"wordCount":600,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Sticky-Inner-Section-Improvements_replace.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/","url":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/","name":"Sticky Inner Section Improvements - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Sticky-Inner-Section-Improvements_replace.jpg","datePublished":"2021-06-17T12:27:26+00:00","dateModified":"2023-02-22T09:40:45+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Sticky-Inner-Section-Improvements_replace.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/Sticky-Inner-Section-Improvements_replace.jpg","width":1920,"height":1082},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/sticky-inner-section-improvements-in-elementor-pro\/#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":"Sticky Inner Section Improvements"}]},{"@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\/1507","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=1507"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1507\/revisions"}],"predecessor-version":[{"id":9594,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1507\/revisions\/9594"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4417"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}