How to Add an Animated Background in WordPress (2 Methods)

Do you wish to create an animated background to your WordPress web site?

An animated background can add some visible attraction to your web site. It would make your web site extra enticing and memorable, leaving a long-lasting impression in your guests.

On this information, we’ll present you how one can add a particle background in WordPress utilizing particle.js, a JavaScript animation library.

Why Add an Animated Background in WordPress?

Customizing your website background may appear unimportant. That mentioned, it might truly form guests’ first impressions of your model and have an effect on their expertise in your web site.

An animated background can improve your web site’s visible attraction, making it extra interactive and crowd pleasing to guests. It gives the look that your WordPress web site makes use of a high-quality and progressive design.

Many web sites additionally use animated effects after they wish to have a good time an important day.

For instance, you may even see eCommerce stores including animated snowflakes or falling Christmas bushes on their internet pages to create a festive ambiance for the vacation season.

For extra tricks to get festive in your web site, try our information on how to spread the holiday spirit on your WordPress site.

Some web sites additionally use a preloader background animation on their web site.

With this, guests can get the sense that the location is loading, making them extra more likely to wait patiently for the online web page components to look. You’ll be able to learn our article on including a preloader background animation for extra info.

On this information, we’ll present you how one can add an animated background utilizing particle.js. If you wish to discover out what that’s, simply proceed to the subsequent part.

What Is particle.js?

particle.js is a JavaScript library that allows you to create gorgeous visible results with particles, that are small, graphical, animated components.

These particles may be personalized by dimension, coloration, form, and motion. Additionally they reply to consumer interactions, equivalent to mouse actions or clicks, so as to add an additional layer of engagement to your web site.

Now that you already know what particle.js is, let’s see how you need to use it so as to add an animated background in WordPress. There are two strategies for inexperienced persons, and you may navigate by means of this information with the short hyperlinks beneath:

Technique 1: Including an Animated Background With SeedProd (Advisable)

The primary technique is to make use of SeedProd, which is the very best WordPress web page builder plugin in the marketplace. It affords a built-in and extremely customizable particle background characteristic.

With it, you’ll be able to select one of many particle animations which might be already obtainable or add a customized one your self. It’s additionally doable to switch the variety of particles, animation actions, and hover results to fit your preferences.

For extra details about SeedProd, you’ll be able to try our in-depth SeedProd review. We’ve coated the whole lot, together with the customization choices, template and block decisions, and third-party integrations.

On this information, we can be utilizing the premium version of SeedProd, because the particle background characteristic is offered there.

To make use of SeedProd, you will have to put in and activate the plugin first. Yow will discover extra particulars about this in our beginner’s guide on installing a WordPress plugin.

After that, merely copy-paste your license key to the plugin. Simply go to your WordPress dashboard, navigate to SeedProd » Settings, and insert the license key within the applicable discipline. Then, click on ‘Confirm Key.’

If you wish to customise your theme first earlier than including a particle background in WordPress, then you’ll be able to observe our information on how to easily create a custom theme with SeedProd.

Now, it’s good to open the drag-and-drop builder for the web page you wish to insert the particle background into. When you’ve got created a theme with SeedProd, then it is best to have already got some pages added in WordPress for you.

Subsequent, merely go to Pages » All Pages and hover your cursor over a web page, like a homepage, about web page, or one thing else. Then, select the ‘Edit with SeedProd’ button.

If this feature doesn’t seem in your finish, don’t fear.

Simply click on the ‘Edit’ button as an alternative, and within the block editor, click on the ‘Edit with SeedProd’ button.

You must now be contained in the page builder of SeedProd.

Simply hover your cursor over the web page part the place you wish to add the particle background in WordPress and choose it. You’ll know that you simply’ve chosen a bit if a purple border and toolbar seem on the prime of it.

After getting clicked on a bit, the Part sidebar on the left ought to present up.

All it’s a must to do now could be change to the ‘Superior’ tab and toggle the ‘Allow Particle Background’ setting.

There are a number of Particle Background settings you’ll be able to configure.

One is Fashion, the place you’ll be able to select any of the obtainable animation results, that are Polygon, Area, Snow, Snowflakes, Christmas, Halloween, and Customized.

We’ll discuss extra about including a customized particle background animation later within the article.

There’s additionally Opacity, which controls how opaque the animation seems to be, and Circulate Course, which units the path that the particles ought to head towards.

For sure particle kinds, you’ll be able to customize their color, too.

Nevertheless, for Christmas and Halloween, there are not any coloration settings, because the particles are within the type of photos.

