Interactive Portfolio using Elementor Flex Container | WordPress Elementor Pro Tutorial ( Tricks )

In this tutorial, I'll show you How to Make an Interactive Portfolio Showcasing section using Elementor Pro. It's 100% Mobile responsive using Elementor Page Builder.
✅ Get Elementor:
jimfahaddigita...
✅ Get Tutorial Images & Code Snippets:
jimfahaddigita...
✅ Get Domain & Webhosting(70% off):
jimfahaddigita...
Subscribe Here: bit.ly/JFDtuto...
0:00:00 Overview
0:01:02 Create Layout using Elementor Flexbox
0:06:08 Making it Responsive
0:10:52 Making the Portfolio Interactive
Thanks for Watching!
✅ Become a WordPress Freelancer Today! Watch this Tutorial:
• Elementor Experts Netw...
✅ Get Domain & Webhosting(70% off):
jimfahaddigita...
✅ Hire a Pro Web Developer:
jimfahaddigita...
-----------------------------------------------------------------------------
And, Here are other Full Website Creation Tutorials using ELEMENTOR+WORDPRESS:
Elementor Masterclass 2022:
• How To Make A Digital ...
Portfolio Website using Elementor 2022:
• How To Make A STUNNING...
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
About:
10 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 2022 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:
jimfahaddigita...
Have a great day!

[@jimfahaddigital]

🔥Download Exclusive Elementor Templates: kitpapa.com 🔥

[@EricB-vh8hi]

This trick is so versatile! You can apply the "my-img" class to containers as well. It scuffs up your margins but there are a ton of work arounds for experienced designers. This is a God Tier solution for custom custom tabs! Thanx Jim!

[@ashkalimpact]

Finally...💃💃 Thanks so much God bless you...much love from Nigeria ❤️❤️

[@jimfahaddigital]

Thanks a million!!

[@Arun-je2kt]

Bro. Post, how to create Vertical menu bar.

[@jimfahaddigital]

Noted! Thank you so much!

[@highsite]

I did it now on my website. Looks always beautiful job.

[@mehedeebd]

Please make more videos like this

[@user-le8lm9dg9c]

my notes: desktop: - just need to change the width to1120 of the container instead of adding padding to the sides 1:40 - use typography from my own global settings 3:32 ipad - don't need to adjust my padding of the big container if used my own css code "pad-s" 6:41 - use typography from my own global settings 7:00 mobile - for the container with icon and text and I can do horizontal direction and use wrap then percentages to each widget based on how many columns I want (prob 35% to have 2 columns) 7:52 - use typography from my own global settings 8:48

[@alexandercastanedatamayo7767]

This type of video has been a great help to me. Thanks for making them, I can't look forward to watching the on coming videos.

[@ronald6465]

Another amazing and well done video. 👏 👏👏 Thank you sir

[@iagosouza9704]

You are a jewel Jim Fahad, i hope you make alot money, always help me!

[@mackyangeles]

Hi Jim, I tried this. I have 3 Icon Boxes and 3 Images... the issue is the icon boxes and images don't sync properly. This 2nd icon box shows the 3rd image instead of the 2nd image. And the 3rd icon box doesn't show any image. Please help me!

[@TendenciasDigitalesIA]

Jim soy de Perú, gracias por compartir tus conocimientos de verdad me has ayudado mucho, Bendiciones.

[@jimfahaddigital]

¡Muchas gracias por compartir! ¡Sigue apoyándome, Víctor!

[@WEBnew228]

Спасибо братуха,из из другой страны,подписался и лайк

[@gayathrisuresh1364]

can you please explain me using button image option with this method?

[@cryptofoliu6850]

Thank you, it has been very usefull

[@yairshalit6047]

you are awsome plz keep it up!!!! make more cool interactive things like that!!! tyy!!!

[@blueinarts_]

Hello, How can I implement this with a plugin and without using css code?

[@learnearn3166]

Thank you for such a nice tutorial 😀

[@nicoleluyten9385]

Beautiful video, as usual! Could you make a video about the elementor magic scroll global addon? It' very difficult to find any good material on that, and it would be interesting to see what you can achieve with it. Thanks a lot for all your hard work!

[@primalscream40]

Thanks for sharing this. Very much appreciated

[@techiebhaii]

Really Like Your Work Love From Pakistan

[@youtub4082]

Wow!! This is awesome, Fahad vai !

[@tersosevket2060]

adam keee!!

[@marazzak1811]

Your regular viewer from BD🇧🇩. You are a gem❤

[@jimfahaddigital]

Thanks a billion brother!

[@kamrul5286]

Wow! Thank a lot brother ❤️ from 🇧🇩

[@jimfahaddigital]

You're most welcome brother!!

[@mayankjha2399]

Love your content, love from India

[@jimfahaddigital]

Means a lot! Thank you so much!

[@arlinn13]

sir, can u make a title of description about all image i hover on it / click in mobile i think if we hover on it in specific title , and change the image, and pop up some description about the page. I think is a really complete animation i ever seen

[@Tehpa13]

Fantastic Tutorial.

[@DevObinna]

Wow!! This is awesome, Jim!

[@jimfahaddigital]

Thank you so much. Means a lot!!

[@inamullah4711]

hey you are amaizing bro i am watching you from pakistan and i humble request you just make a video on animination for text and column which is very important for us. i am waiting for it.

[@stanfordlee]

very helpful!. Thank you, Jim.

[@jimfahaddigital]

Means a lot!

[@prokassim]

