{"id":106831,"date":"2023-05-09T17:56:30","date_gmt":"2023-05-09T12:26:30","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=106831"},"modified":"2023-05-09T17:56:30","modified_gmt":"2023-05-09T12:26:30","slug":"add-sticky-sections-in-image-scroll-sequence","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-sticky-sections-in-image-scroll-sequence\/","title":{"rendered":"How to Add Sticky Sections in an Image Scroll Sequence?"},"content":{"rendered":"\n

Are you looking to add Sticky Sections to show some additional content on your Image Scroll Sequence? Image scroll sequences are visually appealing and can keep users engaged with the content. However, by showing some information or content over the image sequence scroll animation through sticky sections you can make them more dynamic and informative.  <\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Scroll Sequence widget, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

With the Scroll Sequence widget from The Plus Addons for Elementor, you can easily add different content on top of the Scroll Sequence through Sticky Sections.<\/p>\n\n\n\n

To do this follow the steps –<\/p>\n\n\n\n

1. Add a section or container (for flexbox), then add the Scroll Sequence widget there.<\/p>\n\n\n\n

2. Now add the appropriate widget that you want to use to show content over the image scroll sequence. For instance, we\u2019ll use the Elementor Heading widget.<\/p>\n\n\n\n

Let\u2019s add the Heading widget in the same section or container (for flexbox) and adjust the content and style according to your requirement.<\/p>\n\n\n\n

3. Then go to the Advanced<\/strong> tab, add a higher Z-index<\/strong> value than the Scroll Sequence widget (by default z-index is set to 1) and in the CSS ID<\/strong> field add an id.<\/p>\n\n\n\n

\"heading<\/figure>\n\n\n\n

4. Now select the Scroll Sequence widget, then select the appropriate option from the Apply To<\/strong> dropdown where you want to add the sequence animation.<\/p>\n\n\n\n

5. Then select the appropriate image source from the Upload Type<\/strong> dropdown.<\/p>\n\n\n\n

6. To add sticky sections go to Extra Options<\/strong> and turn on the Sticky Sections<\/strong> toggle and click on the +ADD ITEM<\/strong> button.<\/p>\n\n\n\n

7. In the Item #1<\/strong> tab, you\u2019ll find some options – <\/p>\n\n\n\n

Section ID<\/strong> – Add the same id that you used on the content widget, here it is the Heading widget.<\/p>\n\n\n\n

Start<\/strong> – Mention the image number from where you want the Heading widget to be visible.<\/p>\n\n\n\n

End<\/strong> – Mention the image number from where you want the Heading widget to be hidden.<\/p>\n\n\n\n

\n

Note; Start and End range will depend on the number of images you have in your sequence.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

Top (%)<\/strong> – From here you can manage the top position of the element.<\/p>\n\n\n\n

Start Animation<\/strong> – You can add different start animations to the element.<\/p>\n\n\n\n

End Animation<\/strong> –  You can add different end animations to the element as well.<\/p>\n\n\n\n

\"scroll<\/figure>\n\n\n\n

8. You can click on the +ADD ITEM <\/strong>button to add multiple sticky sections. Just keep in mind you have to add individual widgets then follow steps 3<\/strong> and 7<\/strong>.<\/p>\n\n\n\n

If you don\u2019t have long enough content on the section or container (for flexbox) then you have to set a minimum height for the container or section with the Scroll Sequence widget.<\/p>\n\n\n\n

This is how you can use Sticky Sections to add content over an image scroll sequence.<\/p>\n\n\n\n

Also, check How to Add Image Sequence on the Page Body in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":106838,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,561],"class_list":["post-106831","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-scroll-sequence"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=106831"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106831\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/106838"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=106831"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=106831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}