{"id":8345,"date":"2017-02-14T08:44:21","date_gmt":"2017-02-14T16:44:21","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=8345"},"modified":"2018-05-10T04:41:56","modified_gmt":"2018-05-10T11:41:56","slug":"add-custom-css-js-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/add-custom-css-js-beaver-builder\/","title":{"rendered":"How to add Custom CSS \/ JS in Beaver Builder"},"content":{"rendered":"<p>While working on page templates, we often feel the need to write custom CSS or JS. This custom CSS or JS could be for a specific element on the page itself. Hence, this extra code isn&#8217;t relevant for other pages.<\/p>\n<p>Beaver Builder provides an easy way to add Custom CSS \/ JS. Here&#8217;s a quick guide on the same.<\/p>\n<h2>Add Custom CSS &amp; JS in Beaver Builder<\/h2>\n<p><strong>Step 1:<\/strong> First of all, load the Page Builder and click the\u00a0Currently Editing Page drop-down<strong>\u00a0<\/strong>button in the Top Bar.<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-104623\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/c.jpg\" alt=\"\" width=\"451\" height=\"235\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/c.jpg 451w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/c-300x156.jpg 300w\" sizes=\"(max-width: 451px) 100vw, 451px\" \/><\/p>\n<p><strong>Step 2:<\/strong>\u00a0Click on the Layout CSS &amp; Javascript from the list.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-104626 size-full\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/b-1-e1525951908583.jpg\" alt=\"\" width=\"401\" height=\"563\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/b-1-e1525951908583.jpg 401w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/b-1-e1525951908583-214x300.jpg 214w\" sizes=\"(max-width: 401px) 100vw, 401px\" \/><\/p>\n<p><strong>Step 3:<\/strong> This opens up a Modal Box where you have two tabs for CSS and JS. You can\u00a0add your code here and click the <strong>Save <\/strong>button.<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-104624\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/a-1.jpg\" alt=\"\" width=\"618\" height=\"505\" \/><\/p>\n<p><strong>Step 4:<\/strong> After you have saved your code, simply<strong> publish<\/strong> the page.<\/p>\n<p>Personally, I find this very useful when making page specific changes. Sometimes, it&#8217;s for responsive design or to simply style a text block differently.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working on page templates, we often feel the need to write custom CSS or JS. This custom CSS or JS could be for a specific element on the page itself. Hence, this extra code isn&#8217;t relevant for other pages. Beaver Builder provides an easy way to add Custom CSS \/ JS. Here&#8217;s a quick&hellip;<\/p>\n","protected":false},"author":1,"featured_media":18888,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[27,12],"tags":[],"class_list":["post-8345","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-beaver-builder","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/8345"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=8345"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/8345\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/18888"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=8345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=8345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=8345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}