Create Menu Pricing Layout | Advanced Oxygen Building

in this video we're going to recreate a price menu layout using oxygen builder hi my name is stratus and i'm cosmic producing video tutorials about wordpress please subscribe to my channel for more videos like that so i don't think that this is something very difficult to do but since uh some of those asked for something like that i'm going to do a video about this so let's see what we have here as you can see here is the menu and we're going to create this one but we're also going to see some other menus because i couldn't find any layout that was really difficult and something that i was fond too so this is very easy to do i think this the only difference is the line here and how it is displayed this has two lines here this has one line underneath the title and the price this has a line here i think the difference between those are how the line is appearing so we're going to see how we can create something like that and then we're going to discuss about all those layouts let's go to the page and this is the food page i have already created an advanced custom field uh and using the repeater element i have recreate here the course one as you can see i copied the four first menu items here just for the speed and i put also the prices and of course you have to use the acf pro to use the repeater field inside here so after that let's start the oxygen and we're going to recreate this layout of course i'm not going to copy the colors i'm not going to copy the font so it will not be 100 identical but this purpose of the video is to see how you can recreate something like that and make it your own just to learn how to use oxygen so let's open the structure and let's open the builder here and add a new section let's save that and open that in the front end to have it opened here so uh in this series i'm not creating something that i have already tested i'm rick i'm creating that for the first time so i'm going to make mistakes and i'm going to fix those and i'm not going to edit those out so you can see how you can face everything that you may have i mean any problem that you may have so in here in the section let's see how it looks in the front end okay very nice so thanks for watching guys and i will see you all in the next video so okay let's go and add here in the section heading i think okay and let's put that in vertical and center and let's copy our breakfast and put that here okay and then let's delete the space here let's save that and here i'm going to put also a little bit of margin and then i'm going to add the repeater okay now for the repeater i'm going first to select the query and i'm going to select the use us acf repeater field and i'm going to select the course one i'm going to hit apply and now i'm going to see that i have four rows because i have four elements i'm going to save that and back to our acf field i'm going to see that i have the fields group and here i have only one item the menu and here i have the repeater element which is named course one and it has inside there some sub menu items the sub fills the name description and price so this is what we're going to use back to our editor here i have select price and i have select apply and now i have to go and select the two columns to recreate now there are two different ways to do that the first was the what where we were using before the grid that was a 50 width of the div with allow multiline and that would go and make the four elements to be side by side in two different rows because i have four elements but now that we have the grid we can go and select here for the repeater to grid layout enable grid and select the columns to be 2 so this will make two columns as you can see here now let's go into the repeater into the div and here i'm going to add a heading this is the name so i'm going to triple click it and select insert data and repeater field name insert and then select for the tag to be an h3 let's say that and see how it looks so as you can see this is the layout so let's see what we have here so we have here the description we have the dots and then we have the price the way i'm going to build that is i'm going to create one div for the whole line for the whole row and then i'm going to put inside three little divs the one is for the description the second is for the dots and the third is for the price and let's see how we're going to do that i'm going to go inside the div and i'm going to add another div so this will be the div for the row inside that div i'm going to add three divs so let's add one and then let's open the div click inside the div that i have put and duplicate that and duplicate again now that i have the three divs i can select the parent one and i can put that to be horizontal and then i can go for middle and center okay and then i have to go and select for the width of the parent div to be 100 of the row so like that it will expand to the whole page now since i have used here the center in strong i'm going to use this space between i think and that will push everything to the edge so the first is in the to the edge the beginning of the div the last one is to the end and the second is in the middle of course you don't have to put anything here but we're going to see later on how we can fix that and let's see here inside that div we're going to add the description let's add here a text element and i'm going to triple click that insert data and select repeater field and then select the description okay insert that here in that div i'm going to select that and i'm going to add let's select the text and let's go for triple click it insert data and here is the price show repeater and price insert and here i'm going to also click outside the beginning of the short code and add the dollar sign so i have that also let's save that and see how it looks in the front end okay now as you can see i have this layout and let's see now how we can create this dot so we're going to use this div and of course we're going to go to advanced we're going to borders i'm going to select the bottom bottom border to be dust dust and the width should be one and for the color i'm going to go and take a black let's save that and see now how it looks and as you can see i cannot see anything because the width has the width of the div is zero the divs when our empty doesn't have any height don't have any height or width so i have to go and select something for that let's go to layout and here i'm going to go to the flex grow and i'm going to put here one so this mean basically that it should take the whole space that's available inside that row let's save that and see how it looks now in the front end and as you can see i have the line here but it's not uh looking good because it is between uh the height of in the middle okay in the middle i have to go and put that on the bottom let's go now and first see how we can going to do that so as you can see the text are also in the middle so let's see if we're going to fix that by selecting here bottom and now i have those in bottom let's save that and see how it looks in the front end okay now everything is looking good i don't have to make any changes if you wanted this to be a little bit uh with a margin you can just put a margin inside here or if you want something like here and you didn't want us those to be touching also i said before that i have i don't have to use the spade between if i remove it it will stay the same because i have used the flex grow inside here so everything is pushing uh into the beginning and the end and let's save that and see how it looks here it will be exactly the same so this is how you can create something like that everything else is pretty straightforward they have a background here it has a different color this is a little bit of white and this is a little bit of gray and everything else is pretty much the same so i don't think that it has any different now if you want to push the uh the dots a little bit up you can just put a little bit of margin outside here so let's go here and put a little bit of margin outside let's go to advanced let's go sizing spacing and put the margin of three pixels let's save that and let's see how it looks in the front end so as you can see it went a little bit up and maybe let's go for five pixels okay five let's save that and see how it looks in the front end okay so i think you get the point let's see now how it looks when we collapse that item or for the responsive so let's go and put that here and let's shrink that and it's not looking good where were the lines i don't i cannot see the lines when i string it okay okay now i can see the lines and here is two lines and here is one line uh where was the menu right here and here we don't have any lines here so basically uh change the layout when we're shrieking it i don't like that it doesn't have any lines here because you should have the line since you have been you're building a layout so in the mobile you should have the same layout or as much as the same layout as you can so i don't see the point why he's not using the same style in the mobile menu so let's see how it looks for us and let's go and put here the less than 992 and as you can see here it looks okay it doesn't look too bad but of course you can just go ahead inside here and select the repeater and select for the grid layout here to go and enable that and select for the column count to be one so it will be like that and save that and of course i think this is better okay everything is looking good and here everything is looking good and if you want you can just remove the dots i don't think that this is a problem of course inside here you can use a minimum width so this will mean that this will always have a little bit of dots here and this will have a break line and be two different rows like that let's see now in all devices and let's save that and see the differences between all the other layouts that we are seeing here so this is basically again a repeater field with two columns and it doesn't have anything difficult here the image the the title and then the price and of course the description right here and we have a little bit of different color here we have the line underneath so we have the name inside here and then we have a different row with the div that it's grabbing the whole row and inside that div we have one div with dots and one with the price it's pretty much the same but we have the description underneath that so again this is not difficult uh two divs inside one div and this would be flex one and this will take a little bit of space and the whole row is going to take for the dots going to grab by the dots let's close that and this is something very easy again we have two divs instead of one inside here and we have a little bit of margin between those divs and those divs do have a solid line so let's see how we can do that it's very easy let's go to advanced let's go to borders and here i'm going to change in to solid and so so sorry let's go first to bottom and here i'm going to select the solid and i'm going to save that and see how it looks in the front end okay and now i can go for this div and select to duplicate that okay and now that i have duplicate that i have to go and put those wrapped inside the div so i'm going to click here i'm going to wrap that in a div i'm going to click here i'm going to put that inside that div and here i'm going to select that div i'm going to advanced layout and i'm going to remove the flex grow which will go in the par and div so here i'm going to advanced i'm going to uh here layout and here i'm going to select the flex grow so the parent the div that contains the other two divs has a flex growth one let's save that and see how it looks okay but we don't have anything inside here because the power the inside divs don't have any any width so here we're going also for that div and i'm going to select the width to be 100 and this div should also go and have the 100 of the row okay let's save that and see how it looks okay now we have the two lines so again it's very easy to do and you can set the lines how many uh margin you want how many space you want between here and how much space you want here so this is something also uh easy to create let's see here we have another div that is has the whole row so again easy let's close that this is identical i think yeah it's identical let's close that this is also the same let's close that also and this is something that you can recreate without using any layout and flex grow and this is the same so we have everything is pretty much the same and this is why i'm saying that it's not something difficult but it's not something that i'm really fond of everything is the same now since i want to do little bit different i'm going here and i'm going to select here the div this div and let's see if we can create something difficult like putting one in gray background and the second to be a little bit light or white and the third should be also in a darker background gray and then light so we have something like a table so how we're going to create that we're going to search for the sudo here if we go and select let's select the div and let's select the id and here we have a state so in that state we can add the state and we have some states that we can play with so this state are the sudo sudo css and here we have many things that we can add so if you just go and search for that you can see that we have and again i typed that incorrectly so i hope i said that correctly the studio so you can see that we have the link we have the visited we have a hover we have an active and we can make some changing about that and we have many things that we can try and recreate there are many things that you can try those are a css 2 and these are css3 with two dots okay so we're going to see for the table table and let's check if we can see anything here i'm going to search because i don't want for you to remember i'm going to show you how you can search and find it every time so of course i haven't searched it myself so this is what we're going to use the ninth child this means that the even numbers the first the third the fifth the seventh end that goes on will have a different background as you can see here so this is what we're going to do we're going to copy the whole thing the name child and then even to remember that this is the event and let's go for the div this div and add the state and i'm going to put that here mean child even okay and let's see if it's going to work of course because i haven't tested and here i'm going for the advanced i'm going for a background and i'm going to select background color to be a little bit of something like that okay let's say that and see how it looks in the front end and now we have the first second third fourth and let's break the grid just to make it a little bit clearer let's go to the repeater let's go to the grid and let's disable the grid and let's save that and see how it looks now i didn't save that save and refresh okay as you can see now it is like this i thought that that was an even but maybe i made a mistake but i'm pretty sure that this is the even so this is how you can create something like that so if it's if it's me that making the mistake for the div you can just go and select of course the id and then the state and then select that and select to have the white color for those items and then for the other items to have a little bit of dark background but you can select something very easily and change that and make it your own so i would suggest you to go and search for these pseudo classes because i think it's a very powerful thing to have and this is and since oxygen is letting us to add those very easily it's very uh it's a very important thing to know what you can do with those pseudo classes it's something that it opens a new world for me okay but you can see that you can create some amazing stuff using those pseudo classes so i would put the link of this particular page and of course the one that had the all the pseudo classes not everything they're not everything inside here i think there are some other things like i don't know some like last tens i cannot see the last i think here maybe it has a last but i cannot see it we have the only tide only of type ninth of day ninth last of type nine last time okay this may work in some cases this may work in some cases that you may want the border at the bottom of a repeated field and you have something else so you can search for everything so thanks for watching guys and i will see you all in the next video please remember to subscribe and like the video

Channel: Stratos Tutorials

Views: 491

Keywords: Oxygen Tutorials, oxygen Tutorial, Advanced Oxygen Building, Oxygen Advanced building, oxygen advanced layout, oxygen css, oxygen html, oxygen pricing table, how to use oxygen, how to create elements with oxygen, overlapping elements, menu pricing, restaurant pricing, menu layout

Id: 3WIoRa3WcRU

Length: 20min 31sec (1231 seconds)

Published: Wed Mar 03 2021