Projects Page with an Image Reveal Effect Using Oxygen Builder.
Vložit
- čas přidán 28. 02. 2021
- In this tutorial, I will show you how to design a projects page with an image reveal effect using Oxygen Page Builder.
.
Want to work together?
Email me: taimur.aziz@gmail.com
----
Want to support my CZcams Channel and buy me a coffee? It would mean a lot to me & help me to create more useful content.
www.buymeacoffee.com/TaimurAziz
#OxygenBuilder #WordPress #WordPressBuilder - Věda a technologie
Wow..Cool tricks with CSS in Oxygen. Very much helpful.
Glad you liked it
Amazing
Taimur, once again a great and precious tutorial!
You pointed out a lot of useful details like
- custom state empty,
- perfect relative positioning (top 50%, translateY -50%),
- and again your genius use of custom states (hover [sub-item])
I also like your subtle but stunning hover effect details (move/scale)
While this design looks and works amazing on desktop, it would be absolutely helpful to mention that this design would probably not work on smartphones, and give - at least - a hint how this design could be theoretically altered to also support mobile devices.
You are absolutely right. I was focusing on teaching as many CSS tricks in my videos just to show how powerful Oxygen Builder is. Next videos I will focus more on mobile devices. Thanks :)
I love this... I have issues with understanding difference between classes and IDs... and also repeaters understands and how to use them is my greatest fear
Nice one!
Wow Taimur, what a great video, keep the awesome tutorials coming, I have watched them all great work 👍👍👍👍👍👍
Glad you like them!
Супер!!!
Wow, Just Amazing what you can achieve with a little CSS with Oxygen Builder. I would have liked to see what the mobile version would look and function like.
Very useful, thanks.
Glad it was helpful!
another great tutorial - with a practical use and lots of advanced techniques to help us all - thanks again
I have watched all your videos and this hover .state tip with animation is a real gem and something I didn't know after using OXYGEN for 2 years. Please keep this channel alive with content as it's cemented the OXYGEN path for me after years with DIVI and ELEMENTOR... also the target body was a real gem.
Also remember the transform bug by typing (00) -double zero- to overcome the bug in OXYGEN
Glad that you liked my videos. More content is on the way :)
Good share.
I would
1) not create a static Page for projects and set up the CPT archive. The main thing is to leave the query at default to the extent possible. CPT UI provides an option to set "has_archive" to true and let us specify our desired slug for the CPT archive.
2) not animate padding but instead do that with transform: translateX().
Thanks for the comment. You are absolutely right in your points. I just created a page with a repeater element to make things simpler. and Yes, animating the translateX is better as it will not affect the layout.
Thank you very much, Taimur! It would be great if you could show us how to make it responsive :)
Taimur keep them coming!! Thank you so much!
Thank you
thanks
Woohoo.. I knew nothing about a "custom state" and used only standard. Previously I made the "hovering of the parent elem will firing some styles to element inside" by using my own custom CSS. But.. the trick with the custom state for element made me enormously happy. Thank you so much Taimur!
I'm so happy that you learned something new from my video :)
thanks. already looking forward to the next video
:) nice to see another video
Super tutorial - at a perfect time too!
This is a good one. Thanks for sharing this Taimur.
I love your workflow Taimur. Now I will look for your first video.
Of course you have a new subscriber ;-)
Outstanding! Thank you Taimur!
Please do more videos! It's only your 2nd video on oxygen builder and you are already famous here that's a sign for you to keep it up!
Thank you so much. I will do my best to upload more videos.
Awesome tutorial! Just one question: when you refresh the page we can see for a split second all the image... How can you stop this from happening?
Thanks for your comment. I will check and see how to fix this issue.
@@TaimurAziz Thanks, let me know here if you found a fix :)
Hi Taimur
Very good tutorials
But I have a question. For example on 20.43 when you refresh the page, Oxygen shows everything that is loaded. I understand that is not only here in this lesson. This is some kind of property of Oxygen? some defect Oxygen? Is it possible to hide everything, or make invisible on the screen loading? or is it some kind of defect in Oxygen which is worth writing about in Oxygen support / issue
Great videos Taimur. It would be useful if you address responsiveness of the design on various devices as well.
Super helpful tutorial, thank you. I noticed that on page reloads the image shows up briefly before getting to opacity 0, is there away to get around that?
Thanks for your comment. I will check and see how to fix this issue.
Nice! And what about responsivity?
The purpose of this tutorial was to show some cool CSS tricks and how to add them using Oxygen Page Builder. The responsiveness was beyond the scope of this tutorial. I will focus on my next videos on covering all the aspects. Thanks
what if project-image is inside another div and it doesn't have a parent div? Would it still be possible to make the animation happen when on over?
First of all, thank you for the new video, you have a good teacher voice and you get to the point. This makes it easy to follow you.
But somehow it feels wrong to use empty divs as design elements for the background, why not just repeat a 1px high graphic?
Thanks for your comment. You are right and I have mentioned in the video that you can use svg graphic for this but I wanted to show how you can do it using CSS only :)
DIV is a quite unspecific HTML container element for any content .. and yes, also applying design.
Using a (SVG?) graphic would be an alternative but creates either another HTTP request or more HTML content if embedded inline, that can/will not be cached properly by the browser.
So adding a simple DIV and styling it by CSS is a legit, performant and resource saving method.
I must have missed that, so far I just assumed that we want to produce as little div-bloat as possible, and that clashes with this solution. But anyway it´s nice to increase the own point of view and learn something new.
Hi, thank you for sharing your video. I have a question about selectors. If I use "hover .my-class" state, can I target an item which is outside the div containing the item that I'm hovering? thank you!
Would you please explain more? I believe that you can achieve so many scenarios using CSS.
Hello Taimur. Thanks for the great tutorial. I have learned a lot. Could you find out a solution to initial load showing all the images?
Hey Firat, I'm glad that you liked this tutorial. To be honest it's kinda old now and I'm working on an updated/better version of the same concept.
Taimur, really innovative content. I see you are using Adobe XD. Would you consider doing a video on your design process using this tool? There SO much more to this tool than "drawing boxes" :)
Yeah, AdobeXD is really amazing as a UI design tool. I will consider adding Design videos in the near future.
I try to add body selector with background color, and in preview don't change color, but in editor all works
I think it's a browser cache issue. Try to hard reload your browser.