A while back I wrote a short tutorial on how to add nice moving particles background effect to your website. In that tutorial, I used ParticlesJS tool to add that effect. It’s been a nice tool for so long. But, just yesterday I found a new shiny app which looks more interesting. So let’s explore this one now and see how we can apply a nice interactive background in Divi or Elementor using this.
Generate Interactive Background Free
So let me introduce you to this new shiny app called Naker.Back. It is an easy-to-use tool allowing to integrate an interactive background to any HTML element of your website. So let’s generate a background first. Visit the Naker.Back App here.
This is the app interface, simple and easy to use. You can either play with the options available in the right panel to generate the desired background. Or simply start by clicking the “Randomize” button there and the app will generate some random interactive backgrounds for you.
Once you find a good randomly generated background, you can further tweak it via the options panel on the right side. Let’s explore some of the options there.
Change the Gradient Color & Direction
You can change the gradient & particle colors also.
Change Particle Image
They include a bunch of particle images which you see moving in the background, you can choose anyone you like. Additionally, you can also upload your own particle image, just make sure you upload a png format of the image and optimize it to work good.
More Options
There are other options to tweak the interactivity of the particles. You can adjust the number and size of particles easily. You can also adjust the particles movement direction, speed and camera sensitivity. Just play around with these options and you will see what they do.
Finally, Get the Generated Code
Now once you are happy with the generated background, you can click on the “Export” button on the top right and get the code to use in your website.
You must set a custom CSS ID first, this will be needed to apply on your section. The ID, as you might know, must be unique and should not conflict with any other CSS ID on the same page. Then click on the big box which contains the code and the code will be copied.
Now, this code needs to be simply added to your page or website in the body. I will show you how to apply this in Divi, Elementor & Gutenberg. The same way you must be able to use it with any Page builder in WordPress, in fact with any CSM or custom HTML.
How to add interactive Background in Divi
Let’s see how easily we can apply this interactive background in Divi. You can apply this interactive background on a Divi section, row, column or any module. I will just show you to apply on a section, same way you can apply it on any element.
Add the generated code in Divi
Go to your WordPress admin and then go to Divi > Theme Options and go to the Tab “Integration”. here you can paste your code to either head or body box.
Assign the CSS ID to the section or any element
Now that we have added the code in our website. Now edit the page in Divi builder where you need to add this interactive background and simply edit the section (or any element) and assign the ID. The ID should be the same as you assigned in the previous step when you export the code. In our case, it’s “ltdsec2“. You can also see the ID from the code you added.
Simply assign the same ID to the element where you need to apply this interactive background.
Note that you won’t see this interactive background apply in the Divi Visual Builder, but it works on the front-end. Just save the page and checkout in another tab as a user.
Easy to apply and visually appealing for the visitors.
How to add interactive Background in Elementor
Applying this interactive particles background in Elementor is also as easy as it is in Divi. Elementor doesn’t provide a place to add your custom JS code like Divi does, so we need to either put the JS code on the page using the HTML element. Or, we can put our JS code to your theme options panel if that provides a place to do so. We will just add it on the page for this tutorial.
Edit your page and first add an HTML element in your section (or anywhere on the page).
Paste the JS code in there, which you copied from the APP in previous steps.
Edit the section you like to apply the interactive background and assign the CSS ID which you used while exporting the code from the Naker.Blank app.
That’s it! Easy.
How to add interactive Background in Gutenberg
There is currently no easy way to integrate it with Gutenberg yet. The Issues is that Gutenberg doesn’t allow you to assign a custom ID (only CSS Class) to the blocks. On the other hand, Naker App doesn’t allow you to target the CSS class. I approached the app support with the feedback to allow to target CSS class and once that is being implemented, it will be possible to integrate it in Gutenberg. They said it is a good idea and added to the todo list to implement. Will update this tutorial as soon it allows targeting CSS class.
Hope I’ve explained it well, but feel free to ask any questions via the comments.
