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.

What Time Is It?

css clock by Hugh Dai

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.

Try This One Out.

See the Pen clock by Hugh Dai (@HughDai) on CodePen.

Get Stuck?

Here is the code. Unzip this and open the file in notepad. Paste the code to an HTML widget.

All Done. Go Play!

Add Read More Content Here

Getting Stuck?

We Can Help You

if you are having trouble with Wordpress or Elementor, we do our best to help. We can walk you through an issue via email, phone, or TeamViewer.

We can also create Elementor templates for sections or pages to help you achieve a look or style you need. These can be easily exported/imported to your website via JSON files.

Hourly Rates Will Apply.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on print
Share on email

Farhad Black Suede Heels

$129
99 $
  •  

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Leather Purse

$159
99 $
  •  

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Printed Trench

$199
159 $
  •  

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Silk Scarf

$59
49 $
  •  

Fabulous items for fabulous prices.
You deserve it.