Oxygen In-Depth Product Tour - Summer 2021

[Music] hey this is lewis from oxygen and in this video i'm going to give you an overview of the oxygen visual site builder for wordpress now oxygen is the most flexible and powerful visual builder for wordpress in existence but before we get started i want to give you a quick overview of the oxygen interface so you can follow along with the video and understand where everything is so to add elements to a page in oxygen you just click add and all your available builder elements are here you've got sections divs columns heading text you've got helper elements like pricing tables testimonials we have a design library with a ton of pre-built designs in it you can go in there and that way you can rapidly build a page get previews of the elements etc whatever you click is going to be added to your page so let's go ahead and add a section to our page from this design set here go ahead and add in a call to action section and here we go i've now added that to our page if we wanted to add an individual element for example uh if we want to add more text we can go back to add basics text and there we go now to style an element we just do it with the controls over here on the left so okay i've made the text white i can make it bigger if we want to do some advanced styling we can go over to advanced and there we get more advanced controls to adjust spacing of elements you just mouse over the edge and you simply drag up and down to space something out delete just click up here and you're good to go then we have a structure panel over on the right side this will show a list of all the elements on your page you could drag and drop these from right here to reorder them you could also drag and drop elements directly on the page to reorder them and when you're done you just click save to save your changes and you can go back to wordpress either the admin panel or your front end if you click manage we've got our settings our configuration options things like global styles fonts that sort of thing and then for mobile responsive we have our little screen icon here you can click that and change to preview your design at different device widths and then from here you can create styles for only this width and below okay let's get started [Music] oxygen's undo in redo history makes it incredibly simple to step backward and forward through changes you've made in the builder just to illustrate i'm going to mess up this design i'm going to move this heading up the icon down and the button up here and then i'm going to delete this text element completely and let's assume after making these changes we really don't like what we have here because it looks terrible well i can use command or control z to step back through the changes i've just made and we'll hit command z again we can use our backward button to do the same up here at the top bar or i can use the forward redo button to step forward through changes and get back to where i was before or if i have a long list of changes i'd like to navigate through i can use the history button in the top bar and step through each change as needed i can even jump back to the initial state that the design was in when the builder was opened so with oxygen's undue in redo history it's incredibly easy to recover from any mistakes you might make while building a design in oxygen oxygen css grid implementation makes it dead simple to implement a really cool css grid layout for any elements in oxygen so here i have a section with a collection of images some cards made up from divs and text elements icons and even a couple of cards with videos and i haven't applied any layout rules to this section yet because i want everything to be laid out in a grid so let's select the section and let's choose the grid layout option and you'll see a few things start to happen let's go through and just set this grid up really quickly i want six columns i want a minimum width of 100 pixels for each column i want a column gap of 8 pixels and i want to align everything to the center we'll also change the row gap to 8 pixels and align everything to the center there now is when we can start getting really creative with our grid the beauty of css grid is that you can define the row and column span for each individual child element and we've added an interface to make that really simple to do so if i want my first card element here to be a little bit wider i can set that to a 3 column span and something like a 2 row span and you can see that the grid immediately starts adjusting so let's go ahead and set these images to 3 as well 3 and now we've got this first section looking pretty good now let's go down and take a look at what we have for the rest of these so let's set these to two each to get them a little bit wider and that looks pretty good and in fact we probably want the rest of these to at least span two columns so we can just set the default to two and then we have this beautiful grid layout comprised of divs images and videos that we just threw into a section you can also use grid layout not only with sections but with divs with our repeater element with our easy posts element to create grid layouts for your post loops and also with the gallery element to get really really cool grid-based gallery layouts [Music] the beauty of oxygen's woocommerce integration is that you can override the woocommerce styles on a global basis so just like a theme you can get it looking on brand in just a few clicks you can get it matching your styles yet you also have the ability and the flexibility to build totally custom layouts for every part of woocommerce your products your shop your cart page your account pages every other part of woocommerce so i've already set up an example site here but i haven't tweaked the design at all i'm just using the default woocommerce styles that ship with oxygen let's go ahead and set up a template for our woocommerce product layout so a custom layout for a product so to do that i'm going to go to new template i'm going to call this product inherit the header and footer from the main template and we're going to set this to apply to products and let's go ahead and save this and then edit with oxygen so to create the layout for our products i'm going to first add in a section and then i'm going to add in the product builder element so go to the woocommerce tab and you'll see all of your available woocommerce elements here i'm going to add in a product builder and the product builder's default layout is just going to be the default layout provided by woocommerce with some spiced up styles to make it look good and let's preview some other product here so you can see how the layout looks there it is now if we wanted to do a custom layout for a product we have all these individual elements that we can add inside the product builder to override this layout so let's go ahead and set up a two column layout so go to basics columns we'll go 50 50. and in the right column i will add product images so i can also just search that in the ad section we go product images and then over here and go to woocommerce or search we can go product title we can add in the product description are probably better to use the product excerpt actually that's a shorter description so we don't need the long description there let's add in the price let's add in the add to cart button this would also include any variation drop downs let's drag that down what else do we want to put in here maybe the product meta information if it's in any categories and then below the columns let's add in the product tabs let's add a little bit of space there and let's space this out a little bit too so we probably want to move this add to cart stuff to the bottom maybe categories above that give this little space bring this down bring this up and there we go there is our custom woocommerce layout you can add any other elements you want in here so you could create really any layout you could possibly imagine with woocommerce so let's go ahead and save this and take a look at a new tab on the front end and here we go let's add this to our cart it says it's been added to the cart let's view the cart and there we go now if we wanted to customize the layout here we could go to the individual elements and tweak the styles right we could go over here we could go over to the input so we could customize you know maybe how big is the font we could make it bigger we could make it smaller you could do whatever you want but the best way to do it to get a consistent look across your site is actually do this on a global basis and that is the beauty of oxygen's woocommerce integration you could go to manage settings global styles woocommerce and from here you can control the colors the styles the border radiuses used for every part of woocommerce so you can instantly get your site on brand so the rest of my site is kind of using this white silver gold black color scheme let's override these colors with those colors and then my buttons are also they have a sharp corner no radius so let's override those radiuses and get everything looking consistent so i'm going to go to buttons and let's just set the color to my already set up global colors actually i should probably swap those this is probably the main color this is going to be the hover color we're going to use a dark color for the tertiary ctas let's use that same dark but maybe make it a little lighter on hover and instead of border radius of four we use border radius of zero that does our buttons we also have global styles for link so let's set up the same colors for our links these are just coming from my already saved global colors for a focused input let's use the same gold we don't want any radius on our inputs and maybe actually we want to use instead of have an outline around the input we just want the input to be kind of gray so we'll make the input background do i have a silver somewhere yeah let's use atomic alternate maybe that's not quite dark enough let's darken that a little bit and then use that same for the other for the background same as background and border that'll give us just a rectangle and text looks good notifications for our message color we're going to use this for error color let's change it to something like orange or red and info color we're going to use the same gold and miscellaneous sale badge color we'll set that to gold star ratings we'll use gold as well and widgets will we're not using woocommerce widgets on this site so we'll just leave as this and now let's refresh this and you'll see we didn't have to have to actually go to the cart widget and edit it individually boom it looks good it looks consistent we now have a consistent look across the side if we take a look at a product layout there we go same styles consistently applied i think this is a little dark so let's tweak that save and refresh and beautiful looks good let's take a look at the shop page there we go these styles take effect absolutely everywhere without you really having to do any work at all oxygen's gutenberg integration turns oxygen into the world's first ever drag-and-drop visual gutenberg block builder that's right you can now build gutenberg blocks in oxygen visually so here i have a little about page that i've i've made up in oxygen and let's say i want to make one of the sections on this page of gutenberg block i just click on the section go over to the structure panel click the menu icon copy to block and i'll call this my gutenberg block click ok and this is now a gutenberg block that can be added in gutenberg and the text the links the images can be edited directly inside of gutenberg we can also turn an entire page into uh something that's editable in gutenberg this is great for building client sites because this ensures that they can edit their site content in gutenberg but ensure they never have access to oxygen they won't even know oxygen is installed which means they can't break anything so let's go ahead and do that for this page so i'll save the page go back to the wordpress admin and i want this to be editable in gutenberg i'm just going to check make this full page editable in gutenberg save and boom this page is now editable in gutenberg so i can change this text i can change this text you can edit whatever you want uh in terms of text images icons so let's say i want to swap out this image i just click on the image let's upload a new image and there we go there is our new image so the client can now edit their site in gutenberg they'll never know oxygen exists so you don't need to pay for white labeling like with beaver builder it's 399 dollars for the license that includes white labeling well in oxygen we just have the role manager so you can just go over to oxygen settings i won't save those changes here and i'll just go to role manager and we're going to give the editor the client instead of having full access to oxygen no access and let's go ahead and now log out and log in as the editor and go over to this page and here we go they can edit this page now in gutenberg but they can't drag anything around or break it and they never know oxygen exists [Music] oxygen's edit mode which is available to anyone with an agency or ultimate package allows you to safely allow access to oxygen for your clients while still restricting what they can do within the builder so under oxygen settings you'll find a client control tab and here we can set oxygen access levels for specific wordpress roles or specific users note that if you want to restrict an administrator's access to oxygen you'll have to add a user role select the administrative user and choose edit only access but in this scenario we're just going to restrict all editors to edit only access by default users or roles with edit only access are restricted from many of the things that you normally wouldn't want a client manipulating in oxygen like global style sheets global selectors users with edit only access cannot edit php javascript or css in code blocks within the builder so edit only access makes it really safe to allow your users to get in and make content edits while still restricting them from doing too much or accessing the nitty-gritty details of oxygen and we also allow you to give back some of these controls to specific users or roles because not all clients are created equal and some are a little bit more technical and might require more access so for instance edit only users cannot add elements unless you enable elements here in the settings then you can choose from the list of elements in oxygen and enable specific ones this will add those elements back to the add pane on the left side so that they can add and remove those elements and then you can go a step further and enable the advanced tab which will give the user access to more advanced properties on all elements you can enable drag and drop you can enable reusable parts the design library and then if you want to restrict even more than the default you can disable classes and disable ids so if we did something like this then the editor role would basically only be able to make basic content edits within the builder they wouldn't be able to make any styling changes so it's highly configurable and results in a very client-safe environment within oxygen even though oxygen is an incredibly powerful builder so i'm going to set this up for editors and i'm going to save this and note that i did take the disabled classes box because my design uses a lot of utility classes and i don't want clients changing properties on those utility classes so now i'm going to switch over to an editor user and we'll take a look at what edit mode looks like in oxygen so let's go to pages and let's edit this home page in oxygen so as an editor note that i don't have the add button because i didn't enable any elements for the editor role i have the structure button history undo and redo the back to wordpress button and save but no global styles style sheets anything like that if i click an element you can see i don't have the advanced properties tab which keeps me from making a lot of really intricate changes to elements though i can still change what's available in the primary tab i can still edit text change the text color and all the basic changes that a client might want to make after you hand the site off to them so with oxygen's edit mode you get to use the features of the most powerful wordpress builder on the market but still hand off a client safe environment for your end users [Music] oxygen's flexible header builder element makes it easy to create beautiful responsive multi-row headers so i have a header builder on the page let's go ahead and design a header so you can see how it works so on this header i'm going to set the background color to black and i'm going to go ahead and add in an image this will be our logo let's browse for the logo i've already uploaded it so i'll select that image i'll give it a height of say 24 pixels and i'll go ahead and add in a menu here so go add menu and i'll also add in a button call to action button just change the text here we'll say sign up now let's just drag this over to the right and let's drag the menu to the center and then let's customize the menu styles a little bit so let's make this text white say 14 pixels 2 pixel letter spacing uh uppercase font weight of 500 okay that looks pretty good for a menu and let's say we want to have a multi-row header we can add a second row so let's add another row maybe we want the phone number business hours in this row so we'll set the background color to black and let's add a text element okay we'll say it's gonna be the phone number one eight eight two three four five six seven eight go ahead and make that white 14 pixels and let's add in some business hours on that right side so we'll just say monday open monday through friday 10 am to 8 pm and let's go over to size and spacing a little bit padding here space it out so six pixels on the top and the bottom and there we go now we have our multi-row header here let's correct the hover colors on those links we don't need a border and for the hover background color just make it like this and there we go that looks pretty good right there now some cool things you can do with the headers you can make the header sticky so when you scroll down you can make it stick to the top of the screen to do that will just enable sticky functionality with no code at all you get a sticky header you can set that to fade in get a nice little fade animation when the header becomes sticky so that looks great now another thing you may want to do is have a customized sticky header in other words when the header is sticky you want to displace different content well oxygen's header builder element makes that really easy this is the beauty of having a dedicated header builder unlike other builders where you're just building the header with a section or a row you don't have this dedicated header functionality that's really useful on a lot of sites so let's say we want to display this row but a little bit differently let's say we don't want this this menu in there we just want the call to action and maybe a phone number so let's duplicate this row and we'll delete the menu out of there and we're going to put uh some text in there we'll say uh call this number or they can sign up let's add a little space on this button and let's add a little space on this row so it's the button's not right up against the edge and now what we're going to do is choose to only show this row in the sticky header and then we're going to hide these rows when the header is sticky so we'll choose height and sticky and hide and sticky now when the header becomes sticky we get our totally customized header row so that's great if you want to do like landing pages and you want like your main call to actions always to be stuck to the top of the screen but you don't want to waste space with the distracting menu that's a great way to do it and then another thing you can do with the header builder is you can make the header display as an overlay which is very easy to just check a box so we'll go over to the header builder go to overlay and let's enable the overlay header uh above 1120 pixels and there we go now the header becomes transparent and it overlays the proceeding section there we go header builder and oxygen create beautiful responsive headers with [Music] ease oxygen has a ton of features that make it easy to really spice up your designs and make your websites pop let's take a look at our scroll animations functionality so any element you want to add a scroll animation to you just click the element go to advanced effects animate on scroll and enable animation and from here we have the most configurable scrolling animations ever seen in a visual builder so let's set this to fade up so when the user scrolls to this section this will fade up let's give it a duration of 250 milliseconds set the animation easing to ease uh we'll set no delay and we're only going to animate this once so when they re-scroll it won't be animated again and then a useful little design tip is to use different animation durations to sort of get get a cool effect so let's animate the subheading as well go effects animate on scroll enable animation and we're going to set this one to also fade up but a duration of 500 milliseconds same easing it's going to be ease no delay animate only once then let's set up sort of a staggered animation effect on these cards it goes like one two three four you see them animate in one at a time so click the first card go advanced effects animate and scroll enable animation and we'll choose zoom out down so zoom out down there it is and you see a preview of what zoom out down looks like so we're just going to have a little boom one boom two boom three boom four all in a row so this one we're going to say animation duration 250 milliseconds with a delay of 750 milliseconds so it'll wait 750 milliseconds until it actually animates this into view we're only going to animate that once okay now let's do the next one same thing advanced effects animate and scroll enable animation zoom out down animation duration 250 but this one we're going to give it a delay of a thousand milliseconds so this one's going to go first then this one's going to go a quarter of a second later only only once okay let's do the same thing for this next one enable animation zoom out down animation duration 250 this one we're going to delay by 1250 animate once and let's go ahead and do the same thing for the last one animate on scroll enable animation zoom out down 250 animation delay this one's going to be a 1250 delay and now we scroll this into the viewport or just load the page since the top of the screen we're going to get these effects so let's go ahead and take a look and look at that one two three four such a cool effect now let's go ahead and set up animations for this section as well if you want to animate multiple elements in the same way you can just animate the container so we'll click the div that contains both this heading and subheading advanced effects animate and scroll and enable animation we're going to set this to slide right and we're going to give it a duration of 500 milliseconds and only animate once and then let's do the same thing for the div containing this image we're going to set that to flip left so it's going to look like that and we're going to give that a 500 millisecond duration uh in a 250 millisecond delay so first this will animate in and then this will flip in from the left and only animate that once okay let's go ahead and save this take a look on the front end and let's scroll down and look at that let's see it one more time there it is beautiful effect with animate on scroll and we also have global scroll animation settings if you go to manage settings global styles animate on scroll if you're going to use the same animation duration or delays for all of the elements on a particular page or site wide you can just set that up right here and then the only thing you'd have to do on a particular element is enable the animation and it would automatically pull the global settings from right there so that could save you a ton of time [Music] let's take a look at element states this is where the power and flexibility of oxygen really shines far beyond the competition so right now i have three link blocks link wrappers it's each one of these a rectangular link and we want to set up a custom hover state in other words we want to make some cool effect happen when the user hovers over so let's click the element go to the state drop down and we'll choose the hover state and if you're a css wizard we've also got before after any custom state nth child any pseudo class you can do it all so if you're advanced you're going to love this but let's keep it simple for now go to the hover state and let's set up a custom effect on hover let's go to advanced effects and oxygen has all sorts of great effects to really make your designs pop to make things visually stunning i'm going to go to transform and let's add a transform so we'll say on hover we're going to scale up let's say make it a little bit bigger and let's add the 3d effect so let's add some perspective we'll give it 1000 pixels of perspective and then we will rotate it along the y-axis and take a look at that okay let's say that's what we're going to we're going to rotate it negative 23 degrees on hover let's click outside the element now you mouse over and it rotates but that's so choppy so let's set up a transition so we'll go back to advanced effects transition and we're just going to add a transition duration of say 0.5 seconds and there we go smooth hover effect [Music] beautiful [Music] one of the biggest time savers in oxygen is our multi-element styling feature that's made possible through classes so if elements have the same class for example this image has the conference testimonial to avatar class they will have the same styles right we can edit styles in one place and it'll affect every single one of the elements let's go ahead add another image here drag this up let's give it that same class conference testimonial to avatar and it will automatically get the same styles as the other images i already have classes set up for these headings they all have the exact same class so let's go ahead and edit the styles here and you notice tweaking in one place updates the styles everywhere there's no need to copy and paste styles which also results in a ton of unnecessary css output you simply edit the styles in one place and everywhere the class is used the changes take effect this makes it really easy to get a consistent look across your entire site we regularly have people posting in the oxygen facebook group showing off their excellent page speed scores their fast load times and talk about how they can never get those results with other page builders here we've got somebody said never had site performance like this um here we've got what do you guys think built with oxygen he's got page speed 99 why slow 94 fully loaded 0.6 seconds page size 274 kilobytes um here we got another one post all his performance reports saying getting 95 on page speed why slow dare boost after 10 years of wordpress work i have never so easily achieved such consistently good stats so the reason for that is oxygen is bloat-free what that means is it doesn't load unnecessary bloated only loads what you put on the page so i want to show what other builders load element or beaver builder divi versus oxygen and i'm not doing this to try to convince people they're using elementor beaver and divi we get a lot of people interested in oxygen who say i would never ever use a visual builder because the code output is horrible and they load a bunch of bloat well that's true with other visual builders but it's not true with oxygen oxygen is clean it's lean it's like hand coding so here i have an oxygen page i just put a heading in a button on the page and i ran a performance report for it it's on a terrible server so you can ignore the load times there's no gzip compression but look at the waterfall you can see what's loaded here we load the page we load very small default css the page css which is only 301 bytes and another very small default css file so very small very very very minimalist only what you use on the page is loaded now let's go ahead and by comparison take a look at the divi page which also has simply a heading and a button let's take a look at the performance report for the divi page we'll see that it has a page size of one megabyte which is ridiculous i mean its default styles are almost 600 kilobytes which is preposterous i don't know why dash icons is being loaded on the front and 45 kilobytes um i'm so we can forget about jquery that's a default wordpress thing i should have disabled that for this test to be fair so okay we'll call it one megabyte instead of almost 1.1 megabytes um i mean it's just there's so much ridiculous stuff in here that you should not be there i mean 250 kilobytes of custom javascript 90 kilobyte truetype font file which is for the admin it just makes no sense that this stuff is loaded it's just going to slow down your pages beaver builder is much better than divi here's my beaver builder page with beaver builder theme and beaver themer installed and if we take a look at the performance report here i mean we're still loading i mean it's not as bad but 150 kilobytes of css here uh 20 kilobyte javascript file and then it's loading this font awesome.wa font file which is 72 kilobytes but we're not even using any font awesome icons on the page so why why is it loaded it shouldn't be loaded and then let's go over to elementor just a heading in a button and 700 kilobytes why is this 700 kilobytes it doesn't need to be 700 kilobytes but look at what it loads it loads css for the icons it loads font awesome it loads css for animations it loads 90 kilobytes and then another 180 kilobytes of front-end default css 18 kilobytes global css which is fine that that's okay but i mean some of this stuff is just pushing it here we've got i mean it's loading javascript for waypoints for swiper 36 other i mean 120 kilobyte javascript for a swiper script but we're not even using a slider on the page with oxygen if you use a slider it'll load your slider javascript and if you don't it won't be loaded but elementor is just dumping it on your page regardless and then we also have people complaining about the html output and i can see why for example let's take a look at the oxygen heading and what do we see body section div heading i mean this is clean code this is what you'd write if you hand coded something but if we take a look at elementor's heading mean it is nested one two three four five six i mean look at if you see the blue area here it doesn't even change size it's just unnecessary elements seven i mean seven levels inside the section and then a total of eight nine ten 11 levels deep of nested html elements no coder would ever write code like this so i totally understand why a lot of coders and more professional developer types are so against visual builders but i just want to illustrate oxygen is not like that this is clean code it's not unwieldy it's easy to work with if you're going to create custom css and then for beaver builder it's the same i mean if you look at this html output it's just it's preposterous how many levels of nesting there are to display a heading and a button it's insanity divi's night not quite as bad but it's still pretty bad one two three four five six seven eight levels of nesting i guess nine ten eleven yeah it's pretty bad it's ridiculous so i totally understand all the people who say they won't use visual builders i just hope that now that you've seen this you won't lump oxygen into that category you'll understand that oxygen is clean it's lean it's bloat-free this is a default page in oxygen whereas this is a default page in divi and to be fair to divi we should have subtracted jquery so instead of calling it 1.1 megabyte we can call it a megabyte either way it's absolutely ridiculous [Music] to help you get beautiful websites up and running quickly oxygen has a design library with a huge amount of pre-built page templates and sections which you can mix and match to create your own page designs everything the library is totally responsive if you want to see everything go to product tour and then library on our website and you can take a look at demos of all the available library sites all of these can be imported the complete website to your site in one click or you can use individual headers sections or any of the other elements you see on these pages in your designs so let's go over to oxygen and quickly build something using the design library so you go to add and then go to library design sets and everything is organized by design set everything in a design set's going to look good together so i'm going to go to atomic and then we have our pre-made pages or our sections and elements where we've got call to actions content footers headers heroes everything you could need so let's go ahead and add in a header to the page and then below that we'll add in a hero section and below that hero section we're going to add in some testimonials or social proof let's put in this grid of three testimonials and below these testimonials let's add some content we're building a landing page basically and then below these this content let's add in a call to action section and let's wrap this up with a footer and here we go there is our page which we created in you know 30 seconds and these are very easy to customize as well so let's say you just want to change the color scheme all the design sets use global colors so you can very easily go to manage settings global styles colors and you can now edit all the colors used by this design set so let's say i have a purple color scheme on my site i'll just go ahead and change these colors and look at that i've now updated the site to the new color scheme in three clicks super easy and the design sets they also make use of classes so you can easily consistently style the design set for example with a typical builder let's say you want to tweak maybe the font size here it wouldn't also affect the other elements but in oxygen it does because we use classes so you can very easily adjust sizes adjust styles and get a consistent look across the entire site [Music] responsive design and oxygen is flexible powerful and simple you simply choose the device width you want to edit styles for and then tweak styles for that device and below so let's go ahead and take a look at our design as the screen gets smaller and right here it's getting a little bit cramped so i'd say right here we should stack our columns vertically we'll choose stack columns vertically less than 992. so on all devices horizontal less than 992 vertical and maybe less than 992 we also want to shrink this heading size we've already selected less than 992 select the heading turn down the font size create all devices with the bigger fonts less than 1992 with the smaller fonts you can edit every single css property like this for all devices page container and then three additional media queries so you got a total of five different break points you're controlling styles for let's go down to lesson 768 still looks okay less than 480 this is a little bit cramped so instead of making these 50 width which they are they're 46 percent width over here let's make them 100 width and there we go and then maybe we want to stack our columns in the opposite order when we stack vertically so we'll go to the columns and we should reverse the column order at less than 9.92 and there we go all devices page container below 992 below 768 and below 480. it's very simple to create responsive designs in oxygen [Music] let's take a look at oxygen's modal element so we can use the modal for light boxes we click a button and up pops a light box with any content in it use the modal display contact form for example let's go into oxygen and set up a modal menu so when clicking this menu icon right there we want to open up a modal off canvas menu so i've already created the menu here let's go ahead and add a modal element to our page put the menu in the modal and make it open up when i click this icon so to do that i'm going to go ahead and add in a modal and here's our modal and then i'm simply going to drag this menu into my modal now let's go ahead and set up the modal style so i'll click on the modal i'll go to modal styles i'm going to set this to display on the left side of the screen i'm going to go to advanced size and spacing set the height to 100 vh that'll make it the full height of the browser and now let's go ahead and set this modal to open up when we click this button so to do that i'll go to the modal go to primary trigger show when user clicks element choose my trigger selector by simply clicking on the element i wish to open the modal and that's all we have to do let's take a look on the front end and here's our page let's click the menu icon and voila there is our modal menu [Music] conditions in oxygen allow you to conditionally show or hide any element based on virtually any variable in wordpress here i've set up a quick member dashboard on this site it's got a few tabs of content but i only want to show this dashboard to members when they're logged in we can set that up using conditions so let's jump into oxygen and i'll show you exactly how to do that okay here we are in the back end of oxygen now the first order of business is to hide this section if the user viewing it is not logged into our site so to do that we'll select the section and then we'll go up to the conditions icon in the properties pane and click set condition we're going to add a condition and choose user logged in right here equals and we'll set that to true so now we should only ever see that if the user that's viewing it is logged in but we might want to show something to people who are not logged in so let's add another section and let's add a div and let's go to wordpress and add a login form we'll style this up just a little bit and let's grab this div make it a little bit wider go to advanced size and spacing and make it like 300 pixels wide that should look good and then we need to select the section and make sure everything is centered now let's add a heading too to tell people to log in so let's do heading and let's say please log in to view dashboard and we'll put that up top perfect a little bit of spacing below that and i think that's a good enough login prompt for users that are logged out so we'll go up to our conditions icon again with this section selected go to set conditions add and we'll choose user logged in but this time we'll choose equals false so now this should only ever be shown to a user that's not logged in now let's jump into the front end to see what that looks like as a logged in user we see our member dashboard but if we jump into an incognito window we should see our login form and there you have it also note that if oxygen's built-in conditions don't accomplish what you need you can register your very own conditions using oxygen's conditions api [Music] dynamic data in oxygen allows you to design templates that dynamically display content from the posts pages or custom post types that those templates render this can include the title of those posts the content of those posts meta fields or content from advanced custom fields or toolset both of which we have an integration with so let's jump into the backend and i'll show you what i have set up here we have a list of properties this is a custom post type and if we jump into one of these you'll see we've set up a bunch of advanced custom fields with data about the property to render this we're going to set up an archive template that renders a list of properties so let's jump into that template and we'll edit with oxygen now that we're editing our properties archive template we're going to add a section and a repeater the repeater is a visual loop builder that allows us to insert elements and pull dynamic data from the posts that are being queried we're going to do a two column layout so let's throw some columns in here and we'll make them 50 50. and then for the left column div we're actually going to set its background image to the featured image of each post so we'll insert that and then we're going to adjust the background size to cover set the left and top to 50 percent so that it's nice and centered let's go ahead and go to advanced size and spacing and set the min height to something like 300 pixels perfect now within this div i'm going to add a heading and this heading will be the title of the property post so let's double click that and we will go up to the top bar insert data and we'll choose title so this will be the title of the property and let's change the text color to white and let's add a bit of padding around it maybe 15 pixels all the way around and let's change the background to a transparent black go black and then adjust the transparency down and then we're going to select the div and just position everything in the center and at the bottom now let's jump over to the right side of this column and start outputting some of the other dynamic data that is on these property posts so we're going to first let's adjust the sizing of this i want a little bit of padding let's do like 15 pixels around this and then we're going to go to add and let's add a div and then let's add a text element in that div and then here we can start listing some of our properties so let's see what fields we have available here double click the text insert data advanced custom fields we're going to go with price right up front why not insert and then we'll pre-pin that with price and as you can see we now have the price okay so we're going to actually style this div up a little bit we're gonna set go to advanced size and spacing with 100 percent and padding bottom is going to be 5 pixels and we'll go to borders and bottom and we're going to set it to a very very light gray and set it to one pixel solid so now we have kind of a table row type of look so we'll duplicate that and let's start inserting some other dynamic data so now let's look at what our next field will be we'll go to advanced custom fields and we'll go to bedrooms and prepend that with bedrooms and then let's just throw another one in there duplicate it and do advanced custom fields and then we'll go to bathrooms that's a good thing to know about a property if you're purchasing it and pre-pin that with bathrooms and then let's throw one more in there at least let's duplicate that and double click to edit the text insert data advanced custom fields and we'll do address that should be enough information and then finally we're going to add a button here and for the url of the button we'll use data and go to the posts permalink so if we want to view the property we can do so now let's change the button color to this charcoal black and change the text color to this gold okay that way we match our header now we can add some spacing above that and below the div do 30 pixels and then that looks pretty good now let's style our uh div a little bit that contains our columns element so we're going to go to advanced size and spacing and let's let's add 15 pixels of padding around that and then let's change the background color to something a little different maybe a slight off-white okay and then we're going to go to advanced borders and we're going to set a 4 pixel border radius on all sides and then we're gonna go to advanced effects box shadow and do a slightly transparent shadow here so let's drop that down quite a bit and set it to zero uh horizontal offset zero vertical offset uh 25 blur and negative 10 spread and then make sure it's not in set because we don't want that and then under advanced size and spacing we're going to add 30 pixels of margin i think and then there you have it so now let's take a look on the front end to see how this dynamic data is being rendered now again note that i only designed the first listing but if we look on the front end you'll see that every single listing has different data listed from the post different titles different images and different permalinks for the buttons [Music] [Music] you

Channel: Oxygen

Views: 17,321

Keywords:

Id: kO1Yk_nd3Bw

Length: 53min 23sec (3203 seconds)

Published: Wed Jun 30 2021