HIGHLY RICH ANIMATION: Creative Portfolio Page/Section Design in WordPress Website with Elementor
Vložit
- čas přidán 30. 07. 2024
- In this tutorial, I'll show you how to make a creative Portfolio Page/Section Design in WordPress Website with Elementor.
✅Get Elementor Pro:
makedreamwebsite.com/elemento...
✅Get Domain & Webhosting(SAVE 50%):
makedreamwebsite.com/bluehost
✅Get all code snippets:
makedreamwebsite.com/creative...
✅Get creative templates on my Template Shop:
templatish.com
Today I’ll show you how you can make an alternate scrolling image effect on your website by using Elementor. Here, when we hover on any images we add a cool hover effect and after clicking on that, there is also an amazing animating lightbox effect with cool transition. And for this you don't need any kkind of WordPress/Elementor portfolio plugin.
I’ll also show you how we’ll also make this portfolio page fully responsive for all of our devices. Basically, by following this tutorial, you can create a team member or a portfolio design which is far more creative than a boring usual Elementor portfolio image gallery. You can create a Elementor portfolio website page by using this layout.
First, we need to take a 3 column layout and take inner section inside that. Inside the inner section we have taken all of the images and other contents. After creating an image section, we duplicate that section and change other images.
Then, we add some custom CSS and JavaScript code to create the alternate scrolling and animating lightbox options.
I have also make this layout fully responsive for all of the devices. I have also customized our site header because it overlaps with the images. Finally, we check our Elementor portfolio section from desktop, tablet and mobile.
That’s how you can create an advanced portfolio website by using Elementor. If you enjoy this video and want to get more Elementor advanced design/animation, don’t forget to like and subscribe.
Hi,
It was a great video! I am building a website for a revel blogger, and I think this effect will be perfect for that. Since we have a collection of photos to display, I think this effect will be very aesthetically pleasing. I learned a lot from this video, and I will be using your process in my next project. Thanks a lot for sharing such an amazing video, it helped me a lot, and will definitely help a lot of other viewers as well.
Thanks Ravi for such a great appreciation ❤️
Hi, its really amazing work you did, but i. have one question when i added the javascript code it dosen't effect the scrolling i tried everything same but not sure the scrolling effect dosent apply on 3 sections. can you help me on this please?
hi bro, I have a question, is it possible to disable the lightbox for images that have links? so it is more intuitive where to click
Love this tutorial, keep it up
More to come!
Thanky for the video. When i add the classic hidden, the title disappears?
Amazing!!
Thank you so much!
Thanks good Luck to you.
Thanks, you too!
Is it working on Elementor container ?
Hi, I love this effect and wanted to use it on our website, yet I find it difficult with new elemenor containers. I cannot get the scrolling to work, I guess that it has somenting to do with not being able to set container to "fit to content" and "stretch" options .
I'll update the code for the container version too!
Thanks for the great tutorial! It is very helpful! I have a question and would be happy if you could answer me :) Can I build this section as a part of a page, or does it work just for a separate page? Also, I don't know why, but even with the "Mobile responsive" CSS, the scroll function is not available for mobile in my case. Thanks again!
It only works for a separate page... And yes for Mobile, I disabled the effect, because on mobile there is only 1 column...
I really aprecciate your work. That tutorial was a great inspiration. I just have a quick question. I did everyting exactly as you explained, but somehow my header is always invisible. Whatever I try to display the header, its just not possible. But in your video I can clearly see that you header works fine. Is there any setting I have to adjust? I am using Astra Theme aswell. And maybe there is also a way to show the page footer? But actually that not as important as displaying the Page Header.
Some advice would be great! :)
Thank you for your appreciation. BTW, I think that issue is caused because of Z Index. Go to the header section Advanced tab and make a higher Z Index (as example: 10). Let me know, if it work.
@@MakeDreamWebsite Thanks this was actually one of the first things I tried but still nothing changes :/. I have set the Z-Index of the header to 999 and the page content has a Z-Index of 2 :D
@@MakeDreamWebsite It seems like I could solve this issue. I had to deactivate the footer on this page. Because setting the z-index of the page index to 1 and of the header higher would actually work but if I would set the z-index to anything above 1 to hide the footer, it would hide the header aswell, although the header had a much higher Z-index. So I just deactivated the Footer on this page but still if I would set the Z-index to anything higher than 1 it would hide the header. Just wanted to share this if anyone has a similar problem :)
Everything is great, but I have a small problem: in mobile when I scroll it can also be moved a little to the right and left. Is it possible to arrange this?
You can email me your page link. So, I can figure out that problem.
Great tutorial but I had a problem: at point 8.50 - when adding HTML in the middle column - I do not know exactly what part of the code should be inserted there?
You can copy paste the whole JavaScript code snippet from my website altogether in the HTML widget. I just split the code so you can understand it better.
@@MakeDreamWebsite Thank you Jim, you are amazing
thanks for your great video. just question here. 9:12 , you added /* ALTERNATE SCROLLING */ in css. I also followed you but after I did it. everything disppeared.. not sure what I did wrong, thanks..
Do you use new flexbox container version
@@MakeDreamWebsite not sure. Do I have to use new version of that?
@@jaykim4677 As this is an old video, I decided to also add a new container version on the description/comment section soon
@@MakeDreamWebsite really appreciate it. Can't wait. Thanks
@@MakeDreamWebsite Brother, is the new flexbox container version available now?
Can we do this with videos? I'd like a user to be able to click the photo to reveal a video with a description under it. I emailed you regarding just hiring you to do this for me.
Instead of pictures, i used videos. I was able to mock everything up except the lightbox animation. Plz help
You can email me your page link
Brother, is the new flexbox container version available now?
No, I haven't made it yet!
its awesome but it would be better if you showed code from where you collected in your blogpost, because there lots of code you mentioned but not specified exactly
The code link is in the description. For each video, the code snippet blog link is different...
Im having trouble, when i enter the scroll effect code i lose the rest of my webpafe that has been set up. I only intend to use this as a section
Fixed the background issue, but its still overlaying and not acting as its own section... how can i fix that ?
@@completelyconscious8662 It's only applicable as a page, along with other section it don't work perfectly
@@MakeDreamWebsite I was able to modify the code to have it stay on the section by changing the fixed position to relative. I wanted to build this feature onto a single paged site to showcase my portfolio.
Does it work now properly?
@@MakeDreamWebsite I had it functioning, but there was no ability to scroll thru on mobile and the light box didn’t work. I was thinking if I used images, but linked video it may work properly but I’m honestly not sure
This is not available in your Gumroad, will it be available any soon to buy?
No I haven't made its template, if I upload I'll let you know!
Note: you can use it only as a separate page as it's a fixed section. But, if you try to add it inside a page as a section that won't work properly.
I tried to replicate the same on my website but after the Alternative Scrolling Code, my page stops scrolling. The images won't scroll
Yes, It will make your page stop scrolling. So, you should add this section only inside a separate (portfolio) page where you can't add any other section.
after the Alternative Scrolling Code also mine got stuck . I also tried to make a new page just with the portfolio but nothing is happening. HOW COME ?
This tutorial will work also with elementor's container?
No, it won't.
@@MakeDreamWebsite Is there any way to use both version of elementor? I mean styling a page with container and styling the other with old sections?
Yes, it's possible. If you want to make a specific part with section/column, then you can temporarily disable flexbox from the dashboard settings, and after making that section you can again activate the flexbox container...
@@MakeDreamWebsite thank you! I'm gonna make a backup and trying
Can I use it for blog post?
No, you can't
@@MakeDreamWebsite thank you for your replay. Can use url with it?
You should $ell this amazing setup!
it doesn't work
your website is not working anymore
Can you wait a few moments and try again. May be the server is down temporarily...
many thanks for sharing this content but It doesn't work. I spent 3 hours for nothing.
Have you tried it with the new Flexbox Container?
@@MakeDreamWebsiteHi and thanks for your reply. Yes I followed the tutorial by using the new flexbox container. I created a new portfolio page with only a container ( section).
@@VALEADVENTURE As this is a old video, when flexbox container didn't come, so I made this using Section/Columns. And it may not work properly if you try to make it using flexbox container. For now, you can just deactivate the flexbox container, and make this page using section, columns and after creating this page, you can again active container on your site. Hope that will work! Maybe later I'll add a container version of this page in the description.
@@MakeDreamWebsite thanks for your answer . I will try this way . 🙏