No video :(

Long Image Scrolling within Mockup using Elementor | WordPress Elementor Tutorial | Elementor Tricks

Подписаться 125 тыс.

Просмотров 51 тыс.

50% 1

[No Coding, No Plugin] In this tutorial, I'll show you How to Create Scrolling Long Portfolio Images within Desktop Mockup using Elementor FREE Page Builder 🔥🔥
✅ Get Elementor PRO:
jimfahaddigital.com/e-pro
✅ Get iMac Mockup Image:
drive.google.com/file/d/1nszn...
✅ Get Domain & Webhosting(50% off):
jimfahaddigital.com/hosting
Subscribe Here: bit.ly/JFDtutorials
TIMESTAMP:
0:00:00 Overview
0:00:34 Design the Layout using Elementor
0:04:26 Adding Image within the Mockup
0:09:58 Contact Jim Fahad
In this tutorial, I've shown how to scroll through long-format images. Often we use longer hight images to showcase our portfolios. It's pretty difficult to adjust them within a desktop mockup. That is why I've made this Elementor trick. By using this method, you'll be able to scroll through longer images within Mockup without any Coding.
You can apply to any longer images. But it suits great on Portfolio section OR your whole Elementor Portfolio 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:
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 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

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 102

@jimfahaddigital Год назад

🔥Download Exclusive Elementor Templates: kitpapa.com 🔥

@abdullahmohibahmed0673 9 месяцев назад

How do I put these effects in popup image?

@khattak-xx6om 16 дней назад

you are the best person i have ever seen on youtube giving very precise and correct information.hatsoff...

@ozorhenry 2 года назад

Your level of research is high, thanks for this great tutorial.

@hairstonwilliams2770 2 года назад

Love all of your innovative ideas. Thanks so much for what you do. It's helped me greatly with my freelance work.

@georgekoutsoudis4108 2 года назад

You are awesome my friend! Thanks for the tutorial! Keep up the good work!

@germanungo9435 5 месяцев назад

OMFG you rock! This tutoril is GREAT!

@franciscoperez-by3hh 2 года назад

Thank you very much Jim, excellent tutorial.

@johnravi1683 2 года назад

Hi Jim, What an amazing share! I am a regular Elementor user as well, and I learn a lot from your videos. I think you do an amazing job with your videos and I have been able to use Elementor better after watching your videos. I think this was a great tutorial as well. I gained a lot of insights from this video, and I will be implementing this tutorial in my project very soon. Thanks a lot for such an amazing video, it was a great watch.

@MelissaADavis 2 года назад

Awesome tutorial, and thank you so much for sharing 😊.

@irfanhossain6597 2 года назад

Awesome tutorial. Thank you 💗

@CreatureMorphling 2 года назад

Thanks for sharing. This is what I’m looking for.

@misttea9136 Год назад

Thank you so much for being generous. I am new sub here. You are an angel.

@mhthmusicvideos Год назад

Very clever Jim, well done!

@mikebb0653 2 года назад

Very nice, now i got this, thanks man.

@sherlocksam1 2 года назад

your tutorial always helpful! thanks from indonesia 😁

@CyberImpact7 2 года назад

The best channel on youtube! Could you do some gsap effects including locomotive scroll and stuff?

@dinukalakmal1830 2 года назад

Wow great trick. Thnak you! ❤️

@itsmesumonbhai Год назад

I like your All videos... Thank You Bro and Take Love

@carlosseijas9841 2 года назад

Awesome! Thank you

@msshuvo9826 2 года назад

Nice video and very helpful Thank you so much

@MohammadMosarofHossain-kz9nh День назад

I learned something really really interesting. You are the man..........................thanks.

@dhanikaamarasekera9110 8 месяцев назад

Thanks for this great tip brother!

@raoulshah 2 года назад

Nice tutorial again 👍🏽👍🏽👍🏽

@subgraffix 9 месяцев назад

Great tutorial - thanks bud

@OmarWaleed Год назад

Very helpful tutorial ;) thanks

@jimmynkhata69 Год назад

My Mentor and Tutor. Thank you sir

