How to Change Background Color Using Elementor Magic Scroll Addon

In this tutorial, we are going to show you how to change the background color of an Elementor element on scroll using Premium Magic Scroll Addon, but before we start if you don’t know what Elementor Magic Scroll Addon is, please visit this documentation article of Elementor Magic Scroll global addon to get to know more about this new feature and the options included in it.

Background Color Change on Scroll Using Elementor Magic Scroll Global Addon


1- Setup Your Elementor Section.

In this example, we will change the background color of an Elementor section on section. To achieve that, we will add a CSS ID to the Elementor Section and use this ID to change the section’s background color.

To add CSS ID, navigate to your Elementor Section Settings -> Advanced tab -> Advanced tab, and set the section ID in the “CSS ID’’ input field. For this tutorial we are going to use this ID “bg-color”.

Add CSS ID to Elementor section
Elementor Section CSS ID

2. Use Dual Heading widget.

For this tutorial, we are going to use three columns section and add four Elementor Dual Heading widgets to the first and third columns.

We will use these four Elementor Dual Heading widgets to change the background color of the parent section. Also, we will show and hide the headings using Fade In and Fade Out scroll animation effects from Elementor Magic Scroll Addon.

Now, drag Premium Dual Heading widget and drop it into your first column of the desired section. We added the below settings to achieve this layout but you can customize and create your own Elementor Dual Heading settings. Please check this article to know more about Premium Dual Heading settings.

  • HTML Tag: Set to H1.
  • Display: Set to Block.
  • Alignment: Set to Center.
Premium Dual Heading widget settings
Elementor Dual Heading Widget Controls Options

Dual Heading > Style: From the Style tab, you can keep adjusting the Colors, adding some Margins & Spacing, and editing the Typography.

3- Change Section Background Color Using Elementor Magic Scroll

Jump to Elementor Dual Heading widget’s Advanced tab, scroll down until you see Premium Magic Scroll, switch it on, then click on “Add Item”. From the repeater item that appeared to you choose Background Color from the Select Animation dropdown list.

From the repeater item that appeared to you, adjust its settings as follows.

A. Repeater Item Settings

  • Apply Animation On: Select “Custom CSS Selector”.
  • CSS Selector: Insert the CSS Selector for the section that you want to change its background color. for this tutorial it was (#bg-color).
    Quick Note* we used the ‘#‘ symbol here before the selector because it’s a CSS ID and if it was CSS Class we were going to use the ‘.‘ symbol before the CSS selector.
  • Select Color: Choose the background color that the section will get at the end of this animation effect for this tutorial we set it to (#00B7EB).
Background Color change scroll effect in Elementor Magic Scroll addon
Background Color Change Effect in Elementor Magic Scroll Addon

B. Magic Scroll Settings

  • How This Animation Should Work?: In our example, we used “Lock Page Scroll Until Animation Ends” because we wanted the text to be fully filled before jumping to the next Magic Scroll effect or next scene. Know more about the other options listed under “How This Animation Should Work?” and how they actually work in Magic Scroll documentation article.
  • Animation Order: Setting this option depends on your design needs. In our example, we made it “1” because we wanted it to be the first Magic Scroll animation visible in this scene.
  • Decrease Animation Speed By: From here, you can adjust how fast or slow the animation should behave/work. In our example, we kept it at “3”.
  • Scrub: This option helps make the animation work smoothly. In our example, we used “1.5” as a “Scrub” value.

4- Duplicate Elementor Dual Heading Widget And Change Its Settings

Now, After creating the first Elementor Dual Heading, we will copy/paste it to the first and the third column of the containing section. After that, we will change the text of the First Heading.

Change Section Background Color on Scroll Using Multiple Dual Heading Widgets

For Premium Magic Scroll settings, In our example, we changed the color option from item repeater settings to create different background colors on the page scroll.

And, we changed the Animation Order option for Magic Scroll settings to make them work in sequence. We set the Animation Order values for Elementor Dual Headings widgets in the first column to (1,3) and in the third column to (2,4).

Magic Scroll addon settings to change Elementor section background color on scroll
Change Elementor Magic Scroll Repeater Items Color and Animation Order Option

Let’s Wrap Up!

As you can see from this simple tutorial, it’s easy to manipulate 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.

Related Docs:

This Post Has 2 Comments

  1. saud

    Can you please mention how to show hide elements to achieve this ? as you did not mention how to fade in and fadeout steps here

    1. Abanob

      You can simply use the Fade In and Face Out effects that exist in Magic Scroll addon.

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.