Adding A Codepen To An HTML Widget In Elementor Pro

Here Is Our Finished Hero

Be My Hero

BE BRAVE

Get Your Bracelet

Free Shipping Today Only

How To Do It

#1 Drag a 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.

The Pen

See the Pen jREBMP by Chris Ayers (@chris-ayers) on CodePen.

The JSON File

Please Unzip This And Then Upload The Template File Into Your Templates

Something Fancy By John mpf

This only works on Desktop. Mobile users will just see an image.

Water ripple animation on hover

See the Pen Water ripple animation by John mpf (@John_mpf) on CodePen.

The JSON For Ripples

All Done. Go Play!

Leave a Comment

Your email address will not be published. Required fields are marked *