Now, if you're fairly new to this channel, you may not have seen the previous oxygen videos i did about two years ago. Well, since then, there have been a lot of advancements and many of my regular viewers and visitors to the wp crew.
Facebook group have repeatedly asked me to revisit oxygen and create some content covering it well. At long last, i've had a little time to go back and take another look at oxygen and in this video i'll.
Give you my thoughts on the software, the interface and some of those key basic features. Now i need to say this is not a review or a full tutorial. Rather, this is me going back for another look to see how i feel the software has matured and if there's enough interest online to possibly create some more dedicated, tutorials and guides in the future.
Now we'll, also be doing a short comparison. Video of how working with oxygen both differs and shares many similarities to page builders like elementor or divi. So if you're interested in seeing what oxygen is all about and if it's worthy of your time to learn join me as we step inside the wordpress plugin and dig around a little okay.
So first off. What exactly is oxygen primarily? It's, a builder for wordpress, not so much a page builder, more of a site builder. So what i mean by that is, we no longer have to rely upon any kind of theme: oxygen, basically disables.
The wordpress theme in structure and allows you to create every single aspect of your site, either through individual pages and posts or through templates. There's, a lot more to it than that. But this is just the basics of what you're, going to be doing in today's.
Video. I just want to give you a kind of first look at the new version of things. Show you some of the basics and just give you an idea, a sort of overview of what oxygen is and how you basically get started.
This is not for people that already use oxygen. If you're already familiar with this, this is probably going to be way too basic for what you need. That being said, if you're new to oxygen or you just been looking at it, this will hopefully give you a good, solid idea of the types of things you can do and how it actually works.
So with that, out of the way let's start off by taking a look at oxygen and my kind of first thoughts of the actual interface. Now, when you install oxygen and any of the extra add-ons like the gutenberg add-on or the woocommerce add-on, you're, going to get a new entry inside the dashboard of wordpress.
As you can see, we have oxygen and, depending upon any of those extra plug-ins or third-party plug-ins, you may include you probably will see different things inside this section, but as a basics, you should see things like the home templates and so on.
Let's. Take a little look. First of all, at what settings we have available now inside here, you can see things have broken down into a range of different sections, and this is kind of where my first thoughts of oxygen and the interface kind of come in.
This is nothing to do. This is totally independent opinion to what you can do with oxygen more a case of how i really think they should spend a little time with a ui or ux designer to create something just a little bit more pro now i know it's.
Only 99 and that's, a subjective price for a lifetime deal. But just looking at things like the settings section, they could just be made so much more professional, and this is kind of the first impression that you get when you start working with oxygen.
Is that it doesn't, necessarily look as pro as some of the other options out there, that's, not to say not to take away from the functionality behind it. I would just like to see that functionality married with a great looking interface and a little bit of a better ui ux.
That being said, what do we have inside here? Well, this is oxygen 3.6. So we ' Ve got some new features inside your compared to if you're working with older versions, or you may have seen some of my pre-version 3 videos that i did quite a while ago.
We now have things like client control. This easily allows you to keep unwanted visitors out of various different sections or the ability to work with the oxygen editor. So, as you can see, we '
Ve got editor author contributor and so on administrator. Obviously, isn't inside you as an admin. You want to have full access, but you can easily set up whether you ' Ve got no access or full access, as you can see, all of those have those options.
Now again, it would be quite nice to see the ability to have no access, limited access and full access, or at least allow you to control what features you allow access to. If you want to give oxygen builder access, then you can add users for a per user access, so you can ignore these four levels and you can add, in specific user levels, which is pretty cool to see.
Then you ' Ve got your post type manager, so you can hide oxygen metabox on the following post types. In other words, do you want to enable the oxygen editor in areas that it doesn & # 39? T really relate to so user request: wp block, oxy user library pages posts.
If you've got other features inside you, including things like custom post types. You can choose whether the oxygen editor oxygen builder is available on those specific post types. So again, more granular control, which is pretty cool to see.
Then you've got things like security. Svg sets type kit your license, css cache things like bloat eliminator, which helps you to streamline what's, going to be loaded when you're using the editor to help you improve the front end speed, which obviously is something that most Of us are really concerned with these days and finally, we '
Ve got the gutenberg option depending upon, if you have that particular add-on included and you ' Ll have a woocommerce option. If you have that module included as well. Okay, so that's, some of the settings that we have inside you let's.
Now take a look at the editor before we start to see how we can start to use oxygen to build designs. Now, at the moment, i've, just hopped in and created a new page, and when you do that and you save it, you get the ability to work with the oxygen editor now.
This is very similar to what you have with things like elementor. You can see we can use the ordinary gutenberg editor or for classic editor. If you're using that and then underneath we've got the oxygen area, and this is where we can choose what we want to do.
We can edit with oxygen, which allows us to edit this specific page or post template whatever it is. You're working with you can render pages based upon templates. You may have created so you could create a selection of different templates and use those as the basis for this particular page post whatever, and there's a lot of other options.
Like i say, we will come back and take a look at some of these in a moment. Let's open up the oxygen editor, and this will then open up the editor, and this is where you ' Ll spend most of your time working with any of the designs you create, like i say whether it's, templates posts or pages, and so on.
So what you start off with is a very simple bare bones: editor area, because we haven't actually added anything. We're, not really seeing much, so we'll. Keep it that way for a moment. Let me just show you some of the basics.
You have here top left hand corner. We can hide this panel or show this panel. The ad will allow us to add a different type of building block elements and we'll come and take a look at those. In a moment.
The structure is a sort of top-down view of all of the different components making up this particular page template. Whatever again, you can see at the moment we're only seeing the body, because we basically have a blank page in front of us.
The history, as its name was suggested, will show us all the different things that we've done to this particular page or template. We then have the ability to manage and we'll come and take a look at that.
In a moment, and then you also have the undo and redo options and back to wordpress, at which point you can choose to go to the admin or the front end. And finally, you have the save option. Now the manager is quite useful because inside here we '
Ve got three key areas and they might look quite simple, but there's, a lot of power and control inside these sections. So first of all we ' Ve got settings, this is where we can control page settings and, as you can see, we can choose the page width, overlay, header, animation, on scroll scripts and so on.
So you can add your own javascript inside you. If you want to, we ' Ve got the editor settings which allows us to control some aspects of the editor. As you can see there's, not really a lot in here at the moment, and finally, we '
Ve got global styles. Now global styles, as its name was suggests, allows us to apply styling globally throughout our entire site, so we can do things like set colors, fonts headings and so on, and this will then apply globally.
So if you're used to working with theme, styles or style kits with elementor, a lot of this is going to be very familiar with you. If not, you can just kind of consider these to be globally setting the values for the key components of your site.
So your colors, you want to keep consistent, colors and not accidentally get slightly different variations inside the colors. You can see we can choose global colors or if we're using one of the predefined sets things like atomic.
In this example, you can see all the colors are set inside there. Now it doesn't matter, whether you use global styles and or a sort of theme style set like atomic. For example, you can still pick and choose what you want from both or either of those during your entire design sessions.
So pretty cool to see that and again you can add your own color sets. If you want to to break things up as you need to come back out of there, you can see we can set things like fonts, so the display font and the text font.
We can adjust weights and so on inside there, but you can still apply different colors different fonts different weight, stylings all those things to any individual component or element inside any part of your page.
So just bear that in mind and again you see, we ' Ve got other things like width and break points. So anybody just come in and look at this from elementor it's, going to be nice to see that you can control your break points and you have some additional options inside here as well.
Okay, so, finally, we ' Ve got the javascript option and that's, going to kind of give you an idea. What you can do inside there come back to manage. You can see, we've, also got style sheets.
We can enable or disable the currently uncategorized style sheets. We can add new style sheets. We can add folds to contain our style sheets, so you can use this as a full css editor if you want to. Finally, we come back and take a look at selectors.
This is where we can add custom selectors in so you can pick and choose between any of the enabled selectors or you can create your own and again, you can also add folders to group your selectors together to make sure everything is organized in a simple logical Fashion so, for example, let's, open up the uncategorized and inside there you can see.
We've got uncategorized custom selectors and we've got html inside there. Now, with that html selector selected, we take a look on the left hand side. We can now apply anything. We want from the advanced options, so you can apply typography, you can apply sizing and spacing.
So you could use this in lots of different ways. You could set this to adjust the base font size if you're using rems, for example, there's, lots of different uses, so any of the selectors can easily be selected on the right hand, side, and then you can apply lots Of different styling and options, and things to those that's, pretty cool to see so that's, the basics of the interface.
Now again, i still do find this just a little bit old hat. If you take a look at something like webflow, which is a very similar type of feature set, this just looks fresh modern. Yes, there's, a lot of things going on here and i'm, not the biggest fan of the webflow interface.
I think there's, probably just a little too much going on, but i think if you could get a hybrid of the two personally, i think there's. Just a little bit of work needs to be done on the oxygen interface itself, just to bring it in line, make it a bit more fresh like i said that's, just a personal opinion, and you might not agree with me.
Let me know in the comment section what you think of the interface, then we can kind of have a little discussion so now that we've seen the interface, let's. Take a look at starting to build just some of the basics that we need to get a site working in oxygen.
So we're going to do come to oxygen, and this time we're, going to choose the templates option now inside. Here we're, going to create the first of our templates, which is going to apply the header and the footer to our design.
So to do that add a new template we're going to do. Is we're? Going to simply call this main template and then we can choose what type of template it is. So if we scroll down to the oxygen area, you can see, we '
Ve got choices of things like singular archive or other. If we expand these out, you can see inside singular there's, lots of different, singular templates for things like posts pages and so on. What we want is other inside there.
We want to use the option for catch all, and this is basically going to take precedence if another template is not being used on a particular design, and this is why we can use this for the header of the footer and the main content area.
Once we've done that what we need to do now is simply hit publish and that will allow us then to start editing this with oxygen. So now we can open oxygen up, let that load in and once loaded we're back into what we saw earlier on.
So we're going to do now. Is we're, going to start off by building some basics? I'm, not going to show you how to design things inside you that's beyond what i want to cover in this, we're, going to use some of the predefined templates just to show you the basics of How oxygen works so we can do, is we can say, add, and this now opens up all the sort of widgets or elements whatever you kind of want to call them.
And again, if you're used to working with lots of page builders like elementor divi those kinds of things, then this is going to be very familiar in one way, but also probably quite alien in another. So at the moment we've got basics, and these are things like sections, divs columns, headings, text, rich text and so on.
You can see there's, quite a few options inside there, including things like code block and inner content, and so on. You've, also got helpers, which are things like the header builder testimonials, and you can kind of think of these.
As pre-built widgets that we can then just tweak to get what we want inside there, for example, like easy posts, is a way of simply pulling in the normal wordpress post loop, and then we can style that edit, it add what content we want to it, and So on so it's, kind of like a pre-built template or placeholder for a specific type of function.
Then you ' Ve got wordpress, which are built-in wordpress features, so things like your pro menu menu shortcut, so shortcode wrapper dynamic data. For example, you've, got that inside you, so things like your title date, tags, author and so on, and then you '
Ve also got things like widgets, so your archives calendars meta, the kinds of things you probably used to see in in templates and things and themes that you've used in the past with wordpress. And finally, you've got sidebars, which you can set up sidebars, and they'll be listed inside here as well.
Library is where we're going to take a look at today, and this is where we can see those design sets and they are basically building block templates, grouped together under a common theme style. So, for example, if you open this up, we '
Ve, got things like my wordpress atomic sas, hyperion dentist and so on open those up, and you can see inside there. We now have sections and elements, and we have templates. So templates are basically full page templates and the same go for pages, so templates are basically things like your archive, your single post, page and so on, whereas pages are as the name of a suggest.
This is your home page, your contact page, so a kind of static page that doesn't have dynamic data, whereas templates are more dynamic, they'll, have things like your blog post listings and so on. You also have sections and elements, and these are kind of like blocks, or you know if you're kind of used to working with a simple templates inside normal page builders.
This is very similar and again broken down into a common styling theme, broken down into the various different components, so call to actions, contact, content, footers headers, all those kinds of things.
So we're, going to come back out of this and we're going to go to atomic. For this example, we'll, expand that out and what we're going to do. Is we're going to sections and elements, and we're, going to come and choose the option for headings? So we're, going to choose the header and inside there we '
Ve got a range of different pre-built headers and we're, going to choose something really simple like this one. Once you do that that will insert that into our page, and we now have the header builder.
So now you have full control over all the different aspects inside that particular template. We click on the image, for example, on the left hand side, we have all the options, the primary options, so the url for the image, whether you want to pull that from the media library, the image url, you can use dynamic data which we'Ll come back to a little later, you can set your width to height and alternative text all inside there and then under the advanced you '
Ve, got all the key styling and functionality and control options. So your background, colors your sizing and spacing layout typography all those kinds of things, including things like effects. So let's, for example.
Click on the navigation on the right hand, side, and you now see we get a different set of primary options. We can choose between vertical and horizontal navigation. We can choose what menu we want to use.
So we'll, pull in the main menu which i've previously created. Now. This is just a standard wordpress menu going into the appearance and menu option and create it as you normally would there's, nothing unique about this, but we can pull that in with the menu option and we can choose between any of the menus.
That we have your text, you can see, we can choose the styling and this will pull up from the color options that i said that are part of those predefined style groups. So you can see this is atomic white translucent.
So atomic is the name of the theme set and if we click to open that up, you can see. This allows us to choose the color or we can click on the little color chip and we've got all the atomic colors underneath and manage.
Colors is another option. If you create your own custom, color sets they ' Ll also be listed inside you, alongside the color set to do with the predefined design that we got in this case, like i say, atomic, so you '
Ve got a lot of options for global styling. It's. Super easy to work with really really easy to get around lots of different options and then under advanced you ' Ve, got all the standard options in much the same way as you would with elementor.
All those advanced options are inside there. Now, on top of those options for the primary and the advanced, we also have some extra features at the top. Now, at the moment, this is just referencing menu, eight and, as you can see, as we click on the different things, all those different names will appear.
So we can see exactly what we've got selected header row, image, menu and so on. You can expand the all devices option and choose from any of the predefined layouts. These are sort of break points. You can check things out to make sure it all looks the way that you want, just simply by choosing these different options.
On top of that, we ' Ve also got the id for any of these building block elements. Divs containers, anything like that. You can see there's, our id, we can click on there and there's, our id for this.
As you can see, we could reference this now directly inside any css that we create. We can immediately find the target for that specific item. You can, if you want to add a class name directly to this, so you can get.
You know full control over this to make sure that you're, targeting anything. The way that you want to - and you also have a couple of options to copy the styles to another selector and you can delete all the styles and you can also delete this actual id if you wanted to now.
If we take a look at the structure option like we saw earlier on, you can see this is kind of replicated over in this side. So you ' Ve got your header row. If you click on there, you can see there's.
Our header row, this is header row dash 2-32. If we open up, then the hierarchy, this our header row, is broken down into three different sections. Row left row center and row right inside row. Left we expand that there's, our link wrapper and inside.
There is our image and you can see we can select that from the structure option on the right hand, side and that now selects everything that we need in the left hand side. So all our advanced primary all to do with the image.
If we open up the row right and click on the menu, for example, you can see now the menu is selected and we ' Ve also got the options specific to the menu in the left hand side. So it's really easy and again this is very similar to what you kind of have inside elementor, where you can use the option.
You can pull this up on the right hand, side and you can select things inside there so cool to see that, but it is really nice to see the ability to easily grab any of those ids for anything we want, you can rename any of these.
You can simply click on it and you can choose to rename it so header row might mean nothing. You might be using a sort of set of headers. You could have one to do with the sticky header one to do with the permanent header, and you want to name things accordingly.
Well, you can do all that directly inside you so really easy to see. All those options are available to us. Okay, so now that we've kind of taken a look at this, let's. Add another object and we want to add a footer into this template.
So remember we're dealing with the whole page template, so the header, the footer and the content area are all part of the same template. Unlike with elementor, where you've got, the header is a separate template.
The footer is a separate template and then you have various different templates for other parts, so just understanding that should make it a little bit easier. If you come to using oxygen to build your templates, so let's.
Do the same again. Let's, click on add this time. We're, going to come down and we're, going to just choose the option for footers and we're, going to find a footer that we quite like inside there. So let's.
Just take this. As an example so say we'll insert that into our design, and you can see that's. Now positioned it's kind of just below our header, which obviously isn't ideal. We'll reference that in a moment, if we open up the option for our structure, you can see everything is inside you, as we'd expect and what we can do is we can easily drag these around put the footer above The header uh vice versa, so it's very easy to reorder, restructure things inside you in a really simple fashion.
So now that we've got the header and the footer in there. We need to put in an element that allows you to put the content in, so we're going to come to add. I'm, going to come back out of this right, the way back up and we're, going to just choose to search for content, and this opens up the inner content option.
So what we need to do is select that that will drop it into our page. Now, unfortunately, you can see this is in the wrong place. It's now sitting below the footer. If we take a look at the structure on the right hand, side all we need to do is reorder these, so we can grab the inner content and just drag that into the right position.
Now, at the moment, even though we've actually got everything set up, we take a look at the right hand, side you can see header in a content or footer. We're, not seeing anything inside there. So what you can do is you can use the previewing option.
So i've, already gone ahead and created some basic sample test pages, and we're, going to use that just as a visual representation of what it's going to look like with content on the page. So the preview option we can simply click and we can choose whatever page post whatever it is.
We want to use from there so for this example, we're, just going to simply grab something like the contact page and let that load in and you can see that now shows us the content inside our design. We can close the structure panel down if you want to, on the right hand, side, and we can now get a feel for what things are going to look like.
So there's, our header, at the top. There's, our footer at the bottom, and there's, our content inside. So now we've, set that up. All we need to do is save this, and we ' Ve now created the template for the header and the footer don't worry too much about what's been displayed inside here.
This is just placeholder, so i'm going to do. Is we're, going to say back to wp and we're, going to go back to our admin and what we can do now is we can take a look at any of our pages and they're gon Na show us with the headroom footer in place, so let's.
Take that contact page as an example, because we know we ' Ve got some content on there. So let's just view that and, as you can see there's, our header scroll down there's, our footer in place and we've got content inside there, so we've created The key main template really really easy to do now.
There are lots of other templates, but i don't want to get into that right now. I just want to show you how easy it is to create templates. So now we need to create a template. Let's, create a page using similar techniques.
So let's. Add a new page in and we're going to create a custom home page. So we'll. Just say this is home page and what we need to do. You ' Ll, see that at the moment we ' Ve got to save before we can edit.
So we can't do anything on here just yet. So let's just say we want to either publish or save the draft. It doesn't really matter which one we do. We'll, just save draft. For now, and now the edit, with the oxygen option, is available to us.
So let's, edit, that with oxygen, let's, let the editor load in and now you can see our header and our footer are in place and we ' Ve got this large area in the center. That says, click add plus to add elements to this area.
So we've got header and footer already predefined is pulling that in for us. So now we can just go ahead and build out this page. So we ' Ll click. On add, like we did before, we're, going to come down to our library like we did before and open up our design sets, and we're going to stick to atomic for now, but you could use any of these as A good starting point - and this is kind of what i would recommend - is to just open up some of these pre-defined, layouts personally pre-defined pages blocks and so on, and have a look at how they're made up it'll.
Give you a good idea of how things work and then you can just experiment and test things out to see how you feel about things. So let's, open the sections and so on. Let's, try something like a hero and title and we'll, say i, like the look of this one with the laptop we're, going to click, to add that in there and boom it's.
Now into our design, every single element inside here is still editable, so we can click any of these and we can use any primary or the advanced options to change anything we want. So let's just say we wanted to change the typography.
We click to open that up and we'll say we'll change the color, so we'll click on there and we'll say we want this. I don't know let's. Just try this dark gray. You can see that changes that it '
S got some opacity applied to it, so we can adjust that if you want to or we could go for a blue change it to whatever you want, so it's really really easy to do change your font weight change that inside here.
If you want to - and you can see this overrides any of the pre-defined global styling options that i showed you earlier in the video just set that back to there and that now picks up the default styling applied to it.
Okay, so really easy to work with. On that, like i say, everything is totally editable, so it's really cool to see. We can do that. So let's, come down and say we want to add something else. Since we're going to come to add - and this time we're, going to do something along the lines of call to action and we'll just say we want something like this.
One should add our call to action in there. You can see boom that's now been inserted in we ' Ve got a couple more just to have some information in this. We'll. Do pricing this time and we'll say this one looks pretty good, so we'll.
Have the pricing table in there and finally, we'll, add one more section in and we'll, save it at a showcase, and i quite like the look of this one. So we'll. Add that into there as well, so now we've created a page using predefined blocks, as you can see, really really easy.
We'll, hit, save on there and now we can say back to wp and we'll, say front end and then there's our page, so our headroom footage is in place all those different sections we just pulled In are all in place and everything is loading in really nicely.
So let's. Take a look now at those global styling options and how we can use those. Let's, go to our manage and we'll say we want to use settings and from there we're going to say we're, going to use the global styles option now at the moment you Can see we & # 39? Ve got lots of different things.
We can change, but we're, going to keep it really simple and just say we're, going to change them like the fonts or the headings and so on. So we have fonts, you can see. Monsterat is the main one. We could change that to let's, say, for example, times new, roman and bang everything now the heading sections are changing over to that.
So anyway, that's using h1. Through six, unless it's been styled using the individual, widget or elements options under the advanced setting will pick up those global styles so really easy to do so. Let's.
Put that back to what it was or put it back to something like roboto, so really really easy come back out of this and let's just say we want to work with the colors and so on. Let's, open the colors option under atomic, for example, you can see if anything is using one of these colors like this dark blue, which i believe is being used for the buttons.
We can click on that and we can change that to something completely different. So let's just put that there, a bang anywhere that uses that color now look absolutely disgusting, because we just changed it to a really horrible, greeny, yellow kind of color.
But you can see how easy it is to reference any of these options. These colors, these global settings for fonts colors, all those kinds of things all fully controllable. Let's, just undo that put it back to what it was just put it back to there.
There we go so the settings super useful to do now before we move on there's, something else i want to show you about these building blocks. These predefined blocks, whether you've, created them, or you're using one of the predefined ones that are part of oxygen itself.
If you'd, like to allow your client to be able to make changes to various pieces of content, but you don't want to give them access to the oxygen editor we can allow them to edit things using gutenberg.
Let me just show you let's, open up the structure options and, as you can see there's, all our inner content sections, the four different blocks. We've added in the hero, the call to action, the pricing and so on.
So let's just say this hero section: we click on that. We click on the little hamburger menu and from there we have the option to say copy to block click on that, and we can say what name do you want to give this? So we're, going to call this hp hero so that's, your home page, hero section.
We click! Ok, on that that's now become a gutenberg editable block. So now what we can do is we can come out of this and we can take a look at that inside gutenberg and we can reuse that at any point inside our design so coming out of the oxygen editor.
If we come into oxygen now, you can see we have block library if we open that up there's, our hp hero, so that's. Our homepage hero block that's editable inside gutenberg. We can edit this again inside oxygen if we want to, we can click to edit that it'll open up the editor and allow us to make any changes we want to, and this opened up inside oxygen.
So we're, going to do let's, go back to the admin of wordpress. We'll. Leave that okay, so with that in place. Now, if we come into let's just create a new page. We'll, just add a new page and we're just going to call this guttenberg test.
So now we created that block. All we need to do is come up and add a new block in and you can see there's. Our oxygen blocks there's, our hp hero. We can click on that and bang that's now inserted into our page.
We can click inside the text and we can make changes to this. If you want to there, we go. We're, going to change that we can change the text on the buttons we ' Ve also got a load of options down, on the right hand, side for various different parts of this template design.
So you can change the icons, you can change various different components and, depending upon the type of block and the type of content you'll, see different options down the right hand side. So this gives your clients the ability to make simple edits.
Without touching the oxygen builder, it's, also worth noting that where you can see this edit hp hero in oxygen, that's. Only because i'm an admin and i have access to the oxygen builder. Your users won't, see that option available if they don't have access to the oxygen builder.
Okay, there's, just a couple of things that i want to show you now before i wrap up this video before it gets just too long conditions. Conditions are super useful when you're working with websites, especially if you want to limit when something is going to be shown based upon various different key factors.
We can do that directly inside oxygen. So let's. Just come down to this bottom section as an example, and we'll select this sort of area. Let's just make sure we ' Ve got the right thing selected.
The showcase - and we can do now is we can set this up to be conditional, come to the left hand side and to the top. You can see showcase three by three full width, which is the name of this particular section.
We have the option for condition, settings click on it or we can say we can set conditions. Your condition types. If you're stacking conditions on top of each other. Are they going to be and conditions or all conditions in editor, behavior always show? So on and so forth, so let's just say: set conditions and say let's.
Add our first condition. So we can choose from a range of different things. Things like post number archive, taxonomy term, all kinds of different things: dynamic data session variables, cookies, all kinds of really useful things.
Let's. Just set up a really simple condition: let's. Just say that the user logged in and then we have, the condition is equal to or is not equal to, so we say is equal to and then you have true or false.
So if the user is logged in they'll be true. So you can say this will only show to people that are logged in or you could set it to false, so it ' Ll only show people that are logged out, so let's just say: set this to true and there's, our condition.
If you want to add extra conditions, you can simply add another condition and build these up to any way that you want, or we can just click x, to get rid of it. So that's, that's, the condition done. We're, going to close that down and we're going to save this.
So now we're, saying that if someone isn't logged in they won ' T see this. If you're a logged in user, you will see it. So let's open this page up now inside an incognito browser window and test that okay.
So this is the normal browser where i am logged in. So if we scroll down to the bottom of the page, logged in users can see this gallery section, let's. Take a look now inside an incognito window. So let's, just open that up and we're going to do is take a look, and you can see this is my incognito window same page i'm going to scroll down and because i'M, not logged in that section.
Isn't available, so the conditions are really easy to work with. They could be super useful and you can use those for a lot of different cases. Okay, so now let's, move on to one of the most important things and what people talk about oxygen, and that is the speed now.
This is not an optimized site. This is just using those building blocks there's, no cdn on this site. There's, no optimization going on, and there's, no plugins to speed things up, whether on server level or inside the actual site itself.
So let's, just analyze this page and see what kind of result we get back with the new gt, metrics. Okay, so here's, the results coming back for this particular page. You can see we're, getting an a across the board which isn't too bad 1.
5 milliseconds for the lcp measurement, and if we take a look underneath, you can see properly size images. This is one of the key areas to slowing things down. As you can see, we really could do with optimizing that image of the laptop and some of the other ones they're all a little on the large side.
So, with a little bit of optimization a little bit of tweaking, we could easily, i would think, get this down to sub one second, so that's, pretty cool to see, and i think it's. A good starting point, like i say, no cdn, being used on this, no speed cash in or anything like that on a server level or on the wordpress site itself.
Now, what exactly are my final thoughts on oxygen after spending just a little bit more time with it? Well, i still don't think it's for everyone, and while the interface works, it really does let it down visually and, as i've said in previous live streams, i think they could really benefit from employing a Ui or ux designer to bring this whole design aesthetic into the 21st century, but that aside, the software has matured well over the last couple of years and once you kind of get beyond those basics, with a little css and html knowledge, you can really create great.
Looking websites that benefit from pretty good loading times well optimized code and a flexible platform for future development. However, if you're, looking for something as easy as elementor, you may get frustrated pretty quickly now, while the basics are easy enough to get to grips with a lack of css and html.
Knowledge may well hamper and frustrate you, but that being said, it's, always good to have a basic grasp of those technologies. No matter what platform you choose to use to build websites, but hey that's just my opinion.
What's? Yours? Are you an avid oxygen user new to the platform and excited to test it out or firmly against what it offers? Let me have your thoughts in the comments section. I'd love to continue the conversation on oxygen and, if you'd like me, to create more tutorials out in 2021 again, let me know in the comment section now, if you'd, like to check out my previous Oxygen tutorials, you can click on those right now and, as always, all the applicable links are in the description below and if you made it this far into the video, why not give that thumbs up button, a click? It really does help the channel out, and while you're at it, if you like the content, why not also click the subscribe and slap the bell icon? However, if you didn't, get value from the video well feel free to hit that thumbs down button twice.
As that works pretty well too, mine is paul c. This is wp test until next time take care.
