{"id":1138,"date":"2019-10-20T07:23:56","date_gmt":"2019-10-20T07:23:56","guid":{"rendered":"http:\/\/leaguewp.com\/?p=1138"},"modified":"2019-10-22T12:41:19","modified_gmt":"2019-10-22T12:41:19","slug":"particles-js-hero-genesis","status":"publish","type":"post","link":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/","title":{"rendered":"Use ParticlesJS Module as Hero Unit in Genesis"},"content":{"rendered":"
Hero units are a great way to catch the fancy<\/a> 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<\/a>.<\/p>\n There are many ways to incorporate the ParticlesJS module into your hero section. This guide is partly manual and partly plugin-driven.<\/p>\n First of all, download, install and activate this plugin<\/a>. 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<\/a>.<\/p>\n Go to the ParticlesJS demo website and select a pattern. You can choose from the drop-down menu and \u201copen controls\u201d to create a pattern of your choice. Alternatively, you could simply choose the default pattern<\/a>.<\/p>\n 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\u2019t want to download the file, you can simply use the formatted JSON code snippet given in the next step.<\/p>\n 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.<\/p>\n particlesJS(‘particlesbg’,<\/p>\n PASTE YOUR CODE HERE<\/p>\n );<\/p>\n Then, copy the entire code snippet from the JSON file, remove PASTE YOUR CODE HERE, and paste it there.<\/p>\n Please, ensure that the JSON code snippet goes between particlesJS(‘particlesbg’, and );<\/p>\n Then click on the SAVE button and move on to the next step.<\/p>\n For your convenience, here\u2019s the formatted JSON code snippet<\/a> which you can simply copy and paste into the text editor panel.<\/p>\n Since our goal is to use ParticleJS as Hero Image pattern, we need to make sure the Genesis theme we\u2019re currently using, already comes with a Hero Image feature. If you\u2019re using a custom theme, you can follow our guide to display featured images<\/a> on your theme. Also, see this guide<\/a>.<\/p>\n In the guide, make a small tweak in the code snippet.<\/p>\n Search for class=”post-hero” in the snippet and enter id=”particlesbg” just before the class.<\/p>\n You may make several other tweaks (such as removing support for featured image) in the snippet but that\u2019s up to you.<\/p>\n 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.<\/p>\n 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.<\/p>\n .post-hero a, .post-hero h1, .post-hero .page-excerpt {<\/p>\n z-index: 9999;<\/p>\n position: relative;<\/p>\n }<\/p>\n There are many ways to incorporate ParticlesJS module into your hero section. This guide is partly manual and partly plugin-driven. <\/p>\n","protected":false},"author":1,"featured_media":1141,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3],"tags":[28],"yoast_head":"\nStep #1: Download the Plugin<\/h2>\n
Step #2: Choose a Pattern<\/h2>\n
Step #3: Download Particle JS Json File<\/h2>\n
Step #4: Copy\/Paste JSON Code<\/h2>\n
Step #5: Functions.php Code<\/h2>\n
Step #6: Add CSS for Hero Selectors<\/h2>\n