Adding a Codepen HTML CSS JS and External JS to an Elementor Page - Elementor Wordpress Tutorial

[@antonichristian5845]

nice one Imran!!! one thing to note though that also trips a lot of people is quite a few codepens have CSS with (SCSS) next to them, in this case you need to click on the small down arrow and choose "view uncompiled css" otherwise it won't work...

[@websquadron]

Good point on the SCSS

[@kingsleyabang3403]

One of the best I've come across. I've been checking for days and this is where I've found it. Thanks for this.

[@Asad-Main]

Thank you so much man, Just what I was looking for. I am new learning WordPress past 6 months and trying to come up as a Freelancer. Your contents are just too perfect for me & easy to understand. Respect 😍

[@websquadron]

Glad it helped!

[@GinasticaNerd]

oh bro, I was looking for days to solve this and I couldn't find it, until I found you on youtube and uncovered my doubt, thank you very much!

[@komalzafar4799]

Was struggling wit it for so long 😭 thnku so much.🥰

[@FeelingLike]

This is amazing, straight to the point and thought out. Thanks, priceless information

[@ththim7785]

Best tutorial ever! You are a great teacher.

[@Kiweora]

Thanks, man! That last part of the external source was the missing piece I've searching for.

[@michalbartosz4878]

Man, that's just what I needed explained! Thanks a lot.

[@erichepperlewp]

Good tip about the external resource scripts!

[@YagizK.]

thank you so much bro, this helped me so so much :D

[@moarocha]

Thank you. This tutorial saved my life!

[@najafalibalti]

bro, i am stuck in this but now i solved this issue due to you bro , loe from pakistan💕💕❣

[@yousefmiri7045]

You are the best , Thanks a lot for your video !!!

[@wesleylefamazibukojr5644]

Thank you So much!!!

[@ASAD-gx3km]

really great work what i was looking for

[@clintongallagher]

. The element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Note: There can only be one element in an HTML document. If a element is in the widget as this demo shows that would cause two elements to be in the page. So how can this demo function with two body elements? Does Elementor filter out the redundant element from widgets or what?

[@fd3871]

it doesn't unless he is using a theme template page that is devoid of a body tag (which is possible), or maybe elementor canvas?. my guess is that he just has duplicate body tags in this. the proper way to do this, without creating some sort of shortcode that loads a template part and enqueues the styles and scripts... would be to include just the div parts via the html widget (as he's done) and then offload the styles and scripts to "elementor > custom code" with a condition to include those codes only on the page(s) in which this animation is shown.

[@Dim_the_Athenian]

You change element to and then go on style and change body{ } to .bodysomething{ } so it doesn't overlaps your workpress

[@danijelbeslin7101]

thaankss dude a lot

[@pustynnyklakier4805]

I have written my code in three.js , how can I add it to elementor pro? I don't have that link which you put in 3:17 - you know, it's my code, not from ready website. help

[@websquadron]

I can only have a look if it's part of a 1-2-1

[@pustynnyklakier4805]

sorry, but I don't know what You mean?@@websquadron

[@sarakarkhaneyousefi6138]

my html file doesnt have any body tag, may i add this to my html code and after that add style and script?

[@websquadron]

Yes

[@rh619]

awesome ....

[@elkanak6753]

What if the source doesn't use any external resources? The code only works in build mode, but the change not showing in live mode.

[@websquadron]

And all of the components ie html css js were added?

[@faizankhan-je9cf]

bro my svg animation is not working, i have pasted my HTML , CSS and JS code as you have shown in the video.

[@websquadron]

Did you add the JS library if there were any?

[@dharmaaffirmation316]

Can we add js and css as header footer or any plugin or in theme file??? I try my custom down it work when whole code add together but i want to add elementor widget between them so how to do that?

[@dharmaaffirmation316]

I also try by adding two html widget first for HTML second html widget for js and css.. so i can add another widget between them but its didn’t work

[@websquadron]

Technically yes but there may be restrictions with some themes where some codes take priority

[@dharmaaffirmation316]

@@websquadron i use generapress

[@trendiq7169]

hello but on my cpanel on index.php file the page is not animated? what happned

[@websquadron]

Did you add the JS Libraries as well? Could be site specific.

[@Everyonelovesyou]

Mine everything worked except the animation for the signup button did not run

[@websquadron]

Did you inspect for JS console issues?

[@Everyonelovesyou]

@@websquadron no how to do this?

[@SHIVAMTHAKUR-zn6dx]

But if there are breakpoints for Mobile so this code fails to comply in wordpress!

[@websquadron]

It does work on mobile if you tweak and add @media at the start

[@al-qahharibnrafique4920]

it shows unexpected start tag (style)

[@websquadron]

Shouldn’t do

[@happylash]

its doesn"t work in my elementor :/

[@websquadron]

Did you add the JS Library as instructed?

[@rajyadav-qj9og]

How to add JS library as instructed?

[@visualmediafx]

heh, never heard double quotes called "speech marks" before.

[@websquadron]

:)

[@plantifulalexandra]

In Germany se call them "geese feeties" :D