Amazing , thank you very much.

[@JeanBaptisteChabi]

Thanks for the guide, the 6th is not working for me

[@eduardosariego2603]

Thanks, I need this tutorial 🙏🙏🙏

[@jimfahaddigital]

Awesome! Thank you so much!

[@hafijur191]

Awesome Video thanks ❤️

[@mochammadanggifaisal9104]

How bro your video so amazing, and for the next video create how to sell ticket with elementor..thanks jim

[@AllenLu]

this is the kind of video that I like!

[@jimfahaddigital]

Wow! Love to hear that!

[@shuvokumar3795]

amazing video jim fahad sir. Big Fan

[@jimfahaddigital]

Thank you so much brother!

[@shahidiqbal-jv4fh]

Again 1st comment sukar Allhmdliah ❤️🔥

[@jimfahaddigital]

You rock Shahid brother! 🔥

[@arenawebrd]

Thank you, greate as always 👍

[@jimfahaddigital]

Means a lot!! I really love the way you support always!

[@NitinMistry-lg8ds]

not working on elementor Flexbox container (3.18.3 ) updated container

[@nelsonopeyemi2172]

Can you make a video on how to add image as left and right side arrow in image carousel or slide

[@KangteDevelopers-re4wd]

Thankyou sir❤

[@ZHARCO]

Thank you

[@alexandercastanedatamayo7767]

¡Gracias!

[@thilagavathichandru1569]

potential guy amazing insight

[@jimfahaddigital]

Thank you so much!!

[@mohammedalbalaawi1426]

Thank you, Can I use this css code without having Elementor pro ?

[@quaojoshi859]

bro can u help me pls i design a 3 inner section column on destop responsive in elemntor and i want that 2 inner section column in tablet view ? how can it possible pls help

[@mithunv4564]

Hii jim i need your help... How to save Vcf file by clicking button in wordpress. I mean i want to save contact details like mobile no. Email id profile url . Company name etc . For smart business card

[@hassankhan-vu1pt]

Hay Jim Fahad i need a help can you help me about this tutorial..😟

[@asifislam3720]

Amazing brother ❤

[@jimfahaddigital]

Thank you so much for your kind appreciation!

[@healthadvisor6969]

Awesome 👍

[@jimfahaddigital]

Thank you so much!!🎉

[@kishanv7546]

hello jim can you please make one video on signup page with profile under the profile we can use profile pic, banner pic name detail etc . and login page, also edit profile.

[@smt7270]

Nice video Thanks you sir

[@jimfahaddigital]

Means a lot!!❤

[@TheInspireGuy]

একটা ভিডিও বানান কিভাবে। কোনো কলেজ বা স্কুল এর ওয়েবসাইট বানাবো। সার্ভিস দেবার জন্য

[@aymonshik]

can you plz make a tutorial where instead of " hover changes the images, make it change locations on a multi-location map", like a store locator?

[@almahmud1834]

nice tutorial

[@jimfahaddigital]

Means a lot!! Love the way you appreciate always!

[@coderprojahangir2103]

You are pro

[@jimfahaddigital]

Thanks brother!! ❤🎉

[@user-fo1es6br5i]

CAN I DO THIS WITHOUT USING FLEXBOX?

[@kovinhas]

You know how to use GSAP on Wordpress and Elementor?

[@iure]

Good 🔥🔥🔥

[@jimfahaddigital]

Yayy!! Thanks brother!

[@FlaviusLaidleyslowlyjamaica]

Can I put a button and activate a link on the image

[@alsajib311]

thanks bro

[@jimfahaddigital]

Thank to you brother!

[@rswebmarketing]

But there is a widget on elementor pro who do that without adding html or css. It's called "tabs", with nested containers.

[@admirecreations_tech]

thats limited with only able to add text inside it though right?

[@rswebmarketing]

No, texts and whatever you want.@@admirecreations_tech

[@techiebhaii]

Hi Bro Please Create a Tutorial On How to Create a Movie and Courses Website

[@ahsanwithsaudia_arabia]

Bro i want to apply this type of trick but on opposite means that if the user do hover on image when text should be change can you tell me how can i this?

[@Amitroy0000]

try transparent background button for selector tab.

[@advanced-developers]

Good

[@jimfahaddigital]

Thank you so much!!

[@mcfloatmcfly575]

Can I still use it with sections?

[@KorayYurdayAgathon]

I tried to apply all the steps in the video and test it out. An interesting result occurred, there was a shift where the fourth image on the right corresponded to the third image on the second header row, instead of the first row on the left. I tried a few things, but couldn't solve the problem. It would be helpful to know why the problem occurred and receive some assistance.

[@Bharathi-py9bp]

Same problem

[@dariokur2]

Can you achieve the same without code?

[@Majestomart]

JAHAD THIS IS NOT WORKING ON MY END

[@sademotion3614]

Fast view brother

[@jimfahaddigital]

You're so fast!! Awesome!

[@mayankjha2399]

Brother can we add featured products instead of images?

[@jimfahaddigital]

Their wrapper container should have the same class name like the image. It should work!

[@deshlighthabib]

আস্সালামুআলাইকুম ভাইয়া আমার একটা চাকুরির খুব দরকার। আপনার সাথে কিভাবে যোগাযোগ করতে পারি।

[@jimfahaddigital]

Feel free to email me at [e-mail] with your portfolio. Thanks!! 😇

[@rossinidesigner1]

Didn't work

[@dhansirimediacenter7950]

5views

[@jimfahaddigital]

Yayy!!