{"id":105186,"date":"2023-03-17T15:09:57","date_gmt":"2023-03-17T09:39:57","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=105186"},"modified":"2023-07-18T10:13:03","modified_gmt":"2023-07-18T04:43:03","slug":"horizontal-scroll-elementor-widget-settings-overview","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/horizontal-scroll-elementor-widget-settings-overview\/","title":{"rendered":"Horizontal Scroll Elementor Widget Settings Overview"},"content":{"rendered":"\n<p>Adding a horizontal scroll section is an excellent option for website owners looking to add a unique touch to their Elementor site. Horizontal scrolling allows visitors to scroll through content from left to right instead of the traditional top to bottom approach. This feature can create a more engaging and interactive website experience and make it easier to display large amounts of content.<\/p>\n\n\n\n<p>The Horizontal Scroll widget from The Plus Addons for Elementor allows you to create beautiful horizontal scrolling sections in Elementor easily.<\/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<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>This is a Premium widget, and you need the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n\n\n\n<li>Make sure the Horizontal Scroll widget is activated, to verify this, visit Plus Settings \u2192 and Search for Horizontal Scroll and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Horizontal Scroll Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle <\/strong>then<strong> <\/strong>click<strong> Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"914\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-activate.png\" alt=\"horizontal scroll activate\" class=\"wp-image-105187\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-activate.png 1920w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-activate-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-activate-1024x487.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-activate-768x366.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-activate-1536x731.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-activate-600x286.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use Elementor Template<\/strong> &#8211; You can use Elementor templates to create beautiful horizontal scrolling sections.<\/li>\n\n\n\n<li><strong>Different scroll effects <\/strong>&#8211; You can use different scroll effects in your horizontal scroll section.<\/li>\n\n\n\n<li><strong>Background transition<\/strong> &#8211; You can add a smooth background transition for the horizontal scroll.&nbsp;<\/li>\n\n\n\n<li><strong>RTL scroll <\/strong>&#8211; You can make your section scroll right to the left.<\/li>\n\n\n\n<li><strong>Unique Connection ID<\/strong> &#8211; Using a unique id, you can easily control the horizontal scroll with the Carousel Remote widget.<\/li>\n\n\n\n<li><strong>URL Parameter<\/strong> &#8211; You can directly link to a specific section of the horizontal scrolling section.<\/li>\n\n\n\n<li><strong>Responsive Width<\/strong> &#8211; You easily turn the horizontal scroll to a vertical scroll for a responsive view.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to add content in the Horizontal Scroll widget?<\/h2>\n\n\n\n<p>Once you add the widget on the page, from the <strong>Select Existing Template<\/strong> dropdown, you have to select an Elementor template.<\/p>\n\n\n\n<p>You can click the <strong>Create Template<\/strong> button to create one if you don&#8217;t have any existing template.&nbsp;<\/p>\n\n\n\n<p>Once you click the button, a new Elementor editor will open in a popup, where you can create your template.<\/p>\n\n\n\n<p>At the top, you can name the template and click on the <strong>Update Title<\/strong> button to update it.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: This option will save the template as a page.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Now while creating the template, treat one section as one slide of the horizontal scroll.<\/p>\n\n\n\n<p>You can add some height to the section or to make the section height full screen, you can set the Height to <strong>Fit To Screen<\/strong>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: To make a full height section in the flexbox container, you have to set Min Height to 100vh.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Once you\u2019ve created one section, just duplicate it to create a new section and change the content.&nbsp;<\/p>\n\n\n\n<p>When you are done with your template, just click on the <strong>Update<\/strong> button to save the template.<\/p>\n\n\n\n<p>Click the <strong>X<\/strong> (cross) button at the top to close the popup.<\/p>\n\n\n\n<p>Then you\u2019ll see your template in the Horizontal Scroll widget.<\/p>\n\n\n\n<p>You can click on the <strong>Edit Template<\/strong> button to edit the template again.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"949\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-elementor-template.gif\" alt=\"horizontal scroll elementor template\" class=\"wp-image-105188\"\/><\/figure>\n\n\n\n<p>Once you\u2019ve selected a template, it will show on the page.<\/p>\n\n\n\n<p>For a better user experience, you should make the section containing the Horizontal Scroll, <strong>Content Width<\/strong> to Full Width and <strong>Columns Gap<\/strong> to No Gap. so that the horizontal scrolling should show in full screen.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: For the flexbox container, to remove spacing around the container, set <\/em><strong><em>Padding<\/em><\/strong><em> to 0 in the <\/em><strong><em>Advanced<\/em><\/strong><em> tab.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Scrolling Options<\/h3>\n\n\n\n<p>You\u2019ll find some additional scrolling options under the <strong>Scrolling Options<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"301\" height=\"523\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-scrolling-options.png\" alt=\"horizontal scroll scrolling options\" class=\"wp-image-105189\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-scrolling-options.png 301w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-scrolling-options-173x300.png 173w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<p><strong>Scroll Effect<\/strong> &#8211; You can add different scrolling effects to the horizontal scrolling section from this dropdown. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-page-transition-effect-in-elementor-horizontal-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<p><strong>Start Viewpoint<\/strong> &#8211; From this field, you can set a horizontal point from 0.4 to 1, from where the next slide will be active.<\/p>\n\n\n\n<p>For example, if the value is set to 0.5, the next slide will be active once it reaches the centre of the screen horizontally.<\/p>\n\n\n\n<p><strong>Background Transition<\/strong> &#8211; From here you can change the section background colour or section background image on horizontal scroll.<\/p>\n\n\n\n<p><strong>Opacity Based Scroll<\/strong> &#8211; If you turn on this toggle, you can add opacity to the next slide of your horizontal scroll.<\/p>\n\n\n\n<p><strong>Full Slide Scroll<\/strong> &#8211; This will allow you to change the slide on a single mouse scroll.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Extra Options<\/h3>\n\n\n\n<p>Under the <strong>Extra Options<\/strong> tab, you\u2019ll find some options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"746\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-extra-options.png\" alt=\"horizontal scroll extra options\" class=\"wp-image-105190\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-extra-options.png 302w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-extra-options-121x300.png 121w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/figure>\n\n\n\n<p><strong>RTL Scroll<\/strong> &#8211; If you want to make a right to left horizontal scrolling section, turn on this toggle.<\/p>\n\n\n\n<p><strong>Distance beyond last slide<\/strong> &#8211; With this option, you can add an additional scrolling area after the last slide, so you can add a little pause before you move to the next section of your page.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: This option is not available with RTL Scroll.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Horizontal Scroll Speed<\/strong> &#8211; From here, you can control the scroll speed.<\/p>\n\n\n\n<p><strong>Section ID<\/strong> &#8211; From here, you can assign an id to each section of the horizontal scroll. You have to use a pipe separator (<strong>|<\/strong>) without any space to add the id for each section.<\/p>\n\n\n\n<p>Example: slide1|slide2|slide3<\/p>\n\n\n\n<p>This can be used to connect with the Dots navigation of the Carousel Remote widget. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-dots-navigation-in-elementor-horizontal-page-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<p><strong>Unique Connection ID<\/strong> &#8211; This unique feature of The Plus Addons for Elementor widgets allows you to interconnect widgets. With the <strong>Unique Connection ID, <\/strong>you can control the Horizontal Scroll widget navigation with the Carousel Remote widget.<\/p>\n\n\n\n<p><strong>How does this Work?<\/strong><\/p>\n\n\n\n<p>To create the connection, you have to use the same id on both the Horizontal Scroll and Carousel Remote widgets.<\/p>\n\n\n\n<p>And for the Carousel Remote dots navigation, the number of dot items should be the same as the number of slides\/sections in the Horizontal Scroll.<\/p>\n\n\n\n<p>And once the connection is established, you can control the Horizontal Scroll navigation from any part of the page.<\/p>\n\n\n\n<p>Some common use cases with our Carousel Remote ID Sync with Horizontal Scroll.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-paginations-in-elementor-horizontal-page-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">Add Paginations in Elementor Horizontal Page Scroll<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-progress-bar-in-elementor-horizontal-page-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">Add Progress Bar in Elementor Horizontal Page Scroll<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-next-previous-button-in-elementor-horizontal-page-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">Add Next \/Previous Button in Elementor Horizontal Page Scroll<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-dots-navigation-in-elementor-horizontal-page-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">Add Dots navigation in Elementor Horizontal Page Scroll<\/a>.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>URL Parameter<\/strong> &#8211; This option allows you to add anchor links in the URL, which can be used to link to a specific section of the horizontal scroll directly. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/link-to-a-specific-section-in-elementor-horizontal-page-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to make Horizontal scroll Responsive in Mobile?<\/h2>\n\n\n\n<p>While having horizontal scrolling sections on relatively large screens like desktop, tablet is excellent for user experience, but on smaller screens like mobile, it can be hard for users to scroll horizontally. So the horizontal scrolling section must be responsive on mobile to offer a better user experience.<\/p>\n\n\n\n<p>The Horizontal Scroll widget lets you easily make your horizontal scrolling section mobile responsive.<\/p>\n\n\n\n<p>From the <strong>Extra Options<\/strong> tab, go to <strong>Responsive Width<\/strong> and turn on the toggle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"806\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-responsive-width.png\" alt=\"horizontal scroll responsive width\" class=\"wp-image-105191\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-responsive-width.png 298w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-responsive-width-111x300.png 111w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/figure>\n\n\n\n<p>Then in the <strong>Responsive Width<\/strong> input field, add the maximum screen width below which the horizontal scrolling section will turn to normal vertical scrolling.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"765\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-responsive-width-demo.gif\" alt=\"horizontal scroll responsive width demo\" class=\"wp-image-105192\"\/><\/figure>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Advanced tab tutorial.<\/a><\/p>\n","protected":false},"author":16,"featured_media":105193,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[553,527],"class_list":["post-105186","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\/105186","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=105186"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105186\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/105193"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105186"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}