Hero units are a great way to catch the fancy of your website visitors since they convey your message most effectively. Whether you use background images, videos or gifs, they all can be effective as long as they are used creatively. Likewise, you can use an animated hero unit by taking advantage of the ParticlesJS module.
There are many ways to incorporate the ParticlesJS module into your hero section. This guide is partly manual and partly plugin-driven.
Step #1: Download the Plugin
First of all, download, install and activate this plugin. This plugin has been developed by ingeniousweb. This plugin integrates the ParticleJS library to your Genesis theme. If you want to avoid the plugin and do it manually, follow the instructions here.
Step #2: Choose a Pattern
Go to the ParticlesJS demo website and select a pattern. You can choose from the drop-down menu and “open controls” to create a pattern of your choice. Alternatively, you could simply choose the default pattern.
Step #3: Download Particle JS Json File
Once you have decided on and configured a Hero Background pattern, the next step is to download the JSON file, which is available under the Open Controls option. If you don’t want to download the file, you can simply use the formatted JSON code snippet given in the next step.
Step #4: Copy/Paste JSON Code
The plugin installed in Step #1 creates a Pattern Background section. You should be able to see it after Settings in the sidebar. When you click on that, it takes you to panel where you can add the JSON code from the file downloaded in the previous step. Before you do that, first copy the code below and paste it into the text editor panel.
particlesJS(‘particlesbg’,
PASTE YOUR CODE HERE
);
Then, copy the entire code snippet from the JSON file, remove PASTE YOUR CODE HERE, and paste it there.
Please, ensure that the JSON code snippet goes between particlesJS(‘particlesbg’, and );
Then click on the SAVE button and move on to the next step.
For your convenience, here’s the formatted JSON code snippet which you can simply copy and paste into the text editor panel.
Step #5: Functions.php Code
Since our goal is to use ParticleJS as Hero Image pattern, we need to make sure the Genesis theme we’re currently using, already comes with a Hero Image feature. If you’re using a custom theme, you can follow our guide to display featured images on your theme. Also, see this guide.
In the guide, make a small tweak in the code snippet.
Search for class=”post-hero” in the snippet and enter id=”particlesbg” just before the class.
You may make several other tweaks (such as removing support for featured image) in the snippet but that’s up to you.
Save the file and refresh your front page as well as individual pages (such as about us or contact us) to see the ParticlesJS in action.
Step #6: Add CSS for Hero Selectors
This is an optional step. When we apply ParticleJS to our hero image section, it usually acts as an overlay, which hides the clickability of several elements (headings, excerpts, post info) on the hero section. However, you can fix that with the following CSS.
.post-hero a, .post-hero h1, .post-hero .page-excerpt {
z-index: 9999;
position: relative;
}