{"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

Step #1: Download the Plugin<\/h2>\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

Step #2: Choose a Pattern<\/h2>\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

Step #3: Download Particle JS Json File<\/h2>\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

Step #4: Copy\/Paste JSON Code<\/h2>\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

Step #5: Functions.php Code<\/h2>\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

Step #6: Add CSS for Hero Selectors<\/h2>\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

NOTE:<\/strong> : At Step #5, the snippet in the guide uses your featured image as the Hero Image background. Therefore, you need to remove the featured image (in the WordPress editor) to make the ParticleJS pattern fully visible. Here\u2019s a great example<\/a> of ParticlesJS in action.<\/div>\n","protected":false},"excerpt":{"rendered":"

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":"\nUse ParticlesJS Module as Hero Unit in Genesis - League WP<\/title>\n<meta name=\"description\" content=\"There are many ways to incorporate ParticlesJS module into your hero section. This guide is partly manual and partly plugin-driven.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use ParticlesJS Module as Hero Unit in Genesis - League WP\" \/>\n<meta property=\"og:description\" content=\"There are many ways to incorporate ParticlesJS module into your hero section. This guide is partly manual and partly plugin-driven.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/\" \/>\n<meta property=\"og:site_name\" content=\"League WP\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-20T07:23:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-10-22T12:41:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png\" \/>\n\t<meta property=\"og:image:width\" content=\"950\" \/>\n\t<meta property=\"og:image:height\" content=\"499\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"topleague\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@league_wp\" \/>\n<meta name=\"twitter:site\" content=\"@league_wp\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"topleague\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/\"},\"author\":{\"name\":\"topleague\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/person\/90fc9506e85023e9a9e5a51e13c6d034\"},\"headline\":\"Use ParticlesJS Module as Hero Unit in Genesis\",\"datePublished\":\"2019-10-20T07:23:56+00:00\",\"dateModified\":\"2019-10-22T12:41:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/\"},\"wordCount\":602,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/leaguewp.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png\",\"keywords\":[\"Animation\"],\"articleSection\":[\"Guides\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/\",\"url\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/\",\"name\":\"Use ParticlesJS Module as Hero Unit in Genesis - League WP\",\"isPartOf\":{\"@id\":\"https:\/\/leaguewp.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png\",\"datePublished\":\"2019-10-20T07:23:56+00:00\",\"dateModified\":\"2019-10-22T12:41:19+00:00\",\"description\":\"There are many ways to incorporate ParticlesJS module into your hero section. This guide is partly manual and partly plugin-driven.\",\"breadcrumb\":{\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#primaryimage\",\"url\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png\",\"contentUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png\",\"width\":950,\"height\":499,\"caption\":\"How to Use ParticlesJS Module as Hero Background in Genesis\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/leaguewp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Use ParticlesJS Module as Hero Unit in Genesis\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/leaguewp.com\/#website\",\"url\":\"https:\/\/leaguewp.com\/\",\"name\":\"League WP\",\"description\":\"WordPress Development\",\"publisher\":{\"@id\":\"https:\/\/leaguewp.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/leaguewp.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/leaguewp.com\/#organization\",\"name\":\"Top League Technologies Pvt. Ltd.\",\"url\":\"https:\/\/leaguewp.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg\",\"contentUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg\",\"width\":\"1920\",\"height\":\"960\",\"caption\":\"Top League Technologies Pvt. Ltd.\"},\"image\":{\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/league_wp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/person\/90fc9506e85023e9a9e5a51e13c6d034\",\"name\":\"topleague\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4fca794da0cf08804f99048d3c8b39c1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4fca794da0cf08804f99048d3c8b39c1?s=96&d=mm&r=g\",\"caption\":\"topleague\"},\"url\":\"https:\/\/leaguewp.com\/author\/topleague\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Use ParticlesJS Module as Hero Unit in Genesis - League WP","description":"There are many ways to incorporate ParticlesJS module into your hero section. This guide is partly manual and partly plugin-driven.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/","og_locale":"en_US","og_type":"article","og_title":"Use ParticlesJS Module as Hero Unit in Genesis - League WP","og_description":"There are many ways to incorporate ParticlesJS module into your hero section. This guide is partly manual and partly plugin-driven.","og_url":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/","og_site_name":"League WP","article_published_time":"2019-10-20T07:23:56+00:00","article_modified_time":"2019-10-22T12:41:19+00:00","og_image":[{"width":950,"height":499,"url":"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png","type":"image\/png"}],"author":"topleague","twitter_card":"summary_large_image","twitter_creator":"@league_wp","twitter_site":"@league_wp","twitter_misc":{"Written by":"topleague","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#article","isPartOf":{"@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/"},"author":{"name":"topleague","@id":"https:\/\/leaguewp.com\/#\/schema\/person\/90fc9506e85023e9a9e5a51e13c6d034"},"headline":"Use ParticlesJS Module as Hero Unit in Genesis","datePublished":"2019-10-20T07:23:56+00:00","dateModified":"2019-10-22T12:41:19+00:00","mainEntityOfPage":{"@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/"},"wordCount":602,"commentCount":0,"publisher":{"@id":"https:\/\/leaguewp.com\/#organization"},"image":{"@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#primaryimage"},"thumbnailUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png","keywords":["Animation"],"articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/leaguewp.com\/particles-js-hero-genesis\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/","url":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/","name":"Use ParticlesJS Module as Hero Unit in Genesis - League WP","isPartOf":{"@id":"https:\/\/leaguewp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#primaryimage"},"image":{"@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#primaryimage"},"thumbnailUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png","datePublished":"2019-10-20T07:23:56+00:00","dateModified":"2019-10-22T12:41:19+00:00","description":"There are many ways to incorporate ParticlesJS module into your hero section. This guide is partly manual and partly plugin-driven.","breadcrumb":{"@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/leaguewp.com\/particles-js-hero-genesis\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#primaryimage","url":"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png","contentUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2019\/10\/How-to-Use-ParticlesJS-Module-as-Hero-Background-in-Genesis-e1571642149304.png","width":950,"height":499,"caption":"How to Use ParticlesJS Module as Hero Background in Genesis"},{"@type":"BreadcrumbList","@id":"https:\/\/leaguewp.com\/particles-js-hero-genesis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/leaguewp.com\/"},{"@type":"ListItem","position":2,"name":"Use ParticlesJS Module as Hero Unit in Genesis"}]},{"@type":"WebSite","@id":"https:\/\/leaguewp.com\/#website","url":"https:\/\/leaguewp.com\/","name":"League WP","description":"WordPress Development","publisher":{"@id":"https:\/\/leaguewp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/leaguewp.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/leaguewp.com\/#organization","name":"Top League Technologies Pvt. Ltd.","url":"https:\/\/leaguewp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/","url":"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg","contentUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg","width":"1920","height":"960","caption":"Top League Technologies Pvt. Ltd."},"image":{"@id":"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/league_wp"]},{"@type":"Person","@id":"https:\/\/leaguewp.com\/#\/schema\/person\/90fc9506e85023e9a9e5a51e13c6d034","name":"topleague","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/leaguewp.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4fca794da0cf08804f99048d3c8b39c1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4fca794da0cf08804f99048d3c8b39c1?s=96&d=mm&r=g","caption":"topleague"},"url":"https:\/\/leaguewp.com\/author\/topleague\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/posts\/1138"}],"collection":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/comments?post=1138"}],"version-history":[{"count":0,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/posts\/1138\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/media\/1141"}],"wp:attachment":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/media?parent=1138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/categories?post=1138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/tags?post=1138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}