How to Add Custom Code To Your Website in Elementor

Introduction: #

In this guide, we’ll show you how to add a custom code element to your WordPress website using Elementor. This is useful for embedding elements like a Spotify playlist, Bandsintown widget, or a calendar.

Benefits: #

Adding custom code to your website allows you to integrate various widgets and tools, enhancing the functionality and interactivity of your site. This flexibility helps you provide a richer experience for your visitors.

Prerequisites: #

Before you start, ensure you have the following:

• Logged into your WordPress account.
• A free WordPress account set up through BookLive. If you don’t have one, please reach out to us.

Step-by-Step Guide: #

1. Log into Your WordPress Dashboard #

• Open your web browser and go to your site’s URL.
• Add /wp-admin to the end of the URL.
• Enter your username and password.
• Click the “Log In” button to access your WordPress dashboard.

2. Navigate to the Pages Section #

• On the left-hand side menu, click on “Pages.”
• Select “All Pages” from the submenu.
• Find the page where you want to embed the custom code. Hover over the page name (e.g., “Calendar”) or create a new page if needed.

3. Edit the Page with Elementor #

• Hover over the desired page and click “Edit with Elementor.”
• Wait for the Elementor page editor to load. This may take up to 30 seconds.

4. Add the HTML Widget #

• On the left-hand side of the Elementor editor, search for a widget by typing “HTML.”
• Select the HTML widget (which looks like a couple of brackets with a slash through it).
• Drag the HTML widget to the desired location on your page and drop it.

5. Embed the Custom Code #

• Once the HTML widget is placed, the left-hand editor will open, prompting you to enter your custom code.
• For example, to embed a Spotify playlist:
  • Go to Spotify and copy the provided embed code.
  • Return to Elementor, right-click in the HTML editor, and paste the Spotify embed code.
  • You should see a preview of the embedded content.

6. Customize and Save #

• You can adjust settings like width and padding in the advanced section of the editor.
• Once you’re satisfied, click the pink “Update” button to save your changes. The button will spin and then turn black, indicating that the changes have been saved.

7. Replace or Update the Code #

• If you want to change the embedded content, such as switching from a Spotify playlist to a calendar:
  • Select all the existing code using Command+A (or Control+A on Windows).
  • Delete the existing code.
  • Copy the new embed code from your desired source (e.g., Calendly).
  • Paste the new code into the HTML editor.
  • Click “Update” to save the changes.

Conclusion: #

You’ve successfully added a custom code element to your WordPress site using Elementor. This allows you to embed various widgets and enhance the functionality of your website, providing a richer experience for your visitors.