How to Setup Oxygen Builder: Best Global Settings (Automatically Responsive!)

4
Published on September 17, 2022 by

Learn how to perfectly setup Oxygen global settings with fully responsive heading sizes, section paddings, and more (with zero CSS classes on elements)!

When you’re building with Oxygen, it’s critical to setup a solid, clean, efficient foundation to work from. Oxygen gives you the ability to set global styles, but the default styles for headings and spacing is extremely limited. In this video, you’ll learn a magic trick for making all your headings and paddings mobile responsive without messing with CSS classes or breakpoints.

You’ll also learn some best practices for setting global colors.

If you have any questions, don’t hesitate to leave a comment. If you like this video and want more, make sure you like and subscribe!

Responsive Size Calculator: https://websemantics.uk/tools/responsive-font-calculator/

***** Join the Digital Ambition Inner Circle for insanely valuable premium trainings on Oxygen and Operating a Profitable Digital Agency: https://digitalambition.co/inner-circle/ *****

*** MORE AWESOME SAUCE***

Site –https://digitalambition.co

Category

Add your comment

17 Comments

  • Taylor Stillman 11 months ago

    If you take the finished pages and clip the shortcode -say, to add to a new site, as a starting point for a client who like the design, but wants to add their own images, etc .. would the responsive settings go with it?

  • OXYsmART 11 months ago

    Hey Kevin, at 18:55 you say they are all too big, so can you think about another tutorial where you discuss how to decide what the rem range should be and what determines that decision? You also say it all depends on your design. Could you dig a bit deeper into design considerations? Thanks man, you are the best.

  • Gary Deverson 11 months ago

    Great video, thank you for your time

  • Hannro Venter 10 months ago

    Thanks for the great tutorial! Once set up, is there a way to save this as a default template? So every new website you create uses these settings as the default?

  • Digital Ambition 10 months ago

    This video is old. To view the new tutorial that I highly recommend you switch to, go here: https://youtu.be/coTPKWrgIhQ

  • Scarly Designs 10 months ago

    Omgoodness this is such a life changer! I am NOT new to clamp but I am new to Oxygen and didn't know could do that!

  • Zachary Elkins 9 months ago

    For a proper Gutenberg / Block Editor fix, add this to wherever you place functions (snippets/plugin):

    add_action( 'enqueue_block_editor_assets', 'custom_block_editor_enqueue' );

    function custom_block_editor_enqueue() {
    echo '<style>.editor-styles-wrapper { font-size: 100% !important; } .block-editor-block-list__block { max-width: 840px; margin-left: auto; margin-right: auto; }</style>';
    }

    Mileage may vary.

  • Analia Alvarez 8 months ago

    Love all your videos. You pushed me to try Oxygen and now I'm a happy user! I wonder however if there’s a way to avoid CLS problems in lighthouse with this method. Due to actual px size of the font not being explicit, the heading shifts if not contained in one line. Thanks again and keep it up!

  • Stephen Dunning 8 months ago

    Would you do this for fonts is you are using oxyninja classes?

  • Rolla 7 months ago

    Hi Kevin, I have a question, In the video, the font size use clamp(), and why when the font size of element you wrote: var(—text-s) not clamp? If I haven’t automatic.css, can I use like var(—text-s) or only use clamp? Thanks

  • Adrian Carter 7 months ago

    Hi, is there a way of saving these settings and importing them into a new project?

  • Tai Wai Go 6 months ago

    After watching this video, I admitted I love you. Haha. Thanks.

  • Fabio Cruz 6 months ago

    yeah mate, I really had to leave a comment, really nice and will really going to save me a tonnnnn of time xD

  • Adrian Marmy 5 months ago

    holy fuck this is a game changer for me. Thanks a million times.

  • Takeshi Kitano 4 months ago

    its funny, i have been using oxygen for 2 years at least and i never done this, always clowning around with px hide for each device width lmao

  • Fabio 4 months ago

    Hi, thank you very much for your video! Just a question: when I try to use clamp functions in "Section & Columns"–> "Section Container Padding" it does not change the padding of the section, but MARGIN . How could it be possible?

  • Dwayne Rodriquez 2 months ago

    Your content very unusual, but its interesting. It would not hurt to increase views to get at YouTube recommendation, g e t 4 v i e w s for that can help