Background Transition Widget Tutorial

Create fancy, colorful, and eye-catching webpages using background Color Transition Widget for Elementor. It allows you to have a seamless transition between sections background colors or images.

Click here to check Premium Background Transition Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it 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.

Key Features

• Content.
• Advanced Settings.

First, you should insert your Elementor sections to your page and please don’t assign background for them. All you have to do is to assign each section a unique CSS ID by navigating to Section Settings —> Advanced Tab —> CSS ID.

Content

Next, after you finish assigning different CSS IDs to each section, insert Background Transition Widget, click on Add Item, then sections CSS IDs to CSS ID fields. Also, check Steps to Add Items to Background Transition Web Page.

• CSS ID: Inset CSS ID for sections to apply background transition color/images to this section.

• Scroll Down/Scroll Up: The [Type] Color or Image is applied while scrolling down or while scrolling up.
  • Type: Color (If Color Type is Selected)
    • Select Color – Color Settings-
  • Type: Image (If Image Type is Selected)
    • Choose Image.
    • Customize Image settings.

• Offset: Select when will color/image transition happen for every section background:
  • Viewport Hits Top: Change section background when the top of section hit the top edge of the screen.
  • Viewport Hits Bottom: Change section background when the bottom section hit the bottom edge of the screen.
  • Custom Offset: Set custom offset to background transition.
    • Offset: Set offset in pixels (PX) or percentage (%).

Important: Please note that Offset option works only when Change Color As Gradient option is disabled.

2. Advanced Settings

• Change Colors As Gradient: In case all the background layers are set to solid colors (no images are added) – then you can enable this option to change background color as a gradient.
• Transition Duration: Set Time Duration for Background Transition Speed in seconds.
• Offset (PX): Set a value to specify the distance between the top of the viewport and the top of the section elements. For instance, you can add [100px] or [-100px]. The difference between those two values is that [100px] will make the color appears before you reach the section with [100px] value and vice versa. The default value is 30px.

Add Items to Background Transition Elementor Web Page

• First, click on your Section’s Settings [Icon].

• In Section’s Advanced Settings, Add CSS ID to the Section.

• Add (The same) Section’s CSS ID to Elementor Background Transition Widget Element CSS ID.

• Set its Type: Color, Image.
• Set Background Transition’s Advanced Settings.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.