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.
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.
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:
Ensure that you aren't using CSS selectors for your Codepen that also apply to other elements of a website.
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!
And, as our final effect, let's add a unique graphic to a pre existing Elementor site.
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.
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.
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.
CSS Can be added globally using a tool like YellowPencil or CSSHero:
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.