Adding A Codepen To An HTML Widget In Elementor Pro

Here Is Our Finished Hero

Be My Hero


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!

Add Read More Content Here

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email