Elementor Animated Border | WordPress Elementor Pro Tutorial | Elementor Tips and Tricks
HTML-код
- Опубликовано: 6 июн 2024
- In this tutorial, I'll show you How to Create Animated Border using Elementor Page Builder🔥 No additional plugin is required!!
✅ Get Elementor PRO:
jimfahaddigital.com/e-pro
✅ Get Tutorial Code Snippets:
jimfahaddigital.com/tutorial/...
TIMESTAMP:
0:00:00 Overview
0:00:24 Design the Layout using Elementor
0:04:27 Add Animated Border using Custom CSS
0:09:43 Contact Jim Fahad for WordPress Projects
Subscribe Here: bit.ly/JFDtutorials
Thanks for Watching!
✅ Become a WordPress Freelancer Today! Watch this Tutorial:
• Elementor Experts Netw...
✅ Get Domain & Webhosting(50% off):
jimfahaddigital.com/hosting
✅ Hire a Pro Web Developer:
jimfahaddigital.com
-----------------------------------------------------------------------------
And, Here are other Full Website Creation Tutorials using ELEMENTOR+WORDPRESS:
Elementor Portfolio Tutorial 2021:
• How to Make a PERSONAL...
Elementor Pro Complete Tutorial 2020:
• Elementor Pro Tutorial...
How To Create a Modern Website 2020:
• [No Coding] How to Mak...
How To Make a Business Website 2020:
• [Complete Tutorial] Ho...
How To Build a Personal Portfolio Website 2020:
• [A-Z] How to Create a ...
How To Create a One Page Wordpress Website 2020:
• How to Make a Complete...
How To Create a Multi-Page Wordpress Website 2020:
• How to make a $5000 Wo...
How To Create App Landing Wordpress Website 2020:
• How to Make a WordPres...
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
About:
8 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.
#WordPress #Elementor #tipsAndTricks
If you're searching for how to make an eCommerce website, how to make a professional webShop from scratch, how to create an Online Store website step by step using woocommerce elementor, woocommerce subscriptions, WordPress eCommerce 2020 tutorial for beginners, woocommerce plugins, woocommerce payment gateway, best website making course, Elementor tutorial for beginners - then this tutorial is for you.
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
Like me on Facebook:
/ jimfahad.consultancy
And, lastly, If you want me to build your AWESOME website at an affordable price,
✅ You Can Contact me through my website:
jimfahaddigital.com/request-a...
Have a great day!
🔥Download Exclusive Elementor Templates: kitpapa.com 🔥
Hello sir, Your work is amazing and I am learning alot and I really Appreciate it. Just one thing, can you do these with flex container, I have tried some like magic card, it didn't work. Problem was that the whole card glows.
Hey Jim, last year I wrote you a comment. Sorry for that! You are taking things to the next level! Goodluck in everything you do 🙌🏻💪🏻🔥
Hey Ferdy! Let's forget about all those past comments.. haha! You're the rockstar brother! Thanks a million for appreciating my work!! May almighty keep you always healthier. And, lots of love for Noah and Lize!! 👦👶
@@jimfahaddigital i wish you the same Jim! I have not seen the whole video but I like the intro with the lamp 😁
That's how gentleman talks😍
Hey Ferdy, it's great catching up with you here. I hope you're doing good. By the way, how is the new born baby 🍼 doing?
Ferdy, you're a legend, I have learned a lot of things from you. Thank you and may Almighty Allah continue to bless you and your family. Mohammed Shehu Ahmed from Ghana.
Jim by far has the best tutorials I've ever saw on RUclips man I really appreciate you educating us!!
Thank you, Jim! This was very helpful, creative and you are a such good teacher! Keep them Elementor tutorials coming!!!
Man, You are one of kind. I have never seen someone doing great like this. Keep doing. All the very best.!!
Just being 100, this is the only reason I came on RUclips today. Thanks mate!
Mr Jim, you are one of the best Elementor developer here on RUclips who gives FREE tutorial for everyone. Thank you so much! Keep on sharing your knowledge.
This guy keeps dropping down some bomb content, Love your video Jim Fahad!
Perfeito Jim Fahad, seus vídeos são excelentes. Adorei!
I live in Brazil and have always followed your videos.
I am always waiting for your new uploads. You are awesome man!
It's lovely tutorial. Now I learned a new item from Jim. Thanks for this tutorial.
you make us grow with your video content. thanks Jim
Absolutely brilliant, thanks for the tutorial Jim.
This was awsome thank you! Love being able to add a little extra customization to my site builds.
I love your videos man... And you are also super interactive on the Facebook group too
Thanks man
You just gained a new subscriber! Great work!
Ooh Geez!!! Best website animation tutorials ever!!! One more subscriber here brother!
Thanks for these high quality tutorials brother!
Jim Fahad you're doing such amazing stuff wit& Elementor. They should probably pay you for this.
Awesome as always. Thank you very much!
Love this. Thank you!
Thanks for making this tutorial ❤️
This is a Very very useful video 👌
Great and amazing videos bro! Thanks
You have a very creative approach.
I like it. 👍
Thanks for the very informative tutorial bro! New subscriber here 👍👍👍
Great as usual, thanks
Great content. You deserve more views and subscribers
Damn bro 👏🏽👏🏽 amazing work
Sou do Brasil e esse canal é o melhor sobre design Elementor
amazing work!
Amazing, Thank You.
You are the best. Love the idea.
Thanku man you are the best keep going 👍
Good tutorial and I am trying to implement everything in my portfilio
Love it ☺️
best RUclips channel ❤️❣️
Jim you are rock star of elementor
Okie. This is very cool stuff with CSS.
Very Good. Thanks
this tutorial is very helpful
you are a great brother. love you.
take my love,💕💕💕
from Bangladesh
Just Insane.You are best
Well done.
Sensacional, obrigado.
that's amazing video sir
Me alegra encontrar este canal
your intro just awesome
Nice to share this tricks. Let's try.. 😄👍
Just discovered you : love the content!
Wondering if it's possible to have 'n' loops of the colour around the image after which the animation stops but the colours remain where they are?
OR
Is it possible to have the colours start out at opposite corners and grow along the sides until they touch (whereupon they stop)?
you are the best 💪💪💯
yay!! ❤️❤️🔥🔥
great job
Very good 👍
Awesome tutorial Jim! Is there away to make the start of the stripes gradually opaque? (Like a glow)
Great
Nice 👌
You're the boss.
Wow man !
Great tutorials. I only encountered a small problem while trying to implement multiple Animated CSS styles (animated border+ rotating images) but one effect would apply to both. Using unique CSS classes didn’t help either. Now what should do !?
nice bro
Elementor Legend
Oh yeah!
Very good, thank you very much. Can you upate this to use the new conteiner feature in Elementor?
Hey Jim, given that the software has updated to Flex Box containers instead of columns, how does this affect the building process? Is is possible to apply this border effect to anything? I.E. an image that you want to add an animated border to? Please advise. Thank you.
Hi Jim, this is great tutorial.
I have a little problem with this. In elementor editor the animation is running, but when I klik preview changes, the animation not running. Do you have any suggestion what should I do?
I love you sir
Hey Jim! how can i do if i want to make this effect in hover?? thank for your videos!
Auto Subscribe 👍
Hi Jim, I use flexbox containers and have tried to follow this tutorial several times with flex box but just does not work. Will you be updating any of these tutorials to use flexbox?
Thanks
Hey jim, TNX for great content, please explain the CSS code
Hi, you're so talented!!! i use this animation on a website but how can i hide it on mobile device please? thank you ! 🙏
Can i use the animated border on image backgrounds?
Hi. Please tell me how to make this css be called in any of the sections, without adding css to each section?
Can you make the same tutorial for a flex box container
Hello Mr. Jim, how to add shadow on that border animations? What the CSS code?
Can the the animated border effect start only with the hover on the content? How do you handle it?
Hi Jim how r u, i need to know something about SEO because my website not showing google search, how to build SEO if you can ?
Could you show how to do it in the new elementor ? In containers.
elementor king
hello, how to use multiple css animations on one page, if I use several then the animation breaks on the top block
amezing tutorial ..can you plz make a video how to make a custom slider ( image and text ) .. elementor slider is so boring ...
I am having an issue with the colors rotating being almost grayed out. It's almost like there is a translucent gray shape on top. Any ideas?
THE MOOOOOOOOOONNNSSSSSTTTTEEEERRRRRRRRR!!!!
This effect is truly awesome 🙌
But is there a way to make each card have different colors?
When I change for one, all others change as well.
From the CSS snippet, replace the ':root' with 'selector' 🤗
@@jimfahaddigital you're a boss!
@@jimfahaddigital great tutorial, I had the same question. When I put selector on the first css box the animation stops. If I keep root in the first box and put selector in the second box they remain the same colour. Could I have some help? I can contact you directly or through your website if that's better?
Please help me in creating custom products tab in woocommerce... As by default it is showing description, additional information reviews.
But I want animated and easily editable tabs. Please help.
Thanks for the great tutorial. Unfortunately I have trouble understanding the language and I'm struggling to figure out if some parameters are part of the outer column instead of the whole column. When they are + columns you could use the navigator and rename the various objects. I have tried and tried doing it step by step but I can't. Could you please share the .json file?
Thanks anyway even if you can't.
Good job!
Please try again! They are well tested and will work if you follow each step carefully! And, all the .json files of all my Elementor tutorials are coming soon as little paid templates! Thanks!
tks if we need 4 colors not only 2 how to make it, please
can't do this with the new elementor version.. can you update?
how to create this with container in the latest elementor update?
You should Def $ell these custom creations for us to download and use sir Jim!
Bro How To Put That In Post Grid Pls Make The Tutorial For That pls
does it work with gutenberg?
Thx for the tutorial. I recreated it with "containers". However, the "rotating color-bar" in the background (CSS-Code) is not perfectly centered now. How/Where can I adjust the CSS code so that it is in the middle of my card?
Same issue here.
I'll try to create a flex container version of this tutorial soon! No worries!
@@jimfahaddigital problem not function
@@jimfahaddigital really?
I have the same problem as well, Pls Mr.Fahad helps us🙏
How can you make the animation run once?
Can we use html /css/js commands in WordPress. If Yes how? Plz short describe
This works on safari? Or only in chrome?
Just a suggestion.... Should you want to share more elaborate CSS code projects, perhaps consider showing the project but offering it for sell only as a .json file for download.
Awesome! That's really a great idea!! Thanks a mil!! 🤗🤗
I am the first to Comment!!!
Anyone, Please can you share that code snipt ?
👏👏👏✌
Hey thank you for this tutorial! Unfortunately, however, it doesn't work out with Containers! I can't figure out how to apply it to containers that I'm working with..! Any updates would be appreciated!
I'll make a container version of this tutorial very very soon!! Thanks for the heads up!! 😇😍
I sort of tried applying it to containers, it half worked but you could see some jumping of the animated border, so it wasn't as smooth. I will try again when I have some more time for this! It's a really nice animation, so worth having it up to date with elementor. @@jimfahaddigital