Elementor’s Custom Code feature allows users to add HTML, JavaScript, and CSS snippets to their website. This is especially useful for embedding third-party tools like Google Analytics or Facebook Pixel or adding custom styles and interactive effects to website elements. Here’s a complete guide to adding and managing custom code in Elementor.
Overview of the Customs Code Feature
Elementor’s Custom Code feature supports adding HTML, JavaScript, and CSS snippets to enhance your website’s functionality. You can use it to insert JavaScript to modify the DOM (Document Object Model), add event-driven effects, or use CSS to style website elements beyond the default design settings.
💡 Note: Custom Code does not support PHP snippets. To implement PHP functions, hooks, or actions, use the functions.php file or a dedicated third-party plugin.
How to Add Custom Code in Elementor
Follow these steps to add custom code using Elementor:
Step 1: Log in to WordPress Admin
Log in to your WordPress dashboard to access the Elementor settings.
Step 2: Navigate to Elementor > Custom Code
From the WordPress admin panel, go to Elementor > Custom Code. This will open the Custom Code management page.
Step 3: Click “Add New Custom Code”
Click the Add New Custom Code button to open the code creation interface.
Step 4: Fill in Code Details
On the new code creation page, fill in the required details:
- Title: Add a title to identify the code snippet later.
- Location: Choose where the code will be placed in the HTML structure:
- <head>: Places the code in the
<head>section of the webpage. - <body> – Start: Places the code at the beginning of the
<body>section. - <body> – End: Places the code at the end of the
<body>section.
- <head>: Places the code in the
- Priority: Set the execution order of the code snippet (1-10). Lower numbers have higher priority. For example, a script with priority
1will execute before a script with priority5. - Code Block Editor: Enter or paste your code snippet into the editor. Elementor’s built-in code validation tool will check for errors and highlight them if detected.
Step 5: Set Publish Conditions
Click Edit in the Publish Settings section to define where the custom code will be applied. For example, you can specify whether the code applies to the entire site, specific pages, posts, or content types.
Step 6: Publish the Code Snippet
After confirming the settings, click Publish to make the code live. Alternatively, you can save the snippet as a draft or schedule a publish date and time.
Adding CSS Code with Custom Code
In addition to JavaScript, you can add CSS snippets directly in the custom code editor. Simply wrap the CSS rules within <style> tags. For example:
<style>
.custom-class {
color: blue;
font-size: 18px;
}
</style>You can selectively apply the CSS based on the conditions you set during the publishing process.
Best Practices for Using Custom Code in Elementor
- Validate Your Code: Ensure your HTML, CSS, and JavaScript are error-free to avoid breaking your website.
- Optimize Code Placement: Choose the correct location for your code to minimize performance issues (e.g., placing tracking scripts in the
<head>or<body> - Endsections). - Test Before Publishing: Always preview your changes before publishing to ensure the code works as intended.
Key Use Cases for Custom Code
- Tracking Scripts: Add Google Analytics, Facebook Pixel, or other tracking tools.
- Custom Styles: Apply unique CSS rules to enhance your website’s appearance.
- Interactive Effects: Insert JavaScript to create dynamic and event-driven elements.
Summary
Elementor’s Custom Code feature is a versatile tool that empowers you to personalize your website without modifying core files. Whether you’re adding tracking codes, custom styles, or dynamic interactions, this feature enhances your site’s functionality and design. With its user-friendly interface and robust capabilities, Elementor makes it easy to take your website to the next level.