{"id":9269,"date":"2019-06-12T08:12:31","date_gmt":"2019-06-12T08:12:31","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=9269"},"modified":"2025-01-30T15:46:12","modified_gmt":"2025-01-30T15:46:12","slug":"how-to-add-particles-effect-to-the-sections-background","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/","title":{"rendered":"How to Add Particles Effect to the Section\u2019s Background"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Liven up the sections with attractive animated particles effect easily and quickly. JetTricks plugin provides some really eye-catching visual tricks for attracting visitors\u2019 attention and will make your website\u2019s appearance outstanding and memorable. <\/p>\n\n\n\n<p>Activate the <em><a href=\"https:\/\/crocoblock.com\/plugins\/jettricks\/\" target=\"_blank\" rel=\"noreferrer noopener\">JetTricks<\/a> <\/em>plugin and open the page where you would like to animate the section in <a href=\"https:\/\/elementor.com\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a> editor.<\/p>\n\n\n\n<p>Create a new section and set the needed adjustments in the Content tab on the appeared panel on the left. Make it high enough by choosing Min Height option in the Height field that it will be possible to see the particle pattern which you are going to create.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/section-settings.png\" alt=\"Layout editing in the Elementor section\">\n\n\n\n<p>After that, open the <strong><em>Advanced &gt; JetTricks<\/em><\/strong> block. Here you need to switch on the <strong>Enable Particles<\/strong> option, and you will see the box where the <strong>particles JSON code<\/strong> should be pasted.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/advanced-enable-particles.png\" alt=\"JetTricks tab in the Advanced Elementor settings\">\n\n\n\n<p>You can generate certain particles JSON code <a href=\"https:\/\/vincentgarreau.com\/particles.js\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">by following the link<\/a>. Click it, and you will go to a page where you are able to craft your own articles for your website. You can access all the settings on the menu in the top left corner. It is available to define the number, density, shape, color, and size of the particles.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/05\/creating-particles-effect.png\" alt=\"generate the certain particles JSON code\">\n\n\n\n<p>The next thing you need to do is to click the <strong>Download current config<\/strong> in .json format and open the file in any text editor.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/download-particled-json.png\" alt=\"click the Download current config in .json format\">\n\n\n\n<p>Then, select all the code, copy it and go back to <strong>Elementor<\/strong> editor, where you have created an empty section. As you can guess, all you have to do now is to paste this code in a certain box.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/paste-particles-json.png\" alt=\"you have to do now is to paste this code in a certain box\">\n\n\n\n<p>Let\u2019s update the page and have a look at this extra animation effect on your website.<\/p>\n<\/div><\/div>\n\n\n\n<p>Great! Now you know an easy and quick way to make your website more vivid and engaging using <em>JetTricks<\/em> functionality.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Continue reading this tutorial to learn about how to decorate the section\u2019s background with particles effect using JetTricks functionality.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[504],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Particles Effect to the Section\u2019s Background | Crocoblock<\/title>\n<meta name=\"description\" content=\"Find how easy it is to create and set up section particles by means of JetTricks plugin functionality. Add astonishing visual effects to your website!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Particles Effect to the Section\u2019s Background | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Find how easy it is to create and set up section particles by means of JetTricks plugin functionality. Add astonishing visual effects to your website!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-30T15:46:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/section-settings.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/\",\"name\":\"How to Add Particles Effect to the Section\u2019s Background | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-12T08:12:31+00:00\",\"dateModified\":\"2025-01-30T15:46:12+00:00\",\"description\":\"Find how easy it is to create and set up section particles by means of JetTricks plugin functionality. Add astonishing visual effects to your website!\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Particles Effect to the Section\u2019s Background\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Particles Effect to the Section\u2019s Background | Crocoblock","description":"Find how easy it is to create and set up section particles by means of JetTricks plugin functionality. Add astonishing visual effects to your website!","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:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Particles Effect to the Section\u2019s Background | Crocoblock","og_description":"Find how easy it is to create and set up section particles by means of JetTricks plugin functionality. Add astonishing visual effects to your website!","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/","og_site_name":"Help Center","article_modified_time":"2025-01-30T15:46:12+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/section-settings.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/","name":"How to Add Particles Effect to the Section\u2019s Background | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-12T08:12:31+00:00","dateModified":"2025-01-30T15:46:12+00:00","description":"Find how easy it is to create and set up section particles by means of JetTricks plugin functionality. Add astonishing visual effects to your website!","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-add-particles-effect-to-the-sections-background\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add Particles Effect to the Section\u2019s Background"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/9269"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=9269"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=9269"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=9269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}