The TOP 20 Oxygen Builder Mistakes Beginners Make (Fix These Today!)
Vložit
- čas přidán 5. 07. 2024
- Oxygen has a pretty steep learning curve, even if you have a lot of development experience with other builders.
That's not a bad thing. Oxygen gives you a lot of power and actually does things properly (like giving you IDs and classes and a blank canvas) where other builders try to dumb things down (and ultimately limit you).
Nevertheless, LOTS of mistakes are made by people who are new to Oxygen (I'd say 1 year of experience or less, but I often see some of these mistakes still being made in year 2-3).
In this video I cover the top 20 mistakes (at least the top 20 I could think of when prompted to do this video).
I shot this in one take on the fly and didn't worry about the time limit, so you get everything exactly as it came out of my brain. I'm giving you a solid 90 minutes of value here. Take what you need and leave the rest.
Join the Inner Circle: digitalambition.co/inner-circle/
Get Automatic.css: automaticcss.com
More info on px vs relative units: every-layout.dev/rudiments/un...
Columns vs Grid in Oxygen: • Columns vs Grid in Oxy...
Creating Image Cards Properly in Oxygen: • How to Properly Create...
How to Migrate an Oxygen Website Properly: • How to Migrate an Oxyg...
0:00 Intro
01:12 Styling IDs
11:50 Random Class Naming
23:00 Not Locking Classes
26:46 Using The Columns Module
29:49 Single Section Content
32:11 Multiple Topics in One Section
33:09 Not Using Semantic HTML Tags
39:08 Using Divs to Create Lists
45:02 Using Pixels
49:15 Improper Heading Levels
53:55 Setting Heading Size in Global Settings
01:01:03 Using Static Images
01:04:12 Background Images vs Real Images
01:09:05 Improper Pagination
01:13:00 Not Using CPTs & Repeaters
01:16:04 Not Creating a 404 Template
01:19:22 Naming Colors Literally
01:23:37 Writing CSS in Modules
01:28:03 Creating Blog Posts With Oxygen
01:31:58 Improper Migration
I've been programming with (C,Rust, JS, Java [yeah college time]) and coding (HTML,CSS [mostly SASS tbh]) for about 7 years.
My tricks:
- make a page (not published) with elements like buttons, cards, texte etc. and prepare the styles there like a design set from oxygen.
- Also good idea is to prepare a stylesheet with classes you've been using anyway like btn, text-large, responsive fonts with clamp etc.
Commonly called a Kitchen Sink.
What is "clamp" sounds like some sort of disease?
I didn't even know there was such thing "Lock Selector Styles"! What a great tip, many thanks!
Wow. This was a mind blowing lessons. 🤯
You are always showing best practices that are really leveling up my skills.
Thanks a bunch for it.
Love your videos.
Kevin, despite the fact that the most of the aforementioned information has been known for quite some time, this course is a terrific refresher and certainly an excellent resource for a novice frontend developer. Excellent stuff. I watched the entire video and thoroughly appreciated every topic you presented. Keep up your wonderful effort!
Thanks 🙏
Thank you Kevin, I was doing semantic HTML mistakes for complete 1.5 years and always had issues with Google crawling my website pages. This helps a lot.
Pure gold as usual. Thanks Kevin.
Great tutorial. Fortunately I'd gotten most of this down from following Kevin's videos for a while and an a happy member of the Inner Circle, but I still had a couple of tips that were gems I'll be implementing. Awesome!
Ref the 'not creating blogs in Oxygen' - would love to see what your best practice/workflow IS for creating blogs (when using Gutenberg, which I also hate haha) but still styled and templated to look sharp 👌.
Thanks again!
Very great Video! I love it! I will definitely change all to EM or REM
Great video! Thanks so much!!
Some great content there!
Thank you!!!
Great stuff, Kevin!
Thanks, this really helped me out the crazy stuff to think of class names. Also whole video so awesome for me, I learn a lot 🔥🔥🔥
Glad you liked it!
Nice summary 😃 Thank you Kevin !
This was such a great video! Thanks so much! It would be great if you could cover more about creating blogs *properly* with oxygen & WordPress (such as best practices) it sounds like you have quite a bit of experience with content marketing. I've been searching a lot for blog-type videos for Oxygen but there seems to be a bit of a gap there! It would be so great to get a peak of your wisdom on this : )
Thanks, very helpful! 🙏👊
Good content Kevin
Some of these are designer mistakes some of these are Oxygen mistakes. Not being able to set responsive sizes for default settings is an Oxygen mistake. Having to lock CSS classes on each element instead of at the root is an Oxygen mistake.
This video is actually quite universal. It should be renamed web design mistakes for page builders . ;-)
Laughing and learning always. I am so glad to have ACSS now to bypass some of those struggles. Thanks for making life easier.
Absolutely! 🎉🎉🎉👊🏻
Great Video! Kevin. I think you should make a video a promo for Digital ambition inner circle, I have zero ideas what's inside?
It looks very valuable, but not able to make decision based on the text on the landing page of the inner circle, it will be really helpful if you can at least make a promo video for the inner circle?.
Just join. If you don’t like it I’ll give you your money back. There’s 800 members who made their decision from the same landing page ;)
Thanks. I'm not sure what's meant when you talk about setting the 'root' font size to 62.5%? when discussing relative vs px
It sets the font to 10 px for the whole document, then when you use font-sizes in "rem" it's easier to know the font-size in pixels. 1 rem = 10px, 1.6 rem = 16 px and so on. It's best to size your fonts in rem for accessibility, so when people zoom in or change settings in their browser the text adapts accordingly.
thx! great content and important tips.
Great video 🔥
Great video Kevin - love the humour 😂
I’m gonna fix all my websites. Thank you 🙏
Hi Kevin, thanks again for this amazing video!
Out of context, I have a question :). I also wear glasses and every time I try to record myself I see the shine of the lights in my glasses. I wonder, at what height do you have your lights and what lights do you have? Thank you for your time :)
They need to be higher and angled down.
You're the man, cheers
Great lesson! About images, do you know how to combine these tips with webp?
You just need to add support for webp. That’s going to depend on your server setup.
Pure gold.
Hi Kevin, can I ask you how did you embed youtube videos on your site or how do you do SEO for youtube?
I use a CZcams feed plug-in. Not really doing any SEO for them
I have to laugh at myself, this should have been my first lesson! Thanks for the very clear lessons.
the part with pagination is a gold :)
yeah!
i’d buy a book from kevin with all those tricks i never used in maybe 20 years. or an e-book. or a pdf. i’d really pay for a cool reference sheet of some kind, with the right amount of kevin’s humor. do you hear me kevin?
Hi Kevin, thanks for your video, these mistakes I made often. Could you tell me the last point that make the blog post template in Gutenberg, Then how do design the feature image and post layout, sidebar in Gutenberg? Or the post layout is designed in oxygen builder, but the post content is designed in Gutenberg, do I understand right? I want to design the post layout like your blog post layout in your website, how should I do? Thanks
Yes you still create a template for your blog posts in Oxygen. But the content of each article should be written in Gutenberg
great video, i wont make those mistakes next time i build new site :D
A question about CPTypes: is there a way to associate a price (woocommerce) to a CPT, for example, bike tour, bike activity, subscription and so on? I only find the way to be a product with price and so on...
What exactly are you trying to accomplish?
Hi Kevin, I would like to use Custom Post Type “bike tour” like a product, I have custom fields (distancs, time, description ecc) but I cannot figure it out how to make the price that is used in the cart and then check out. When set the price in the product is ok, but how can be used in a different post?
mega helpful thx
Thanks!
You 'da man!
Woo hoo, I made 20 out of 20 mistakes when I started! Do I win something other than a facepalm? Lol
Seriously tho, very helpful video, Sir Kevin Scoldsalot. :D
1:03:18 Do you media source set with svg as well? or just with images? I tried source set with svgs, they just disappear and i dont know how to fix it
It’s not required for SVGs
Ones again, Great video..
Now when building sites I always do grid--3 / gap--m :D :D
Any tips on using srcset in a repeater?
Not natively, no. Needs to be a feature ASAP!
i want to hug this guy so hard
(((kappesante)))
i dont know if its new but you have a setting in oxygen to get a gap in the flexbox container
Yep
Kevin’s the man
I watched this entire thing even though I knew most of it. You never know what you'll pick up. My inner monologue is now calling any type of scalablitiy facrtor the 'K. G. button principle,' based off of your demonstration of using classes vs ID's when styling buttons. Reminds me of the 'damage-free' design approach in Photoshop whereas you're always thinking ahead to be able to revert to the original design/resolution (in a very different but parallel way).
I wonder, do you have any ideas on applying the same principle to entire websites? Your example shows that when you leave a trail of buttons behind that aren't linked to a master control you're in for trouble when it comes time to update. What about entire sites? I suppose it isn't long before this becomes 'the way' whereas a boilerplate is somehow 'cloud-based' and setting up any site with individual characteristics (settings, snippets etc) as you would a button with an ID is considered foolish. Hopefully you get my meaning.
Thanks for all you do, Kevin.
Yeah watch my video on BEM
Should I noindex templates? Main template, blog template, post template, etc...
I do just to get safe but they don’t have indexable URLs as far as I know.
There is no grid component in my version of Oxygen Builder (3.9), so I cannot add a grid. I have the Oxygen Ultimate Package. Am I missing something?
There is definitely a grid. It is under layout when you have a div or section selected
@@Gearyco Nope, I don't see it. I added a section, then with the section selected I clicked +Add and entered grid. Nada. Oxygen newbie here, so thanks for your patience. But this has left me baffled.
I see the Grid option under "Child Element Layout," but the way you did it -- by typing it in the search bar -- was so efficient, I tried to do it the same way. But no luck. I will persist. PS - love your humor Kevin. Getting a major NYC vibe there (says the ex-New Yorker). 🙂
Poor Elijah
It's not a video saying mistakes they made building it --- it's mistakes beginners make using it.
@@Gearyco I was referring to him being hit by the bus 😄😉
I don't understand this comment. If you'd watch the video in it's entirety you will see this is mistakes the USER makes.
@@PrasannaGupta Ah, lol. I wasn't sure. Well, I knocked on wood for him when I said it ;)
How about bricks builder?
The list would be pretty much the same
Erroneous was ok...;)
Ok.....Help comes to mind when watching this video....I have the full version of Oxygen and have watched tons of videos trying to get information to help me make the write choices when rebuilding my site myself and adding valuable content.....and then you come along and drop a bombshell and I need to re-evaluate all I have seen up to now.....and I am, of course, grateful but angry about wasted time on videos that don't explain the pitfalls like you do... so getting started with the rebuild which is not rocket science but like you point out....do things the right way.....I, for one, heard you....;) When starting with Oxygen from scratch which videos would you recommend (your ones)....;)
It's still an H1 fam!
?
@@Gearyco @52:39
if automatic css goes lifetime purchase, ill go for it. until then hell no.
So you don’t think it provides way more value than 99 a year?
$99 is too much 😂. The cost is NOTHING for a tool that gets used on every project, especially if you are selling web design services and using this tool to deliver your services, $99/year being too much is just laughable, it should be much more. Either you aren’t selling web design services, you don’t take yourself seriously, or you need to step your game way up.
Hello, just found you on YT, can tell me if there's a way to easy move from Divi to Oxygen? I do like Oxygen is more bloat free, more structure, but is a pain to move to this one.
Are of interest: general websites, WooCommerce and restaurants.
Thanks.
No easy way. But … switch to Bricks not Oxygen.