Тёмный
No video :(

Elementor Animated Icon Box Hover Effect | WordPress Elementor Pro Tutorial | Elementor Tricks 

Jim Fahad Digital
Подписаться 125 тыс.
Просмотров 42 тыс.
50% 1

In this tutorial, I'll show you How to create Icon Card Hover Effect using Elementor Page Builder 🔥🔥No additional plugin is required!! 🔥
✅ Get Elementor PRO:
jimfahaddigital.com/e-pro
✅ Get Tutorial Code Snippets:
jimfahaddigital.com/tutorial/...
✅ Get Domain & Webhosting(50% off):
jimfahaddigital.com/hosting
Subscribe Here: bit.ly/JFDtutorials
TIMESTAMP:
0:00:00 Overview
0:00:33 Design the Layout using Elementor
0:10:23 Make the Design Responsive
0:14:31 Adding the Hover Animation
0:23:12 Contact Jim Fahad
In this tutorial, I've shown how to play with icon boxes. I've not used Elementor default icon box. Basically, I've taken two inner sections and overlapped them on top of each other.
Intially we can only see the icon with the big heading. But, when we hover on that, we can the details of the box including heading, paragraph and button.
I have added smooth animation. So over it's really eye soothing. You can use it on several places, speially on the Services section of your website! :)
Thanks for Watching!
✅ Become a WordPress Freelancer Today! Watch this Tutorial:
• Elementor Experts Netw...
✅ 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!

Опубликовано:

 

12 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 54   
@jimfahaddigital
@jimfahaddigital Год назад
🔥Download Exclusive Elementor Templates: kitpapa.com 🔥
@jcarlin596
@jcarlin596 2 года назад
Guys, for anyone having trouble getting the hover effect to work, you need to move the lower(white) Inner Section to sit under the upper (darker) Inner Section. To do this, open the Inner Section editor for the white box and set the margin to -250, auto, 0, auto. This will move the white Inner Section up 250px which puts it under the dark one. Then do the same on the rest of the cards. Hope this helps.
@rt_adk
@rt_adk 2 года назад
doesn't work still
@mohaimeen5519
@mohaimeen5519 2 года назад
Wow! Azaming.. Its work now perfectly.. Thank you Jim Carlin
@johnravi3887
@johnravi3887 2 года назад
Hi Jim, It was a great watch! I think this will be a great addition to my next project. I have used the hover effect before, but I think your method and process are so much better than mine. I will definitely be stealing your tips and process and implementing them in my next project. I really appreciate you sharing this amazing tutorial with the viewers. I am sure it will be a great help for many people like myself.
@josuesalomon20
@josuesalomon20 2 года назад
Another great tutorial! I am learning a lot with your tutorials! I was going through the CSS you wrote, I was able to place the image on top when the customer hovers on the image and also apply a border radius of 10px all around it
@jimfahaddigital
@jimfahaddigital 2 года назад
Awesome!! You rock!!
@rosmelciber
@rosmelciber 2 года назад
Thank you very much for this video great value without a doubt the best and my favorites are when they use css code more videos of these please you are the best I will not get tired of saying it
@olanrewajuoluwadunmininu5644
@olanrewajuoluwadunmininu5644 2 года назад
This is so beautiful.
@Jc-si6pj
@Jc-si6pj 2 года назад
Awesome work again👍👏👏👏
@Crx79Remix
@Crx79Remix 2 года назад
Great tutorial, thanks!
@susangemayel-tapper3794
@susangemayel-tapper3794 2 года назад
Great tutorial Jim!
@nogaefrati
@nogaefrati 2 года назад
Jim, you're great. Gives so much, thank you so much
@jimfahaddigital
@jimfahaddigital 2 года назад
Means a lot! Thank you so much for your appreciation!! 😇😍
@visualmodo
@visualmodo 2 года назад
Very good work!
@barsbingol2119
@barsbingol2119 2 года назад
Thank you man!
@prokassim
@prokassim 2 года назад
so beautiful .
@massimilianoriccio3298
@massimilianoriccio3298 2 года назад
Hi, great tutorial! It would be nice to be able to individually change the color of each icon; It's possible?
@Juanmi397
@Juanmi397 2 года назад
Can you do this using the containers feature?
@md.farukulislam5740
@md.farukulislam5740 2 года назад
I will comment first and then I will watch your video. thank you so much bosss
@MDIsmail-mz4fy
@MDIsmail-mz4fy Год назад
bro i was working on elementor when you said this will work on elementer pro i was about to cry i invested 2-3 hr
@harisahmed1090
@harisahmed1090 Год назад
very helpful
@Jutenas
@Jutenas 2 года назад
Super
@user-os7dz7lj2g
@user-os7dz7lj2g 10 месяцев назад
wow amazing! does this still work on the flex container? can i still use the same css code ? thanks in advance
@codysalazar3939
@codysalazar3939 2 года назад
This is an awesome video! I got it all implemented but the animation is not smooth. Any ideas why?
@9090RF
@9090RF 2 года назад
Great tutorial as usual. Why only for Elementor? Can you create some Bricks builder tutorials? 😊
@georgeandrei3026
@georgeandrei3026 2 года назад
Hello, can we set it to remain on the designed mode when we click it? not to hover it? Thank you
@saleemdigital
@saleemdigital Год назад
Aladdin and the magic lamp .... geeting for u from Baghdad
@IrisiSelamaj-pk1nd
@IrisiSelamaj-pk1nd 5 месяцев назад
Please, can you do this using the containers feature?
@vedavyasdande9193
@vedavyasdande9193 2 года назад
Hi Fahad sir, while using link option for button or any text in elementor I'm getting a Blue line beneath the button or text. How to get rid of this problem? I tried decoration options and border options also.
@sajadamjad4752
@sajadamjad4752 2 года назад
Hi Jim Is it possible to do something like this but with forms?
@gayjosi1
@gayjosi1 Год назад
Hello Jim, I followed it step by step but however it is not doing the hover effect, can you help me?
@emanuelbagirathi4750
@emanuelbagirathi4750 2 года назад
Hey can you please make a tutorial showing us how to integrate a Twitter account and Instagram account using the Soledad theme???
@joekearney2217
@joekearney2217 Год назад
This is my favorite, but can't seem to get it to work with the containers. :(
@Abhinavsingh-en9cd
@Abhinavsingh-en9cd 2 года назад
Fahad sir What skill required to become like you. I have learn to make any wordpress website u also elementor pro and addons throught your tutorials. I also learnt canva pro level. But don't know any coding knowledge. please tell me your skills. please reply i am totally confused. love you sir.
@md.khorshedalam5814
@md.khorshedalam5814 2 года назад
❤️❤️❤️
@muhammadhaseeb1965
@muhammadhaseeb1965 Год назад
its is not working in flex box
@pramodhrppoojary3420
@pramodhrppoojary3420 Год назад
Bro in the new container i can't do your innersection project,
@muhammadaleemkhan4011
@muhammadaleemkhan4011 2 года назад
Why you do not make videos with elementor basic?
@alexlefkowitz
@alexlefkowitz 2 года назад
Jim does this work with new Elementor containers? If so, how do you organize the css?
@gabrielmateus712
@gabrielmateus712 6 месяцев назад
I find the soluction to work in containers
@IrisiSelamaj-pk1nd
@IrisiSelamaj-pk1nd 5 месяцев назад
Can you write it, please?@@gabrielmateus712
@zakariakhan4961
@zakariakhan4961 3 месяца назад
​@@gabrielmateus712 please share your idea, i' m not working in a flex container ..... 😢
@ANFEGUAR
@ANFEGUAR 27 дней назад
@@zakariakhan4961 Change each ".card .elementor-widget-wrap:hover" with ".card:hover"
@phi-peter-heck
@phi-peter-heck Год назад
Hello Jim - I used this for a while on my landing page and now want to convert all of my content into container. Unfortunately, it doesn't work with Containers, do you have an update available for Flexbox Containers? Would be highly appreciated!
@gabrielmateus712
@gabrielmateus712 6 месяцев назад
I find the solucitionnnn!!!!
@itssarayyy
@itssarayyy 4 месяца назад
what is the solution? i'm doing it with containers and it doesn't work :( @@gabrielmateus712
@ANFEGUAR
@ANFEGUAR 27 дней назад
Change each ".card .elementor-widget-wrap:hover" with ".card:hover"
@muhammadzia1666
@muhammadzia1666 17 дней назад
@@ANFEGUAR can u post full code plz
@Waqas_Afridii
@Waqas_Afridii 2 месяца назад
its not working in container
@unionics
@unionics 2 года назад
Thanks for the Good Tutorial but the Black Box is not going.
@lexx1sim
@lexx1sim 2 года назад
Работает не правильно
Далее
Can you REALLY make this 3D EFFECT in Elementor???
10:36
NOOOO 😂😂😂
00:14
Просмотров 4,7 млн
Elementor Info Card with Curved Shape on Hover
5:40
Просмотров 67 тыс.
Google DeepMind's New AI Robot & AGI by 2027!
8:19
Просмотров 8 тыс.