Four Ways to Add Custom CSS and Code in Elementor

Sooner or later every Elementor site needs a little extra code. Maybe it is a tracking pixel from your ad platform, a chat widget, a tweak to the mobile menu, or a small script that adds a "copy to clipboard" button. The question is not whether you will add code, but where.

Put code in the wrong place and it ends up loading on every page when it only needs one, disappears with the next theme update, or becomes impossible to find six months later. In this guide we will cover four ways to add custom CSS and code in Elementor, when to use each one, and how to keep everything organized.

Method 1: Site Settings Custom CSS

Best for: site-wide style tweaks.

With Elementor Pro, open Site Settings > Custom CSS. Anything you write here loads on every page built with Elementor. It is the right home for reusable classes, small global adjustments, and styles for third-party plugins that appear across the site.

Tips:

• Group rules by component and add short comments.
• Prefer your own class names over Elementor's auto-generated IDs.
• Reference global colors and variables instead of hard-coded hex values.

Without Pro, you can use Appearance > Customize > Additional CSS in WordPress, which works the same way for site-wide CSS.

Method 2: Element and Class Custom CSS

Best for: styles that belong to a single element or a reusable class.

Elementor Pro adds a Custom CSS field to individual elements. For classic widgets you will find it in the Advanced tab, and you can use the selector keyword to target only that element. In the Atomic Editor, Custom CSS is available on atomic elements and on Global Classes, with autocomplete and support for comments.

Attaching CSS to a class is especially powerful: every element using the class gets the extra styling automatically, and the CSS lives right next to the visual settings it extends.

Avoid this method for styles you need in many unrelated places; move those to Site Settings instead.

Method 3: Elementor Custom Code

Best for: scripts, tracking codes, meta tags, and third-party embeds.

Elementor Pro's Custom Code feature, found under Elementor > Custom Code in your dashboard, lets you add HTML, JavaScript, or CSS snippets to your site without touching theme files. Each snippet has:

• Location: inside the <head>, at the start of the <body>, or at the end of the <body>.
• Priority: controls the order when several snippets share the same location.
• Conditions: decide where the code loads, such as the entire site, a single page, or a group of posts.

Typical uses:

• Analytics and ad pixels in the head.
• Tag manager containers in the head and at the start of the body.
• Chat widgets and helper scripts at the end of the body.
• Verification meta tags for search consoles.

Conditions are the big advantage here. A booking script that only the contact page needs should load only on the contact page, not on all 300 blog posts.

Method 4: The HTML Widget

Best for: embeds that belong to a specific spot on a page.

The HTML widget lets you paste raw markup and scripts directly into a layout: an embedded form from another service, a calendar, a map iframe, or a small interactive demo. The code appears exactly where you place the widget.

Keep it for things that are genuinely part of the page content. Site-wide scripts do not belong in HTML widgets scattered across pages; they belong in Custom Code.

Bonus: When Code Belongs Outside Elementor

Some code is not about the design at all. PHP functions, custom post types, WordPress hooks, and server-side logic should live in a child theme's functions file or a code snippets plugin, not in Elementor. Elementor's tools are for front-end CSS, HTML, and JavaScript.

Choosing the Right Method

You want to add	Use
A global style tweak	Site Settings Custom CSS
Extra style for one element or class	Element or Class Custom CSS
Analytics, pixels, chat widgets	Custom Code with conditions
An embed in a specific spot	HTML widget
PHP or WordPress logic	Child theme or snippets plugin

Safety and Performance Tips

• Only paste code from trusted sources. A malicious script can steal form data or redirect visitors.
• Load scripts where they are needed. Use conditions to keep pages light.
• Prefer async or deferred scripts when the provider supports it, so they do not block rendering.
• Check consent requirements. Tracking pixels may require visitor consent in many regions. Make sure your cookie banner controls them.
• Test after adding. Open the page in a private window and check the browser console for errors.

Keep a Simple Code Inventory

On client sites especially, keep a short list of every snippet: what it does, where it lives, and who asked for it. When a tracking tool is replaced or a campaign ends, you will know exactly what to remove.

Wrapping Up

Each type of code has a natural home in Elementor: global CSS in Site Settings, element styles in Custom CSS on elements and classes, scripts in Custom Code with conditions, and embeds in the HTML widget. Put code in the right place from the start, and your site stays fast, organized, and easy to maintain.