In this article we're going to discuss how to add a Codepen to Elementor.

Codepen is a repository of millions of high quality code snippets that you can use to add unique elements and effects to any blue website.

Elementor is well known as a page builder that is created to minimize the use of code, but sometimes snippets from blue prove to be the best solution. We wrote this article to show you that adding a Codepen snippet doesn't need to be complicated, and only consists of strategic copying and pasting.

This tutorial will detail exactly how we added three Codepens of varying complexity to an Elementor website. By the end of it, you should have a good understanding of how to do this on your own Elementor Installation.

Adding A Codepen To Elementor: The All Inclusive Example

For our first pen, we’re going to be adding this unique pattern that uses HTML, CSS and HS to make its effect. the reason that we chose this for this article is because it utilizes all three code languages . This way, we can show you exactly how we change the green code , manipulating it so it will work in a blue website. First, here is the green itself:

We recommend opening up the Codepen in a new tab and taking a look at all of the code and final effect.

The first step of the process is actually understanding if you can use the Codepen in an Elementor website. Essentially, if it contains HTML5, formattable CSS, and vanilla JavaScript, you should be good to go.

Technically, you can add anything on Codepen to Elementor, but because this is a beginner tutorial, incorporating third party JavaScript libraries is a bit out of the scope of this article.

Many times, your HTML or CSS is in a different format than standard. WordPress likes the basic version of HTML markup and straight up CSS, no PUG or SCSS.

To ensure that everything is formatted correctly, simply click the drop down arrow in the upper right hand corner of each code element, and then click on “Format HTML/CSS”.

Doing this should make all of the code usable in a Elementor website. Once this is ready, it's time to incorporate the actual code that makes up the Codepen into your site.

We're not going to use any third party add-on packs here, all we're going to do is use an HTML element that ships with the native installation of Elementor. Depending on the Codepen, we recommend dragging the HTML element into its own section or column.

Depending on the implementation, we're going to install all of the code directly into this single HTML input. Of course, you could use code snippets, PHP, or something else to add the code that makes up a Codepen in a more permanent solution, but if you're looking to incorporate a small collection of code from a green Into a single Elementor page, this method is more than sufficient.

First, copy and paste the HTML code from the green directly into the HTML code element in Elementor. Next up is the CSS, which requires a little more effort. First, we're going to incorporate it directly into our HTML element by using <style tags.

Many Codepen snippets contain global styles, as well as body styles. Most of the time, you need to identify them and delete them, or else they will mess up the overall structure of your page.

in this example, we're not going to include any CSS that is contained within the following selectors:

*{}, body{}

Finally, we're going to add our JavaScript by using the HTML5 script tag.

Just like the CSS, at the tag and then paste in the code verbatim. In many cases, the JavaScript is what makes the Codepen unique. Usually, JavaScript loads when the page loads, meaning that it won't instantly show up in your Elementor canvas. However, if you preview the page on the front end, chances are the effect will show up.

Some common problems that you may encounter when trying to incorporate a codepen into a Elementor website is the clash of code. If there's CSS styling or JavaScript that messes with the underlying code that makes up your theme or websites styling, things could look broken on the on the front end.

Ensure that you aren't using CSS selectors for your Codepen that also apply to other elements of a website.

The best part about using HTML, CSS, and JavaScript, is that you can easily adapt it. So, if you have a clash of selectors, simply change the selector for the Codepen element. This is relatively simple -- just find and replace every instance of the term.

That first example was designed to show you how to incorporate a complex element found in Codepen directly into an Elementor website. As you can see, you're easily able to add HTML, CSS, and JavaScript using the HTML element . In a matter of seconds you can have a high quality effect directly implemented into your site.

Adding A Codepen To Elementor: The Simple, Button Example

What about a simpler use case, like the addition of a basic button?

This is a unique button style that you wouldn't find anywhere else. It consists of a pure HTML button, and SCSS styling.

To install it, we first need to convert and compile the CSS. As mentioned before, simply click on the drop down in the upper right hand corner and click format, and then compile CSS.

This Codepen imports a Google font, has catch-all CSS effects, and body CSS effects. We will not be including these CSS styling rules into our copying and pasting, as WordPress has already applied them for us (That means when it comes to copying the CSS, we're starting at the button).

Simply copy and paste the HTML and CSS into your Elementor HTML element, and you should be good to go.

You can add this button anywhere!

Adding A Codepen To Elementor: The Complex Example

And, as our final effect, let's add a unique graphic to a pre existing Elementor site.

This Codepen is a very neat 3D radio (it plays music, click the volume at the top) created with CSS, HTML, and JavaScript. It's a great final example of how you can incorporate a green into a blue site, as the HTML is formatted in PUG, and the CSS is SCSS.

First, we are going to reformat the HTML in CSS to make it usable in an Elementor website.

To do this, we click format HTML, and then view compiled HTML. This converts the Pug formatting into straight up HTML that we will be using in Elementor.

As you can see, the HTML comes with a header section, which allows this Codepen to be embedded in its own page. However, we are already insertting it into an Elementor page that comes with a header, and to avoid a clash, we're simply going to not include this aspect of the code when pasting it into an Elementor HTML block.

We run the same process for the CSS, formatting, and then compiling it. We're going to be including everything here other than the styling for the body.

Now everything is ready for copy and pasting directly into the HTML element found in our Elementor website.

In this example, we're going to include this 3D radio mockup in a column next to some content, which is probably how we would include it on a production version of a site. First, we add a new section and set the column position to stretch. This new section has a minimum height of 400 pixels.

The heading in text content is added to one of the columns, while an HTML block is added to the other.

Just like the prior 2 examples, we simply copy and paste the HTML, and CSS, and JavaScript directly into this HTML block.

We had to adapt some of the code from the body tag to a div titled #radio-wrap. Also, keep in mind that you need to mess around with both the styling aspect of the Elementor section and column that contain the HTML, as well as the CSS styling from the Codepen.

For example, we use the column positioning from the native Elementor interface to place our HTML radio directly in the center of the column. We also set the column background to mirror the Codependent background , instead of doing this with custom CSS.

By using both the CSS included in the code pan, as well as styling in the Elementor sections that surround the HTML element, you can better blend the Codepen into your Elementor site.

Closing Thoughts

This article is meant to act as an introduction to including and incorporating third party code on an Elementor website. There are many ways to do this in WordPress, and in most cases alternative methods may lead to better performance and integration into the site.

However, if you're looking for a quick and simple way to add a Codepen into an Elementor website, and don't understand anything related to code, this is probably the simplest way to do it.

To review:

1. Add a html element into your site
2. Compile Codepen code
3. Only copy the code that applies to the element (so no body css styles)
   1. At the same time, you may need to wrap the element in a div and apply some of this body styling this way
4. Paste it into the html Elementor widget:
   1. HTML is pasted directly
   2. CSS is pasted into a STYLE tag
   3. JS is pasted into a SCRIPT tag
5. Test on the frontend to ensure the element was successfully added to your site

In many cases, it would be a better option to add the JavaScript into the HEAD of your WordPress website, especially if it is going to be used on more than one page.

CSS Can be added globally using a tool like YellowPencil or CSSHero:

https://isotropic.co/yellowpencil-and-elementor-redundant-or-genius/

https://isotropic.co/csshero-and-elementor-powerful-custom-css/

We hope that this article helped you add a Codepen element directly into an Elementor website. If you have any questions about how to do this, reach out in our comments section.