How to create a custom full screen slider using Oxygen's Slider Element
Vložit
- čas přidán 28. 07. 2024
- In this tutorial, I will show you how to create a creative full-screen slider using the default slider element of Oxygen Builder.
.
Want to work together?
Email me: taimur.aziz@gmail.com
#OxygenBuilder #WordPress #WordPressBuilder - Věda a technologie
Have my videos ever helped you out? Want to support my CZcams Channel? It would mean a lot to me & help me to create more useful content.
www.buymeacoffee.com/TaimurAziz
I've been an OXYGEN user for maybe 2 years and this is the reason I dropped DIVI and ELEMENTOR etc. such granular possibilities is a game changer.
Wow. This video just takes my understanding of CSS and Oxygen to a whole new level
Thanks. Glad you like it!
Top of the class! Excellent tutorial. I love the way you push limits of what's possible in Oxygen.
Thank you bro :)
another fantastic tutorial - learning so much about selectors etc
Glad you enjoyed it
I watch a lot of tutorials on CZcams about design and, particularly, Oxygen. I almost never comment, but you covered so many things I've never seen before. I had never used the selectors button in Oxygen and plan to use it far more often now. I also thought the slider element was pretty difficult to use out of the box, but this is a far more rational thought process about the slider element itself. Thanks for putting this together. I immediately subscribed and will watch many more tutorials.
Thanks for your words! I am glad you find it useful.
This is without a doubt the best Oxygen tutorial, great design and even better explanation. Best of all, it motivates you to work and learn CSS. As always, we are waiting for more.
Thank you so much. Expect more awesome stuff to come.
Yup this is it.
Another ✨high quality✨ tutorial! Thank you so much, Taimur!!!
Awesome! Thank you Taimur Aziz. Much appreciated.
Damn... this is it... a designer teaching for the designers like us.. thanks man..big help
One thing that I love from your tutorials is that from the beginning of the video you show us what is the result we are going to have. THANK YOU VERY MUCH for that.
Subscribed.
Fantastic, thank you Taimur for this great tutorial!!
what an excellent tutorial and what a learning curve going through it with you. Thank you
Another great video showing the use of classes and selectors. Thanks Taimur! Looking forward to future content.
Thank you so much :)
Absolutely amazing tutorial!
Thanks Taimur. You make it look so easy.
It's absolutely sick. I learned a lot doing this. Thank you so much !
Everyday I'm loving Oxygen more and more. Amazing tutorial. Instantly subbed. Didn't even think you could do this in Oxygen. Please make more.
Well thought out and to the point. Great Tutorrial thanks.
This is a really great tutorial bro! One of the best.
Awesome tutorial! Thanks.
Great tutorial Taimur !
Real stuff! Thanks Aziz!
Your videos are absolutely AMAZING. I LOVE the way you go in depth and at the same time manage to be clear and to the point when you explain things. With you I finally understood the use and importance of the "manage selectors" in Oxygen and learnt a lot deal about css. I am looking forward to enjoying more content like this, you're really awesome!
Glad you like them!
Perfect video! Thank you so much
This is by far the best tutorial for oxygen. You successfully revealed how far you can go with oxygen. Well done
Thanks :)
Amazing tutorial. Thanks a lot!!!
I've finally watched all four videos, and again, excellent quality and explanations! The videos not only helped me learn a lot, but they motivated me to really dig deeper again into more coding knowledge. Thank you! Looking forward to your other tutorials and possible Oxygen course when it comes. Great stuff!
Thanks. Glad that you liked it :)
Excellent job 👌
This was excellent. Thank you so much!
Excellent job Taimur!
Fantastic! So useful
Excellent tutorial!!
Beautiful thanks, keeps doing videos so exited to see what you come with
Amazing tutorial, looks awesome and easy to understand!
thanks, it's so a clear tutorial for me.
Great Video Taimur
I think the best thing to take away from this video and all the other videos is the way that Taimur uses the "ADD SELECTOR" area and manipulates the style selectors, I think this demonstrates the absolute 100% manipulability of OXYGEN over any other builder currently on the market. NICE ONE TAIMUR :)
Thanks. I'm glad you liked my videos :)
Another awesome tutorial!
Thanks so much for this, it's an amazing tutorial and really clear instruction.
It is zen like watching you explain! More content please!
Such a fantastic tutorial - thank you
Great Tutorial Taimur! I rarely ever watch any tutorial video of 40 minutes!
Looking forward to more such High quality videos from you!
Thanks. Glad that you liked it.
Wow! Thank you again.
This kind of pure technology sharing is selfless dedication! I hate those who recommend buying plug-ins. I keep buying them...
Glad I could help!
Amazing work Taimur. Well done and keep up the good work.
Some excellent tips here with selections and existing CSS, very helpful for people to understand more about Oxygen. Thanks for the great info.
Thanks. Glad that you liked it :)
You are the best, the expectation is very high for future videos.
wow... so nice...
Looks great.
you are top notch brother.
Great tutorials! Please do more!!
thanks for the tutorial. Its very useful.
Thank You so much Taimur, it helps a lot to watch your videos, with the way you use selectors it open a new world to me. Hope to see how you manage responsive design in your workflow and the use of dynamic data (maybe with Meta Box ?) in the next tutorials.
Glad to hear that. I will do my best to create more useful content :)
thanks a lot, great tutorial
Love you, brother!
Awesome ❤️ love you
Thank you so much, your videos as sooooo helpful!!
Glad you like them!
your css skills are awesome and how you implement them in Oxygen 👍
Great tutorial. Thank you. I can hear it much better. :-)
Damn, so cool!
thank you very much.
Great stuff, komsu! Subbed :)
Genius
perfect
perfect, add more videos for beginners, step by step with source files
i am a newbie , and came here from that oxygen builder group on facebook , and I can proudly say that its worth watching your video , keep up the good work my brother !
Thanks
I would love to see a tutorial that shows your workflow to transfer a whole screendesign to a working site build with oxygen with all the screensizes .. would be awesome!
awesome :D
Офигенно!
liked and subscribed
Keep doing these videos, it motivates many people
Give it a like?
I love it!!!
I'm glad that you love it 🥰
Great tutorial, hands down. Just curious. Will it still slide if I just use the scrollbar, not the arrow button? If the answer is not, how to make it possible? And is it responsive in mobile browser?
Hi Taimur,
I have seen the most interesting tutorial from you,
Can you please make some more video like this?
Yes I will upload more videos in the coming days.
Great tutorial. As every single one up to now. LOVE every single one!
Just a (maybe stupid) question: Why do you create a class for each slide background? Wouldn't it be absolutely fine and easier to define the slide's background via ID?
Properties used for multiple elements should be assigned via class. But properties only used for exactly one element could and should be assigned via ID (or inline).
Am I wrong?
amazing and learnt a lot but also need to see how this works on mobile.
Will focus on the mobile view in my next videos.
Hi, thanks for great video! Very informative. Is there any chance that you do another tutorial on how to optimize it for mobile?
Thank you so much for this tutorial! I had stopped using sliders during my time with Elementor because of the burden on page speed. How much weight does an Oxygen slider have on pagespeed?
Gr8 tutorial. However, would be nice if you had wrote down the color codes and linked to the arrow image. But super nice guide
Another great tutorial but would be great if you covered responsive settings as well .
I'm planning to dedicate videos to cover all the responsive design aspects. I didn't want to make the video longer. So be sure to subscribe and I will focus on the responsiveness in future videos.
@@TaimurAziz I subscribed after video one. Long videos are fine for learning and yours are great.
Great! Thank you from Russia. P.S. Please add English sub.
Thank you for this great tutorial! How can I give the height of slider to 500px?
high end stuff...
Good guide man. Do you know how to make a slider with OXY like 3 image slider and just 1 text content in the center. The images will animated of course and the text remains at the center as static?
Just Amazing!!
Please give me images of slider.
I usually mess at responsiveness , it'd be great if you'd add responsive deisgn too
I will focus on responsive design in my next videos.
@@TaimurAziz waiting for your next video bro , kindly upload it asap
you're mashallah a great designer
Very good tutorial - I'm just thinking how would it be best to set up H1 for SEO. If we have four H1s on the same website apparently it's triggered as a SEO error, do you know how we could solve it?
You can use h2 instead. Sorry, I did focus on the style and not the SEO.
is there any easy way to use this slider on a different instance of oxygen? when i copy and past the Shortcode into the 2nd website all formatting is lost. I then have to paste 4 elements from the 1st page database into the 2nd website db: ct_components_classes, ct_custom_selectors, ct_global_settings, ct_style_folders but that unfortunately overwrites (and breaks) the styling on another page.....
Please make sure you change the id of the slider.
is it responsive on mobile?
Great tutorial as usual!
Can you tell me what plugin you use to upload svg images?
I'm using the "SVG Support" plugin from Benbodhi.
good question ..
How to make this fully responsive? My slides are getting different sizes, because I cant use VH for height in this case =(. Thx for the tutorial
24:37 hello I am stuck at this part. I entered the top value to auto and bottom to 50 px, but on my screen the arrow does not move at all both in oxy and front end. Not sure how to fix this but it's not doing any changes. How to fix?
Btw, how did you made your INNER CONTENT == into BODY?? And also, I followed this and mine isn't FULL screen :/
How to make sure that the #hero-slider(23:45) id selector is there in my site? Where i can find the selector?
I added this ID to the slider element in 3:10 min. It's the slider id and you can use the default id which is generated by Oxygen.
On the mobile the slider in height is bigger than the other depending on the content how to make it always stay at the same height?
I think you have to resize the content on the mobile view.
Why my slider appears to be frozen until I click or touch the page? the layout is also messed up until I move the page a bit..
Man, it's simply amazing! Congrats for you skills! Let me know where you're from and give me the opportunity to chat in order to exchange experiences and knowledge! I hope I have some to pay you back!!!!! Thanks a lot for this class! God bless you!
Thanks, man. I'm so glad that you liked my tutorials. It's my pleasure to chat with you. You can find my email in the description. Cheers!
When will be coming new video bro
Why you stopped creating amazing tutorials ☹
Can this be done with dynamic content?
I'm going to upload a new video this weekend about how to make a dynamic slider.
@@TaimurAziz That is awesome, will watch for sure :D
tutorial is interesting, but if run on mobile it's random :(, how do I fix it? it's a bit difficult