{"id":105196,"date":"2023-03-17T15:26:24","date_gmt":"2023-03-17T09:56:24","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=105196"},"modified":"2023-03-17T15:26:24","modified_gmt":"2023-03-17T09:56:24","slug":"change-background-colour-on-horizontal-page-scroll-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/change-background-colour-on-horizontal-page-scroll-in-elementor\/","title":{"rendered":"How to Change the Background Colour on Scroll in Elementor Horizontal Page Scroll?"},"content":{"rendered":"\n<p>Are you looking to change background colour on horizontal scroll? Customising the scroll effect on a webpage is one way to make it stand out. Changing the background colour on the scroll creates an interesting effect that can captivate your audience&#8217;s attention and make your website look more modern and dynamic. This technique is especially useful for websites with a lot of visual content like galleries or portfolios.&nbsp;<\/p>\n\n\n\n<p>Fortunately, with the Horizontal Scroll widget from The Plus Addons for Elementor, you can easily change the background colour on scroll.<\/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>To do this, add the widget on the page and your Elementor template in the <strong>Content<\/strong> tab.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: For this to work, don\u2019t use any background colour or images in your Elementor template sections.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Then under the <strong>Scrolling Options<\/strong> tab, go to <strong>Background Transition<\/strong> and turn on the toggle.<\/p>\n\n\n\n<p>Under the <strong>Background,<\/strong> each item represents the background of a section of your Elementor template.<\/p>\n\n\n\n<p>Like <strong>Slide #1<\/strong> is the first section\u2019s background of your template.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"431\" height=\"1042\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-background-color.png\" alt=\"horizontal scroll background color\" class=\"wp-image-105199\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-background-color.png 431w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-background-color-124x300.png 124w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-background-color-424x1024.png 424w\" sizes=\"(max-width: 431px) 100vw, 431px\" \/><\/figure>\n\n\n\n<p>To add a background colour open the <strong>Slide #1<\/strong> tab and from <strong>Color,<\/strong> select a colour, it will add a background colour to the first section of your template.<\/p>\n\n\n\n<p><em>Note: Make sure not to use background colour and image together.<\/em><\/p>\n\n\n\n<p>Follow the same process to add background colours to other items.<\/p>\n\n\n\n<p>Click on the <strong>+ADD ITEM<\/strong> button to add more items to match the number of sections in your Elementor template.<\/p>\n\n\n\n<p>From the <strong>Background Transition Duration<\/strong>, you can manage the transition speed. The higher the number smoother the transition.&nbsp;<\/p>\n\n\n\n<p>Once you\u2019ve added colour to all the sections when you scroll, it will have a beautiful background colour transition effect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"989\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-background-color-demo.gif\" alt=\"horizontal scroll background color demo\" class=\"wp-image-105200\"\/><\/figure>\n\n\n\n<p>So this is how you can change background colour on horizontal scroll.<\/p>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/change-background-image-on-horizontal-page-scroll-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Change the Background Image on Scroll in Elementor Horizontal Page Scroll<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":105202,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[553,527],"class_list":["post-105196","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\/105196","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=105196"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105196\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/105202"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105196"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}