Create a Modern Toggle-Based Pricing Section in Oxygen (Full Tutorial)

A lot of my tutorials are very focused on teaching one specific technique or concept, but I think it's also important to mix-in more "real-world" tutorials where I build something more comprehensive.

Today I'm tackling a modern, toggle-based pricing section. Lessons included:

• Learn overall section & item structure best practices
• BEM classes
• Layered classes
• Grid (with vanilla Oxygen Builder)
• Icon lists using pseudo-elements
• Troubleshooting non-exact icon sizes
• Clamp for padding and font sizes
• Flex space-between
• Oxygen Toggle element
• Mobile responsiveness

If you have questions about anything, drop a comment. And make sure you hit the like button to show some support for these free tutorials – they take a long time to produce!

Cheers :)

[Gearyco]

It's been a couple weeks since the last drop. My brother-in-law died unexpectedly and my kids got their tonsils out so it's been a bit hectic around here. Thanks for tuning in and engaging! Keep an eye out for a post on YT -- I'm going to be taking requests for tutorials to build up an idea bank.

[DesignwithCracka]

Awesome video Kevin. A great way of showcasing Oxygen's no code capabilities. Ironically, other builders thought to be more beginner friendly can't achieve the level of customizability with the ease you presented here.

[rajthedev]

You are a lifesaver Kevin. Thanks for this tutorial.

[AmandaLucaseu]

Great video Kevin - always get nuggets from all your videos. Thank you! Condolences on your recent loss x

[pavlemarinkovic]

This channel deserves much more followers than 3.4k. You're doing a good thing, keep going !

[TheSchokl]

Awesome tutorial again. Thank you very much. I especially like it if you don't use some external plugins. For your idea bank: - how to create a perfect mobile menu like oxygenbuilder.com(it's not possible with the standard oxygen elements right now) - how to make the oxywebsite multilangual - how to use best metabox with oxygen - how to create extraordinary text animations - how to create own oxyelements and use it globally on other websites - how to create own website templates with best practices and use it on other websites - the best things to make life easier in oxygen

[eLeieZer]

So helpful, I was always wondering how to deal with this cool toggle Oxy feature. As always great content!

[eucalyptech]

Another great tutorial, thank you Kevin !

[andrew.schaeffer]

great tutorial as usual :). I'm working on my own site, and may use that pricing toggle

[maythethBwithU]

what can I knocked it out the park again....

[azuzaazuza]

Awesome tutorial, thank you! Maybe a stupid question: around 40:10 you reset advanced settings by clicking a back arrow in the category bar. Where can I activate this?

[martinboisclair]

Nice video, It is possible to add this variables in Core color system?

[TheSchokl]

and a tutorial how to build an extraordinary woocommerce store with oxygen... :-)

[TheSchokl]

Are you aware of a SSL issue on your link to your inner circle?