How to Use Particles Section Addon with Background Transition Widget?

In this article, we will discuss How to Use Particles Section Addon with Background Transition Widget in the same Elementor Section.

First of all, you have to know that using Premium Particles Section Addon will generate a CSS ID (automatically) to its Elementor Section, so it overrides any CSS ID you set (manually) for Elementor Section.

On the other hand, to use Background Transition Widget for Elementor you will have to Add Specific CSS ID to each Elementor Section (manually) so that Elementor sections get that seamless colorful transitioning effect. Click here to check Premium Background Transition Widget tutorial.

Particles Section Addon generated CSS ID would override any CSS ID you have set for Background Transition Section, this would result in a conflict in the section that is using Background Transition Widget, both Background Transition Widget, and Particles Addon will not work.

To resolve this issue please check the following steps carefully, so you can get Background Transition Widget and Particles Section Addon to work together.

Steps to Resolve Background Transition Widget and Particles Section Addon Conflict

  • Enable Particles and add the JSON Code for the Particles in the Section. Click here to check steps on Premium Particles Addon Section Tutorial.
  • On the webpage [Right Click] and Inspect the Section where Particles Addon and Background Transition Widget are used.
  • Use your browser inspect to get the new CSS ID generated by Premium Particles Section Addon.
  • Copy the new CSS ID of the section “premium-section-particles-XXXXX” which was generated by Premium Particles Addon for Elementor.
Screenshot of Google Chrome Browser Inspector Shows an Arrow points at CSS ID for a Section
Google Chrome Browser, an Arrow Points at CSS ID for Section in Google Chrome Inspect
  • In both Background Transition Widget [Content –> Elements –> CSS ID] and Section’s Advanced CSS ID, paste or type the generated CSS ID . In my example, the CSS ID is “premium-section-particles-77f8632”
Two Screenshots, [Left] Arrow Points at Background Transition Widget Element CSS ID, [Right] Advanced Settings CSS ID
Background Transition Widget Content and Elementor Section Background CSS-ID

Following these few steps should resolve the conflict between Elementor Particles Addon and Background Transition Widget for Elementor, and make them work together harmoniously.

Video Shows How Background Transition Widget and Particles Section Addons Works Together Using Elementor Page Builder

Related Docs:

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.