{"id":105227,"date":"2023-03-17T16:06:47","date_gmt":"2023-03-17T10:36:47","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=105227"},"modified":"2023-03-17T16:06:47","modified_gmt":"2023-03-17T10:36:47","slug":"add-progress-bar-in-elementor-horizontal-page-scroll","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-progress-bar-in-elementor-horizontal-page-scroll\/","title":{"rendered":"How to Add Progress Bar in Elementor Horizontal Page Scroll?"},"content":{"rendered":"\n<p>Have you ever wondered how to add a progress bar in an Elementor horizontal page scroll? As businesses&#8217; online presence becomes increasingly important, web designers and developers are constantly exploring new ways to create an interactive and engaging experience for their users. One such element is the progress bar. Adding a progress bar in an Elementor horizontal page scroll enhances the user experience and provides a visual representation of how far the user has come and how much further they have to go.<\/p>\n\n\n\n<p>With the Horizontal Scroll widget and Carousel Remote widget from The Plus Addons for Elementor, you can easily add a progress bar in your horizontal scrolling section.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, <a href=\"\/docs\/horizontal-scroll-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure it&#8217;s installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/elementor-horizontal-scroll?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>For this process, first, drag and drop the Carousel Remote widget and the Horizontal Scroll widget, and then follow the below steps:<\/p>\n\n\n\n<p>1. In the Horizontal Scroll widget, once you\u2019ve added your Elementor template, go to <strong>Extra Options<\/strong> tab &gt; <strong>Unique Connection ID<\/strong>. Add a unique id.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"742\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-unique-connection-id.png\" alt=\"horizontal scroll unique connection id\" class=\"wp-image-105222\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-unique-connection-id.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-unique-connection-id-121x300.png 121w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>2. Now select the Carousel Remote widget, then go to the <strong>Content<\/strong> tab, add the same ID in the <strong>Unique Connection ID<\/strong> field, and make sure <strong>Remote Type<\/strong> is selected as <strong>Horizontal Scroll<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"300\" height=\"506\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/carousel-remore-unique-connection-id-horizontal-scroll.png\" alt=\"carousel remote unique connection id horizontal scroll\" class=\"wp-image-105223\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/carousel-remore-unique-connection-id-horizontal-scroll.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/carousel-remore-unique-connection-id-horizontal-scroll-178x300.png 178w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>3. Then go to the <strong>Progress Bar<\/strong> tab and turn on the <strong>Progress Bar<\/strong> toggle. This will add a progress bar for the horizontal scrolling section. You can select the progress bar orientation from the <strong>Layout<\/strong> dropdown and from <strong>Offset<\/strong> you can change the position.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"298\" height=\"534\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/carousel-remote-unique-horizontal-scroll-progress-bar.png\" alt=\"carousel remote unique horizontal scroll progress bar\" class=\"wp-image-105229\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/carousel-remote-unique-horizontal-scroll-progress-bar.png 298w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/carousel-remote-unique-horizontal-scroll-progress-bar-167x300.png 167w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/figure>\n\n\n\n<p>From the Carousel Remote widget\u2019s Style tab, you can choose from three different style of the progress bar.<\/p>\n\n\n\n<p><strong>Style 1<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"972\" style=\"aspect-ratio: 1728 \/ 972;\" width=\"1728\" controls src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/07-Mar-2023-Vmaker-Recording.mp4\"><\/video><\/figure>\n\n\n\n<p><strong>Style 2<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/carousel-remore-horizontal-scroll-progress-bar-style-2.gif\" alt=\"carousel remote horizontal scroll progress bar style 2\" class=\"wp-image-105231\"\/><\/figure>\n\n\n\n<p><strong>Style 3<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/carousel-remote-horizontal-scroll-progress-bar-style-3.gif\" alt=\"carousel remote horizontal scroll progress bar style 3\" class=\"wp-image-105232\"\/><\/figure>\n\n\n\n<p>So this is how simply you can add some cool progress bar in your Elementor horizontal scrolling section.<\/p>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/link-to-a-specific-section-in-elementor-horizontal-page-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Link to a Specific Section in Elementor Horizontal Page Scroll<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":118389,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[553,527],"class_list":["post-105227","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-horizontal-scroll","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105227","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=105227"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105227\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/118389"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105227"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}