Elementor Creative Portfolio Page with Text Reveal Animation | Card/Image Reveal Effect
Vložit
- čas přidán 7. 09. 2024
- Today, I'll show you how to make Elementor Creative Portfolio Page with Text Reveal Animation and create a Card/Image Reveal Effect.
✅Get Elementor Pro:
makedreamwebsi...
✅Get code snippet for Creative Portfolio Page:
makedreamwebsi...
✅Get this as Ready Template (✨1 CLICK INSTALL✨):
templatish.com...
In this tutorial, I’ll show you how you can make this beautiful one page portfolio section/page on your Elementor/WordPress website. So, when you scroll down you can see the amazing card reveal effect. Also at the very bottom, you can add your email address and all the social links. When someone clicks on this mail, it has been copied to their clipboard. So, they can easily write an email just by pasting that.
If you want, you can get this text reveal effect as ready template from my template shop. Here as a bonus, you'll get both the container and non-container versions. But, if you don't want this templates, you can also start it from scratch.
First, we create the top section of the portfolio gallery with a simple heading and text. Then, we start creating our main sections. Inside each of them, let's first create some content. And make 2 images for our left and right side scrolling animation.
After that, we also need to create the bottom email section and add the "Click to copy" functionality. We have also added some social links at the very bottom.
Finally, let's at a bunch of CSS classes and custom code to make the fully functional image scrolling effect. After the desktop, we have also made it responsive for the tablet and mobile devices.
So, that's how you can create this creative and advanced portfolio design in WordPress. If you enjoy this video and want to get more Elementor tips and tricks, don't forget to like and subscribe.
![SPIN CAROUSEL ON SCROLL - GSAP ScrollTrigger Elementor [No plugin]](/img/n.gif)
How can this be free ..loved this tutorial brother ❤
Glad you liked it
It is not free it costs money to purchase.
If you follow the video, that won't cost anything...
My favorite magician is back! 🤩
Thanks for your always giving great inspiration 😇
Yo Yo Yo!!!! Go ahead rockstar! Sky is the limit!!
Thanks a ton for giving such inspiration 😇😊
thank you very much, it's an amazing effect
Glad you like it!
Your videos are so amazing! Thank you so much
Glad you liked it!
WoW 🤩 giving me so many option for my website 🙌
Hey! I just purchased your template and it looks amazing on desktop but when I open it on my iPhone (13pro max) the pictures are completely messed up, they are not centered and after the animation one picture goes all the way out of the frame (the picture on the right) and the other one ends up covering part of the texts (the image on the left) 🙁
You can email me...
Woooooahhhh 😮😮😮
I love this ❤.
Thank you
You're welcome 😊
Just Loved it! Super awesome tutorial for portfolio showcase!😍
Thank you 😊
Fiiiiiiiiire 🔥🔥🔥🔥🔥
🙏👏👏
WoW!! Thank you for GREAT content! :D This is SO well explained!
You're welcome 😇
Thank you so much, but I have a problem for tablet and phone, the moving text appears the same as it was on PC before setting overflow to hidden, I checked everything and I can't see the problem, anyone any tips? thank you
I have solved it. If anyone is facing similar issue with mobile or tablet view. Open elementor as phone view and in the container that holds the 3 headings. Change that one to no wrap (right under setting Gaps). Hope this helps :)
Thank you, MDW! You're amazing! 👊🔥
Thank you too!
Magician.
🙏🙏
Hi the image portfolio class is not working for me, the images do not move.
Nice tutorial. Thank You so much...
You're welcome!
Great video dude, thanks!
You're welcome!
WOW VERY VERY GOOOD! i wonder if u can tell us how to make blur bg but with container not with sections :)?
❤ hy bro I like your video
Please make more videos for elementor
Amazing work 🎉
Thanks a lot! Yes, I'll make more...
Ok I got it
I'm bigneer in web development when I see you contact I got much more help from your videos to know about elementor
My pleasure... I'm also happy to help...
Very good
Thank you!
amazgin video! do i need to set different classes for all images or always keep the same with right and left and just duplicate and change text and images ?
thanks in advance
You can always keep the same with right and left and just duplicate
thank you for you video but in this everything is working but the copied function is not working
Great Brother, You are amazing ❤
Thanks a lot!
Nice job!! I like it a lot!
You're welcome!
Thank u👍🏻🙏
Welcome
Everything is working fine except 2 things. The view in my tablet is off and when I click the email it doesnt say "copied" and doesnt save to my dashboard. Does anyone know what corrections I can do to make it work?
I think you have missed some step or didn’t put the class names properly… can you please check everything again
It's amazing!!!!!!
Thank you!
can you make a WATCH website tutorial with only elementor not elementor pro...btw bro you ARE awesome
i don't understand why the gradient is going in the background and not in the text ?
Hello, could you tell me how to include the copy button in the codes of your web page.
Thank u so much for the gems
You're welcome!
@your_daily_cry
0 seconds ago
Thanks for the great templates, I purchased them all. There is a conflict between this one: Portfolio-Page-with-Text-Reveal-Effect. and the (the Stacked Card Scrolling) I can't use both templates on the same page :( could you help me to understand where the problem is coming from please ? Thanks much
You can email me
Hi there! Your tutorials are amazing! Thank you
You're welcome! No, I don't have any video about WooCommerce. Maybe I'll make later
@@MakeDreamWebsite thanks a lot!
Hey this is an amazing tutorial, however it does not work with Locomotive Scroll + GSAP + Scrolltrigger
hi there i have faced an issue on my site in responsiveness it is working perfectly but when i switch to mobile the images go out of the screen and only the text is visible please help me i am a professional clothing brand and cannot ignore this issue on mobiles
You can email me your page link
After uploading the 2nd html code the first header is not working. how can i fix it brother ?. please help
Please make tutorial video for content switcher, for tab for like languages switching in post Urdu English Hindi Many more.
Hello teacher. In the editor window, mdw-email-copy works, but when I look at it on the page, the 3 letters overlap.
You can email me your page link
@@MakeDreamWebsite sent using your contact page
Why my animation is not movigng left and right went i preview but all the code is right???
me too did you find any sulotion?
You can email me your page link. I'll have a look
15:40 The hover part is not working for me, when I hover on the contact email it don't show the "clickto copy" but when I click on it it seems to work. The click part works ...
Have you added those classes perfectly?
I have followed step by step process but the animation is not working my images are still can someone please help me out it woud be a great help btw loved the proccess @Make Dream Website
It's not working
I have a question, in Testimonial Carousel when i change '' Slides per view'' nothing changes, and it says the 1 slide per view no matter what I do, do you have any solution for this?
If you see it from the actual preview hopefully it will work...
Bro Its Not working on TAB, What should I do now?
Its been long time am following your video to many inspiration that you but
i have try it right now but its not working theres something wrong
can you help
You can email me your page link
@@MakeDreamWebsite done dear friend
Hi 🎉
Can you make video on elementor AI
Noted! I'll try
where can i find the codes used? 😭
You can find the link in the description below
The template doesn't work properly. The images below the top part are all crunched together and don't animate outwards to show the text and button in the middle.
You can email me your page link.. I'll have a look on that issue...
@@MakeDreamWebsite I emailed you. You never got back to me regarding it not working.. Would love to ge tthis up and running and it should work just fine but it isn't.
@@creativeguyty have you emailed me on contact@makedreamwebsite.com? For some reason I didn't receive your email, can you please send me again...
@@MakeDreamWebsite I ended up getting it to work by deactivating the Elementor plugin and reactivating. I did email you check your junk.
👍👍👍👍👍👍👍👍
Thanks 🙏👏✌😇😇😇
Can you make video on elementor AI
Thank you for your suggestion. Noted!
@@MakeDreamWebsite make video quality bro 🤗😂 from today I am fan of your contant
🎉🎉🎉🎉🎉🎉😊😊😊😊
Not working lyer scroll animation is not working
Can you please repeat everything carefully again. Hopefully it will work!
Bro I'm waiting almost from 13 days you video not coming
😂 ( Create a new video for your contant lover)
Haha.. thanks for your patience... I'll make next one very soon!
@@MakeDreamWebsite I say you some days ago make a video on elementor AI
My page background is not getting black from site setting i have tried so many times😓please help
If it doesn't work, you can set the sections/containers background color to black
@@MakeDreamWebsite ok so can we make this animation from inner section option too??
Its not working