{"id":604,"date":"2020-12-09T13:01:39","date_gmt":"2020-12-09T13:01:39","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=604"},"modified":"2024-01-24T19:03:55","modified_gmt":"2024-01-24T19:03:55","slug":"elementor-particles-effect-not-visible-on-the-frontend","status":"publish","type":"troubleshooting","link":"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/","title":{"rendered":"Elementor Particles Effect Not Visible on the Frontend"},"content":{"rendered":"\n<p>First and foremost, have you gotten the <strong>particles.js config<\/strong> file from a <a href=\"https:\/\/vincentgarreau.com\/particles.js\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">JavaScript library by Vincent Garreau<\/a>? If so, you might want to double-check the color of the <strong>Particles <\/strong>section and the background you are trying to put it in.&nbsp;<\/p>\n\n\n\n<p>By default, the particles are painted white and displayed on a vibrant red background:<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/particles.js-particles-default-colors.png\" alt=\"particles default colors\">\n\n\n\n<p>Once you click the \u201c<strong>Download current config (json)<\/strong>\u201d button, this very configuration will be exported. Afterward, when trying to submit the code to Elementor, it seems that the interactive particles effect widget is invalid. That is a false impression.&nbsp;<\/p>\n\n\n\n<p>To see the particles effect at its best, try to perform the following actions:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"go-to-edit-the-particlesjs-in-elementor\">Go to Edit the <strong>particles.js<\/strong> in Elementor<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Open the section you\u2019d like the particles to be dropped to in the Elementor page builder. Click the <strong>Style <\/strong>tab. In the <strong>Background Type <\/strong>control, click \u201cDefault,\u201d and you\u2019ll see the color-correcting toolkit pop up. Press the latter item in the Color control, then pick any color you want in the <strong>Color Picker<\/strong> popup window and fill out the entire section.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/editing-section-background-color-in-elementor.png\" alt=\"editing section background color in elementor\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"apply-the-particles\">Apply the Particles<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Click the <strong>Advanced <\/strong>tab in the left-side Elementor menu and find the <strong>JetTricks <\/strong>drop-down item. Activate the Enable Particles toggle. After that, copy the particles.js config code and paste it to the <strong>Particles JSON<\/strong> text area.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/particles.js-code-input-in-elementor.png\" alt=\"particles js code input in elementor\">\n\n\n\n<p>You might want to object that no particles are visible whatsoever. But that\u2019s how it works. You cannot see them circulating in the editor window, so just press the \u201c<strong>Update<\/strong>\u201d button and go check out this section on the front end.&nbsp;<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/particles-flowing-on-the-frontend.png\" alt=\"particles flowing on the frontend\">\n<\/div><\/div>\n\n\n\n<p>Last but not least, make sure you adjust the section\u2019s height, so it works best for your project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to display JetTricks particles effect on the frontend if there were invisible. <\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","troubleshoot-tags":[367],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Displaying Elementor Particles with JetTricks Widget | Crocoblock<\/title>\n<meta name=\"description\" content=\"Follow this troubleshooting routine and learn how to make the Elementor particles effect visible on the frontend thanks to a JetTricks widget.\" \/>\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\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Displaying Elementor Particles with JetTricks Widget | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Follow this troubleshooting routine and learn how to make the Elementor particles effect visible on the frontend thanks to a JetTricks widget.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-24T19:03:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/particles.js-particles-default-colors.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/\",\"name\":\"Displaying Elementor Particles with JetTricks Widget | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2020-12-09T13:01:39+00:00\",\"dateModified\":\"2024-01-24T19:03:55+00:00\",\"description\":\"Follow this troubleshooting routine and learn how to make the Elementor particles effect visible on the frontend thanks to a JetTricks widget.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Troubleshooting\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Elementor Particles Effect Not Visible on the Frontend\"}]},{\"@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":"Displaying Elementor Particles with JetTricks Widget | Crocoblock","description":"Follow this troubleshooting routine and learn how to make the Elementor particles effect visible on the frontend thanks to a JetTricks widget.","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\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/","og_locale":"en_US","og_type":"article","og_title":"Displaying Elementor Particles with JetTricks Widget | Crocoblock","og_description":"Follow this troubleshooting routine and learn how to make the Elementor particles effect visible on the frontend thanks to a JetTricks widget.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/","og_site_name":"Help Center","article_modified_time":"2024-01-24T19:03:55+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/particles.js-particles-default-colors.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/","url":"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/","name":"Displaying Elementor Particles with JetTricks Widget | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2020-12-09T13:01:39+00:00","dateModified":"2024-01-24T19:03:55+00:00","description":"Follow this troubleshooting routine and learn how to make the Elementor particles effect visible on the frontend thanks to a JetTricks widget.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/elementor-particles-effect-not-visible-on-the-frontend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Troubleshooting","item":"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/"},{"@type":"ListItem","position":3,"name":"Elementor Particles Effect Not Visible on the Frontend"}]},{"@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\/troubleshooting\/604"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/troubleshooting"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/troubleshooting"}],"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=604"}],"wp:term":[{"taxonomy":"troubleshoot-tags","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/troubleshoot-tags?post=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}