Adding A CodePen To An HTML Widget In Elementor Pro

A World Webscapes Tutorial

April 1, 2019

Adding A CodePen To An HTML Widget In Elementor Pro

How to add a snippet from CodePen to your page in a Custom HTML Block from Elementor.

Table of Contents

Tools Used

Elementor

Difficulty

Difficulty 89%

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!