如何使用Elementor自定义代码功能在网站中添加HTML、JavaScript和CSS代码-光子波动网

existWordPress website builderCustomizing and optimizing your website's functionality usually requiresAdding custom code snippetsElementor provides a powerful "Custom Code" feature that makes it easy to add specific styles and interactive features to your website, such as Google Analytics code or Facebook Pixel code. These code snippets can help you track your website data, enhance the user experience, and even add specific styles and interactive features.HTML, JavaScript and CSS code snippetsAdd it to your website.

Introduction to Custom Code Functions

ElementorThe custom code feature enables you to add different types of code snippets to your website, such as HTML, JavaScript, and CSS.These codes can be used for the following purposes:

Adjusting the DOM: ByJavaScript manipulates DOM elementsIt is possible to dynamically change the content of a web page in response to user actions or other conditions.
Add Event: canUse JavaScript to add click, hover, and other events to web elements to enhance interactivityThe
Applying custom styles: ByCSS code to add customized styles to specific elements according to the needs of the websiteThe

Custom code feature does not support PHP code snippets. This means that you can't add custom hooks or perform PHP operations with this feature, but you can do so with thefunctions.phpfiles or third-party plug-ins to implement these features.

How to add custom code

To add custom code to your WordPress site, follow these steps:

1,Navigate to Elementor's Custom Code page

In the backend menu, go to Elementor > Custom Code. This displays the Custom Code Management page where custom code snippets can be added, edited, or deleted.

2,Add new custom code

Click on the "Add New Custom Code" button to enter the new code's editing page. Here, you need to set the title, position and priority for the code snippet.

3,Enter the title

Enter a descriptive title for the code snippet so that it can be easily recognized later. The title can be a description of the code snippet's functionality, such as "Google Analytics Tracking Code" or "Custom Popup Script".

4,Selecting the location of the code

Determine which part of the page the code will be inserted into.Elementor provides the following options:
- <head>: Inserts code into the head tag of the page, usually for global styles or scripts.
- <body> - commencement: Inserts code into the beginning of the page body, suitable for some scripts that need to be executed immediately when the page loads.
- <body> - End: Inserts code at the end of the page body, usually for minor scripts or styles.

5,Setting the priority

You can add a new name for theCode snippet setting priority (1-10). If multiple scripts are assigned to the same location, the priority will determine the order in which those scripts are loaded. The smaller the number, the higher the priority. For example, a script with a priority of 1 will run before a script with a priority of 5.

6,Input code snippet

Type or paste your code snippets into the code block editor.Elementor's built-in code checker will automatically check your code and notify you if it finds an error.

7,Setting up release conditions

In the Publishing area, click Edit to set the display conditions for the code snippet. These conditions control which pages or sections of the site the code is displayed on. For example, you can set the code to take effect only on certain pages or for certain user types, such as administrators or visitors.

8,Publishing customized code

After completing the above steps, click "post" button to apply the code to your website. There is also the option to save the custom code as a draft or set a date and time to publish it later.

Adding CSS Styles with Custom Code

In addition to JavaScript code, CSS styles can be added to a website through the custom code feature. In order to apply CSS to specific conditions, CSS code can be wrapped around the HTML's<style>between tags and add them to the site with the custom code feature. Below is an example:


  .custom-button {
    background-color: #1B61E6;
    background-color: #1B61E6; color: #fff;
    padding: 10px 20px;
    
    text-align: center;
    cursor: pointer; }
  }
</style

In the above code, we have defined a file namedcustom-buttonclass and set some styles for it. Once added via the custom code feature, these styles will be applied to the elements of the site based on the conditions set.

reach a verdict

Easily integrate HTML, JavaScript, and CSS code snippets into your WordPress website with Elementor's Custom Code feature. Whether you're adding tracking code, dynamic functionality, or custom styles, this feature helps you enhance the functionality and user experience of your website without having to dive into programming.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off