{"id":105204,"date":"2023-03-17T15:33:51","date_gmt":"2023-03-17T10:03:51","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=105204"},"modified":"2023-03-17T15:33:51","modified_gmt":"2023-03-17T10:03:51","slug":"change-background-image-on-horizontal-page-scroll-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/change-background-image-on-horizontal-page-scroll-in-elementor\/","title":{"rendered":"How to Change the Background Image on Scroll in Elementor Horizontal Page Scroll?"},"content":{"rendered":"\n

Do you want to change the background image on horizontal scroll in Elementor? Adding a horizontal scrolling effect to your website pages can help your website stand out and look more engaging. Especially changing the background image on scroll is a technique that makes websites more visually appealing and engaging. It creates an effect that brings an otherwise static section to life.<\/p>\n\n\n\n

The Horizontal Scroll widget from The Plus Addons for Elementor, allows you to add beautiful background image transitions on scroll.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll 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

To do this, add the widget on the page and your Elementor template in the Content<\/strong> tab.<\/p>\n\n\n\n

Note: For this to work, make sure you don\u2019t use any background colour or images in your Elementor template sections.<\/em><\/p>\n\n\n\n

Then under the Scrolling Options<\/strong> tab, go to Background Transition<\/strong> and turn on the toggle.<\/p>\n\n\n\n

Under the Background,<\/strong> each item represents the background of a section of your Elementor template.<\/p>\n\n\n\n

Like Slide #1<\/strong> is the first section\u2019s background of your template.<\/p>\n\n\n\n

\"horizontal<\/figure>\n\n\n\n

To add a background image, open the Slide #1<\/strong> tab, and from the Choose Image<\/strong> section, add an image, it will add a background image to the first section of your template.<\/p>\n\n\n\n

You can add blur and overlay colour to the image from the Background Filter<\/strong>.<\/p>\n\n\n\n

Note: Make sure not to use background colour and image together.<\/em><\/p>\n\n\n\n

Follow the same process to add background images to other items.<\/p>\n\n\n\n

Click on the +ADD ITEM<\/strong> button, to add more items to match the number of sections in your Elementor template.<\/p>\n\n\n\n

From the Background Transition Duration<\/strong>, you can manage the transition speed. The higher the number smoother the transition. <\/p>\n\n\n\n

Once you\u2019ve added the images to all the sections when you scroll, it will have a beautiful background image transition effect.<\/p>\n\n\n\n

\"horizontal<\/figure>\n\n\n\n

As you can see, this is how you can add a background image change effect in Elementor horizontal scroll.<\/p>\n\n\n\n

Also, check How to Change the Background Colour on Scroll in Elementor Horizontal Page Scroll<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":105264,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[553,527],"class_list":["post-105204","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\/105204","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=105204"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105204\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/105264"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105204"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}