{"id":1575,"date":"2021-06-20T07:43:36","date_gmt":"2021-06-20T07:43:36","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1575"},"modified":"2023-04-30T08:34:19","modified_gmt":"2023-04-30T08:34:19","slug":"how-to-use-elementors-custom-code-feature-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/","title":{"rendered":"How to Use Elementor\u2019s Custom Code Feature"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1575\" class=\"elementor elementor-1575\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22877990 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"22877990\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-257a545b\" data-id=\"257a545b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-19d906e5 elementor-widget elementor-widget-video\" data-id=\"19d906e5\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=j6J-TvEXGLY&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-61924bbd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"61924bbd\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-78195585\" data-id=\"78195585\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-453e53c9 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"453e53c9\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1161\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1161\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1162\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1162\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1161\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1161\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1161\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we will learn how to use Elementor\u2019s Custom Code feature to add code snippets anywhere on your website.<br \/>No more edits in theme files or use of additional plugins.<\/p><p>With Custom Code, you maintain fast performance while adding tracking codes and meta tags, writing Javascript or CSS snippets, all from one place! <br \/>Surprise us with your unique creations!<\/p><p>This tutorial will cover:<br \/>\u2714\ufe0e Inserting a code snippet<br \/>\u2714\ufe0e Selecting the displayed area and priority<br \/>\u2714\ufe0e Adding conditions to your scripts<br \/>\u2714\ufe0e Debugging and code linter<br \/>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1162\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1162\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1162\" tabindex=\"0\" hidden=\"hidden\"><p>hi all it&#8217;s zip from elementor<br \/>today i will show you how to use<br \/>elementor&#8217;s custom code feature<br \/>which gives you the flexibility to add<br \/>code snippets anywhere in your website<br \/>without the need to edit theme files or<br \/>use additional plugins you can add<br \/>tracking codes and meta tags<br \/>or write scripts and add css snippets<br \/>directly from elementor<br \/>this way you have complete control<br \/>building your website<br \/>while maintaining fast performance let&#8217;s<br \/>see how that works<br \/>you can find the custom code feature by<br \/>navigating to the wordpress dashboard<br \/>then under elementor click on it<br \/>you can easily create a new custom code<br \/>by either clicking the top left button<br \/>or the one you see here for this example<br \/>we are going to use the global site tag<br \/>which is a script that tracks and<br \/>reports website traffic<br \/>and interactions for google analytics<br \/>let&#8217;s first give our custom code a name<br \/>next paste your code like so<br \/>remember that your code is written<br \/>within the html<br \/>so make sure you include the correct<br \/>tags just like we did with the script<br \/>tag over here<br \/>the code linter will give you a hand<br \/>while writing your code<br \/>it identifies errors and notifies you<br \/>with bubble suggestions<br \/>when it finds a place of attention in<br \/>your code<br \/>in location you can decide in which part<br \/>of the website structure the code will<br \/>appear<br \/>by choosing one of these three options<br \/>head<br \/>body start and body end<br \/>google suggests that we use their code<br \/>in the head tag<br \/>so let&#8217;s go ahead and select it okay<br \/>let&#8217;s move on to the priority drop down<br \/>if you register two or more scripts in<br \/>the same location<br \/>the priority you set will determine<br \/>which one of them will load first<br \/>the lower the number the higher the<br \/>priority by default the number is set to<br \/>1<br \/>which means it&#8217;s set to be the top<br \/>priority which is great for my example<br \/>once you&#8217;re done you can either save it<br \/>as a draft<br \/>or click publish and set the display<br \/>conditions<br \/>here you can select in which pages of<br \/>your website you want your code to run<br \/>just as you would for every elementor<br \/>side part<br \/>for this script i will leave the default<br \/>option which sets it to run<br \/>on the entire website then click save<br \/>and close<br \/>now if we inspect any page of our<br \/>website<br \/>we should see the code we just added<br \/>great notice that if you are logged in<br \/>as an administrator<br \/>you can debug your code and see its<br \/>output in the html source<br \/>with elemental custom code the sky&#8217;s the<br \/>limit<br \/>you can create your own amazing code<br \/>that adds custom functionality to your<br \/>sites<br \/>really making them stand out for example<br \/>add your own custom cursor with some<br \/>javascript magic<br \/>you can also add some css that make your<br \/>images stand out<br \/>just like this cool image glitch effect<br \/>you see here<br \/>or you might want to change how urls are<br \/>displayed when shared on social media<br \/>by adding custom og tags the<br \/>possibilities are endless<br \/>so go ahead enjoy the flexibility of<br \/>adding custom code snippets anywhere in<br \/>your website<br \/>without the need to edit theme files or<br \/>use additional plugins<br \/>feel free to share your creations in the<br \/>comments below and surprise us<br \/>with your unique ideas and<br \/>implementations<br \/>as always don&#8217;t forget to subscribe to<br \/>our youtube channel for more tips and<br \/>tutorials<br \/>ciao for now<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we will learn how to use Elementor\u2019s Custom Code feature to add code snippets anywhere on your website. No more edits in theme files or use of additional plugins. With Custom Code, you maintain fast performance while adding tracking codes and meta tags, writing Javascript or CSS snippets, all [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9729,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[41],"class_list":["post-1575","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Elementor\u2019s Custom Code Feature - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Elementor\u2019s Custom Code Feature - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we will learn how to use Elementor\u2019s Custom Code feature to add code snippets anywhere on your website. No more edits in theme files or use of additional plugins. With Custom Code, you maintain fast performance while adding tracking codes and meta tags, writing Javascript or CSS snippets, all [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T07:43:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-30T08:34:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Elementors-Custom-Code-Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Elementor\u2019s Custom Code Feature - Academy","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:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Elementor\u2019s Custom Code Feature - Academy","og_description":"Overview Transcript Overview In this tutorial, we will learn how to use Elementor\u2019s Custom Code feature to add code snippets anywhere on your website. No more edits in theme files or use of additional plugins. With Custom Code, you maintain fast performance while adding tracking codes and meta tags, writing Javascript or CSS snippets, all [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/","og_site_name":"Academy","article_published_time":"2021-06-20T07:43:36+00:00","article_modified_time":"2023-04-30T08:34:19+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Elementors-Custom-Code-Feature.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use Elementor\u2019s Custom Code Feature","datePublished":"2021-06-20T07:43:36+00:00","dateModified":"2023-04-30T08:34:19+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/"},"wordCount":700,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Elementors-Custom-Code-Feature.jpg","keywords":["Guides and Tutorials"],"articleSection":["Integrations"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/","url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/","name":"How to Use Elementor\u2019s Custom Code Feature - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Elementors-Custom-Code-Feature.jpg","datePublished":"2021-06-20T07:43:36+00:00","dateModified":"2023-04-30T08:34:19+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Elementors-Custom-Code-Feature.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Elementors-Custom-Code-Feature.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-custom-code-feature-pro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Integrations","item":"https:\/\/elementor.com\/academy\/integrations\/"},{"@type":"ListItem","position":4,"name":"How to Use Elementor\u2019s Custom Code Feature"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1575"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1575\/revisions"}],"predecessor-version":[{"id":9585,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1575\/revisions\/9585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9729"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}