Oxygen In-Depth Product Tour - Fall 2019

[Music] hey this is Lewis from oxygen and in this video I'm gonna give you an overview of the oxygen visual sight 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 got sections divs columns heading text got helper elements like pricing tables testimonials we have a design library with 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 if not added to that to our page if we wanted to add an individual element for example if we want to add more text we could 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 and you save your changes and you can go back to word press 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 ok let's get started [Music] the beauty of oxygens 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 of 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 who commerce 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 gonna go to new template I'm gonna call this product and here at the header and footer from the main template and we're gonna 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 gonna 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 with commerce elements here I'm going to add in a product builder and the product builders default layout is just gonna be the default layout provided by WooCommerce with some spice top styles to make it look good and let's preview some other products 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 add section we'll go product images and then over here I go to WooCommerce or search we go product title we can add in the product description are probably better to use the product sir 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 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 a product tabs let's add a little bit of space there and let's face 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 a little space bring this down and bring this up and there we go there is our custom WooCommerce layout you get 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 says it's been out of 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 can make it smaller if you 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 oxygens WooCommerce integration you could have go to manage settings global styles WooCommerce and from here you can control the colors the Styles the border-radius is 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 gonna go to buttons and let's just set the color to my already set up global colors exercise you probably swapped those this is probably the main color there's gonna be the hover color we're gonna use a dark color for the tertiary CTAs so use it same dark but maybe make it a little lighter on hover and centreboard rays so for reuse order radius of zero that does her buttons we also have global styles for links so let's set up the same colors for our links these are just coming from my RTC global colors for a focused input let's use this 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 don't have a silver somewhere yeah let's use atomic alternate maybe that's not quite dark enough it's dark in 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 tax looks good notifications for our meshes color we're gonna use this for air color let's change it to something like orange or red and info color we're gonna 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 the site so we'll just leave as is 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 site if we take a look at a product layout there we go same Styles consistently applied it 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 [Music] Oxygen's Gutenberg integration turns oxygen into the world's first ever drag-and-drop visual Gutenberg blockbuilder 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 an oxygen and let's say I want to make one of the sections on this page 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 gutenberg block that can be added in gutenberg any texts the links the images can be edited directly inside of gutenberg we can also turn an entire page into 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 gonna 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 head it whatever you want in terms of text images icons so let's 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 for the license that includes white labeling well in oxygen we just have the roll 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 gonna 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 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 to break it and they never know oxygen exists oxygens flexible header builder element makes it easy to create beautiful responsive multirow 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 ROM to set the background color to black and I'm gonna 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 and give it a height of say 24 pixels it'll go ahead and add in a menu here so I'll go add menu and I'll also add in a button call to action button just change the textures they 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 uppercase font way of 500 oh yeah 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 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 kailasam the phone number 188 2 3 4 5 6 7 8 go ahead 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 a.m. to 8 p.m. and let's go over to size and space and had a little bit padding here space ago 6 pixels on the top and the bottom and there we go now we have our multi row header here 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 we'll just enable sticky functionality and with no code at all you get a sticky header even set that to fade and 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 two 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 in 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 gonna put us and text in there and I'll say 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 just the buttons not right up against the edge and now what we're gonna do is choose to only show this row in the sticky header and then we're gonna hide these rows when the header is sticky so choose hide and sticky and hide them sticky now in the header becomes sticky we got 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 you don't waste space with a 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 above 11 20 pixels and there we go now the header becomes transparent and it overlays the preceding section there we go header builder and oxygen green beautiful responsive headers with ease [Music] oxygen has a ton of features it 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 you'll advance effects animate on scroll and enable animation and from here we have the most configurable scroll 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 we'll set no delay and we're only gonna animate this one so when they reefs crawl 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 gonna set this one to also fade up but a duration of 500 milliseconds same easing it's gonna 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 you see a preview of what zoom out down looks like surgeons have a little boom one boom - boom three boom four all in a row so this one we're gonna 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 gonna animate that once okay now let's do the next one same thing advanced effects animated scroll enable animation zoom out down animation duration 250 but this one we're going to give lalla thousand milliseconds so this one's gonna go first then this one's gonna go a quarter of a second later I'm gonna made only once okay let's do the same thing for this next one naval animation zoom out down animation duration 250 this one we're gonna delay by 1250 animate once and let's go ahead and do the same thing for the last one animate on scroll naval animation zoom out down 250 animation delay this one's gonna be a 1250 delay and now we scroll this into the viewport or just load the patience at the top of the screen we're gonna get these effects so let's go ahead and take a look and look at that 1 2 3 4 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 animated scroll and enable animation we're gonna set this to slide right and we're gonna give 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 gonna set that to flip left so that's gonna look like that and we're gonna give that a 500 millisecond duration and a 250 milliseconds 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 are 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 and child any pseudo class you can do it also if you're advanced you're gonna 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 gonna 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 thousand pixels in 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 gonna we're gonna rotate it negative 23 degrees on hover lets click outside the element now you mouse over and it rotates but that's so choppy so let's set up a transition so it'll go back to advanced effects transition and we're just gonna had a transition duration of say 0.5 seconds and there we go smooth hover effect beautiful 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 - avatar class they will have the same styles right we can edit styles in one place and it will 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 - 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 they're fast load times and talking about how they could never get those results with other page builders here we've got somebody said never had site performance like this here we've got what you guys think built with oxygen he's got PageSpeed 99 yslow 94 fully loaded point six seconds page size 274 kilobytes here we got another one posted all his performance reports saying getting ninety five percent on page speed why slowed air 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 Elementor beaver builder Divi verses oxygen and I'm not doing this try to convince people there to using element or Beaver and divvy 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 blow 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 and 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 and we'll see that it has a page size of 1 megabyte which is ridiculous I mean it's default styles are almost 600 kilobytes which is preposterous I don't know why - icons is being loaded on the front and 45 kilobytes 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 to 250 kilobytes of custom JavaScript 90 kilobyte true type font file which is for the admin it just makes no sense that this stuff is loaded it's just gonna slow down your pages beaver builder is much better than Divi here's my beaver builder page with beaver builder theme and beaver theme are 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 20 kilobyte JavaScript file and then it's loading this font awesome dot wah font file which is 72 kilobytes but we're not even using any font offs icons on the page so why why is it loaded it shouldn't be loaded and then let's go over to element or just 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 a 120 kilobytes 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 I 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 10 Jolla is 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 or so against visual builders but I just want to illustrate oxygen is not like that this is clean code it's not unwieldly it's easy to work with if you're gonna 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 Divis might not quite as bad but it's still pretty bad 1 2 3 4 5 6 7 8 levels of nesting I guess 9 10 11 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 its blow 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 one point one 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 and set everything in a design sets gonna 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 gonna add in some testimonials or social proof it'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 an 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 a 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 I'll choose stacked columns vertically less than 992 so on all devices horizontal less than 990 to vertical and maybe less than 992 we also want to shrink this heading size we've already selected less than 990 to select the heading turn down the font size we're at all devices with the bigger fonts less than I need and I need you 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've got a total of five different breakpoints you're controlling styles for let's go down to less than 768 still looks okay less than 480 this is a little bit cramped so instead of making these 50% width so they are they're 46% 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 992 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 let's take a look at oxygens modal element so we can use the modal for light boxes we click a button and pops a light box with any content in it use the modal display a 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 setup the modal styles so I'll click on the modal I'll go to modal styles I'm gonna set this to display on the left side of the screen I'm gonna 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 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 you 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 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 backend 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 gonna 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 two to tell people to log in so let's do a heading and let's say please login 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 oxygens built-in conditions don't accomplish what you need you can register your very own conditions using oxygens conditions API 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 tool set 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 reading 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 pool dynamic data from the posts that are being queried we're gonna 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 gonna adjust the background size to cover set the left and top to 50% so that it's nice and centered let's go ahead and go to advanced size and spacing and set the men 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 gonna 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 gonna go with price right up why not insert and then will pre pin that with price and as you can see we now have the price okay so we're gonna actually style this div up a little bit we're gonna set go to advance size and spacing with 100% and padding bottom is gonna be five pixels and we'll go to borders and bottom and we're gonna 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 prep in 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 below the div do 30 pixels and then that looks pretty good now let's style our div a little bit that contains our columns element so we're gonna go to advanced size and spacing and 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 gonna go to advanced borders and we're gonna set a four 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 horizontal offset zero vertical offset 25 blur and negative ten 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 gonna 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 design 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] you [Music]

Channel: Oxygen

Views: 62,598

Keywords: WordPress, site builder, page builder, web design

Id: oKr9T2U4lno

Length: 45min 12sec (2712 seconds)

Published: Tue Sep 03 2019