Reasons to buy Oxygen Builder. You'll never buy another theme.

in this video we can have a look at the reasons to buy oxygen to either design your own website or to design websites for your clients first of all you'll never buy another theme again oxygen allows you to design the theme you want the way that you want so you'll never buy another theme and the website that you make will also not be bloated with unnecessary classes or scripts that will slow your site down oxygen is a very clean and neat temptating system that outputs very clean and neat websites so what can you do with oxygen well when you load up oxygen you'll be asked to either install an oxygen design library or to design a website from scratch if you select to choose something from the design library here are some of the sample websites that you can import into your your site and all the styles the colors the layouts are then imported into the website for you so for example if i wanted to look at this flight school i could first view the demo and if this is the website that i would like i would be able to then import these elements into my website update and be able to go live so what we would simply then need to do is just click on install and we've used the standard atomic theme for this demonstration so the first reason is i can install a completely made up website go in edit and my website is complete or i can create a website from scratch when we have a look at the templating layout um we head along to oxygen we go to the templates and these are all the templates that are created for my theme i can look at the main which is the header and the footer i have page layouts blog posts archives other singular and even inner content so how does oxygen actually work what does it look like let's head over to the interface and what you'll notice in the interface is a very nice user-friendly layout we'll activate the panels and you'll see that on the right hand side i have a tree structure which indicates the elements on the website and on the left hand side if i select an element i would have all the formatting options available for that particular item and you'll see that it's it has a standard primary panel which looks at some of the main formatting options however if i head over into the advanced section i have complete access to backgrounds which may be images maybe gradients i have different size and padding options i can even change the width perhaps from a page width to a full width or even my own custom width maximum widths maximum heights if we look at layout this is where we can look at flex options block i can even choose to display none floating overflow clear visibility set the z index and also things like absolute relative fixed or static and you'll see that here i can set the different settings for say absolute relative or fixed items we'll quickly then head on back to typography and here you'll see that if i have an element that has various typography features anything from the phone family which allows me to select any google font font sizes the font weight where the alignment is the line height the letter spacing underscore overscore normal italic capitalize uppercase whatever you need for your fonts and if we have a look at borders you can set individual borders you can set the color you can set the width the style you can set the border radius globally for all four corners or you can set the radius for individual corners so borders are well taken care of then we have effects effects then add a lot of specialized animations transitions filters shadows opacity to your content elements and it would be as simple as clicking on the element enabling the animation for example in this case animate on scroll and then completing all the settings available you don't have to know what they are you can simply click on one of these items and see what's available and what for for styling or what's available to make that particular effect work under transformation if you add transform you'll see you have a number of trans transform options available and you also then have a transition option which will then set the transition so if you wanted to create an effect that was only available on hover you could simply select that item head over to the state select hover apply the effect to hover and then even set the transition so that could be for example hovering over an item and it enlarges and there you could create that smooth transition as your mouse hovers over a particular item so you don't have to know everything but you can certainly see what's available when you're having a look at individual items so a lot of effects then you can also add your custom css so here i can add custom css just applicable to that element in another section of the website i can actually add my own style sheets and my own classes in this case we're just looking at these menu items then we also have the javascript area i can here add my own javascript to that particular content item and here we can even set our own custom attributes so here i would set the name which can either be my own name or like it might be a field in the data which in the data may be a custom field it could be a title it could be a category so it could come from the featured image author current user blog info archive or an advanced php function so that all integrates and then allows me to assign a value to that attribute a lot that you can do there then which can allow you to format content in different ways based on certain values or maybe you want to integrate with javascript and you need to have a specific attribute you can do that and even if you're looking at some json values or structured data for google to pick up on so you then have complete freedom to create whatever attribute you have you want on the right hand side we have this structure panel here which is open by default and here if i wanted to move something around i could simply select drag and now that element is moved in this case to the bottom of the page if i want to move it back up simply drag to the top and it's back at the top of the page and similarly i can go into each of these items and i can even move some of the sub items around in those areas i can also rename any one of these items so there's a little menu here i can quite easily then rename as this one has been renamed to footer and if i wanted to rename that simply click on rename and type in the new name for that item if i want to wrap an item with the div i can simply select and then wrap with div and that item is now wrapped with the div and if i'm not happy with that change i can move up to the top here under history and simply select undo and that will then undo whatever i've just done so that's a very quick overview of the left and the right hand panel so the right hand panel looks at the hierarchy of your page while the left hand panel looks at all the formatting options available to the panel that you've selected so there for example we have a an item selected and you can immediately see on the left hand side how the panel changes as i select different items right so that's just a brief overview of the left and the right hand panels and then at the top here we have the save button in the top right hand corner so there are revisions that are saved as per normal wordpress post so it does allow you to go and look at the history of an inclu of an entire template that you've created or page that you've created but then here's this is where i save this is the structure panel that you saw and then the history which is the undo and redo and then under managed i have a couple of options available to me here so if we have a look at settings you'll see that i can manage my entire website look and feel from a central point so all colored or fonts headings body text links are all set from within a central place so when it comes to colors i can have global colors and atomic colors so we pre-loaded the atomic theme so if i go into atomic you'll see that i have all the colors that are used in that theme that i imported here so if i wanted to change the look and feel of this theme i can simply click on any one of the colors change the color and that color change would then be applied to the to my theme so that's the one way of managing the the colors of my website and if i want to add another color i can simply say add color i might want to create a yellow and then i can look up that color maybe i'll scroll down to the yellow add color and now yellow is saved and if i head over here to my text color you'll see that the yellow has been added so that's how quickly it is to create a new color and then to have it appear in the colors available for your content so that ensures that you don't ever use colors that are not specified or spec for your theme and very easy to then select any color and you'll see that the change is applied immediately so that's just a quick look at how you can set up your your colors so let's go back to the settings and scroll back to the top and let's go out of colors i can even add a new color set so we have the global colors i can add a color i have my theme colors and i can add another color set if i want to i can have as many as i like when it comes to fonts we look at a display font and we look at the text font so if i was to change the font you'll see that the font then changes all in all the spots on the website where the font is used so very quick and if i want to add another font i can simply click on add font and add that font to the website if we head over to headings here you can see the standard h1 to all the way down to h6 and i can set the font size i can send the font weight and i can set the line height and the font of course is taken from the menu we just had a look at now which gave you the fonts but if i want to add a different font i still have the option on a text element to change the font individually if it's just going to be different for a specific item so for example i can just make that item with that font but these are the font standard fonts available throughout the theme so when i insert one of these menus it will automatically take on that formatting so very nice and easy then on the body text standard size for body takes the font weight the line height and the color so that will be the standard body text once again if i change that it changes on the website then we have different kinds of links so generally you'd have a default color for a link so whatever item was made into a link i would it would then automatically assign this color but once again you can go to the individual item and overwrite that value if you so desire then we have what we call the text link so i can i even create a separate color for the text links so this is the default and then i can create something special for text links then we have link wrapper so if i added a took a div and assigned a link to it it would then become a link wrapper and here once again i can set the styling for whatever would appear in that link wrapper and then we have our button so here i can set the font weight for the button and i can also set the border radius and if you were just wondering about buttons if i click here on the button um you'll see that i have a text color a hover color a font size a font weight um i have a rel tag that i can set as well and the target the link font family colors so once again here i can manipulate my button so i have the basic layout here and then i can still go in and update each element individually so that was links up until button and then we have widths and breakpoints so for your mobile settings you can set your widths and break points then we have sections so the section is generally the container that contains content and when i add a new section i can set the container padding for that particular item just save some time and having to set it every time if it's going to be the same then we have animate on scroll so if i was wanted to set some an animate on scroll i can come in here and set the default animate on scroll settings i don't have to do it for every item every time and then under scripts we have the option to smooth smooth scroll to hash links i can select that set the scroll time and then any hash link in my content will then inherit that that scroll so if we have a look at the interface i can also eliminate it completely so that i can have a look and see what my website will look like on the front end and of course very easy then to get it all back when i'm ready to move on the next thing that we're going to have a look at then is style sheets so if i wanted to create my own style sheet i'm able to come in here i have two here that i've created but very easy to create a custom style sheet simply say add style sheet and i can add a style sheet i can add a folder to put my style sheets in and simply by clicking on that pencil i can then edit that particular style sheet just select it and there we have the different style sheets and i can edit those styles and here for example we have the atomic style which we can enable or disable and here we have one of the disabled anything that you don't want to use you can simply disable you don't have to necessarily delete so if i wanted to move these into the disabled i could simply click on that and then disable those styles right so that's style sheets but over and above style sheets we also have selectors and inside the selectors you will see that these are the individual selectors that you can create for your website and these are those that are supplied when i've imported this theme these are all the selectors associated with that theme but to give an idea if i came to home here i could add another class for example so i might call that a test class so let's call that a dash test class and to show you how easy that is to add simply add class and then you'll notice that a test class has been added here so i can now go in and make whatever styling i want here i can also select head over to advanced and do some settings that way it's just often much easier to do it with the object that you styling selected so that then allows you to just to have a look and see how you can centrally manage the style the colors the fonts all those elements from a central point and then of course you saw how easy it is then to override those elements on an individual level at times when you need to do that and this link over here then well let's close that so we've looked at setting style sheets and selectors and if we have a look here i have an option here to head back to the admin or the front end or i can right click and open in a new tab and sometimes that's a nice option when you're working on a website so that just gives you a brief overview into the menu structure that you're seeing as a as the person designing a website the next thing that we're going to have a look at is adding the different content elements to your theme so while we're looking at this you'll see that if we go and have a look at our structure on the right hand side we have a header we have inner content and we have a footer and we've also added some other special content so the way that this works is typically on a website i have a header inside my header i have different items like navigation this one has a button that says contact details if i had to have a look at my header in the top row there i can see i have my header row 1 and then i have a second header over here which contains the second elements and if i wanted to move my contact details to the top i would simply drag and drop i know those elements are in the top so that's how you would work with the elements within the header and this would then be stored in a template that we called main and when we then create a template for example if we look at page you'll see that we say inherit design from other templates and we're saying inherit the main design and the main design here has been set up in such a way so it contains the header footer inner content doesn't contain anything but the footer is also contains a lot of content so that tells me that when it inherits the element the header and footer will be as per this header and footer and the inner content then will be as per the content on the website if i want to create different headers say one for christmas one for easter one for a summer sale a winter sale i can create several different headers and footers and these can be stored either as different templates which then can be inherited with different pages or i can create several headers and footers within this template and assign a condition and then display that content based on the condition so this header for example i could set the condition and very easily say that if the date is equal to is before or after this particular date then display this header and i could add another header and say if the header is between different dates then display a different header so i can manage all that all the headers and all the footage that i want for my website for different promotions from a central place another good reason why oxygen makes so much sense because you can manage your theme centrally right so that's that's how to look at some of the headers and the footers and how to customize some of the styles let's just have a look at what we can do when we look at the actual content of a page so when it comes to the actual content of a page and let's have a look at something that's very standard in wordpress and that would be your post so normally you would need to create your post and generally you'd want to create your post in a specific style so here we head over to the structure of our website and you'll see that we have an element here called easy post now easy post is exactly what it says it's an easy way to create and style posts on your your website so you don't even have to worry about any of the programming or the formatting or the styling if you don't want to to bring in content elements and you don't only have one options you have several options and to show you how that would work is in the styling site if we look under templates here is the template so i can edit this standard template or if i wanted to add a new element simply go to my helpers on the left hand side here head over to easy posts and here in easy posts i have an option to bring in different styles so i could go the same content but now style completely different so that's as a list i could do something like that um i could quite easily select a timeline um i could quite easily select something like um like that and you'll see it even has the built-in animation and the stripes just mean that there's no image for this particular post so you can see how easy it is to bring in different elements and then once those are imported and you'll see that this is the like a default layout so grid image standard but i cannot even here come in and under my templates if i want to remove something for example i don't want the number of comments to show i can simply remove that item or i could simply remove all the post meta and you'll see that the post meta after applying that code has now been removed so very easy for me to here come in and if i like to style my own templates come in and create my own style that i would like what's also nice is i can also then look at the style sheet for this particular template that was pre-made so straight away i can come in here and start messing with the colors the alignment whatever i want that pertains just to that particular layout another nice benefit is i also have control over the query so i can either use the default wordpress query i can come in and create my own custom query so if i had custom post types i could then select that custom post type and create my own loop the way that i would like it so we have the post type then we have filtering so by taxonomies and um by authors so these are standard post options available and we can set the order to ascending descending and then of course select what to sort by and we can also set the count so how many posts would we like to be pulled into this particular loop and then we also have the manual option and you'll see this is a very standard way to set up your own post within wordpress and you'll see for example author name equals admin and the category name equals and the post per page equal so you can create very bespoke loops based on exactly what your requirement is so another good way another good reason to get oxygen is you don't need to know everything you can have a look and then from the information you're given you can get an idea of what you want to do so you don't have to be an expert in wordpress to be able to learn and find out more about how things work and put together so that's just a brief overview into the easy post but oxygen have included another feature which allows you to create your own loops and that is what's called a repeater so once again if i go into my helpers and i head along to repeater i have this option here which gives me once again i have a query i have a layout i have pagination i can then choose normal mode or single mode and in this query once again you'll see the same options that we just looked at now then i can choose my layout i can decide what the layout is going to be so the nice thing about the repeater is that you'll see here it's a completely blank setup i can come in here now and create my own layout by adding a set of divs inside that div i can maybe create a title and if i want to link that title that heading to some data i can simply double click that item head up to the top of my screen here go to insert data and then choose maybe i want the post title maybe i want an excerpt maybe i want a date whatever i want to put into that text item now i can and when that is rendered according to my loop it will then of course have the the data so in this case it's just the um the the home page title that if i was in a particular category would then bring through the the title of that particular post the other nice thing is whatever i insert into that data in this case i chose title i can select to make that a link which means that when you click on it it'll link through to that particular item in the website so here i can create my own bespoke system for for laying out posts so i can either go with the easy post which gives you a number of pre-made options or i can go into my repeater and create my own layout entirely from scratch and that's sometimes really nice when you're working with custom post types and custom fields because you can pull those values then into your post loop so that when people look in the grid view they will see that information inside the grid and not just the standard wordpress option so that's pretty much how that would work so you have complete freedom to create whatever you want to create now on your uh archive pages so if this was your recent post you'll see that it has this information here but there's nothing stopping you from adding background images from adding background colors or including other content elements before or after the post that you've entered so you have complete freedom over the way that your template for your archive items so that archive items would be things like categories tags or even your own custom taxonomies custom categories custom tags that you've created all of that would then be templated in to display with this layout but the nice thing now is that within my templating settings if i head back out to the admin for this particular archive you'll see that i can choose which archive which taxonomies will use this particular category so i can either say all categories or here would be a list of tags here will be a list of categories or my own custom taxonomies and then i can say well if it belongs to category a use this template if category b that template if it's this author then use this template so the nice thing is is that i can create anything that i want to display the archives on my website i don't have to stick to a choice of one or two i can create a hundred if i want for a hundred different categories it's entirely up to me so this is where i have complete control over which archive is going to use this template and then i also have a template priority so i can even create templates with higher or lower priorities which then determines which template gets shown so there are just layers upon layers of functionality inside oxygen so another good reason why oxygen is the go-to tempted builder a strong consideration if you're looking at creating a template for your website so let's have a look then at some of those dynamic elements that we just had a look at so i'm just going to deselect those items and then we'll edit with oxygen again and you'll see here we can pull in the any item from a wordpress post can be pulled into that archive or if i'm looking at a at an individual page i also have some options that i can pull into my my page so while we're looking at archive here you see the archive but it doesn't stop me from in my header or my footer from bringing in the latest post so if i wanted to i could head over here and bring in a loop with the latest posts so i can do that so the the um the different elements within oxygen can be applied anywhere on the website you're not restricted to only applying that element in a specific place so here we looked at what was possible and just to give an idea of what's possible when it comes to some of the other wordpress elements if we go to a standard page um or let's create let's go and have a look at a post template so here we're going to head out and head back to the admin section we'll head over to templates and then what we'll have a look at is how to when it comes to blog posts how to create different blog posts so and you'll see that you can actually then link the dynamic content within wordpress to your page layout so here we have oxygen loaded and i'm on a standard post page and i open up my structure panel and you'll see that here we have the different elements and you'll see it's picking up the name of the post hello world and if i click on that you'll see that it brings in this funny text and the reason for that is because i've taken that standard text element double clicked on it and i've gone to insert data and i've said display the title for this post right there and that's exactly what's happened the same applies to the date so you'll see here that we have this reference number and then we have this date or this reference and that's just to ensure that the the shortcodes that i use are legitimate short codes and that it's not some injected malware on your website so those are all generated automatically by oxygen builder you don't have to worry and here again we have an item so we have what's called a simple article which is something um standard from wordpress i can do a simple article or i can create my own um layout for my particular post and i can also in this case we've also inserted a code block so if i want to i can also include my own code blocks with my own php or html code in this case it's empty but i might have some custom code that i want to run i can actually put that custom php code in here and it'll run on the page i don't necessarily have to go and create a function can do it that way but maybe i just want to insert something quickly here well this is where i can do that and then also here we have the comments section which is also standard wordpress element so if we go and have a look at what's available under wordpress you'll see that under dynamic data when it comes to a post i can just click on dynamic data and then by selecting these items i can simply bring in for example there that's how i could just bring in the title i could also bring in categories bring in the date bring in the author so you can see how easy it is for for me to build up and create the content that i want and then of course it's very easy to delete the item and as i showed before you can move stuff around so maybe i want to move that out of that section into the next section and now you'll see that categories are displayed with the title so very easy to move stuff around another good reason to use oxygen then is the integration into the dynamic data inside wordpress so very easy to do we also have other options within wordpress and you'll see here that this may or may not be relevant to a particular post but we can bring in things like the different widgets um so the widgets are available here or in the widget menu in the standard wordpress way if you're assigning to a sidebar but if i wanted to bring in a widget into a a post layout i can simply do it straight from from this widget option then i can bring in my own custom shortcodes we can also bring in menus so menus wouldn't apply here they would apply more to the the header and the footer so in the header here if i wanted to add a menu you'll see i've added the menu item element that you saw and here i can then select the menu and the menus would be then set up in wordpress in the normal wordpress menu and i could simply from the drop down select the menu that i want and if we go back here for example then to wordpress you'll see that i have a pro menu as well and the pro menu is another menu option just offering a whole lot of different [Music] formatting options and the way that it works and of course you'll see that there is for a vertical menu and that's for a minimus menu and then we also have these other menu items so that's just the pro menu it just gives you a bit more in terms of formatting but there you can see how i brought in that dynamic data the menu and quite easily insert that into the header of my website so very easy to do and we can for example even put in a search bar so if i wanted to put in a search bar into my header i could very easily then head over to my wordpress options i could then go to the search form and i could bring in a search into my website maybe move that to the row center and there i have the search brought into the center of my website and once again here if i wanted to wrap that in a div simply click on the menu wrap with div and i have it wrapped in the div and now you'll see that based on that div information i can then change the width of my div and if i want to descend to that content simply click on center and it is now centered so that's how easy it would be to bring in a search bar into my header for example and those same elements now um or similar elements can be then used from the dynamic post options here i can bring elements into the post you saw how i bought other elements like the menu into the header here for example is my content my comment form so just to show you i can add and then comment form and you'll see that it's already styled based on the theme that i imported so very easy to do so yeah another good reason is just that it's so easy to create your custom post layouts for example this header for example if i didn't want that background in there i can simply remove the background and if i wanted to put an image into the background i could head over to background here take out that image overlay or if i want to assign an image hit on data select featured image choose from the size and now if there is a featured image with a post it's going to be a background image and if i wanted to create a gradient background simply come in add the colors i don't know how many colors you'd want for your gradient but you can come in here now and create whatever gradient you want for your um posts and what i can also do when i'm i'm here looking at my gradient so i head over to background to my gradient and i now have a radial or a linear option and i can of course change the angle of my background so there very quickly i've changed the complete style of my individual post and if i want to see that on the front end well i can either remove the sidebars here to get an idea of what it looks like or simply right click click on front end opens in a new tab and there are the new styles that i just applied so it's really that easy to create custom looking styles for my post and once again i can assign that layout to if if the post is in a certain category display with this template if it's in another category displayed in a completely different layout so i can style all my posts on my website in a completely different way so that just gives you a brief idea of what's available when it comes to the archives so this would be the archive and when it comes to styling individual posts there's literally no limit to what's possible when it comes to styling posts archives and layouts whether they're custom post types or standard post types within wordpress and we also had a look at the repeater field which shows you that i can even create my own custom layouts i don't have to stick with the standard suggestions that come from oxygen when it comes to the header and the footer of my website i can create the header and footer that i would like for my website here we've added a search bar if i head down to the bottom all the cut all the content elements are available to me to put into my footer so if i wanted to add um i could add my own repeater in here i could add my own post loop in here if i wanted to any one of these items is available i could add my own slider for example i can put a little slider here on the right hand side and i could add say some tab content so maybe here i want to add some tab content i can then using the tab option add my tab content and format my tabs so i can add any content i want into the head and the footer of my website there's no restriction so that's another nice thing that you get out of oxygen another good reason is you style the headers in the footers the way that you would want them the next thing we're going to have a look at is the fact that we we can achieve pixel perfect design because i can style the items to either be for example in this case um maybe my design says adjust to the full width of the page so if i look at that this will then be the full width of my my page but maybe in my styling i don't want it to be the full width it must be the width of the site i would head up to my header builder and under advanced under layout and the size and spacing we go from full width maybe to page width and now i have a very defined width for my header i can come in and style the individual items and position them exactly where i want them to meet the design that i've created so once again i can check any element and change the formatting so that it is different from maybe what's standard for the rest of the site maybe i want to do something different because it's the header so for example whatever i want to do i can come in here and style menus buttons logos so um here for example we brought in the social elements all i do is put in the social link and it automatically pulls up the icon and here i can decide if i want circles squares if i want to blank maybe not blank and i can also say no use the brand colors or don't use the brand colors and here the space between icons i can change that i can change the size of the icon make them bigger make them smaller so quite a lot of control here over those social icons and implement it very quickly and very easily so once again a very flexible layout option so now that we've had a look at the fact that we can create our custom headers and footers we must also then have a look at the fact that these custom headers and footers can appear different when you're looking at them in mobile and when they're in desktop so if i was to want to have a look at what my head and footer would look like on a mobile device i can head down to the smallest viewport size scroll through and see what it looks like and you'll see that this has a completely different look because that menu that we had here at the top is not available at the top and we now have our own custom menu bar here at the bottom and if we have a look at that on the front end let's just quickly have a look at that in the mobile view you'll see here that we have a completely different look we don't have that big menu at the top of the page we have something a lot more compact and when it comes to the menu instead of the standard drop down we've created this very engaging menu with our own style so let's just refresh that so that it runs as a mobile page and now you'll see i can scroll up and down i can have pictures or i can have standard text links and then we just have a button here to exit so i can create custom layouts custom styles custom experiences if i want to make a phone call simply hit the button on my phone i'll be able to make a call here i can make the call through my website so you can create whatever menu you want here with whatever content in whatever model that you want for your website so another good reason is that you can create custom mobile experiences for your customers let's just have a look at some of the content elements that will give you an idea of what what makes it such a good idea to use oxygen builder so i think what we're going to have a look at here then would be the standard content that you might find on a product page so we'll just refresh that to get our desktop view back and i can head over to edit page and what i'm going to do now is open up oxygen builder and you'll see we have just a little warning here to say that oxygen is open on another page and we then have the option to override and that's just to prevent you from overriding settings on another page with the settings from this page so while we're waiting for that to load then let's just quickly remove some of these items right so let's go back there now and you'll see this would be say our standard product page and there we have our standard product page and let's say i wanted to add i wanted to maybe put this content looks really nice but i'd like to see it in a slider so what i would do then is head over to my structure panel so i can see the layout i'd add a section in this case i would add a section and in that section then simply click on add head over to helpers look for slider so there i've inserted the slider and now i already have this content here okay so i would then head over to my slider inside my slider you'll see i've got slide one two and three i can simply move that into that position there we go it's in the slider so first slide is done then i have a look and i say well you know i wouldn't mind putting this content in the next slide so simply click on that content drag it into this the slide now when i go to the sec the next slide you'll see that i have that content and it's just brought through okay i only brought through the one so maybe what i should do is just hit the undo button here so that's what's really nice is i can quickly do an undo and then instead of taking one div i'm going to take these columns into the slider so head over drop the columns in and there we have the column so now we have the con that content layout and the next slide we have a completely different content layout and perhaps then in the third slide this looks this is already a slide so i'm not going to put the slide in a slide but you get the idea i can then maybe decide i'm not going to have a third slide and simply disable i can then head over to my sliders sections here and i can choose my sliding so it'll be a horizontal maybe you want to go with a fade the animation speed is fine the arrow color we can decide to go lighter in this case darker works better and then we also have some dots on the page and in this case we might want to go with a darker color so we make that a little bit darker and we can remove the padding around the slides just to make them a bit bigger in the space we can say the dots overlay so it then once again saves a little bit more space and all slides stretch to the same height so now no matter what content we put in all our slides will be the same height and we don't have the page moving up and down as you go from one slide to the next and you'll see here that we have the fade effect so let's just go back to our slider okay and we can force the slide padding so let's make it maybe just 10 pixels there so there we have our slider and it can really contain any element if i wanted to include post information i could even include a post loop in there to display say the latest three posts from a particular category so that that's how easy it is to make a slider and of course then when it comes to the mobile view i can have a look at the mobile view and see if that works for me and if not what's nice now is i can actually create my posts for the mobile view so maybe the slider when it comes to the desktop view is great but i want to create a different slider when it comes to mobile view i can then create set this slider not to display on mobile and i can create a separate slider to display and when it is mobile so that way i know that the user experience is going to be perfect for any user whether they're on a tablet on a pc or on their phone so another good reason to to use oxygen is the fact that the slider can contain any information that i want and just to have a quick look here if i wanted to include some custom php code here maybe you've got some something to do with advanced custom fields or some other custom php that you need very easily head over to add a basic content element and enter your code block and now in this code block you'll see i can have standard php i can have whatever css that i want then to be applicable to that particular content element and then i can even add my own custom javascript so it's really that easy to add custom php and of course then you can assign to that code block you can assign classes and then you can style the inside of that code block also in the way that you would like to display those elements another great reason for using oxygen to build your themes is the fact that i can create reusable content so let's say i have this slider over here and i think wow this is really cool i want to use it in more than one place i can simply select that content image and benefits and i can decide i'm going to use it elsewhere i simply click on my menu here and i say make reusable and it's not going to become a reusable content and i'm going to call so this is image and benefits and i'm just going to use this like this so you can see how it works and i select ok and you'll see now that it's going to change that element from a standard element into reusable parts i can no longer edit that element inside the page and that is to ensure that when i do edit this element wherever this element appears on the website it's going to be edited but the nice thing about the way that it's created is if i want to create a reusable element i would head over here to add head over to reusable and i can now import my reusable elements now it's not showing yet because i need to save the post and then what i need to do is just refresh so that those reusable elements become available and i'll show you now what's great about the reusable elements and how you can use them on a page so we'll just wait for that to load in the meantime we'll go over here to um this was our post archive and i'm going to refresh that as well just to show you how i can bring the reusable element even into my archive page so let's head back to the product page and you will remember that we just made this a reusable element so when i click on it whether in my structure or here you'll see it's reusable and i have to open and edit that in a separate place but let's say i wanted to add the slider layout basically but then i wanted to change the items now i know that this is what i want so i would head over to add i would say reusable now there's the element when i click on it i can bring it in as a single or editable option so in this case because i already have one version i'm going to say editable now it's going to bring in that content however i can now edit it on my page so when i update that reusable post content centrally it's not going to change it it'll change globally but not on this one that i've imported now because i cannot go in and manually decide to update and change this one to be unique to this particular page so i can use the design elements that create different content so a really great way then to use reusable items and if we head back here for example to our archive and i wanted to put that slider on my archive once again add i could say reusable and in this case i could say single so it's going to come in with um the default settings the global settings move that to the top of the page and there i have a slider inserted onto my archive page hit save and now when i look at that on the front end you will see that we have the slider at the top of the page that's also in oxygen at the moment so you can see how oxygen sometimes very deceiving because it looks like your website let's open that in the front end and yeah we must go to our archive to posts so here we have our posts and if i refresh that page now you'll see that the slider appears at the top of the page so if i went into [Music] that item and edited it so too much open here now so you'll see this is that reusable element so if i want to edit just that element very quickly i can click on the open and edit and you'll see it's a slightly different view to the normal view click open anyway just for this demo purpose and now it's going to open oxygen but just with that element no headers no footers just that element so that i can go in and make some edits so at the moment we have the editor here so here we have it live on our website and now what we're going to do is we're going to just edit that content element so here it's loaded and let's say i came in here and i'm just gonna do something bold like maybe give it a background color so i'll just give it and i save now when i head back to my content and i refresh you'll see that that background color has been applied applied so whenever this appears on the website now it will have that color and if i go back to my product page and what i'm going to do is save that and then what i'm going to do is just open that in the front end and you'll see now that that was only applied to the global setting but the element i edit i imported to edit it hasn't been applied to that one so that just gives an idea of how flexible oxygen is to save you time by not having to recreate and recreate elements if you're going to reuse them again right so that's another good reason why oxygen is is a great tool to use then what we're going to have a look at um is going to be the conditional display of content so let's just have a look here on our product page and maybe we've got something here which is only going to be available over christmas or some other sale it's quite then easy for me to come in and let's choose this element for example it's quite easy for me then or the condition here would be set on the reusable part and here i can set the condition because it's an element on this page so there's another good reason to use oxygen is that you can set the conditions to apply to global elements or to individual sections or even to individual text on a page so if i want to i can apply to the whole section but the conditions apply pretty much the same all the way around and the if i have a look at the conditions available this is the default list you can of course write your own conditions as well so anything from archive to elements within author other which is date time day of the week day of the month so i could say only display this content on a monday tuesday wednesday thursday friday i could then i could have a check the cookies in the cookie list and if the if i've set a cookie and the cookie appears it will then show the content or it will choose not to show the content because the cookie is in the list so there's a whole lot of different things here that you can do you can even integrate with dynamic data then you have post information post id post parent id post title so you could only show this content if the post title is x if the id of the post is one two three it'll only display on that post or if the id isn't one two three it'll display comment counts equal 10 then display this piece of content if it's this particular post type or a post category so a whole lot of things that apply and then of course if you have different uh user levels on your website maybe you have a subscription site and when people sign up they're assigned a user role well here you can simply say that if the user role is equal to x y and z show or hide the content or maybe the user id can't be a certain number maybe a particular username so if you have something maybe that you only want to show to a particular user he has a way that you can set that condition to do that so what's also really nice is that i can combine conditions so let's say i had if the date if the let's have a look here and if i said the date was equal to or is after and then i said oh hang on a second and they must have a user role that is equal to maybe administrator add i could add another condition and so i go and then what i'm able to do here is click on the conditions again and i can say and which means that all the conditions must be met or i can set it to or which means if any one of those conditions are met then display the information and then in the editing of my website i can set to show or hide based on the condition and that means that i will see the information as it would be available on the front end of the website so i can say always show so i can see everything or if i i can just see if my condition is working maybe by doing that as a as a test or i can say always hide but these only affect what you see in the administration area not what you see on the front end of the website so we're just going to remove those conditions but it's really that simple to use a condition and of course as i said you can create your own conditions to work for maybe parameters that you have on your own website another great reason to to use oxygen is that you can create let's say you've created a site like here we imported the oxygen atomic website which was this theme and inside this theme we had all these content elements and the services it brought in these pages as you see them so all these elements are brought in a cross and let's say i've created a website and i want to maybe create a second website but i want to use some of these elements on a second website what's really great about that is that if we head over to the oxygen settings and i head over to library i can actually set this website to be a design set which means that i can link it to another website and feed those designs through to that website so what does that mean so when i'm here in my oxygen builder and i'm looking at my page and i want to add an item i can go to my library and inside my library you'll see that i have design sets these are the design sets from all the standard websites within oxygen so there we can see the atomic design set and if i look at sections and elements and you'll see that you have all these sections and elements that are available to me so if i wanted to add a call to action to this page i can simply head over here and add one of these pre-made items click on it it's brought into the page i can then go in and i can style that element and maybe i want to add some content and i want to add an element with icons simply click on it and it's brought into my page i can now come in and edit change whatever i want to change for my own purposes so there you go you can see very easy very quickly i can update and change so let's say i've created my own elements and i want to share them with another website so in a similar way now i can say make this wordpress install a design set and i update and when i do that you'll see i'm given this unique key so if i was here to enable third-party design sets and i say update you'll see now that i'm able to add a design set so i would enter a site key so that site key is very similar to the one that we set when we said make this wordpress install a design set i would simply copy this from here paste it into the add design sets on another website and then all the design sets that i've enabled in this website to be shared will then be shared onto that website so i can create a central hub of all my designs that i want to use for a specific project if it's going to be rolled out over multiple websites i can centralize all that design on one main site which doesn't have to be connected to that domain it could be completely different it could be completely independent to any one of the websites that are being used and i can then simply by copying this key and inserting it on those individual sites bring the designs from this website into those websites so that allows for you to scale very quickly so instead of me having to create the same design and layouts on those five websites i can literally create it in one place and share with those five similarly if you design a lot of websites and you've created some design sets that really work this would be a great way then to be able to make them available on those sites to speed up your development so that does help with your scalability so just to see how that would work if i wanted to create a design set what i'm going to do here is if i head back to the admin night you'll see that it's added this section onto the the template page so include this template in the default setup include the sections in this template in the library include this temp this entire template in the library and that would be the library to share and then here i could set a featured image or i could generate a screenshot so that would then create the screenshot or i could upload a screenshot and that's the screenshot you saw when we said add and i went to i'm here and these these are the screenshots that you'll in fact be generating so you can do it for an entire page which turns the whole page into design set or you can do it for individual items as it's been applied here so that's what's really nice about creating content that you can share between the websites that you've created so it's almost like having your own mini cloud that you can access with all your designs and then to deploy on all your own websites so a very good reason to use oxygen because i don't need to deploy some kind of cloud service or pay for some kind of cloud service to do that so that's just looking at some of the the basic concepts within oxygen we've looked at the headers we looked at the footers we've looked at content and looked at how easy it is to put any content into a slider how you can style content different for mobile to what it is on on the desktop view so i mean a classic example would maybe be something like this where we've added these elements and i can literally say well in the desktop view the the background of this element is going to be this color and when we go down to the mobile view in the smallest view portrait i'm going to change that color and i'm going to make that color this blue for example simply save that we'll head over to that page on the front end so in the standard view when i scroll down you'll see that it has that nice blue when i have a look at that in the mobile view now it's just refresh and i scroll down you'll see now that it has that other blue so that's how easy it is to assign a color similarly if i'm not happy with the spacing here i would come in here and i would say you know what here and the size and spacing i don't want any padding to the side and maybe i want to go one step further and i say you know what i actually want that to touch the sides so i remove any additional padding so now it looks like that then i head over here and i refresh you'll clearly see that that particular element is wider than the other two but when i head over to my desktop view you'll see that the items display as they should for desktop so that's how easy it is to change the content so that it's completely different for your mobile view experience to what it is on the desktop view so you have a very tight control over those particular elements and here with the different breakpoints the highlighted color shows you that there's been a change but i could do one for tablets for example which would be different to the break point for mobile for the smallest mobile phone breakpoint so i can actually create really curated experiences for different screen sizes and another one or two things that are are worth having a look at is that when you head over to your oxygen settings we also have the bloat eliminator so these are just some standard things that you can disable so that your site is a little bit leaner we then also have our own css cache so if i enable the css caching so i've built my websites i'm ready to make it live i can deploy my own css caching and because that's inside oxygen and it's part of oxygen it means that it's going to be far more accurate than using a third party and also i can regenerate that cache whenever i want to so if i've made some design changes simply head over here regenerate and my cache is up to date that's just standard license that's for the typekit integration if you have an api what i can also do here is i can add my own icon sets so inside oxygen if we have a look under the items that we can add for example he has an icon and it comes standard with font awesome and line icons line linear icons if i wanted to create my own icon set i can do that is a way of doing that and i can actually upload my own icon set into oxygen and the icons are loaded as svg graphics and am using a service called icomin to create the set then there's a special way to upload those icons into my installation of oxygen so i can create custom icon sets for my clients and then bring them into my website so another great great feature which saves a lot of time and looks very professional then under security this has to look at signatures of the short codes that oxygen generates so this isn't really used on a regular basis but if you do pick up an issue it might be worth just making sure that those signatures are correct and you don't have anything changed in there that shouldn't be changed so not use on a on a regular basis the post type manager looks at the metabox on the different pages so there are some pages where you don't want the oxygen metabox to appear and you can simply disable it on those pages also great just to make it easier or cleaner to work inside the wordpress pages here you can set the role managers so the editor has full access the author full access no access in future editions of oxygen you'll have more control over who can do what with which elements when it comes to the page and then on the general page here you have the settings for the undo the preview drop down limit then you here you have the exclude non-public post types from preview you can enable a selector detector what the selector detector does is for example if you're using contact form 7 and you have some selectors in there for your different elements like your label or for the fields then oxygen can identify those and just make it a little bit easier for you to style the element from within oxygen you have a maps api key for any mapping that you want to do and here you have an option to show all advanced custom field fields in the dynamic data dialog which is quite superb when it comes to integrating advanced custom fields because then the way that that would work is if i'm looking at my pager and i wanted to let's say insert a custom field so here at the top when i go insert data you'll see that i have the title the content the excerpt the date the standard stuff but with advanced custom fields there would be another button here with advanced custom fields i could click on that and then my fields within advanced custom fields are then available i could select as i did here with title insert and that would bring the data through whatever the data is for example that's the data that's available here is the title for this page but it could be any advanced custom field value and if we look at something more advanced like repeaters with advanced custom fields i can go into my ad section here head back to helpers head back out to my repeater and in my repeater i'd now have an option here for advanced custom fields and i could actually then bring through the values from that advanced custom field repeater straight into my post my page so saving a lot of time when it comes to integrating custom fields so one last thing to have a look at then before we stop looking at the reasons to buy oxygen is just to have a brief look at just what comes standard with oxygen in in terms of what you can add to your page so if we have a look at the content elements here and the basic you have your section different columns then you have your headings your text your rich text and text links link wrappers buttons images videos icons and custom code if we look at helpers which are there to help you and perform certain tasks just to speed up the development we've got the header builder which you saw was used in the header of the website where we create our menu we have the social icons which was these items over here testimonials icon boxes a pricing box a progress bar so you know if you if you were looking at adding a pricing box um just to show you how easy that is i mean i would add a pricing box um and there it is there maybe that's not such a good place to put it let's put it on some white background so head over to basics we say add a new section and inside that section we'll head over to helpers and we say add a pricing box so there's my pricing box you'll see it's something you've seen before if i wanted to duplicate that i could duplicate it and now what i can do is i can head back to my section and i can just stack them next to each other and then using the options available i can come in here now and update my pricing box the way that i would like it to be and format it with different colors if i wanted to add a graphic i could come in and include an image don't include an image have a look at that be the background for the image but there isn't so if i look out for example and the basic hosting i can come in um under the title and you know i can create whatever changes i want to make my pricing box a little bit more interesting changing the colors so there's a little bit to learn but once you understand that you can come in here and create whatever you want in your pricing box so that's just one of the items then i can add a gallery of images the gallery is actually quite a powerful tool so we'll just add another section here and if i was to add the gallery what's really nice now is i can go to my media library or it could be advanced custom fields or it could be something from woocommerce browse if i select my images right i say insert gallery so there are my four images if i head over to my layout i can of course change that to a masonry layout so it will now respect the images um the different sizes so it will actually stack them in this case we don't have enough to demonstrate that or if i go to flex then they all have the same aspect ratio i can put there the number of images per when it comes to the caption i can show captions no maybe it's something you don't want to show if you don't have really good captions and then of course when i click on that item it's going to open in a light box and i'll be able to see an enlarged version of that particular product so if we have a look here there you go so it's really that easy to set up your own um gallery um right so you got the gallery repeater the slider we had a look at you can set up tabs a super box toggles with the accordion style opening and closing the modal so here's an example of the modal being used in a mobile menu so in this case we on our website we've set the trigger to be okay if i click on this item show the modal scroll up and down close so that's an example of the modal being used here but the modal doesn't have to only be used on mobile of course it can be used in in a whole um in any pretty much way that you want and you can include any content inside that modal that's available within oxygen you're not limited to anything so you have complete control and if we just have a quick look at the let's just have a quick look at the elements available so if we have a look at going over to the helper and we're going to go and have a look at the modal so here we have our modal you'll see that when i have my modal i can you know is it after number of clicks after number of page views to only show this if somebody's been to this page like five times as the user scrolls after specified time after you know if they haven't been active um on exit intent when they scroll to an element then bring it up or as i demonstrated earlier user clicks on an element so you've got all of that available to you and then when it comes to the contents of your model very easy to do earlier on we maybe you want to move your price box into your model for example as simple as dragging it over let's just open our model and there you see the price boxes in the modal so very easy to bring an element across and then of course you have all the styling options inside your modal to make it look good so you can decide how to stack the elements normally or you can do it next to each other underneath each other um content styles um text color background colors maybe let's make the background color white um and then of course you have the closing side and here you can say well close modal automatically which is set to no close on escape key not a bad idea to leave that on yes close on background click which means you click around the side of the modal and you can also if you want to include a button simply click on include a close button and it's inserted for you and then of course you can move that button to the top or the bottom or use some other styling to position it wherever you want so very easy to do and what i can also do is if we look at the modal styles and we look at the width we can change that to percentage for example and we could say make that ninety percent with and the content inside um we look at the modal um maybe we're going to start it like that so the two elements are next to each other so there's really um there's really no limit to to what you can do when it comes to the styling of the model is really up to you and when the model opens you can choose top left hand column or top right hand corner at the top the middle the right the left the left corner at the bottom so when the user scrolls it's not that the modal takes over the entire screen you could also set it to very subtly just pop up in the bottom right hand corner left hand corner the center top right wherever you want and to grab the user's attention so once again some really nice options available to you when it comes to the modal and to content styles so i hope that just gives you a brief idea of what's available and that the modal is quite a useful tool and then we also have google maps you can bring in google maps your soundcloud and the things you can bring in under wordpress of course is the menus specific shortcodes your comments list a comment form a login form if you want to have a login form for users to access certain areas and so you could say only show this if they're not logged in then show them a login form so they can then once logged in you can say only show this content to somebody who's logged in so you can do that on a page as well and the search form we included in the header you have the standard dynamic data for your post and then you have access to all the widgets that you would find in the back end in the widget section of wordpress are available here and then with oxygen you can create custom sidebars and there's a way of doing that and then you can bring in your own custom sidebars to be displayed where you want them and you can pretty much create as many sidebars as you want to create whatever information you want and then insert them anywhere in your page templates then we have a look at the library and under the library you saw that we have the design sets and these would be the standard design sets but there's also nothing stopping you from creating your own now in this case we're using the atomic website that we downloaded when we install the site but if i wanted to include a design set say from freelance there's nothing stopping me from selecting anything from that design set so i'm not limited to only one site i can choose from anything inside that inside any one of these design sets simply click on it and that will bring that information through into the website so here i have included that in my modal which probably not the best place to put it so if i want to move it very easily i can move it out of the modal and there for example we have it displayed now on its own so there you go so if i save that and i refresh my page you'll see now that there we have the road to success so it was that easy to bring in that content element from a different design set and use it and of course we have the modal enabled so that's why it popped up so yeah so that just gives you an idea of what's available right so yeah well i hope that gave you some insight into what's available in oxygen just how popular it is and gave you a whole lot of good reasons to buy oxygen to buy oxygen over and above what i've shown you there's an active group of people that support the product a lot of tutorial videos from oxygen and from other enthusiasts who've created videos there are a number of additional plugins that you can get to enhance oxygen further but rest assured oxygen is developed by a very professional team and they're continually updating the plugin and adding new features to make sure that the product improves and adapts just as wordpress changes and to make sure that the integration with wordpress is seamless and also to make sure that the proper standards are maintained so that other plugins can also work very nicely within oxygen so i hope that gave you enough reasons to seriously consider buying oxygen it's a lifetime deal you buy it once you can use it on as many sites as you want to and here we've only looked at oxygen there is another there are another two modules available the one is for creating gutenberg blocks so you can create your own blocks that will then appear in the wittenberg list of blocks which is then part of the standard wordpress blocks when you're editing a post or a page which then does allow you to create your own custom layouts and then there's also the woocommerce so you can create your own custom layouts for your product sections you can style your product pages the way that you want them to be and then you can also create different product styles and templates maybe for different categories inside your products or maybe you just want to style a particular product in a certain way because you're having a promotion so those are another two items that are available so yeah i head over to oxygenbuilder.com a lot of good reasons to get oxygen and just remember that once you've bought oxygen you'll never buy another template again and you'll always be able to build the site that you want the way that it's meant to be so thank you for watching i hope you enjoy the video

Channel: Bruce Young

Views: 1,455

Keywords: oxygen builder, reasons to buy

Id: BDm24gPEW0E

Length: 91min 0sec (5460 seconds)

Published: Sat Sep 26 2020