@filipecarvalho1569 Год назад

Thank you so much!!! 😁

@WilliamPalomino 2 года назад

Thanks for sharing Bro.. God Bless U..

@Arslan2k16 2 года назад

Waiting this tutorial from so long 🫡❤️❤️

@sidneyjohnson6895 2 года назад

Thank you, Jim!!! ❤️ This!!! Glad to see that you answered my question concerning cinema-graphs in computer mock-ups. It provides a more Real World application to work that's being done. I Totally Appreciate it!!! Is it possible to do a Real Estate Listings website with ACF and Dynamic Pages? All the Best! 🏆🏆🏆Take Care. 😊 🚀 🚀 🚀

@DanZL1 2 года назад

Thanks for the video Jim, your content is amazing. Can we do this without using the FLEX BOX?

@webdevelopment801 2 года назад

It's incredible brother

@lucasalvessilva891 2 года назад

well done man, I already implemented this on my website, thank you

@WladymirSerrano 2 года назад

Lucas, funcionou direitinho no mobile? No que fiz apresentou problemas

@zamanahmed5806 2 года назад

Thank You So Much

@ahzu7022 2 года назад

Thank you Brother

@akbarpura8 2 года назад

Best work keep it 💓💓💓💓

@romelamin251 2 года назад

Very important tutorial

@gleideclausen6739 Год назад

Tanks so much…..

@jenithajeyakumar105 2 года назад

super bro vera level

@mdrakibhossen7868 Год назад

really great

@mhasancoder 2 года назад

Great tricks

@peppermusic2479 Год назад

Hi Jim, thank you so much for this special class. Doubt... How do I make the options appear in the container, when hovering over the mouse, duplicate as in this class. Your classes are amazing!

@ibrahimrakib9480 2 года назад

Love u brother ❤️❤️❤️

@chakana 2 года назад

Crack my Man, good efect and visual sensation.

@umerfarooq3176 2 года назад

thank you bro

@xenophonvenios 2 года назад

Wow I love your videos! Can you make a tutorial on something similar but with only 1 computer and slider to change images?

@rudolfa835 2 года назад

great video

@user-kh1ih3kk6x 2 года назад

thanks alot for this video can i use this image to commercial use?

@mbotidemuwak2671 2 года назад

This is cool

@parhammadadi4129 5 дней назад

amazing!

@jimfahaddigital 2 дня назад

Thank you! Cheers! ❤️❤️

@gideonobinomea6276 10 месяцев назад

Amazing

@jimfahaddigital 10 месяцев назад

Thank you! Cheers!

@user-bv7nm7re8e 8 месяцев назад

Love you sir from Pakistan

@visualmodo 2 года назад

TOP!

@tradidigital Месяц назад

Hello, Thank you very much for this interesting video and the other excellent work you do. I tried to implement this but with a video. Unfortunately I dont have sound/voice when I play it as background. Any ideas?

@arafat_emon_ctg 2 года назад

Thanks bhai, ami ethodin eitay khujsilam 😀

@bmdesignmaroc9543 2 года назад

Good

@DanZL1 2 года назад

