Adding Custom HTML Code in JupiterX with Elementor

Custom HTML can be fundamental when you want to integrate unique features or functionalities that are not available through standard widgets. JupiterX, working seamlessly with the Elementor Page Builder, makes it incredibly easy to add your custom HTML, CSS, or Javascript code to your pages or posts.

Steps to Use the HTML Widget in Elementor:

Open the Elementor Editor:
First, navigate to the page or post where you wish to add the HTML code. Click on "Edit with Elementor" to launch the Elementor editor.
Locate the HTML Widget:
On the Elementor Editor Panel, you'll find a variety of widgets. Scroll down or use the search functionality to find the "HTML" widget.
Drag and Drop the Widget:
Click on the HTML widget and drag it to the desired section of your page.
Add Your Custom Code:
After placing the widget, a text area will appear where you can enter your code. This is where you’ll add your HTML, CSS, or Javascript:
- For HTML, simply paste the code directly into the text area.
- For CSS: Encapsulate your CSS code within <style> tags at the beginning of your code.
- For Javascript: Encapsulate your Javascript code within <script> tags and place it at the end.
Save Your Changes:
Once you've inputted the code, click the "Save" button on the bottom panel to apply the changes.
Preview Your Page:
To ensure everything looks and functions as expected, click on the "Preview Changes" icon. This opens up a new browser tab where you can see your page with the newly added code.

Best Practices:

Validation: Make sure your HTML, CSS, and Javascript code is valid and free from errors before adding it to your site. This prevents any display or functionality issues.
Responsiveness: Ensure that your custom code is responsive and works well on all devices.
Security: When using Javascript or third-party code, always consider the security implications and trustworthiness of the sources.

Additional Tips:

If you need to include HTML code in your website specific areas such as before or after <head> , <body> , <footer> , JupiterX also provides options to add code to those areas using the Custom Snippets.
To enhance your pages further, combine the HTML widget with other Elementor widgets and design elements for a completely customized look.

Remember to periodically check your custom HTML code, especially after theme or plugin updates, to ensure compatibility and that your site continues to work as expected.