Building a Hero Section With a Full Screen Off-Canvas Section using Oxygen Builder.
Vložit
- čas přidán 17. 03. 2021
- In this tutorial, I will show you how to create a hero section with a hamburger menu and a full screen off-canvas section using Oxygen Page Builder.
.
Want to work together?
Email me: taimur.aziz@gmail.com
#OxygenBuilder #WordPress #WordPressBuilder - Věda a technologie
Hey 👋
Have my videos ever helped you out? 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
Every day I breath OXYGEN! I am happy I found Oxygen. This is powerful, man! Thank you for the video, Taimur! I will add this to my website.
pls keep creating you're a great teacher!
One more time, wonder video for oxygenbuilder comunity
That was amazing!! Please make more such videos it helps us a lot
This is some HQ tutorial here, Taimur Aziz. Can't wait to learn more from you ;-)
Thanks. Make sure to subscribe to the channel. More tutorials on the way :)
@@TaimurAziz Already done of course ;-)
Thank you for these in-depth and high quality tutorials! Really appreciate them, and also how crystal clear your instructions are and super easy to follow. Thank you!!
Thanks for your words! I am glad you find it useful.
You Sir... are a GOD!
Thanks for this. I used it to create a form on the off canvas!
Bravo Aziz for the menu animation. Top tutorial!
Yet again some great info being shared here! Love your tutorials as they are different in approach of many others. THANK you for this!
Thanks. I'm glad you liked it.
🤯 Mind-blowing so to use custom states, good job Taimur!
You know magic, awesome!
Superb!
wow. amazing tutorial, learned a lot. Thanks a lot Taimur! :)
Great Video.
Learned alot.
wooow good job ❤️❤️❤️❤️
love that overlay menu
Thank you for creating this!
Amazing content, well-paced, easy to follow, and very professionally made. I love how you show these little effective tricks like referring to elements with pseudo classes.
Thank you for your positive comment. Really appreciated :)
This came just in time. I'm doing an off canvas menu. Thanks for showing me how to create custom selectors. Wasn't aware of that.
Thanks. I'm glad you liked it.
amazing, the best content for Oxygen so far!
Thanks. I'm glad you liked it.
For me is the best Oxygen Video ⭐️⭐️⭐️⭐️⭐️ Thank you!
يا اخ العزيز (تايمور عبد عزيز) الف شكر، ولله ممتاز 👌🏼
Thanks, that's really sweet of you 😍
Thank you Taimur. I am redoing my hero sections after this. So much more control when using classes and ids. Thanks.
All the best :)
Aziz light! now i have to watch the 5th element....
Gracias!
Another great tutorial - really pushing what we can do in oxygen - thanks again
Thanks. I will do my best to introduce more tips & tricks for Oxygen Builder.
The OffCanvas crotch doesn't work on the iPad Pro / iPadOS 14.8 . After clicking only the middle bar is visible and doesn't change back. Is there a solution for that. BTW: awesome tutorial!
Great tutorial. Thank you! Very useful content.
Glad you enjoyed it!
Excellent content man, and your explanations are also incredibly useful. Subbed.
Glad you like my videos :)
Great tutorial, thanks :-)
You're welcome!
🔥🔥🔥🔥🔥
Wonderful video Taimur. Excellent use case for custom selectors and pseudo classes!
Thanks :)
@@TaimurAziz looking forward to your next one
Absolutely amazing skills mate , but OMG what is that music at 30mins?
Great job Taimur. As usual, high end tutorial. I was looking for such tutorials for Oxygen. Like everyone else, I look forward to more.
Thanks. Really appreciate your feedback.
how did you add svg logo?
@@wodek5035 I use "SVG Support" plugin by Benbodhi.
@@TaimurAziz Me either, but I can't view it in backend or front end.
@@wodek5035 Did you try another file?
absolutely brilliant 👏
I wish you to have more videos come out. I will be buying you more than just coffees.
by the way, you have a group or something?
Thank you! 😃 Please subscribe to the channel as I'm preparing a dedicated website for Oxygen Tutorials.
Dear Taimur, thanks for the great tutorial. I have one issue with the mobile view of the burger menu. If I click on it on mobile the transformation/rotation to "X" only happens after you make another click somewhere else on the phone. In all other cases the hover status is visible (the one line in the middle). Do you have any idea how to approach this? Thanks and have a great day
Awesome! this is a great tutorial. I find adding 1px for min-width and min-height for the div to see the actual dimension makes it unnecessary to use :empty state for that purpose. Is there a reason you wouldn't use this approach?
Thanks. I'm glad you liked it. Regarding the actual dimension of the div, The min width/height works when you style using IDs but if you use class then you have to use the :empty to override this. I think I will start using a separate helper class for this purpose only to use it during the development only.
Thank you for this very well presented and detailed tutorial. I recently began learning how to use the Oxygen Builder, and unfortunately the native menus are not very attractive. Your full screen off-canvas is actually much more stylish and professional. A couple of questions however. First, in a real application, one would need this off-canvas menu to appear on all pages of the website. So, shouldn't you have first created a template (with header, inner content and footer)? After creating a template, I presume the coding of the off-canvas menu would be exactly the same -- correct? Second, if one wanted the off-canvas for mobile phone and tablet only, and the horizontal menu for desktop, I presume this design would be fairly easy to implement with a some custom CSS and media queries -- is that correct?
Thank you for your comment. I'm glad that you liked this tutorial. Regarding your questions. 1- Yes, you are right. This menu implementation should be in the main template to appear on all pages. I usually focus on the design aspect of the tutorial and I keep the use case for you guys.
2- Yes, you can apply this tutorial on the mobile view only if you target smaller viewports from the drop-down menu.
Taimur excellent tutorial! Thank you for creating this.
How would you set the background (body) to stop scrolling when the off canvas is opened.
I aded this:
jQuery('.menu-button').click(function() {
jQuery('body').toggleClass('overflow-hidden');
});
then just added a .overflow-hidden selector and set overflow to hidden
it works but not sure if it is the correct way of achieving it
I tried setting the transform translate unit to 'none' then typed the value completely as '10px', that works well. Hopefully Oxygen resolves this bug soon.
I just tried it. It works :) .. Thanks for the tip :)
Taimur, thank you for sharing some excellent content!
What page width did you have in your settings for this tutorial?
I can see your image is 1920 px wide.
And, for the hero image, what is the best practice for size in this situation?
I'm trying to recreate parts of the tutorial to learn, but my image does not look good at all, totally losing the focal point. I'm not a pro at this, just started learning Oxygen, appreciate your input!
Glad it was helpful :)
Regarding the page width, I used the default of Oxygen 1120px which is the section container width and not the section full width. and for the hero image, it's better to use a full HD image (1920px) and make sure to compress it using any tool or online using compressjpeg.com
Thank you! I'll try with a bigger image!
What if I want to use Hover Function rather than Click Function to show the OffCanvas Section? What command should I use?
use .hover() instead of click() function.
@@TaimurAziz Thank you. 🙏
Taimur, would you consider showing us how to make an image comparison effect for galleries in Oxygen Builder?
Yes, I will consider it :)
I love this tutorial so much but I cant make it work. The part of creating a burger icon with :before and :after. I am so much perplexed why It doesnt work. So I make everything step by step click by click as you did it over here. And I cant see those extra bars ;((. First is, is that after I place a orginal state bar (100%width, 2px heigh, relative, bg color) and I want to make a :before bar (100% width, 2px heigh, absolute, translate -10px) and I can do it, I see it in oxygen (I can even animate it and staff) but on front end there is no extra bars. None. Just an orginal state. The weird thing: when I open inspector to find what is going on and I find the orginal element there is .class:before in the Inspector with all thing attached. But I still cant see those bars in front end.
Anywho :D haha you have any idea why :)?
Glad that you love this tutorial. Regarding the menu icon issue. try to add (top:0 and left:0) to the before & after pseudo-elements. if that didn't work. make sure that the parent (.menu-bar) has a fixed width & height. Please let me know if that will help you.
thanx for the great tutorial. can this be done by a modal element too?
Yes, You can achieve a similar result using the Model Element. But as I mentioned in my video that the purpose of my tutorials is to teach you how to create things from scratch and get familiar with the CSS properties like transforms and transitions. This way you can understand what's behind the scene and get more creative with your projects.
Great video. Is it possible to close the offcanvas menu after clicking a link? I'm talking about #links to elements on the same page.
You are so evil!!
Now I am dying to redo my menu :)
No matter what I'm trying to do, additional bars created with pseudo classes before and after doesnt display. I can see them on the Oxygen Builder though :/ Any idea what's causing this?
Make sure that the main bar has a relative position and the pseudo elements have absolute position with top:0 & left:0
Bro Create For New video For Mega Menu,,,Please Bro..
+1 for a mega menu tutorial
Another +1 for mega menu
When will be come new video
how to make a full website?
You mean from Figma design?
@@TaimurAziz no, I mean a complete website which take 2 to 3 or even 4 hours. So many videos on Elementor but not on Oxygen builder. Also advice me if Bricks is better or oxygen for pixel perfect custom designs? Thanks
@@ControllerCommand I will consider a full site builds tutorials. Regarding Bricks, Yes I prefer it over Oxygen.