Beneath Colour is ‘Superior Settings.’ Enabling it allows you to customise the Variety of Particles, Particle Measurement, Transfer Velocity, and Allow Hover Effect.

With the final characteristic, the particles will transfer in accordance with the path of your mouse. Be aware that this received’t work whenever you view the web site within the web page builder space or if the content material throughout the part takes up the complete area of that part.

And that’s all it’s good to do.

When you’ve completed customizing your WordPress particle background, you’ll be able to click on the ‘Save’ button on the prime proper nook to publish the adjustments. You may also select the ‘Preview’ button to see what the particle background seems to be like.

Making a Customized Particle Background for Your Web site

If the animated results obtainable don’t fit your wants, then you can too create a customized one. What it is best to do is choose the ‘Customized’ type within the Particle Background settings.

After that, click on the hyperlink within the line ‘Please go to the hyperlink here and select required attributes for particle.’

On this web site, you’ll be able to customise your required particle design, its interactivity, and the background coloration.

Throughout the ‘particles’ setting, you’ll be able to modify the particle numbers, coloration, form, dimension, opacity, traces that hyperlink the particles, and motion.

Beneath that’s ‘interactivity.’

That is the place you’ll be able to modify how the particles behave whenever you hover over them and click on on them.

Lastly, you’ve got ‘web page background (css).’ Right here, you’ll be able to change the background coloration of the particle animation and modify its dimension, place, and repetition.

If wanted, you’ll be able to add a custom background image URL, too.

As soon as you’re carried out, you’ll be able to click on the ‘Obtain present config (json)’ button on the backside.

It will obtain the particle background’s JSON code file, which it’s good to open utilizing a textual content editor app. Hold the textual content editor window open as you proceed to the subsequent steps.

Now, let’s return to the SeedProd web page builder.

Navigate to the Particle Background menu throughout the Superior settings once more. Then, copy and paste the JSON code into the suitable textual content field.

You must now see your particle background within the preview part.

Click on ‘Preview’ to see what the particle background seems to be like on the entrance finish and ‘Save’ to finalize the adjustments.

Right here’s an instance of what the particle background might appear like:

Technique 2: Including an Animated Background With Particle Background WP (Free)

The second technique is a free different to utilizing SeedProd. For this, you will have the Particle Background WP plugin.

Like earlier than, ensure that to put in and activate the Particle Background WP plugin. In case you want some steering, you’ll be able to try our information on how to install a WordPress plugin.

After the plugin is energetic, go to Particle Background from the WordPress dashboard. Right here, you will note a number of sections.

One is Deploy. It features a shortcode for the completed particle background if you wish to add it later to your pages or posts.

You may also tick the ‘Add to entrance web page’ and/or ‘Add to weblog web page’ bins to robotically insert the background into these pages.

Scrolling down, you will note the Content material part, which seems to be barely just like the classic editor. That is the place you’ll be able to add some textual content on prime of the particle background.

If you already know HTML, then you’ll be able to add some HTML code to customise the textual content. Alternatively, you’ll be able to click on ‘Add Media’ to insert photos or information from the WordPress media library.

Beneath are the Settings for the WordPress particle background animation. You’ll be able to modify the Particle Density, which controls how shut and much the particles are, the particle’s Dot Colour, and the Background Colour. It’s additionally doable to make the background clear.

One draw back of this WordPress plugin is you’ll be able to’t modify the particle form the identical means you’d with SeedProd. So, that’s one thing to think about in case you are trying to make use of this plugin.

And you’re carried out!

Right here’s an instance of what the particle animated background seems to be like utilizing this WordPress plugin.

Do Animated Backgrounds Sluggish Down Web sites?

If not carried out proper, animated backgrounds can decelerate your web site. However there are methods to keep away from this.

For particle backgrounds, the variety of particles and how briskly they transfer can have an effect on how rapidly your web page masses. Extra particles and sooner motion want extra processing energy, which might sluggish issues down.

To repair this, you’ll be able to strive totally different settings for particle density and velocity to seek out what works greatest to your web site. Throughout this course of, you’ll be able to run WordPress speed tests to see the consequences.

It’s additionally a good suggestion to solely use animated backgrounds on pages the place they matter essentially the most. You don’t want them in all places, or they may get boring.

Lastly, to maintain your web site quick with a particle background, ensure that to observe the very best practices for web site velocity. You’ll be able to be taught extra in our ultimate guide on making WordPress faster.

We hope this text has helped you discover ways to add an animated particle background in WordPress. You may additionally wish to try our information on how to add a YouTube video as fullscreen background in WordPress and our professional choose of the best WordPress drag-and-drop page builders.

In case you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Facebook.