Elementor Animated Border | WordPress Elementor Pro Tutorial | Elementor Tips and Tricks
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 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!
![[MIRRORED] LISA - ROCKSTAR 🎸 MV version #LISA #BLACKPINK #ROCKSTAR](http://i.ytimg.com/vi/-U58DuCCtZk/mqdefault.jpg)
🔥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 TH-cam 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!!!
Just being 100, this is the only reason I came on TH-cam today. Thanks mate!
Mr Jim, you are one of the best Elementor developer here on TH-cam who gives FREE tutorial for everyone. Thank you so much! Keep on sharing your knowledge.
Perfeito Jim Fahad, seus vídeos são excelentes. Adorei!
I live in Brazil and have always followed your videos.
Man, You are one of kind. I have never seen someone doing great like this. Keep doing. All the very best.!!
This guy keeps dropping down some bomb content, Love your video Jim Fahad!
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.
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
I am always waiting for your new uploads. You are awesome man!
Thanks for these high quality tutorials brother!
I love your videos man... And you are also super interactive on the Facebook group too
Thanks man
Jim Fahad you're doing such amazing stuff wit& Elementor. They should probably pay you for this.
You just gained a new subscriber! Great work!
Ooh Geez!!! Best website animation tutorials ever!!! One more subscriber here brother!
Awesome as always. Thank you very much!
Love this. Thank you!
Sou do Brasil e esse canal é o melhor sobre design Elementor
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. 👍
Good tutorial and I am trying to implement everything in my portfilio
Amazing, Thank You.
amazing work!
Great as usual, thanks
Damn bro 👏🏽👏🏽 amazing work
You are the best. Love the idea.
Thanku man you are the best keep going 👍
Love it ☺️
Thanks for the very informative tutorial bro! New subscriber here 👍👍👍
Great content. You deserve more views and subscribers
Jim you are rock star of elementor
this tutorial is very helpful
Me alegra encontrar este canal
Sensacional, obrigado.
Okie. This is very cool stuff with CSS.
Very Good. Thanks
best TH-cam channel ❤️❣️
Well done.
Just Insane.You are best
you are a great brother. love you.
take my love,💕💕💕
from Bangladesh
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)?
that's amazing video sir
your intro just awesome
great job
Very good 👍
Awesome tutorial Jim! Is there away to make the start of the stripes gradually opaque? (Like a glow)
Nice to share this tricks. Let's try.. 😄👍
You're the boss.
Nice 👌
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 !?
Elementor Legend
Great
Oh yeah!
nice bro
Wow man !
Hey jim, TNX for great content, please explain the CSS code
Very good, thank you very much. Can you upate this to use the new conteiner feature in Elementor?
I love you sir
you are the best 💪💪💯
yay!! ❤️❤️🔥🔥
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?
Hey Jim! how can i do if i want to make this effect in hover?? thank for your videos!
Hi, you're so talented!!! i use this animation on a website but how can i hide it on mobile device please? thank you ! 🙏
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
Hi. Please tell me how to make this css be called in any of the sections, without adding css to each section?
elementor king
Can you make the same tutorial for a flex box container
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?
Could you show how to do it in the new elementor ? In containers.
amezing tutorial ..can you plz make a video how to make a custom slider ( image and text ) .. elementor slider is so boring ...
You should Def $ell these custom creations for us to download and use sir Jim!
Hello Mr. Jim, how to add shadow on that border animations? What the CSS code?
tks if we need 4 colors not only 2 how to make it, please
hello, how to use multiple css animations on one page, if I use several then the animation breaks on the top block
Can the the animated border effect start only with the hover on the content? How do you handle it?
Can i use the animated border on image backgrounds?
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!
So I'm having trouble with the flex box adjusting the minimum height. whenever I adjust the height the 3 boxes in the middle also change height? I'm not sure how to work around this issues. Does anyone know how to solve this issue?
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 ?
THE MOOOOOOOOOONNNSSSSSTTTTEEEERRRRRRRRR!!!!
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🙏
Bro How To Put That In Post Grid Pls Make The Tutorial For That pls
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.
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?
how to create this with container in the latest elementor update?
How can you make the animation run once?
Can we use html /css/js commands in WordPress. If Yes how? Plz short describe
can't do this with the new elementor version.. can you update?
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
👏👏👏✌
does it work with gutenberg?
I am the first to Comment!!!
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!! 🤗🤗
Jim sir.. Please make live share market related service website