Elementor Creative Portfolio Page with Text Reveal Animation | Card/Image Reveal Effect

Поделиться
HTML-код
  • Опубликовано: 6 июн 2023
  • 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:
    makedreamwebsite.com/elemento...
    ✅Get code snippet for Creative Portfolio Page:
    makedreamwebsite.com/elemento...
    ✅Get this as Ready Template (✨1 CLICK INSTALL✨):
    templatish.com/template/eleme...
    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.

Комментарии • 95

  • @gujjarch83
    @gujjarch83 Год назад +8

    How can this be free ..loved this tutorial brother ❤

    • @MakeDreamWebsite
      @MakeDreamWebsite  Год назад

      Glad you liked it

    • @sabadesigns
      @sabadesigns 6 месяцев назад

      It is not free it costs money to purchase.

    • @MakeDreamWebsite
      @MakeDreamWebsite  6 месяцев назад +1

      If you follow the video, that won't cost anything...

  • @saasjunction
    @saasjunction Год назад

    Just Loved it! Super awesome tutorial for portfolio showcase!😍

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

    WoW 🤩 giving me so many option for my website 🙌

  • @ivonablazun2532
    @ivonablazun2532 11 месяцев назад +1

    Your videos are so amazing! Thank you so much

  • @deduice
    @deduice Год назад +1

    Woooooahhhh 😮😮😮
    I love this ❤.
    Thank you

  • @zoherdaher4059
    @zoherdaher4059 21 день назад

    thank you very much, it's an amazing effect

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

    WoW!! Thank you for GREAT content! :D This is SO well explained!

  • @ballsislife6018
    @ballsislife6018 2 месяца назад +1

    Hi the image portfolio class is not working for me, the images do not move.

  • @Thiago-pi7lu
    @Thiago-pi7lu 10 месяцев назад

    Thank you, MDW! You're amazing! 👊🔥

  • @papayawebmedia
    @papayawebmedia Год назад

    Nice job!! I like it a lot!

  • @AmanAman-cm3nz
    @AmanAman-cm3nz 11 месяцев назад

    Nice tutorial. Thank You so much...

  • @globetrotterot
    @globetrotterot Год назад +1

    My favorite magician is back! 🤩

    • @MakeDreamWebsite
      @MakeDreamWebsite  Год назад +1

      Thanks for your always giving great inspiration 😇

  • @lejeunebilel
    @lejeunebilel Год назад +3

    Fiiiiiiiiire 🔥🔥🔥🔥🔥

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

    Hello, could you tell me how to include the copy button in the codes of your web page.

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

    It's amazing!!!!!!

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

    WOW VERY VERY GOOOD! i wonder if u can tell us how to make blur bg but with container not with sections :)?

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

    Great Brother, You are amazing ❤

  • @dipshanyogeshwaran3834
    @dipshanyogeshwaran3834 7 месяцев назад

    After uploading the 2nd html code the first header is not working. how can i fix it brother ?. please help

  • @Art-01
    @Art-01 10 месяцев назад

    Thank u👍🏻🙏

  • @codesort5384
    @codesort5384 3 месяца назад

    thank you for you video but in this everything is working but the copied function is not working

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

    i don't understand why the gradient is going in the background and not in the text ?

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

    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

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

      You can always keep the same with right and left and just duplicate

  • @AminulIslam-pn1ke
    @AminulIslam-pn1ke 9 месяцев назад

    Bro Its Not working on TAB, What should I do now?

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

    Thank u so much for the gems

  • @sofianora7063
    @sofianora7063 Месяц назад +1

    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) 🙁

  • @AbdulAhad-ff4db
    @AbdulAhad-ff4db 11 месяцев назад

    can you make a WATCH website tutorial with only elementor not elementor pro...btw bro you ARE awesome

  • @TheIndica
    @TheIndica 7 месяцев назад

    Hey this is an amazing tutorial, however it does not work with Locomotive Scroll + GSAP + Scrolltrigger

  • @mythologx
    @mythologx 7 месяцев назад

    @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

  • @hyggepress
    @hyggepress Год назад

    Hello teacher. In the editor window, mdw-email-copy works, but when I look at it on the page, the 3 letters overlap.

    • @MakeDreamWebsite
      @MakeDreamWebsite  Год назад +1

      You can email me your page link

    • @hyggepress
      @hyggepress Год назад

      @@MakeDreamWebsite sent using your contact page

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

    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?

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

      If you see it from the actual preview hopefully it will work...

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

    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 ...

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

    Hi there! Your tutorials are amazing! Thank you

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

      You're welcome! No, I don't have any video about WooCommerce. Maybe I'll make later

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

      @@MakeDreamWebsite thanks a lot!

  • @faisalalibhattifaisalalibh1396
    @faisalalibhattifaisalalibh1396 Год назад +1

    ❤ hy bro I like your video
    Please make more videos for elementor
    Amazing work 🎉

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

    Please make tutorial video for content switcher, for tab for like languages switching in post Urdu English Hindi Many more.

  • @user-tz2wx4gz2x
    @user-tz2wx4gz2x Год назад

    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

  • @Shawn-ol2lq
    @Shawn-ol2lq 9 месяцев назад

    Why my animation is not movigng left and right went i preview but all the code is right???

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

    My page background is not getting black from site setting i have tried so many times😓please help

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

      If it doesn't work, you can set the sections/containers background color to black

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

      @@MakeDreamWebsite ok so can we make this animation from inner section option too??

  • @user-xf8tk8np2h
    @user-xf8tk8np2h Год назад

    👍👍👍👍👍👍👍👍

  • @faisalalibhattifaisalalibh1396

    Hi 🎉
    Can you make video on elementor AI

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

    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.

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

      You can email me your page link.. I'll have a look on that issue...

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

      @@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.

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

      @@creativeguyty have you emailed me on contact@makedreamwebsite.com? For some reason I didn't receive your email, can you please send me again...

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

      @@MakeDreamWebsite I ended up getting it to work by deactivating the Elementor plugin and reactivating. I did email you check your junk.

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

    🎉🎉🎉🎉🎉🎉😊😊😊😊

  • @jwjw24
    @jwjw24 3 месяца назад

    where can i find the codes used? 😭

    • @MakeDreamWebsite
      @MakeDreamWebsite  3 месяца назад +1

      You can find the link in the description below

  • @faisalalibhattifaisalalibh1396

    Can you make video on elementor AI

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

    Bro I'm waiting almost from 13 days you video not coming
    😂 ( Create a new video for your contant lover)

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

      Haha.. thanks for your patience... I'll make next one very soon!

    • @faisalalibhattifaisalalibh1396
      @faisalalibhattifaisalalibh1396 11 месяцев назад +1

      @@MakeDreamWebsite I say you some days ago make a video on elementor AI

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

    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

  • @jimfahaddigital
    @jimfahaddigital Год назад +1

    Yo Yo Yo!!!! Go ahead rockstar! Sky is the limit!!