Hi Jim, I was able to make the same scrolling effect using the flexbox container. However there is a HUGE space below the container. How do I get rid of that space? Another problem discovered is that the content positioning does not work on all browsers. :(

@MARKETINGSRBIJA Год назад

Bravoooooo

@yogiselevate 2 года назад

Can you make a tutorial like this one however with the inner section?, because this is in beta at the moment.

@umashankarv3958 2 года назад

Can you explain how the 91.6% was calculated for the ratio?

@akbarpura8 2 года назад

💞💞💞💞💞 best

@ruhul-blog 6 месяцев назад

Wow,

@robertrado7576 2 года назад

Hi, Thanks! Does it work if you zoom in or zoom out? Beause for me it doesn't. :( That looks for me a bit unprofessional. Or I did something wrong? Thanks! Rob

@navdeepsingh5649 2 года назад

hello sr how this section turn into slider it will be more efficient like we can use this section as a portfolio so kindly tell me regarding this

@Ahmad-Karim 10 месяцев назад

Can we design this without changing the flexbox container in elementor?

@WladymirSerrano 2 года назад

Sensational. I did exactly as in the video and it was perfect on desktop, but on mobile the image is not displayed. The image only appears if I change the size of the space widget, but since I can't use % in the size of the space widget, it doesn't look good on mobile.

@deut 2 года назад

Yeah @Jim Fahad how would you make it work for mobile?

@mhasancoder 2 года назад

He already showed what should do for the mobile device

@WladymirSerrano 2 года назад

@@mhasancoder Yes, but the way it does in the video doesn't work properly outside of Elementor.

@leearmstrong3 11 месяцев назад

Can I ask why you used a spacer?

@ivangeorgiev3757 2 года назад

Hello, i dont have options in settings for flexbox container why?

@franktielemans6624 2 года назад

Great stuff and without one line of CSS. Very very clever. You can even add a background overlay with a gradient white to transparent to simulate some glare effect :-) Can you explain how the 91.6% width and 51.5% top padding was calculated for the ratio? Or was this done by eyeballing and trail and error? Can you do the same for a tablet and phone mockup, maybe a TV screen mockup with a video?

@AmandaGentherTV Год назад

Can we do something similar but instead of an image, can we actually insert a video?

@Roshankv2002 4 месяца назад

In this, whatever image you set will remain fixed.What if I want to add this product image on a single page?

@johnikudehinbu Год назад

Thank you for this Jim... But what if we want to use a smartphone mockup or desktop mockup... Instead of a PC Mockup... How will we get the mockups?

@lutfurrahmantanvir Год назад

You can do it by following this. You have to use a smartphone instead of mac and set the width by calculating on your own.

@md.anisurrahmananik6780 2 года назад

assa vai website upor theke niche scroll korle bg image left theke right a jay r nich theke upore scroll korle bg image right theke left a jay eita kivabe kore?( motion effect er kotha boltsi na ami)

@RicardoIvanov Год назад

This trick is not working properly in the newest version of Elementor Pro. When you finished to setup all the tutorial, then select the container with the background image, go to advanced tab and add a CSS additional code: selector { transition: 3s; } Good job! :)

@munteanrazvan Год назад

thank you bro

@dertester1 Месяц назад

I just can't get it to work with different dimensions on the screen. The image and the muckup screen move in different amounts, so it wont cover it properly...

@stavrosvorkas2608 Год назад

followed your guide EXACTLY and when you hover it just jumps to the bottom of the image. any workaround (aka it doesn't scroll)?

@sfod1990 Год назад

mine too bro did you fix this?!

@faiza_aiza Год назад

Hello Fahad I Hope you are doing well. I want to tell you this way is not work on new version of Elementor pro. Kindly make a new tutorial on it.

@rayyanbahaa8610 Год назад

I tested this video and it did not work for me unfortunately the transaction duration when I hover on the image does not work .. When I click on the image it happens swap between up center and botm center.. Everyone help me

@zulfiqarAlig Год назад

Did not work in my laptop 😭💻

@niraj_raut 2 года назад

After that my page is loading very slow

@Roshankv2002 4 месяца назад

Each page will have to be created separately for each product!😳

@kristapskk3409 Год назад

PROBLEM! After some Elementor and elements updates the scroll stops working. It just jumps to bottom immediately without scroll. Tried to recriate it but nothing. Anyone else facing this?

@TheNeonAir Год назад

yeah, just tried it..still not working.

@cubedev4838 2 года назад

can i make this using free elementor??

@RS-mu5cy 2 года назад

Yes

@rameensuresh Год назад

Scrolling still in fast even I change into 3sec

@franciscoperez-by3hh 2 года назад

Hello @UCToSQO0Xu4FU3JuZTvIgxbw ❤️. Could you make a tutorial on how to create a website for Real Estate. In Codecanyon I made some Themes in this niche, but like you I am afraid that the person who created the Theme will not perform more Updates or abandon the project, you know how uncomfortable it would be to tell your client that his site is not going to work anymore , it would be disappointing. You could create something with element, Crocoblocks or ACF or any other way you know. Greetings in advance.