---
title: "How to Change the Background Colour on Scroll in Elementor Horizontal Page Scroll?"
url: https://theplusaddons.com/docs/change-background-colour-on-horizontal-page-scroll-in-elementor/
date: 2023-03-17
modified: 2026-04-12
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-Change-the-Background-Colour-on-Scroll-in-Elementor-Horizontal-Page-Scroll_-1024x536.jpg
word_count: 345
---

# How to Change the Background Colour on Scroll in Elementor Horizontal Page Scroll?

## Key Takeaways

- Horizontal Scroll widget from The Plus Addons for Elementor allows users to change background colour on scroll.
- Users must not use any background colour or images in their Elementor template sections for the background transition to work.
- Background Transition Duration can be adjusted to manage the speed of the transition effect.

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'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. 

Fortunately, with the Horizontal Scroll widget from The Plus Addons for Elementor, you can easily change the background colour on scroll.

*To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, [click here](/docs/horizontal-scroll-elementor-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-horizontal-scroll?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the widget on the page and your Elementor template in the **Content** tab.

> *Note: For this to work, don’t use any background colour or images in your Elementor template sections.*

Then under the **Scrolling Options** tab, go to **Background Transition** and turn on the toggle.

Under the **Background,** each item represents the background of a section of your Elementor template.

Like **Item #1** is the first section’s background of your template.

![horizontal scroll background color](https://theplusaddons.com/wp-content/uploads/2023/03/horizontal-scroll-background-color-1.png)

To add a background colour open the **Item #1** tab and from **Color,** select a colour, it will add a background colour to the first section of your template.

> *Note: Make sure not to use background colour and image together.*

Follow the same process to add background colours to other items.

Click on the **+Add Item** button to add more items to match the number of sections in your Elementor template.

From the **Background Transition Duration**, you can manage the transition speed. The higher the number smoother the transition. 

Once you’ve added colour to all the sections when you scroll, it will have a beautiful background colour transition effect.

So this is how you can change background colour on horizontal scroll.

Also, check [How to Change the Background Image on Scroll in Elementor Horizontal Page Scroll](https://theplusaddons.com/docs//change-background-image-on-horizontal-page-scroll-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if the background colour doesn't change on scroll?**
A: If the background colour isn't changing, ensure that you have activated the Background Transition toggle under the Scrolling Options tab. If this toggle is off, the background colour won't transition as expected. Also, remember not to use any background colours or images in your Elementor template sections, as this can interfere with the scrolling effect.

**Q: What is the best transition speed for background colour changes?**
A: The transition speed can be adjusted using the Background Transition Duration setting. A higher duration results in a smoother transition, which can enhance the visual appeal. Experiment with different speeds to find the best fit for your design; too fast might feel jarring, while too slow could lose the effect.

**Q: How do I add multiple background colours for different sections?**
A: To add multiple background colours, click the +Add Item button under the Background section for each section of your Elementor template. Each item corresponds to a section, allowing you to customize the background colour individually. This feature enables a unique transition effect as users scroll through your content.

**Q: What happens if I use both background colour and images together?**
A: Using both background colour and images together is not recommended, as it can lead to conflicts in the display. The instructions specify that you should choose one or the other for each section to ensure the background transition effect works properly. Stick to either a solid colour or an image for the best results.