Elementor Animated Border | WordPress Elementor Pro Tutorial | Elementor Tips and Tricks
VloĆŸit
- Äas pĆidĂĄn 22. 07. 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.
Perfeito Jim Fahad, seus vĂdeos sĂŁo excelentes. Adorei!
I live in Brazil and have always followed your videos.
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 CZcams today. Thanks mate!
Jim by far has the best tutorials I've ever saw on CZcams man I really appreciate you educating us!!
Man, You are one of kind. I have never seen someone doing great like this. Keep doing. All the very best.!!
Mr Jim, you are one of the best Elementor developer here on CZcams who gives FREE tutorial for everyone. Thank you so much! Keep on sharing your knowledge.
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.
Absolutely brilliant, thanks for the tutorial Jim.
This guy keeps dropping down some bomb content, Love your video Jim Fahad!
I love your videos man... And you are also super interactive on the Facebook group too
Thanks man
you make us grow with your video content. thanks Jim
You just gained a new subscriber! Great work!
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!
I am always waiting for your new uploads. You are awesome man!
Love this. Thank you!
Ooh Geez!!! Best website animation tutorials ever!!! One more subscriber here brother!
Sou do Brasil e esse canal Ă© o melhor sobre design Elementor
Great and amazing videos bro! Thanks
Thanks for making this tutorial â€
This is a Very very useful video đ
Amazing, Thank You.
You have a very creative approach.
I like it. đ
amazing work!
Great as usual, thanks
Thanku man you are the best keep going đ
Love it âșïž
Good tutorial and I am trying to implement everything in my portfilio
You are the best. Love the idea.
Thanks for the very informative tutorial bro! New subscriber here đđđ
Very Good. Thanks
Damn bro đđœđđœ amazing work
this tutorial is very helpful
Great content. You deserve more views and subscribers
Jim you are rock star of elementor
Just Insane.You are best
best CZcams channel â€ïžâŁïž
Well done.
Okie. This is very cool stuff with CSS.
Me alegra encontrar este canal
that's amazing video sir
your intro just awesome
you are a great brother. love you.
take my love,đđđ
from Bangladesh
great job
Nice to share this tricks. Let's try.. đđ
Sensacional, obrigado.
Very good đ
Great
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)?
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 !?
Awesome tutorial Jim! Is there away to make the start of the stripes gradually opaque? (Like a glow)
You're the boss.
you are the best đȘđȘđŻ
yay!! â€ïžâ€ïžđ„đ„
Nice đ
Wow man !
Oh yeah!
Very good, thank you very much. Can you upate this to use the new conteiner feature in Elementor?
Elementor Legend
nice bro
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!
I love you sir
Hey jim, TNX for great content, please explain the CSS code
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
Auto Subscribe đ
Hi, you're so talented!!! i use this animation on a website but how can i hide it on mobile device please? thank you ! đ
Hi. Please tell me how to make this css be called in any of the sections, without adding css to each section?
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?
Hello Mr. Jim, how to add shadow on that border animations? What the CSS code?
hello, how to use multiple css animations on one page, if I use several then the animation breaks on the top block
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 ?
Can i use the animated border on image backgrounds?
Can the the animated border effect start only with the hover on the content? How do you handle it?
Can you make the same tutorial for a flex box container
Could you show how to do it in the new elementor ? In containers.
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.
tks if we need 4 colors not only 2 how to make it, please
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?
elementor king
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!
Can we use html /css/js commands in WordPress. If Yes how? Plz short describe
Bro How To Put That In Post Grid Pls Make The Tutorial For That pls
amezing tutorial ..can you plz make a video how to make a custom slider ( image and text ) .. elementor slider is so boring ...
THE MOOOOOOOOOONNNSSSSSTTTTEEEERRRRRRRRR!!!!
how to create this with container in the latest elementor update?
can't do this with the new elementor version.. can you update?
You should Def $ell these custom creations for us to download and use sir Jim!
How can you make the animation run once?
does it work with gutenberg?
Anyone, Please can you share that code snipt ?
đđđâ
How can I apply this to a button?
I am the first to Comment!!!
This works on safari? Or only in chrome?
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đ
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?