How to Add Particle Effect in WordPress

Updated: March 25, 2021

If your website has a good, interactive design, it can be one of the factors to make your visitors stay longer. To accomplish it, one of the things you can do is to add a particle effect. In WordPress, there are several options to add a particle effect, which you can adopt according to your skill level. If you have no coding skills, you can add a particle effect to your page using a page builder plugin like Elementor. This article will show you how to add particle effect in WordPress using Elementor.

In case you haven’t heard about it, Elementor is a page builder plugin to allow you to create beautiful pages on your WordPress site. It comes with a visual editor which offers a live editing experience. You can use Elementor to create a beautiful page without dealing with CSS or HTML. Elementor has an open ecosystem just like WordPress. You can extend its functionality and features by installing add-ons. Elementor itself has no built-in feature to add particle effects. You can use one of the following add-ons to add particle effects:

  • Happy Addons
  • Essential Addons
  • JetTricks

Happy Addons and Essential Addons are freemium add-ons but you need to use the pro version to be able to add particle effects as the feature to add particle effects is only available on the pro version. Meanwhile, JetTricks is a paid plugin (developed by Crocoblock). You can get the plugin at $19.

We personally suggest Happy Addons as it offers more customization options than other add-ons. You can get the pro version of Happy Addons on its official website. Here is an example a particle effect created with Happy Addons.

How to Add Particle Effect in WordPress Using Elementor+Happy Addons

Before getting started, make sure you have installed both Elementor (you can use the free version of Elementor) and Happy Addons Pro. If you are new to Elementor, you can refer to this page to learn how to use it.

Once you are ready, create a new page (Pages -> Add New) and edit it with Elementor by clicking the Edit with Elementor button.

You will be taken to the Elementor editor after clicking the Edit with Elementor button above. Before your start editing the page, you can set the page layout by clicking the gear icon on the bottom-left corner. You can set the page layout on the Page Layout option.

Next, click the plus icon on the canvas area to add a new section. You can select any structure. Whether a single-column section, two-column section, and so on.

Once the section is added, you can go to the Layout block under the Layout tab on the settings panel to set the layout of the section. You can set things like the content width, column gap, vertical align, and so on.

You can either add the particle effect before or after adding widgets to the section. In this example, we add the widgets first. As you can see on the following screenshot, we added a Heading widget (the “Welcome to space” text) to the section.

Once you are done adding widgets to the section, click the section handle to turn to the section into an editing mode so that you can customize it.

Before adding the particle, you can set the background of the section first. For a better result, you can use a background that has color contrary to the particle color. For instance, if you plan to set the particle color to white, you can use a darker background. You can either use a solid color or gradient color. You can set the section background from the Background block under the Style tab on the settings panel.

Next, you can open the Happy Particle Effects block (also under the Style tab) and switch the Enable Particle Background toggle on.

As you can see, the customization options will open after you switch the Enable Particle Background on. You can set the particle on the Style option, set the particle color on the Particle Color option, set the particle opacity on the Opacity option. To set the number of particles, particle size, and animation speed, you can switch the Advanced Settings on.

If you want to have more customization controls over the particle effect, you can set the particle style to Custom and visit this page to configure the particle. Once done, you can export/download the configuration and paste the JSON code to the available field.

You can continue editing your page. Once done, simply click the Publish button to publish it.

That’s it. You have successfully added particle effect. If you want to set the page you have just created above as the homepage of your website, you can go to the Settings -> Reading. Read our previous article to learn more.

This page may contain affiliate links, which help support utilizeWP.

Building a website is as fun as playing puzzle with Elementor

Leave a Reply

Your email address will not be published. Required fields are marked *

Share This