How to Change Background Color Using Elementor Magic Scroll Addon

In this tutorial, we’ll guide you through the process of changing the background color of Elementor container upon scrolling using Premium Magic Scroll Addon. This effect enhances user experience by adding dynamic visual transitions to your website.​

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that Elementor Magic Scroll feature and Premium Dual Heading widget are enabled so you can find them in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Step 1: Setup Your Elementor Container

First, we need to set up Elementor container where the background color change will take effect. To do this, we will assign a CSS ID to the container, allowing Premium Magic Scroll Addon to target it for animations.

Assign a CSS ID to the Container:

• Navigate to your Elementor container settings.
• Open the Advanced tab.
• In the CSS ID field, enter a unique identifier, e.g., bg-color.

This ID will be used as a selector to apply background color changes.

Step 2: Use Dual Heading Widget

Now, we need to add Premium Dual Heading widget to help trigger the background color animation. This widget will be placed in specific columns to structure the effect properly.

1. Set Up Your Layout:
   • Create a three-column section.
   • Add the Premium Dual Heading widget to the first and third columns.
2. Configure the Dual Heading Widget:
   • Content Settings:
     • Set HTML Tag to H1.
     • Set Display to Block.
     • Align the heading to Center.
   • Style Settings:
     • Adjust colors, margins, spacing, and typography to match your design.

For a detailed guide on using the Dual Heading widget, refer to this article.

Step 3: Apply Background Color Animation with Magic Scroll

With Elementor Container and Dual Heading widget in place, we now need to enable Magic Scroll and configure the background color animation. This will create a smooth transition effect as users scroll down the page.

• Enable Magic Scroll:
  • Select the Dual Heading widget.
  • Open the Advanced tab.
  • Toggle on Premium Magic Scroll.
• Configure Animation Settings:
  • Click Add Item.
  • Set Select Animation to Background Color.
  • Configure animation properties:
    • Apply Animation On: Select Custom CSS Selector.
    • CSS Selector: Enter #bg-color (or the CSS ID from Step 1).
    • Select Color: Choose the background color (e.g., #00B7EB).

• Adjust Magic Scroll Settings:
  • Animation Execution: Choose Lock Page Scroll Until Animation Ends for a structured transition.
  • Animation Order: Set the sequence number (e.g., 1).
  • Animation Speed: Set a moderate speed (e.g., 3).
  • Scrub: Adjust for smooth transitions (e.g., 1.5).

For more details on Magic Scroll settings, refer to the official documentation.

Step 4: Duplicate and Customize Dual Heading Widgets

To create a sequence of color transitions, we will duplicate Elementor Dual Heading widget and modify each instance to trigger different background colors at various scroll points.

• Duplicate the Configured Widgets:
  • Copy the Dual Heading widget.
  • Paste it into the first and third columns as needed.
• Modify Content:
  • Change the First Heading text for each widget.
• Assign Unique Background Colors:
  • Modify the Select Color value in Magic Scroll settings for each widget to create a multi-color transition.
• Sequence Animations:
  • Adjust the Animation Order to define the animation sequence (e.g., 1, 2, 3, 4).

Let’s Wrap Up!

As you can see from this tutorial, it’s easy to change the background color of Elementor elements using Background Color animation effect from Elementor Magic Scroll Addon without the need for coding skills.

You can create more advanced animation effects, we’re looking forward to seeing what you will come up with and we encourage you to post your work in our Facebook Group and get other designers inspired.