如何在Elementor中使用自定义代码：完整指南

Elementor The Custom Code feature adds HTML, JavaScript, and CSS code snippets to your website. This is useful for situations where you need to insert code from third-party tools such as Google Analytics, Facebook Pixel, etc., or to add custom styles and dynamic interactive effects to site elements. Here's a complete guide on how to add custom code to Elementor.

Custom Code Features Overview

Elementor The Custom Code feature supports the addition of HTML, JavaScript and CSS code snippets, making it easy to add additional customization to your website. Any JavaScript code can be inserted to modify the DOM (Document Object Model), add events and dynamic effects, and more. In addition, CSS code snippets can be used to customize the styling of any element on the site.

take note of: Custom Code does not support PHP code snippets. Therefore it is not possible to add custom hooks or actions with this feature. For PHP code, it is recommended to use the functions.php file or a third-party plug-in to do so.

How to add custom code

Follow the steps below to add custom code to Elementor:

Step 1: Login to WP Admin

Go to the WordPress admin backend.

Step 2: Navigate to Elementor > Custom Code

In the WordPress dashboard, go to Elementor > Custom CodeThis time it will show the number of times it has been used since theDefine code pageThe

Step 3: Click on "Add New Custom Code".

strike (on the keyboard) Add New Custom Code button, the New Code page will be displayed.

Step 4: Enter code information

On the New Code page, follow the steps below to fill in the information:

caption - Add titles to code snippets for subsequent identification and management.

placement - Determine the location of the code snippet in the web page by selecting the following options:

<head> - Add to page header
<body> - Start - Add to the beginning of the body of the page
<body> - End - Add to the end of the body of the page

prioritization - Sets the priority of the code snippet (1-10). If multiple scripts are assigned to the same location, the priority value determines the order of execution, the smaller the value the higher the priority. For example:Scripts with a priority of 1 will be executed before scripts with a priority of 5.The

Code Block Editor - Type or paste a code snippet into the code block editor.Elementor's built-in code inspector automatically checks the code and indicates any errors.

Step 5: Setting Up Posting Conditions

exist Publish Click in the area Edit in order to set the conditions for publication.PUBLISH SETTINGS window will be displayed.

Set conditions as needed to specify on which pages or content types the code snippet will be displayed.

Step 6: Publish the code snippet

After confirming that the settings are complete, click Publish Publish a custom code, or choose to save the code as a draft or set a delayed publish date and time.

Add CSS code

In addition to JavaScript scripts, CSS code can be added to code snippets by wrapping the CSS in a <style> tags. In this way, CSS can be selectively applied to a given page based on the conditions set. Example:

.custom-class {
    color: blue;
    color: blue; font-size: 18px;
  }

summarize

By using Elementor's Custom Code feature, you can add a variety of custom effects to your website, such as tracking code, event triggering, dynamic elements, and custom styles. This feature can enhance the personalization and functionality of your website without modifying the core website files.

Link to this article:

author of an article

photon fluctuation

privacy policy

Privacy Policy

Service

UseGenerator

terms of service

NC-SA 4.0

THE END