Looking on the web for different designs and try to implement it on your own website?
If yes, then this post might be useful.
Well, it is very basic, anyone having very beginner level programming knowledge will know it for sure.
But if you are someone who doesn't know to code but love to design website, thanks to WordPress and amazing page builders like Elementor, which allows us to do that.
But I faced a problem.
I used to Search for different design elements, in websites like CodePen (which is beyond amazing),, where they provide HTML, CSS, JavaScript separately and didn't know how to use those in Elementor.
Elementor provides a widget for adding your own HTML code but, what about CSS and JavaScript?
Where the hell shall I add Styles and Javascripts? I Elementor pro it allows you to add custom CSS and Scripts, but I don't have Elementor Pro in my personal sites and I tried adding CSS there in other sites where I have a Pro version - but it didn't quite work for me.
There is an easy fix.
A friend of mine who knows how to code showed me how it is done. He doesn't know how to use WordPress, so it is not specific to WordPress or Elementor, it is the same everywhere and any beginner programmer knows ho to do it. So, surely it can work anywhere, like in other page builders like Gutenberg Editor, Beaver Builder, Thrive Architect, Classic Editor one even in any other CMS.
So here's how you do it.
Add HTML, CSS, and JavaScript in a Elementor page
1. Drag the HTML widget into the canvas area where you want to add a custom design
We are gonna add HTML, CSS, JavaScript all three in one place.
 |
| HTML, CSS, JavaScript code are separated |
2. Copy and paste the HTML code in the Field provided
Here, you do not need to write <!DOCTYPE html> or <html> or <body> or any shit, straight out write just the code. If you do not mention, this widget knows by default the code is HTML.
Like this:
3. Paste the CSS code within Style Tag
Leave a couple lines empty. Paste the entire CSS code within <style> </style> tag in the same field
Like this:
4. Paste the JavaScript with Script Tag
Leave a couple lines empty. Paste the entire JavaScript within <script> </script> tag in the same field
like this:
Hope you find it helpful.
2 Comments
Thx for this hepful tutorial it's work for other widgets but not for animated cursor css. D you know a way to add this css personalization cursor into the entire website using elementor from codepen? Link of the ocdepen there: https://codepen.io/designcourse/pen/GzJKOE Thx in advance
ReplyDeleteHi pal, this will not be possible though Elementor. May be you can do it through function.php file. Also remember to convert scss to css before using on WordPress style.css file
Delete