Adding code to the website head

The Custom Code feature allows you to add snippets of code such as Google Analytics code, meta tags or Facebook Pixel code and assign it to load in the location of your choice, with the priority you set. There is no need to edit your theme’s files.

To add a new Custom Code, go to Elementor > Custom Code and click the button to add new code.

Custom Code Example

Here, you’ll be able to add your custom code snippet into a smart code editor, select the location with the page’s structure to include it  (e.g. either in the page’s head element, or at the beginning or end of the body tag), and set its run priority. If you register two scripts in the same location, the priority you set will determine which one of them will load first (1 is the most important, to 10, the least important). Finally, you can assign display conditions just as you would for any Elementor Site Part (Header, Footer, etc). Once you’ve finished, publish your code and it will be live on your site.

  1. Title: Enter a title to help you identify this code snippet in the future
  2. Location: Select the location for the script, to be applied either in the page <head> or at the beginning of the page’s body (<body> – Start) or at the end of the page’s body (<body> – End)
  3. Priority: Select the priority level (1 – 10) for this script to run. If multiple scripts are assigned to the same location, the priority levels will determine the order in which they are run. Note that lower numbers indicate higher priority. So a script with a priority of 1 will have a higher priority than a script with a priority of 5.
  4. Code Textarea: Enter or paste the code snippet here. For example, if you were entering Google Analytics code, you would enter something like this:<!– Global site tag (gtag.js) – Google Analytics –> <$cript async src=””></$cript> <$cript>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag(‘js’, new Date());   gtag(‘config’, ‘UA-xxxxxxxx-xx’); </$cript> The textarea includes an internal code linter, which is a code analysis tool, that checks for errors or problems and notifies you of any it finds. This allows you to correct the problems before saving.
  5. Conditions: Click the Edit link next to Conditions in the Publish block to add conditions to determine where your code snippet is used throughout the site. Select Entire Site if you want it to be used everywhere, or limit it to certain pages, archives, etc. You can also add conditions to exclude it from certain areas of your site. Learn more about conditions here.

You can either Save this custom code as a Draft or Publish it. Either way, you can always return to Elementor > Custom Code in the future to see and manage all custom codes you’ve created.

Got a question?

If this article didn’t help try our FAQ’s or use this form to ask a question.