Adding a Codepen HTML CSS JS and External JS to an Elementor Page - Elementor Wordpress Tutorial
HTML-код
- Опубликовано: 11 окт 2024
- This is how to add a Codepen that has External JS Code to an Elementor Page
The example Codepen is from here: codepen.io/Lia...
Adding a Codepen HTML CSS JS and External JS to an Elementor Page - Elementor Wordpress Tutorial
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your RUclips Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk
![BOLIVIA vs. COLOMBIA [1-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 9](http://i.ytimg.com/vi/zg15uVWjuf4/mqdefault.jpg)
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...
Good point on the SCSS
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.
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!
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 😍
Glad it helped!
Was struggling wit it for so long 😭 thnku so much.🥰
Thanks, man! That last part of the external source was the missing piece I've searching for.
This is amazing, straight to the point and thought out.
Thanks, priceless information
Best tutorial ever! You are a great teacher.
Good tip about the external resource scripts!
Man, that's just what I needed explained! Thanks a lot.
thank you so much bro, this helped me so so much :D
bro, i am stuck in this but now i solved this issue due to you bro , loe from pakistan💕💕❣
Thank you. This tutorial saved my life!
You are the best , Thanks a lot for your video !!!
really great work what i was looking for
Thank you So much!!!
.
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?
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.
You change element to and then go on style and change body{ } to .bodysomething{ } so it doesn't overlaps your workpress
thaankss dude a lot
awesome ....
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.
And all of the components ie html css js were added?
bro my svg animation is not working, i have pasted my HTML , CSS and JS code as you have shown in the video.
Did you add the JS library if there were any?
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
I can only have a look if it's part of a 1-2-1
sorry, but I don't know what You mean?@@websquadron
my html file doesnt have any body tag, may i add this to my html code and after that add style and script?
Yes
Mine everything worked except the animation for the signup button did not run
Did you inspect for JS console issues?
@@websquadron no how to do this?
its doesn"t work in my elementor :/
Did you add the JS Library as instructed?
How to add JS library as instructed?
hello
but on my cpanel on index.php file the page is not animated? what happned
Did you add the JS Libraries as well?
Could be site specific.
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?
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
Technically yes but there may be restrictions with some themes where some codes take priority
@@websquadron i use generapress
it shows unexpected start tag (style)
Shouldn’t do
But if there are breakpoints for Mobile so this code fails to comply in wordpress!
It does work on mobile if you tweak and add @media at the start
heh, never heard double quotes called "speech marks" before.
:)
In Germany se call them "geese feeties" :D
It worked!!!
Thanx