Long Image Scrolling within Mockup using Elementor | WordPress Elementor Tutorial | Elementor Tricks
ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2024
- [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!
🔥Download Exclusive Elementor Templates: kitpapa.com 🔥
How do I put these effects in popup image?
you are the best person i have ever seen on youtube giving very precise and correct information.hatsoff...
Your level of research is high, thanks for this great tutorial.
Love all of your innovative ideas. Thanks so much for what you do. It's helped me greatly with my freelance work.
You are awesome my friend! Thanks for the tutorial! Keep up the good work!
Awesome tutorial, and thank you so much for sharing 😊.
Thank you very much Jim, excellent tutorial.
Awesome tutorial. Thank you 💗
Thanks for sharing. This is what I’m looking for.
Very clever Jim, well done!
OMFG you rock! This tutoril is GREAT!
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.
Awesome! Thank you
Very nice, now i got this, thanks man.
Thank you so much for being generous. I am new sub here. You are an angel.
Wow great trick. Thnak you! ❤️
Nice video
and very helpful
Thank you so much
Nice tutorial again 👍🏽👍🏽👍🏽
Thanks for this great tip brother!
Thank you so much!!! 😁
well done man, I already implemented this on my website, thank you
Lucas, funcionou direitinho no mobile? No que fiz apresentou problemas
I like your All videos... Thank You Bro and Take Love
Great tutorial - thanks bud
Very helpful tutorial ;) thanks
your tutorial always helpful! thanks from indonesia 😁
My Mentor and Tutor. Thank you sir
Thank You So Much
It's incredible brother
The best channel on youtube! Could you do some gsap effects including locomotive scroll and stuff?
Thanks for sharing Bro.. God Bless U..
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. 😊 🚀 🚀 🚀
Waiting this tutorial from so long 🫡❤️❤️
super bro vera level
really great
Thank you Brother
Best work keep it 💓💓💓💓
Very important tutorial
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!
Great tricks
Love u brother ❤️❤️❤️
thank you bro
great video
Tanks so much…..
Thanks for the video Jim, your content is amazing. Can we do this without using the FLEX BOX?
This is cool
Amazing
Thank you! Cheers!
Wow I love your videos! Can you make a tutorial on something similar but with only 1 computer and slider to change images?
Crack my Man, good efect and visual sensation.
thanks alot for this video can i use this image to commercial use?
Love you sir from Pakistan
Good
TOP!
Thanks bhai, ami ethodin eitay khujsilam 😀
Bravoooooo
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. :(
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?
💞💞💞💞💞 best
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
Can you make a tutorial like this one however with the inner section?, because this is in beta at the moment.
Can you explain how the 91.6% was calculated for the ratio?
Wow,
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.
Yeah @Jim Fahad how would you make it work for mobile?
He already showed what should do for the mobile device
@@mhasancoder Yes, but the way it does in the video doesn't work properly outside of Elementor.
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
Can we design this without changing the flexbox container in elementor?
followed your guide EXACTLY and when you hover it just jumps to the bottom of the image. any workaround (aka it doesn't scroll)?
mine too bro did you fix this?!
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?
Hello, i dont have options in settings for flexbox container why?
Can we do something similar but instead of an image, can we actually insert a video?
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...
Can I ask why you used a spacer?
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! :)
thank you bro
In this, whatever image you set will remain fixed.What if I want to add this product image on a single page?
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?
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.
Did not work in my laptop 😭💻
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)
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.
Each page will have to be created separately for each product!😳
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
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?
yeah, just tried it..still not working.
can i make this using free elementor??
Yes
After that my page is loading very slow
Scrolling still in fast even I change into 3sec
Hey, it's not working anymore. Please check and reply with a new solution 🙌
same for me here. scrolling duration effect is not working anymore :((
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.