Obs...
Elementor is a powerful tool for creating and customizing WordPress websites, offering multiple methods to incorporate custom HTML, CSS, and JavaScript code. Below are the primary ways to add custom code:
1. Adding Custom HTML:
HTML Widget:
In the Elementor editor, drag the "HTML" widget to the desired section of your page.
In the widget's content area, input your custom HTML code.
2. Adding Custom CSS:
Custom CSS for a Specific Page:
In the Elementor editor, click the page settings icon (gear icon) in the bottom left corner.
Navigate to the "Advanced" tab and select "Custom CSS."
Enter your CSS code; it will apply solely to the current page.
Custom CSS for the Entire Site:
In the WordPress dashboard, go to "Appearance" > "Customize."
Select "Additional CSS" and input your global CSS code.
3. Adding Custom JavaScript:
Using the HTML Widget:
Drag the "HTML" widget into the desired area within the Elementor editor.
Insert your JavaScript code within
<script>tags in the content area.
Adding JavaScript to the Header or Footer:
In the WordPress dashboard, navigate to "Elementor" > "Custom Code."
Click "Add New" and provide a title for your code snippet.
In the code editor, input your JavaScript code.
In the settings panel, choose whether the code should load in the "Header" or "Footer."
Set the display conditions to specify which pages should include the code.
Save and publish the code.
4. Adding CSS and JavaScript via a Child Theme:
Create a Child Theme:
If you haven't already, set up a child theme for your current WordPress theme.
Add Code to
functions.php:In the child theme's
functions.phpfile, usewp_enqueue_style()to add CSS andwp_enqueue_script()to add JavaScript.
Example for adding CSS:
Example for adding JavaScript:
5. Using Plugins for Custom Code:
Plugins like "Simple Custom CSS and JS":
Install and activate the plugin.
In the WordPress dashboard, go to "Custom CSS & JS" > "Add Custom CSS" or "Add Custom JS."
Input your code and save.
Important Considerations:
Security: Always ensure your custom code is secure to prevent vulnerabilities.
Performance: Avoid adding unnecessary code that could slow down your site.
Backup: Create a backup of your site before making significant code changes.
By utilizing these methods, you can effectively customize your Elementor website with custom HTML, CSS, and JavaScript to meet your specific requirements.