Adding A CodePen To An HTML Widget In Elementor Pro

A World Webscapes Tutorial

Get Started Now

How to use snippets from CodePen and other sources in your Elementor sections for even more possibilities in your designs.

How To Do It

#1 Drag an HTML block to a page
#2 Copy the HTML part and paste to yours
#3 If it has .js you MUST wrap this in <script type =”text/javascript”>Their JS here</script> Place this under the HTML in same area.
#4 Go to Advanced/Custom CSS and paste their CSS into your block. If this is used multiple times, add it to Theme custom CSS instead.
#5 Save and view. Not every Pen works And you will need to tweak code and CSS to fit your needs.

If the pen contains SCSS. You must compile it.

Try These Out.

All Done. Go Play!