In this tutorial, we will learn how to use Elementor’s 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 from one place!
Surprise us with your unique creations!
This tutorial will cover:
✔︎ Inserting a code snippet
✔︎ Selecting the displayed area and priority
✔︎ Adding conditions to your scripts
✔︎ Debugging and code linter
✔︎ And much more!
hi all it’s zip from elementor
today i will show you how to use
elementor’s custom code feature
which gives you the flexibility to add
code snippets anywhere in your website
without the need to edit theme files or
use additional plugins you can add
tracking codes and meta tags
or write scripts and add css snippets
directly from elementor
this way you have complete control
building your website
while maintaining fast performance let’s
see how that works
you can find the custom code feature by
navigating to the wordpress dashboard
then under elementor click on it
you can easily create a new custom code
by either clicking the top left button
or the one you see here for this example
we are going to use the global site tag
which is a script that tracks and
reports website traffic
and interactions for google analytics
let’s first give our custom code a name
next paste your code like so
remember that your code is written
within the html
so make sure you include the correct
tags just like we did with the script
tag over here
the code linter will give you a hand
while writing your code
it identifies errors and notifies you
with bubble suggestions
when it finds a place of attention in
your code
in location you can decide in which part
of the website structure the code will
appear
by choosing one of these three options
head
body start and body end
google suggests that we use their code
in the head tag
so let’s go ahead and select it okay
let’s move on to the priority drop down
if you register two or more scripts in
the same location
the priority you set will determine
which one of them will load first
the lower the number the higher the
priority by default the number is set to
1
which means it’s set to be the top
priority which is great for my example
once you’re done you can either save it
as a draft
or click publish and set the display
conditions
here you can select in which pages of
your website you want your code to run
just as you would for every elementor
side part
for this script i will leave the default
option which sets it to run
on the entire website then click save
and close
now if we inspect any page of our
website
we should see the code we just added
great notice that if you are logged in
as an administrator
you can debug your code and see its
output in the html source
with elemental custom code the sky’s the
limit
you can create your own amazing code
that adds custom functionality to your
sites
really making them stand out for example
add your own custom cursor with some
javascript magic
you can also add some css that make your
images stand out
just like this cool image glitch effect
you see here
or you might want to change how urls are
displayed when shared on social media
by adding custom og tags the
possibilities are endless
so go ahead enjoy the flexibility of
adding custom code snippets anywhere in
your website
without the need to edit theme files or
use additional plugins
feel free to share your creations in the
comments below and surprise us
with your unique ideas and
implementations
as always don’t forget to subscribe to
our youtube channel for more tips and
tutorials
ciao for now
