Build a Used Cars Website - ACF and Oxygen Tutorial

in this video we're going to see how we can create a used car website with advanced custom fields and oxygen hi my name is stratos and i'm constantly producing video tutorials about wordpress please subscribe to my channel for more videos like this so i was asked for some use from some users to create this website and show you how i have done that and this tutorial is going to help you if you're going to create a website for used cars for a directory for jobs for listings for cars for cars i said that already for houses and things like that so this is the page that we're going to create for the cars you can see the header i don't have any footer i haven't created the home the about or the contact page because i don't want to go into a video that's going to be for hours hopefully you know how to use oxygen and since you're here to learn about the custom post types and the acf fields and dynamic fields you know how to use oxygen and the basic form and you can create your own home page and all of those all of that pages so this is the car archive template and you have the filters here that is working fine i have also another video for the filters so if you just want to see the filters and how you work you can go into my channel and look for the search and filter prop again and everything else is working fine inside here after that we are going to create the car single template and this is the template that we're going to create the image the all of those are custom advanced custom fields and here we have also a tab with the car extras gallery and probably i should have gone and give that the same height so it will not go and change this i don't like this but this is something that you can easily do it's not something that i want to do at this moment so i'm going to start with the blank website this is a first installation so let's go into the settings first and we're going into permalinks to set first the command settings to be the post name so let's save changings and then let's go to appearances themes and here i have the 2020 also so i'm going to delete that i'm going to leave only one theme i have in the the plugins that i'm going to use uh first i'm going to start from all pages and here i'm going to delete those two pages move to truss and i'm going to empty the truss so empty truss and let's create four pages the first one will be the home page publish that the second will be cars publish next we have about us page and then i have the contact i usually create the pages first because i want also to create the menu so i'm going to the menu now i'm going to name it main create the menu and i'm going to add all of those pages select all add to menu i'm going to rearrange the order and save menu next thing i'm going back to the pages all pages and i'm going into the car and i'm going to change this lag from cars to used cars used cars because i'm going also to create the custom post types and i'm going to keep the cars for the archive page so let's update that so the page is cars but this the url of the pages used cars under the dominate domain so let's update that once more and let's go into the plugins install plugins and first thing i'm going to activate the custom post types let's activate that and with this plugin i can create a custom box type for those for those that don't know what's a custom post type wordpress handles everything like a post so we have the post which is basically the articles then we have another kind of post which is the media we have another kind of post which is the pages the comments everything is a kind of post uh with different settings with different use if you install woocommerce then all the products is a different kind of post it's a custom post type that is already created from for us from woocommerce so with that we can create our own post types and let's go here that says add an edit and here i'm going to add cars and this is the slack that i want to keep for the cars the plural is cars and the singular is car add post type and now i'm going to edit and since i have only one this is the one that's selected here and let's change some changes let's go here i'm going to uh change the house archive here to true and hierarchical i'm going also to change that as true now uh of course in this case i don't have hierarchical i don't have a car and under not under that another car but this is something that you should be aware if you're creating some kind of type of rooms or other things and you want to create this hierarchical order so let's not changing that here we have the title editor and featured image this is all i want to create so save post and i'm going to create the custom taxonomy for that so let's go for the taxonomies here i'm going to select the taxonomy which is the maker maker okay pluralist makers and singularis maker okay and that will be attached to the type of post named cars i'm going to add the taxonomy and let's go to edit that and here let's go down and we're going to select uh in the hierarchical i'm going to select true so here i'm going to select true and so admin column so i want also that that to be in the admin column let's change that to false and we'll see later on what it does so let's save that okay and now as you can see here the cars has a pin icon so i'm going to change that icon let's go back to the post types let's go down where is the icon it's somewhere around here menu position so in menu menu icon this is the menu icon so i'm going to click here that says dashcon class name and here it will open the icons i'm going to type here car car and i'm going to click here that says car and now i'm going to copy that and let's go back to a menu icon i'm going to paste the code and i'm going to click add post type i don't want to add i want to edit sorry edit so cars and here i'm going down here and in the menu i'm going to put that and i'm going to click save once i click save this turns into a car icon as you can see so now if i go to add a new car i'm going to see that i have here the add title and i have also some text to create i have here the set featured image and i have here the makers so let's go then and go into the plugins install plugins and i'm going to enable the advanced custom field i'm using the pro because i have also the gallery feature that i can use so once this is active i'm going to feature custom fields i'm going to add a new and this is car details if you are using uh this tutorial to create something for houses or a directory for businesses or something you will do all those names accordingly so here we're going to put car details and here for the post type is equal to i'm going to select car and let's publish that now i'm going to start adding fields so let's add first a field and this is the model the first thing that i want to add is the model once i click here this is the field name and here i like to put car and hyphen car hyphen model so the name that i'm using for the field name should always have the car because i want to know uh what is this field about in many cases i have a client that asks me to create another custom post type and i may need to create something for bikes or something for vans and i want those to be separated or something so if i use here model i don't remember if i had it this for car or for a bike or for something so i do want to be specific about those i'm going to leave that as text and let's update that and now if i go into the add new here and refresh and let's select leaf page i'm going to see at the bottom of the page that i have now the card details and i have here the model as you can see this is a full width so it grabs the full width of my page and i don't want that i do want that to be a little bit less so i'm going to change all of those let's go to add some other fields and here you're going to see how also i change the width it's not something just the something that you can select how the width of the fields that you want to create so let's type here a category or car type type maybe type so car type car type and this is maybe a select so uh the one that going to add those cars inside here the client will have some choices to select from so i'm going for minivan no mini mini car i don't know small car hatchback something like that pick up pick up and then we have sedan sport cabrio so i have things like that i don't want to select the default value and if you want to do something of those to be required you can just select here that it will select yes and this should also change the width here so let's go for 20 width and let's 20 let's close that field and i'm going back here in the model and i'm going also to do that 20. so these are our small text areas that i want the client to write so let's add another field and we're going for the next which is the uh let's go for a month or date or year year license year license year no license okay here so which here has in his license this is a car here this is a text i'm going not going to change that to a number because the number i have also some arrows next to the number that i can go up and down and i don't want you i'm going for here let's go for 20 also let's add another field which will be uh the miles and this is carmiles okay text again and let's go for 20 let's add another fill which be the engine and this will be also a text and let's go for 20 let's add another field this will be the horsepower hp okay car hp and i think here i'm i didn't put the car yes car engine okay next will be here is 20 and the width and here is 20 also let's add another one let's add another field this is for the consumption maybe the transmission maybe transmission transmission transmission okay so car transmission this will also be a selection because because we have only three choices and here that we have the choices first is manual then we have automatic and then we have semi-automatic okay and the manual is the default value because most cases i have a car that's a manual so i'm going to put that as the default here i'm going to select 20 and let's add another field and this should be maybe the color or the door's color let's go for color color okay this is also text car color and let's go for 20 select another field add another field and here let's go for doors card doors okay also text 20 and maybe the price now i'd filled so let's go for the price car price k 20 for the width then we have the gallery gallery we have the car gallery car gallery and this is something that you need the pro and so let's go to uh content and let's go for gallery and then we have add filled and now i want to put the car extras so the car extras will be the choices that you have when you uh going to sell a car and you're going to say that it has abs it has air condition it has a cd player it has usb and all of those there are check boxes that you can add and say that this car has those extra features and this is something that you can create with two different methods i'm going to show you both of them decide what you want and and this depends on what you're going to create so the first one is the car extras where you have the egg car extras where you will have one check box and everything will be included inside there so we have the car extras like that and this is a check checkbox checkbox and now when i have the choices i'm going to start from iabs esp bluetooth bluetooth okay cruise control turbo i don't know intercooler then we can have a hill assistant intercooler k hill assistant we can have bucket seats we can have leather seats okay what else we can have electric windows keyless okay i think that those are enough so we have all of those options and we will have those under the same field so i'm going for the layout and set that horizontal i'm going to leave the width as it is and i'm going to save that and let's make then some changes let's update that and if i go now to add the new and select to refresh and leave the page so it will be refreshed we will see that i have all of those settings so in the model i can go and type here what i want here i have the type of the car license here miles engine and everything else as you can see then i have the gallery and then i have the car extras now i know that this is a line that i don't want you and i'm going to fix that later and i have something to select car abs esp bluetooth and everything is under this one field and now i have also another uh method to create the same thing and this is here to add one by one all the fields so the first was the abs so i'm going to add the abs independently and i'm going here for car abs car abs this is a check box so let's go for checkbox the choices is abs and the width should be something like 10. then i have another field which is the esp car esp this is also a checkbox and this has the choices of esp okay it's also 10 width add another field i'm going to add four of those and what was the next one which is bluetooth okay bluetooth i cannot copy that okay doesn't matter bluetooth car bluetooth choices this is checkbox and in choices i'm going for bluetooth also 10 width and once more this is the turbo car turbo let's go for checkbox okay and this is turbo so you can understand that if you're going to create 30 or 40 choices this is uh something that you will have to do for more hours so you have to put one by one every field and you will get yourself something like this in the back end so let's refresh and see what we have here and here as you can see i have now the uh this didn't give me the 10 width because i forgot it so if you go here and select for the turbo to be 20 width also it will go next to that i forgot to do that let's update that and refresh the page here so it will go next here but as you can see this is abs-csp bluetooth and you have it one by one to every uh choice uh independently and this is one field for everything you will see then in the front end how we can set them to be displayed and this is something that you may have pay attention on how you want to create that so i have this ready and i want just to edit some things here so as it says here the model maybe the client doesn't know that he has to go and create something identical for all these for all his entries and what i mean is if you go here and type something like i don't know hoda i want those to be written like that i don't want that the first letter to be small i want always to have the first letter capital and i want him to be to follow the same process in every car so i want to remember every time that he must put the first letter uh in capital so we'll have a consistence and when we're going to see the filters and we're going going when we're going in the front end we're going to see everything that is the same and has a consistence on how to be displayed so i want to add back to my field groups in the module i'm going here that says instructions and i'm going to write first letter first letter capital or uppercase uppercase i think it's the right word uppercase i'm going to copy that and i'm going also to add type in the type maybe what is the type i think the type is a choice no not in the type in the miles in the edge know hp transmission color the color is also the same i want that to be the first letter to be uppercase instructions uppercase then what else we have doors price okay gallery and everything else is okay so i'm going to save that and see how it looks and i do every change one by one so you can see why i'm doing all those things so as you can see now my field is not in the center and some fields are down here and others are in the middle so what i'm going to do is put the uh the instructions on the bottom let's go back here and we're going back down and here that says instruction placement below fields this is what i'm going to do and i'm going to update now update that and now that i refresh the page i will see that everything is in the same line so it looks it looks better as you can see right here now for the miles i also want uh to have something else because i don't want someone to add the miles after that so i can go and for the app end that appears after the input i can go for miles something like that then the same for the price the price may have the pre-holder text to be a dollar so it will appear uh within the input but before that so we have a dollar before so he will know that he is not going to add the hid the dollar icon it will be already said to him i just want the values you can also write that in the instructions but i do want those to be here so as you can see the price has a dollar sign here so he will just go and select what he wants for the price after that we have the miles and here is going to add just the value with nothing else and let's go to the price because i made a mistake and put that in the placeholder text okay let's grab that and set it to be prepend appears before the input so now let's go and update and refresh as you can see this is the placeholder and let's refresh the page and now i have the price signed here okay so i'm start i'm going to start by adding three or four vehicles so let's add a civic as we started hold the civic so i'm going for hoda civic this is the name of the title of the car civic and i don't know 2 000 2000 something like that this is the name of the car so car model we have the civic the type is sport maybe license year is 2016 miles we have one hundred thousand the engine is two thousand cesar and probably have also uh going to add this essay after the mile so i'm going to do that and i will have it for the next uh car that i will add so let's go for the miles no the mile sorry the engine and i'm going here that it says append and i'm going to add cc okay update that and let's go back here hp horsepower we have 200 i don't know transmission is manual color is black okay doors is five the price is fifteen thousand dollars so let's go to gallery at gallery and here i'm going to drop all my images and let's go for photos and here i have some images that i have prepared already and of course i don't want all of those to be added so i'm going to just remove that once they're added of course and you will see that none of those are holy civic so i'm not going to pause the video i just want all of those to be in one video so i paused the video because my phone rang so i'm going to choose these three select those so you can change position if you want so you can add that in first and then we have that and then first and then we have that and then we have that and for car extras i'm going to select a abs esp cruise control turbo heal assistant and leather seats and from here i'm going turbo and esp something like that okay and remember that these are something that you select if you want this or this do not add both of those i'm just adding those because i want to show to show you in the front and how you can make them appear and for the maker i'm going to put here the honda okay honda add maker and this is how it looks now so i have to go and select something from the hierarchy in the custom post type so i'm going to do that let's publish that now i have to first set the featured image this featured image will be this one for the honda civic okay i'm going to publish that publish and let's go back to post types let's go back to the taxonomies and here i'm going to edit of course i have the makers because i have only one and let's go here and see what was wrong with that so the higher the hierarchical i'm going that to put in true and now i'm going to hit save so now let's go and add a new car add a new car and now as you can see the makers are what we have used to see so you can select here the honda or add something else let's go for uh mitsubishi me too bc i don't know any cars that much ubc has me to bc and probably i don't know how to write those also much busy cars okay and do have any mgbc cars it's taking some time to source the website it's not a quick website as we can see okay and i want a model one model one model please give me one model so global cal okay i'm going to pause the video now okay remember that we have the lancer we have the evo we have those two so let's paste that here me too busy and let's go for evo or evo i don't know how it's spelled something like that okay the model is evo okay the maker is mutual bc it should be simple okay do not forget to add the new maker or else it will not be added here license year is uh 2014 miles is 15 000 miles the engine is 250 i don't know hp is 250 also this is a semi-automatic the color is black also black the type is sport sedan five doors and the price is twenty thousand dollars and the gallery let's go to add the gallery and select those also i'm going to select all of those select and for feature image i'm going to add uh this one okay then we have the car extras which is those and those okay publish that publish and let's go and add two more so add new and you have the cc in the engine as we said before let's go for suzuki zuki alto or something alto the model is alto the type is uh mini license year is at 2005 miles or 300 000 the engine is 140 horsepower is 75 the transmission is manual the color is red red the doors are three price is five thousand dollars okay the gallery will be this okay select car extras we have abs we have nothing else just abs we don't have anything else in that so add a new maker sorry add the new maker and here we're going to put suzuki and add the new maker and for the featured image i'm going to select this one okay and last we have several it okay add new so several it and again i don't know any serverlet cars sorry for that several led this how i don't know even how to spell that several led so let's go for images and we're going to find cerulet camaro camaro okay camaro of course it's not even close to severely camaro okay camaro model camaro the uh maker is several led let's copy that okay type is pickup license year is 2 000 and 17 miles 80 000 engine 2 40 horsepower 240 transmission automatic uh color is blue dark blue or something let's go for blue the doors are two price is 25 000 and let's go for the gallery and select those okay select abs csp bluetooth cruise control turbo intercooler hill assistant package seat electric windows key and kill this so we have most of those enabled so i'm going to publish those and now we have our cars so let's go to all cars and now we can see that we have the title here and the date here so we don't have anything else to tell them apart so if we go back to taxonomies and here we have if we want to though so that in the uh where was it in the admin uh so in the admin so i'm going to select here the true and save that and if we go now and refresh we will see now that we have the makers here and as you can see you can check also if you want to see all the cars inside those makers so next thing is going into the plugins again install plugins and i'm going to activate the admin columns this will give me more things that i can add in the cars so here that says all cars i can add more color more columns inside here so let's go back let's go into the settings and admin columns and here you have a selected you will select first the type that you want to choose the cars and now i can see that i have the title i have the makers and i have the date and i want to add another column so this will be a custom field the label will be model uh here is the width also i'm gonna go and change and for the field i'm going to select car model car model okay i'm going to save that and let's add another column this will be the price so let's go for action let's go for custom field label is price and the fill this car price okay update that and let's go and update that also so now let's go here and refresh and we will see that we have two more columns as you can see the model and the price i want the date to be down here so i'm going back to the admin columns and i'm going to close that field and i'm going to close that field also and take the date and drag that at the bottom update and update and now if i refresh here i will see that the date has gone into the last column here now i don't have anything that i can order the model in the price by because i don't have the pro version of the admin column but it works in the free version and you can add some more things so you can distinguish the one property from the other or the one car from the other if you add cars here so enough with that let's go to the next plugin and see what we're going to do next so we have the uh oxygen we're going to do next and let's activate oxygen and start creating a website now i'm not going to create the whole website i'm just going to create the pages that will have the archive page of the car and the single page of the car probably and i hope that you already know how to use oxygen and this is why you select to see this video but because you want to learn how to select and add the custom fields so you probably do already know how to create the simple pages let's go into the oxygen let's go into the settings and here i'm going just to i'm not going to do anything i would going to maybe change some things but not it's not necessary so let's go first to the templates and we're going to create a new template which will be the main template okay and this will grab the header in the footer for all the pages so main here i'm going to select cuts all i'm going for publish okay and edit with oxygen and here also let's go to the settings let's go into reading and here i'm going to select for the static page to be the homepage okay save changes and once since we're here let's go to discussion also and disable those three and let's save changes also let's go back to the oxygen and here i'm going to add a header okay header builder we have the header and here open the structure also and i'm going to add here a link wrapper the link wrapper will have for the url the slash so it will go back to the home page every time back to the root and inside the link wrapper i'm going to add an image for the logo image okay browse and select logo of course i haven't done that before by you but you have also to add every time the alternate text and select here and now i'm going for the width 100 pixels something like that okay save that because i do want to save often after that i'm going to add the menu i'm going for the pro menu and let's go inside here let's go to grab the menu and put that in the row right so pro menu select here the pro menu and let's select that i want that to be until the 992 pixels uh like that and then i want to toggle for the mobile version desktop menu we have the typography and we have the color to be black font size i'm going to change the font size this time and letter spacing let's go for one okay then we have the spacing 15 15 20 and 20. okay after that i'm going back and however an actor here you should have some colors already but since we don't have let's change some settings let's go into the manage and settings and here let's go to global settings colors global colors are the color we're going to add the blue color for the main color because it's my main color in the logo and i don't have any colors right now so i'm going for something like a blue something like that this is my main color maybe okay i'm going to copy that add that color and i'm going to add another color and sorry not here here and select and do that a little bit lighter something like that so this is the light blue light blue okay other color also and i'm going to also add enough white for my background of white and this should be something like here something like that add that color okay back here let's go back and let's go to fonts and here i'm going to select the text phone to be the ubuntu this will change also the the menu and for display for the headings i'm going for roboto i don't know why but i'm using in most cases those two fonts okay let's go back to the headings and here you can change of course the h1 and everything else i'm not going to the body heading should be 17 this will affect also the menu and this is why i didn't change the line height 1.7 and the color is dark blue sorry black okay after that let's go to width and breakpoints and let's go for 1200 okay and for the animation scroll usually i'm going for 1000 milliseconds which is one second the animation using is in and out and animate only one yes and disable and less than 992 save changings and let's go now to the hover text color and select the hover should be that okay and the active should be this dark so we have that difference okay and after that let's go back to the desktop menu and we're okay with that i don't have any drop downs and i'm not going to change anything for the mobile menu save changes and now let's add our inner content inner double n inner content okay this should be uh with the height minimum height not here because it will stay the same for everything so minimum height should be 80 viewport height something like that so even if you don't have too much content inside the footer will go and stretch until the bottom of the page it will always be at the bottom of the page add new this is a new section and this section is the footer okay and we have the text color to be white once i add something inside there and of course the background color is black so we have a layout like that i'm not going to add anything to the footer either i just want to create the templates that i'm going to do so we're okay with the website and how it's going to start let's open that to see how it looks and as you can see we have those uh colors in the menu and everything else so let's go now to create let's close that let's close that let's close that and let's go back to the oxygen close that and here refresh to get the oxygen inside here and now let's go to oxygen templates and i'm going to create my first template which will be the main arc the cars archive cars archive okay so here i'm going to select archive and i'm going to select for the taxonomy to be cars sorry not the taxonomy i'm going to select both types to be cars okay this one i'm going to publish that and i'm going that to edit that with oxygen and i forgot to select the inherit design so i'm going back because i have to select to inherit the main template so it will grab the header in the footer and now i'm going to update that once more if i can i'm not i cannot at this moment maybe it has already done that automatically it does automatically sometimes so let's add that with oxygen but first let's regenerate the cast it will be very quick okay it's done that already and let's edit that with oxygen so we have those fields open if we need them we have the page and how it looks let's go and put that here i'm going to select the cars here so i have the used cars page and here i'm going to start creating my template okay now that it's open let's add first a section and in here i'm going to add two columns okay excuse me 40 60 and for this column i'm going for uh 25 something like that and the other is 85 this is this will be the filters and this will be the repeater so here i'm going to add here the repeater field the repeater element let's go and grab the repeater let's go open the structure to have that open inside here so the repeater let's go for query let's go for custom post types and select the cars for the post type apply so we will know that it has four cars at the moment because i have created four cars and let's go now to the div and this is where i'm going to start building my template inside here i'm going to use a div for the image of the car which will in the left and in the right there will be there will be information so i'm going to add two divs here div and then duplicate the div okay so we have two divs the uh divs as you can see are inside here so we're going to name everything because i don't want to messing with that without be sure what i'm doing so rename and the first is the car image image and the next is the car details so if you're going for a complicated page i usually suggest that you do car info rename your div so you know what you're doing so maybe you can also go here into the columns and select this for the filters and this will be the filter div rename filter div filter div and this is the main card div main car div div it will take you some time to create that but you are you're going to be sure next time you're going to change something that you're hitting the correct divs and something like that so this is the repeater i know which div is that because it's inside the repeater so i'm going to uh select horizontal and this is uh the div that i have to go and select the width to be 100 so it will grab the full width of the row everything from the uh from this column okay and then we have the car image will go for something like a 30 35 40 let's go for 40 and maybe i will remove it and maybe it's go for 35 something like that and the car info will have the remaining percentage again my phone ranks so let's go and see what we where weight 35 and here we're going for the remaining 65 65 percent okay so it will take the whole uh width of the row okay so let's start by the car image and now i'm going to set the car image as a background of this div so let's go into the advanced background browse and sorry not browse data and i'm going to select featured image for the size i'm going for medium large and insert that and i'm going to select cover i'm going to select no repeat okay and i'm going for 50 percent and 50 every time okay let's uh go then and save that and select next for the height of the div remember that since we haven't anything inside here inside the div we don't have any height because we don't have any elements so we're going into the sizing spacing and for the height i'm going to select here 400 pixels something like that or maybe 300 pixels maybe it's too much for that so let's save the endings and i'm going to quickly see that i have the featured image for everything because i can see this but i cannot see the several edge so i'm guessing that in this roulette i hadn't put the featured image so let's go to carson cars several it and let's go and set the featured image yes i hadn't set the featured image so this is the featured image for the server let save and update okay and now i'm going just to refresh here so it will take now the image that i have set and we're going to continue building this template uh now that as you can see uh the loading of the page takes some time and this is because we have add many features and it will go longer okay let's open the structure again and now inside the div here i'm going to first start by the title so let's go for a heading heading okay i'm going to select that to be an h2 or maybe an h3 something like that and this i'm going to triple click it insert data and i'm going to select the title and insert let's select also the div of the car info and i'm going for horizontal sorry vertical and center okay after that i'm going for the price so let's go add a text text okay triple click it and select insert data advanced custom field and here i'm going to select the price and insert now here you have two choices to add the dollar so you can either add it from the sign that you have set inside the custom fields the acf or you can add it straight to oxygen so let's go and do that insert data and let's go to advanced custom fields and here that we're adding price it has a box here that you can include the prepend and append text so if i select insert and then select elsewhere as you can see now i have the dollar sign and you the 2025 000 now keep in mind that if you do that you cannot change how the dollar sign appears but if you want to add it separately you can do that by just selecting that and then just remove the pre-append yes that says here or do that again triple click insert it and just select what you want and let's click outside now that we have the price i'm going to triple click it once more and i'm going to go to the starting of the short code and before the parenthesis or this icon i'm going to add the dollar icon this one i'm going to click elsewhere now you can see that i have and i can select now the dollar and i can put that to be a little bigger i can put a span around it and change the color i could do many things with that this is now another field so this is what i did you can select of course what you want to do so let's go for a font size of 20 something like that and let's go for bold let's go for 700 something like that okay and also maybe i should go not 20 20 pixels let's go for 18 something like that okay after that we have uh another row so we're going for the div okay and here in that div i'm going to put let's see uh this div should be inside the car info so i'm going to add that and put that here okay and here i'm going to put some car detail some car information so i'm going to name that as a car info for the class now since i have i'm not going to duplicate it it's not necessary but this is something that i usually do car info sure is car information row car in for all row okay add the class and this is the whole width of the uh line okay and inside here i'm going to add also a div now this div is going to be duplicated some more times so i'm going to add a class for that which is the car info div okay and let's go here in the div and i'm going to change that to car in for all rename car info row and this is the car in for div car info now i'm using capital letters and smallers uppercase and uh smaller case in some k in some divs but it doesn't matter okay so then we have the car in for div and here i'm going to add an icon okay this icon will be with a class of car info div uh sorry icon now uh since um yeah it's okay i'm going to leave it as car info icon doesn't matter okay after that i'm going for a text and that text will have a class of car info text okay let's add that also and let's see what we're going to do first in the div i'm going to select vertical and center and middle okay and now i'm going to click the icon and i'm going to select first the maybe miles or something now i'm going to start putting here some information about the the car so what you want to see uh uh to know what is that car the miles uh the engine maybe the horsepower or something like that that they will that you want to see first before you click and see more information about the car so let's simply click first the text insert data select the advanced custom field and i'm going first for miles let's go for miles so we have miles okay and i'm going now to select the icon and as you will see it will take the number just number i'm going to triple click it again and i'm going to select here at the end to add the m for the miles okay and then select the icon and change that to a dashboard dashboard something like that okay icon color will be this one and the icon size is going to be 25 something like that 25 okay after that let's go and add some marking beneath the icon so let's go into sizing and spacing and put here margin of 5 okay so also i need here to put some margin for that row advanced sizing spacing and here i'm going to put 10 okay this has also something of a height so it pushes the text a little bit down so let's go now to the car info div and this is what i'm going to duplicate and duplicate again and duplicate four times or five times maybe let's go for four times one two three four five okay four let's go for the can car in for row and i'm going to put that horizontal and i'm going also to middle and then space around maybe something like that okay so the next one will be let's reclick it and see what else do we have insert data advanced custom fields and we have the engine okay the engine is something that i want to see next okay and then i have there here there in here okay i have something for the engine which will be the car icon maybe automobile automobile something like that okay and here i have to put here ss css okay next one let's wait uh save that triple click it insert data and select maybe the horsepower the horse power something like that insert okay and here let's go for i don't know gas i don't know for power what i'm going to make power do we have anything something like that okay very good icon 240 horsepower and then let's go for this one which will be let's see what else do we want to be outside we want to have the transmission maybe transmission so if it's automatically or manual and let's change that to cogs something like that so you can add of course other fields like that you could also have something like the uh fuel that the car has i don't have set any fuels but if i had i could add also something like that let's save that and now i want to add also a button and the buttons will go inside the car in for row no inside the car info this one so i'm going to select that and i'm going to add here the button okay and this button should say more read more maybe read more read more okay and let's give it a little bit of space underneath the car in four row let's go to advanced sizing and spacing and put here 10 margin okay let's click the button once more going for five for the size the bad color should be this or maybe the lighter one and once you have going to go with this okay something like that now i need the transmission because this is too hard let's add the transm the transition so the color will take some time to change let's go to advanced let's go into the effect transition and here i'm going to put 0.4 so 0.4 seconds for that to take place something like that okay now i need to go inside the car info that i have all of those and put that in the middle maybe and this doesn't go in the middle because i don't have i think a height for that div for that car in for div so it will go here so i need to put that also for 400. it's called advanced let's go to sizing and spacing and let's go for this car info to be 400 okay advanced sizing spacing and let's go for height 400 pixels now i think what was it 300 pixels 300 pixels something like that so uh doesn't look too good but i'm going to change a little bit of spacing and maybe change some other things let's go for sizing as no primary and let's go for space around space between space around space around is better and i'm just going to add a little bit of margin and padding inside this div so sizing spacing and let's go for 20 and 20 to the bottom something like that let's see how it looks on the front end and i know that in the front then i cannot see anything because i don't have any word to assign this template so what i'm going to do is go into the cars and let's go to pages let's go into all pages and here i'm going into the car page cars and here i'm going to change the default into the car's archive so this will grab the car's template and of course the caster plate has already the main plate so it will grab also the header and the footer let's refresh that now as you can see i have what i have inside here now this is to close the one to the other so we're going to change that and also let's put something for a background so let's go for this section let's go for the background color and let's select the off-white and then select the div uh the div in the repeater and here i'm going to advanced i'm going for a white background here okay i'm going to select also to have a little bit of margin outside so let's go for 10 for the bottom okay and let's also add some border nose let's let's add some box shadow let's go for black let's go thirty percent zero zero and the blur should be 5 okay something like that let's save changes and see how it looks so maybe the image is way too big and maybe i have to do that a little bit smaller so let's go for advanced and sizing and let's go for 250 here not 300 and let's also go here for 250 sizing and spacing and here 250 250 something like that okay i think it's better now yeah it's better now i'm going to do the filters later on so now that i have created my archive page and you can see how it looks i'm going inside in one of those cars and let's click read more and i don't have anything set as the link of the button so let's go and select data and permalink save and then refresh here and now let's go to read more so i'm going to get how it looks this is the single page template so of course i don't have anything for the single cars and i'm going to start creating my template for the single cars so uh also as i have as i remember i haven't also add inside the cars any information here i have the title i have the featured image but i don't have any information about the car this should be information text information so let's go for lorem ipsum okay lorem ipsum generate let's grab this and let's go and start putting that inside the car so several chevrolet camaro has something let's go for all cars okay suzuki alto let's edit that edit mitsubishi and edit the honda just to add that text update update and last car update okay let's go back to the car so now if i refresh i should see here the text yeah this is the text and this is what i alert me and i thought that i had something was missing and i can see here that this is not looking too great and i'm not sure why let's go and see back to the cars if it looks like that now it looks okay in the front end but for some reason and the back end it's messing up my layout doesn't matter so let's close that for the moment and let's go again into the uh several it and now let's go and close now let's not close that let's go templates again okay and here i'm going to add a new template and i'm going to select cars single okay let's grab the main here and restore this tab a problem with my firefox okay again car single okay select here the main and here for the singular i'm going to select cars okay i think i'm okay with that publish that and let's go and edit the oxygen and you will know that you have set the correct settings once you go here and refresh the page and this will grab the new layout but in order to grab the new layout you have to go first and add a section once you add the section and save that once add a section and save that and go back to your single template a single page and refresh if you see an empty page then you know that it grabbed your uh template so we know that the single template applies to the car so we can start building the template i'm going to start by adding the image first and here you have two choices as well to select the image to be a background of the section so it will cover the page from the one into the other or add the image itself so it will not go from the one end to the other except if you go and select the full width of the section but it depends on the aspect radio if you go as a background of the section it will always cover the whole page but you may lose some information you may lose something off the image in the corners of the image maybe so we're going to do that as an image maybe let's see how it looks let's add the image this is something that you should decide for yourself i'm going to remove the spacing from here and i'm going to select the image data and select the featured image size is large and insert the the best thing when selecting the image is that i have the alternate text here and i can select the data and put that as the title so i will always have something that with attending text inside here i'm going to select also the section i'm going to put that vertical and center so it will go in the center and now i know that i have a problem with my image because this is way too small the image that i have used for the server led is way too small if i go to another image and maybe this one and see the read more i think it will go yeah it's a little bit bigger it's not so small as this one and this is how it looks but you can also just delete the image from here and go into this section select the background then here select data and featured image here size is large insert and i have to go and add also the cover no repeat and here 50 and 50 percent just to know that they will always be in the center and of course i have to go and select the width that i want so i have a select here to be a large size yeah a large size okay because i'm seeing that it uh the image is not so great but it's this is because it's a small image that zooms in so this is basically how you want that to be displayed so if i go to charging spanish i let the height to be around 500 pixels it will go something like that let's go for 600 pixels something like that but you miss the corner if you go and put it 800 pixels then you may have the whole image sometimes this is your personal thing that you have to decide what you want to do if i go here and refresh you will see that it will go full page and now you will have something like that so i'm going to not do that i'm going to remove this section all over again and put that as an image because i like it more even though i know that i don't have great images so let's go for image again and here i'm going to remove the padding of the section okay select the image data featured image and large always large here and alternate text to be title insert okay and in the section i'm going for vertical and center okay save that and let's continue with the next section which will be the title okay the title is uh let's add the section and here i'm going to add a heading this heading will be an h1 because it's the title triple click it insert data and select the title and insert now i'm going to remove also here uh the margins i'm going to select the title and i'm going to give it a little bit of styling so let's go for background background color let's go for this color because this is the color that i have let's go for the typography and the color of the font is white okay font size i'm going to leave it as it is maybe i'm going to give it later spacing 2 something like that okay let's go for sizing and spacing let's put here uh 50 for the margin so it will go into the left let's go 200 so it will go like here i don't want that in the middle but i do want that left let's go 150 150 i think it's better and i do want that over the image so let's go for something like 25 pixels something like that okay next we'll go and give that some padding so let's go in 10 from the top 10 for the bottom and 40 and 40. yeah something like that okay then we're going for borders borders radius of 20 and for the color this is a color white of the borders four maybe four and solid so we have something like that so it's a nice little thing that i can see and now that it blends in with the background i think it's a little bit better and now i can go and give it a little bit of more padding so let's go again in the laser marking a negative margin of maybe 30 something like that now i have to go to layout and put the set index to be one so it will always on top of the image save that and let's continue with the next section next section will be the the information that you want to see quickly of the uh car uh the information that we put uh here also in the card archive page and maybe some more information like the price so let's start by putting here into the section first a div and this is for the row so this is let's go for car in for all info row now remember that if you rename all of those it will help you also for the mobile view and let's go to the next one which is going to add another div inside here and this div will be the uh name car info div car info div okay now this should also have a class and since i have already used the car in for diving the car archived and plate i'm going to use a single car single car so i know it's the single template car info dev info info div something like that okay i'm going to copy that and add the class and inside here i'm going to add an icon okay and that icon has the class of single car info icon at the class after that i'm going to add a text a text which will be the single car info value because it will grab the value of the acf field and then i have also another text and here i'm going to select the same thing with text here text okay add that class now i have something like that here i have to go and put that in vertical and center and we're going to start again with the field first with the value insert data and select something from here so i have insert field and let's go for the type maybe carvan no i'm not going to put the car let's go for miles insert of course you have to be you have to know what you want and not make your mind right here so this is the car mile and i want to put here an m for the miles and here in the icon i'm going to use the dashboard again and i'm going to select the color to be this color okay and of course the icon is way too big let's go okay the phone hasn't stopped ringing okay 25 let's go for okay something like 40 maybe 40 is good and here i'm going to put here miles so this is the miles i'm going to duplicate that duplicate again and maybe five times something like that okay so now that i have that let's go for the car info row and i'm going for horizontal and then space around no middle first and then space uh section first okay middle and center and then i'm going for this and this is not working because i don't have the width of the div so i'm going for 100 and now that if i select here the uh vertical horizontal for the car in for row uh sorry i shouldn't put that uh this here isn't correct so the row should be the width of 100 percent okay and now i can select the space around something like that of course i'm not going to do that with the 100 but i i just want to show how it will be so i don't like how it is right now so just remove that and let's go and select for the car info div some background so i'm going here background and i'm going to select the off-white background okay after that i'm going for sizing and spacing and i'm going to put here the width let's go pixels and put here 200 pixels width no a little too much let's go for one now 50. maybe 150 okay also margin i need the margin of 10 and i will go also for borders radius of 20 something like that okay and also i need some padding inside so let's go for 10 everywhere okay i think it's okay maybe 20. okay so after that we have the next thing which will be insert data advanced custom field we use the miles let's go for the engine engine and here is the engine engine triple click it and select here this essay and here instead of this we have an automobile which is this one okay then we have the horsepower maybe insert let's see what we have horsepower yeah insert so here is hp hp so you have to triple click it hp and then select this and for horsepower i don't remember what i have selected for the icon i think power yeah power something like that of course it's not the ideal icon and then we have [Music] let's see insert advanced custom field we have the transmission so this is the cogs okay transmission and let's see the last one which will be insert data advanced cancel field and maybe the doors maybe the color the price i will put it somewhere else because i changed my mind but if you want you can put that here [Music] no i'm not going to put anything else i'm going to leave the cd so i'm going to delete this one this div so let's go here and delete that so we have this four divs and obviously we have to uh give it a little bit more margin so sizing spacing and put here 20 something like that okay now i have to put here some space so let's go for sizing spacing and put here 10 not here sorry for the bottom 10 okay and here also advanced sizing and spacing and put 10. also this should be a little bit bigger so let's go for typography and let's go for font size 18 and maybe bold 700 so it will be something like that i don't really like the space that i have ten maybe five and maybe give that also five okay and now in case you're wondering why i don't have the equal spaces because this is has a line height also so i have to go into the font layout typography and here for the light height i should go and put here one so it will go and remove all the space around the text let's save that and i'm going to put the price next to the title and i'm going to put it with the same layout so i'm going here and duplicate that the heading duplicate that go into the section and i'm going to put that to be horizontal and here i have the uh margin so for that one i'm going to select to have a margin of 50 and not 150 50 pixels and triple click it and select here the price instead of the name and this is the price okay i'm going to insert that the dollar sign doesn't matter and let's select here and now i have the price right here as you can see i'm going to save that and see how it looks in the front end okay this is what we have created so far and now we're going to start with the most difficult part so i'm going to remove a little bit of size here and this space around here i think those are equal pretty close and let's add a section and here i'm going to put this section with the background off of white okay i'm going to remove a little bit of spacing and here i'm going for the tabs okay tabs so i have tab one type two and tab three let's go and select this one i'm going for horizontal and in the middle not in the middle in the center maybe uh sorry vertical not horizontal and in the center so i have the tabs here and i want it vertical because i want the content of the tab to be here if i put the horizontal i will have the content the tabs the switches here and then i have next to that the content of the tabs and i don't want that so if you haven't used the tabs before you may find it a little bit difficult to start but i will give you some direction direction so we have the tabs which is the tabs selectors and here we have the tabs content the first selector is for the font the front the first content so once you click this this tab you will see whatever is inside here and this is a text so once you click this tab you will see the text this text is for the title so once you choose and select this text you can change the title the first title that we're going to change is the description the second title will be the maybe the content no will be the extra car extras so i'm going for car extras and the third will be the gallery gallery okay now that i have this i'm going to select the tabs and once you click here the tabs you will see that you have no class so i'm going to select this tab which is uh the the tab the separate tab and now i have two classes one for the tab and one for the tab active so you know that this is for all the tabs and the other one is once you click somewhere and becomes active so i'm going for background color of white so it will have something like that i'm going for resizing spacing and i'm going to put a padding of 5 so will not be too big and 5 here maybe 10 10 and 10. i'm going for 20 and 20 here and then i'm going for margin of 10 and 10. so it will be something like that i'm going also to put a border radius of 10 so it will go and corner a little bit off the corners and rounder corners and then i'm going for the active and i'm going to have it the color of off-white and maybe change it a little bit something like that so once you click somewhere it will go a little bit more gray now i cannot see that at this moment let's go for active and let's go for background color and select something else something like that okay so now if i click somewhere it will go and gray the one that is selected and you can see the content that is changing changing and now you can start playing with the content i'm also going to give it a little bit of marking so i have some space underneath so let's go to the tabs this is for the whole row and let's go for advanced let's go for sizing and spacing and in margin i'm going to go in 20 pixels okay now let's start from the easy one the easiest one which is the gallery so i'm going for the tab content three and i'm going to delete that let's select delete that and now i'm going to add here a gallery okay and inside the gallery i will select acf so the gallery source is acf and now it requires the acf field which is for me the car gallery where is it here this guard gallery car gallery copy that and paste that in my template here car gallery link image yes add lightbox yes thumbnail resolution medium and i think i'm okay and you can of course play with the layout and everything else now you can see that since i have four images it does five images it does four and one here so in the layout i'm going to add mastery mansory so i'm going to choose something like that but you can play with the images in case it you don't have a good quality go and make that large instead of medium so you will have a little bit better quality for the thumbnails so let's save that and see how it looks in the front end okay so we have here the cars gallery and extras you can see and this is how it's going to look now i don't have white spaces around here so something is not done correctly here let's refresh also this one and see how what is doing wrong and also i think that i don't have also the background for the section so i'm going to do that again if it doesn't load for my template let's see okay it's taking some time now some some days ago i did the uh a tutorial about xeon builder and i was really happy to see that it was way faster in the back end than oxygen and hopefully uh they will also in oxygen do the same and give us something better so this is working fine and let's refresh that so now it's working now in many cases you may run into problems with the gallery uh with not the gallery with tabs i have found myself having a little bit of trouble with the gallery with the tabs again with a gallery okay let's continue with the description so let's open the structure and here that we have the text i'm going to remove that and i'm going to start with the div of the description so here i'm going to add a div and i did that wrong because i didn't uh delete the tab content i'm going to delete the tab title okay text here this is the one so i'm going to delete that and i'm going to add here a div this div is for the row and this is for the information so this is the card description and this is the card description row rename car disk row okay save that okay i'm going to set that to be 100 of width and now i'm going to select here and add to divs which will be uh the columns i'm not going to add the columns inside here because i have found that in many cases have problems so i'm going to add two divs which basically is the same thing as columns now i have selected two divs i think let's see no only one div so let's duplicate that okay and select here the car row and select that to be vertical horizontal i want and the middle okay and this is the rename car description column left okay and this is the card description column right right okay now this will be 50 and this will be 50 also okay i'm going back to the tab content and i'm going to give it a little bit of background and i'm going for white background colors so it will separate from the background from the section background let's save that and let's go here in the car column left and here i'm going to add another div and this deal will have the class of the single car desk for description desk div add that class inside here i'm going to add an icon which will have the class the same with icon okay then i'm going to add a text which will have the class description text at the class and then i'm going to also give inside here another text and here is the value okay now here back to the div which will be renamed with that car single card desk div okay i will put that in horizontal position middle and center and let's start with the icon first i'm going to have that to be solid the background color should be like that and the color should be like this so it will be something different from this icon and not be the same we're going for space around 20 and for the size icon of 25 maybe yeah something like that here is the title and here is the value so let's start from the value because i don't know at this point what i'm going to put and let's advance custom field and i have the model and the model hopefully is going to take it from the title so i don't want the model here i have the types and i want the type here so let's go for type type and then semicolon and then we have the pickup so let's add some margin to the icon sizing spacing and add the margin of 10 and then the same for the type advanced sizing and spacing and not the margin of 10. so we have the type which is pickup i'm going to duplicate that and now that i have duplicate let's go to advanced sizing spacing and put a margin of 10 to the bottom so it will have some space and let's add the next one triple click insert data and let's go to advanced pack pic advanced acf okay model type uh we have the type license here okay so we need the license here let's go and insert that and let's go for here and let's change the icon to a calendar okay the year should also have a semicolon at the end something like that and this icon should be a type i don't know what to put from the type okay let's see what icons do we have something like that okay also i want that to be a little bit um bold yeah i'm not going to change the size i'm going to just put that as bold let's go back to the div let's duplicate that and duplicate again and duplicate again and let's go here and select insert data and here i'm going for advanced custom field the next one which will be here we have here miles we have miles in the top we have the engine we have the hp and transmission we need the color then color so let's triple click that and select color and here i'm going to select paint because we don't have anything for color okay next we have that insert data and here i'm going to select the next one which is doors okay insert data and this is the doors doors okay click it doors i don't have anything for doors of course you should add your own custom icons and i will put that for doors okay let's see what else do we have here insert data advanced custom field we have doors price gallery car extras ah okay we're finished and then we have the car extras so let's close that and let's remove that and i'm going to grab that div and i'm going to put that in this column so let's close this to see how it looks to see if i have done that correctly so we're going to close this left first let's close that okay now i can see that i have the column left i need the column right and this should be under the column right so i need to go and put that here like that now it's okay and if i click here i haven't set anything but i can set vertical and left okay this is how it looks so let's go for vertical and not here sorry here vertical and left okay and maybe top after that we need to also move the color here underneath that and we have something like that okay let's save that and see how it looks in the front end okay and we have the description card extras and gallery okay the description after that we're going to have the text so let's go back to here and here let's close the this row and here inside the tab content the first type content i'm going also to add another div underneath and this div will have inside a text and this is the content so insert data and select content and click elsewhere now i'm going to select of course that div and i'm going to change that to rename and this is the description car description content content so this div is the for the can the car content okay and let's close this and i'm going to give that a little bit of margin sizing spacing and marking 20. so you can see now that if you're organized you can build what you want it's not too difficult let's go and save that and see how it looks in the front end okay and this is how it looks so i need to go and put some route corners around here because i don't want those corners to be that hard and let's go here in the oxygen and let's go to the tabs this is the tab content and here let's go to advanced let's go to borders and get that borders radius of 20. okay let's save that and now the last thing is the car extras which is the most difficult one so let's click that and this is the car extras let's go to the middle title content this one so you can also rename that to what you want and you can put here the tab card extras or characters tab or something and here we have the text which i'm going of course to delete delete and now here i'm going to put the car extras that i have selected for the uh here for here the car extras which is the check box or those so as i've said when i was creating those fields you have two options two choices to make the one is create one field and in that field create a checkbox with every options inside there and the other is create separately every option you have if you have too many options this is a little bit difficult to do you so you have to spend more time to create all the fields and this is easier but once you go here you will see that if you create uh separate fields you can customize it separately give it separately icons give it uh the style that you want and if you add one field with every uh option inside there as a checkbox you will find yourself that you need to add custom uh code to edit let's start by adding a text and triple click it and i'm going to first add the first one the car extras the single field with all the options we're going to start from that so triple click it insert data and i'm going to select here the car extras this is the one that i want so once i click elsewhere you will see that i have all the cal extras of the car but as you can see it it is all the words with no spaces with nothing so you cannot have something like that in your page let's see how it looks in the front end and once you go into the car extras you will see uh this has also only abs but let's go to another car let's go for this one read more and let's go back here characters and you can see that this is the car extras this is something that you cannot stay without okay it's not something that you can show to your clients and we have to do something else at this moment oxygen cannot handle the checklist cannot handle the selection cannot handle any field that has options inside there so you have to do something else let's go and remove that text and let's go to here let's go to a c f acf checkbox check box checkbox value and here i'm going inside here let's wait okay let's see if it's the correct one okay it's the correct one so we have display values display values in a list we want values because the values is the one that you have said here so if you see this layout this is the label and this is the value and if you set only one word this is the value so we want the values and we want those to be in the list and this is the php code that we're going to use so display values in the list and it says right here let's copy that let's go inside here and we're going to add the code block the code block and let's go for php i'm going to delete that and this is the php we're going to use let's apply code and of course we're not going to see anything because this uh don't uh is not something that you can use because this is the code that we copied we have to change some things now uh i need to tell you some things about the code so you can adjust it to your website so let's see what we have here the uh field name for me is the car extra so i'm going to copy that copy that and i'm going to put that and after the get filled so get filled and this is the field car extras this is a variable that we're creating at this moment and this is what we want to call the car extras so i'm going for extras so uh this is the dollar sound the dollars a dollar and extras so it's a variable and it equals with the get filled and what it takes for that and here it says if uh colors and this will be named to extras so it says basically that it has values inside do the following and this is a php for each so it's a loop i think it does it as a cycle loop and here is extras again the same word that you put sorry extras the same word that you put here extras you're going to put here as extra here with not uh this is singular as you can see it's not colors it's color now remember to leave here the uh the dollar as you can see it's already working but let's change that to extra and echo here extra and that was working because we had the color here and we had here also the color so it basically removed or not moved but renamed the extra as color and then give gave us the color so once you're here you can apply the code and this is what you're going to get if you are correctly okay and let's save that and see how it looks in the front end and let's go to car excess and this is how you can solve the list now this is a little bit better it's not ideal and yet but it's a little bit better but if you want to style it you have to go and make it a style customize so what we're going to do after that here we're going to enter and we're going to style close that and then style so everything is between here it's for this style let's start from the list i don't like the bullets so i have to remove the bullets to remove the bullets i have first to add something for the list so let's go here which is the ul the list and let's add the class equals to extras okay this is my class for the list so i'm going to style i'm going to press enter i'm going to type dot extras give a space then put the li for the list and then here type list style semicolon and none because i don't want any style and then question my apply code and this should be remove the bullets and as you can see the bullets have been removed okay now i need something uh some i don't need anything else for that list save changes and now if i go here i will see that the bullets have gone car extras and as you can see i don't have any bullets so now i need to put something else here so i need to put maybe an icon and we're going for here for the lee and before the lee this li is each and every field every field here is a abs easily esp is a li this is a list icon the list item sorry this is the lee so here we're going to add an icon so under the link after the lean not under after delete i'm going to add an icon and i'm going to put also a class at this moment class and then close the i tag and then go here before the lee and close the eye tag so close the icon okay so now i need to put an icon here let's go for the favicon icons from awesome icons okay let's see what we're going to do let's see a checklist check checklist or something so you have to remember of course that everything will have the same icon you cannot change the icons and let's see what is that so this is a far f8 check square okay let's copy that but i'm not going to copy the file at this point maybe i'm going to so this is as you can see the i class so it copied the uh the whole html so i'm going to paste that here so i'm going to copy the class and i'm going back here and here and i'm going to here put the uh class here okay far f a check square okay apply code and let's see didn't do anything let's remove the farm so let's just have the fa check and let's see apply code save changings and let's see if it's working from the front end car extras and i'm not seeing anything now i know that you have to add also the library for the favicon icons and this is something that's not working at this moment and i have to go into the plugins and this is why i have the font awesome plugin and i have to activate that and let's go and refresh but i'm not i don't think that it's going to work at this moment let's go for car extras it's not working so let's go and see what i have done wrong with the code uh let's add another fa here fa far far check apply code okay the class doesn't have an equal sign okay equals class equals to phi let's apply this code okay and as i can see now i have the icons let's see that in the front end i have to say first okay refresh i was just looking for the inspection if it has the icons but doesn't show and here as you can see i have now the icons as you can see here the icons don't have any space so i have to put also a space here for the icons so let's go here and let's go for the extras extras extras and li and then i okay and put here a margin right of 5 pixels something like that let's apply the code and see if it's going to work save that and see it in the front end usually if it doesn't i i'm going also to inspect but let's see first the code if i had something wrong here okay i have put the close right here which is something that i shouldn't have because i cannot separate it with the text and the clause should be here apply code and now i have the separate icon and for some reason i put it under the echo i don't know why and now the pixels is working okay uh the next thing that i'm going to do apply the code and refresh here now say first say fed and then refresh it doesn't look too good i want that to be in two different uh columns so the problem here is that if you use the code you cannot use that two times because you will have the same values you cannot use an offset because you don't know how many values you will have here maybe you have 10 values as it here 2 4 6 8 10 yeah it was exactly right 10 but maybe you will have 4 values so you don't want you don't know where you're going to separate that so you we're going to use a column count css so let's go again here so you need to do some css and some styling if you're going to use that to root so here we are first we're going to add another custom class no we don't need one we have the extras okay so here we are extras and here let's go and open close those and let's go for column count two okay and uh let's apply that and we can now have it like that now of course uh this doesn't look too good so let's save that and see how it looks in the front end but they are one too close to the other and now we can go and make a moz moz column count two and also a webkit count two and i need some gap probably let's go for 40 pixels but i think this doesn't go wider because i don't have too much width in my div so let's change that immediately and let's go for the code black and let's go for the width uh sizing and spacing and let's go for the width of i don't know 500 pixels something like that okay and put that in the middle center so let's go and select 500 pixel or 6 or 800 pixels to see if it changes 800 pixels so it changes and we're good okay it's looking better now this is how it looks now so uh let's refresh the page car extras and this is how it looks so i think i didn't use i didn't want it it didn't need to use the mouse or the web kit i think it wasn't necessary let's go for the php and see if i'm going to remove those if it's going to make any difference let's apply code yeah i think it's for the maybe it's for the mobile phones and you can search that to see the modes in the webkit and let's save that and this is how it looks if you go with the one root so it doesn't give you two major things to do in the layout you cannot change anything and you have to do custom code to anything to style it uh what you want and of course you cannot change the icons to what you want the the next one would be different because you can do more things but it will require much more work to be done so this will take you 5-10 minutes and you will add 15 or 20 or how many things that you have the next one will be adding one by one so after that i'm going to add the div and this div will have the width of 802. 800 pixels too and here this div uh will have let's go and add a div and this div will have an icon so let's add here an icon and let's start putting also classes for everything so let's go here and let's go here and here this div is going to be the single extras div add glass the icon should be the single extras icon okay and then we have a text which will be this single extras text something like that okay this div we're going for horizontal and in the middle and now you can go and change whatever you want from here let's go for the color of blue and then let's triple click it here and select insert data and select the advanced custom field and now we're going for the abs which is the first i'm going to click elsewhere and now that i have the abs here uh i think i have done it but maybe this car doesn't have abs i am not sure if it has abs and hopefully i have put that for abs in the serverless camera let's go and check several cameo edit and let's see if i have put abs here no i haven't put abs i have esp so i'm going to put everything here in that so let's go back to this one this was template okay and let's save that and refresh and it's taking some time i'm not going to pause the video hopefully you are working or watching all the video and uh the double speed because i'm speaking slow and making mistakes okay now let's go and as you can see it has the abs sign let's go for car extras and this is the abs that i have put okay let's select the structure and now i can select the icon i can put here some margin because it needs some let's go sizing spacing and put here some five pixels margin and after that the icon should go probably uh for an icon size of 30 something like that and maybe this should be also a checklist because i want to put the checklist but now i have a blue icon after that i'm going to duplicate the div and duplicate four times three times because i have four custom fields and here i'm going to put the second one which is insert data advanced custom fields and it's the esp then triple click here insert data advanced custom fields bluetooth and triple click insert data advanced classical field and turbo now we haven't done we haven't finished yet and of course we have to use another icon for everything but also we have to put something different here because we don't want to show this if the car doesn't have those so uh the text will not be visible if the car doesn't have a bluetooth but the icon will be so if we go back to this and go into the cars and go into the suzuki which has only one i think let's go to car extras and you will see that i have the abs but i also have three more icons so i want those to be not displayed when i don't have anything inside here so i'm going to the div for the abs and here i'm going to put uh the zone height element so the condition set condition adverse condition choose condition i'm going to select here dynamic data i'm going to select which one is it it's the abs and then i'm going to select uh it's not blank so whenever it's going blank it's going to show it let's close that let's go to the next one and this is something that you have to do for every single div that you add and this is the most difficult not the most difficult but it's different it's a little bit difficult so let's go to the next one which will be again a custom post type dynamic data esp and then esp is not blank okay then again here condition set condition audio first condition dynamic data advanced bluetooth is not blank and the same for turbo turbo is not blank okay now i can save and hopefully uh when i refresh in the characters as you can see i can only see the abs so if i go to another car that it will have more extras i will see more extras and those that are not available for that it will not be shown so as you can see i can only see three out of four now again in here i don't have two columns and i want to do two columns and now that we have the grid it's easier so we can select the uh this div this div and we can select the grid with two columns and let's save that and before the grid we do need custom code also we were using custom code but now we can use the grid and as you can see it splits the icons it splits the values in two columns and will go two and one if it has more it will go more and it's pretty good to see and of course you can change if you want the gaps and here we have the gap and here we have the gap for the row and i think i need to put 10 here or something maybe a little bit less something like 5 something like that and this is how you create this second method so that was all for that let's go and edit that for the mobile version and let's see what we are going to do here these are all good description is okay i think maybe the icons could go a little bit less but i'm not going to do that here i'm going to do that here so here i have to go in here and put 22 something like that and here 22 also so it will not be too big font size 22 something like that maybe remove a little bit of the uh marking here so let's go for sizing and spacing and marking here let's go for 50. okay it's better here i'm going for a font size of 18 and let's go for 16 here let's go for 15 and the icon can be uh 30 something like that and here also the icons could be 30 no a little bit less 20 something like that okay these are good card extras here i can go with a little bit better position here so let's go here and advanced and here sizing and spacing here before the width let's go for 80 okay and also the same would go for this div so this div and this is how you why you should rename everything because you don't know what follows this so we have the code block and this div should go for the width of eighty percent something like that okay let's save that and see the next one gallery is okay and let's see the next one is this so here i have to go here and put here 18 this should be also 18 okay this sizing spacing and for marking i'm going for 10 and i'm going to leave that as this but i'm going to remove inside here the padding so let's go for 20 and 20 for the padding and here also instead of 40 so something like that then we have this one which has a custom width i think let's go and see how it's going to work so this car in for row let's go for no we don't have a width here we have in this div we have some width so let's go for 150 and let's go and put little bit less 120 100 so let's go for 95 something like that then advanced sizing spacing and in margin i'm going to put five and five maybe something like that then i'm going here and i'm going to put 15 for the miles i'm going to put 15 for the icon i'm going to leave as this then i'm going here also advanced sizing spacing and for padding i'm going for 10 to all so i think it's good okay now and this description is okay this is okay maybe i need to go for 25 in icons no 20 maybe a little less 15 something like that maybe the text could be a little bit smaller but i'm not going to this should go 100 now advanced sizing and spacing with 100 percent okay this is okay gallery and we're okay so let's save that let's close that and now we're going to create our filters and then we're going back to the archive template and create our filters and then edit that for the mobile so let's go to plugins let's go to install plugins and we're going to activate the search and filter pro okay and then let's go to the search and filter let's go to add the new search form and this is the archive archive cars archive car archive car archive something like that okay so we are searching inside the cars the result is 10 the auto submit form yes send enable auto account and then we're going straight from here so the search form is this search now if you haven't seen the previous video that i have created for specifically this plugin shelter filter go ahead and see how i have added that so you can see what i'm doing and this is going to be a little bit faster so let's go for taxonomy add the taxonomy and this is makers okay drop down yeah add heading select maker select no makers makers maker and here is the select maker select maker maker i'm going to copy that i'm going to paste that here this label hide and here i here right just hide okay and after that i'm going to close that not to take too much space and let's add post meta we're going to start from the color maybe color yeah color so we're going for uh do not be confused with that that has an underline here we're going straight for the car color which is around here car color so let's go to uh choices drop down and drop down yeah and select here again the color color because i made a mistake previously car color add heading color okay this is select color select color okay this is the same with that and hide empty and this is an acf filled get options automatically so close that and add one or two more so let's go for a model and this model should go up so let's go for choice and let's go for drop down let's go and select select model model okay the same will go for this one and this word is going for the heading okay this is the car model car model this is an acf field okay and let's close that and put that before the car color underneath the maker and lastly i'm going to add another for the price so this is a range slider plain text the heading price price okay screen reader is price this is the car price okay use the same for the end i don't want them calls i want to detect those and this step is 1 000 dollars uh so i'm going to copy the code and i'm going to publish that but okay and i was uh i shouldn't copy the code because i need to do two more things yet so we have the custom here and this is the template so let's go for the cars page cars so we have the used cars this is the result page okay let's paste that here and everything else is okay and here we have the ix counter so let's go to edit the template oxygen templates i can close that this can be go here i'm going to close this this and this and this is the car archive let's edit that with oxygen let's close that okay and i'm waiting to get the id of the repeater and let's go in structure section columns main car repeater and this is the repeater field so this is the id okay and then let's go here and change that okay everything else is okay we don't want to change anything here and select the default order should be the price maybe so meta value car price car price car price okay writing okay everything else is fine tags post meta advanced okay so grab the code copy update that and let's go here into the structure let's go to the fiddler div let's add a short code okay in the short code i'm going to paste the code i'm going to hit save and now what i'm going to do is open the search and filter search and filter pro this one and let's go to the website let's go to the documentation documentation custom and we're going to take that okay let's go here and here and inside the div here i have the repeater before the div inside the repeater i can go before the repeater so main card div add the shortcode shortcode okay and i will bring the repeater down so i have the shortcode on top and here i'm going to paste that now i need to grab the id of the search form and go into the short code and paste it here so save changes and let's see if it's working let's go to cars let's refresh the page okay i should probably put here a background of white into the shortcode of this shortcode so advanced background and select that to be white okay save changings and let's see refresh okay and if i select a maker like sir roulette it will refresh and show me on this d7 roulette let's go and select something else so let's go for model camaro this is the same as our led okay civic so i will get the honda this is the honda okay obviously it's look it's looking like a honda let's go for red and as you can see it's working great so the last thing i will do obviously you have to make the corners you have to give it a little bit of less padding that has here or less margin it's a custom css now i'm not going to change that this video and also you could also go and remove the space from here and put that in the whole width so i can go for the filter short code here advanced sizing spacing and maybe put that 100 of the width but remember that once this column will go up it will uh not good not look so good so let's refresh now and see how it looks so it's a little bit better now as you can see the price is still going outside so it need that to be fixed and let's see what we're going to do for the other screens so here we have this and it's not looking bad at this moment and here we have something like that and now i'm going to leave it as 100 but i'm going to uh change this no i'm not going to change this of course this has a little bit of width not width spacing inside here because it's the shortcode but you cannot see the shortcode in the front then and let's go to the next screen which is less than six seven okay six uh what was it seven six eight and this is how uh this is something that we're going to change so here in the div that we have the two columns we're going to put that vertical so the columns were going one on top and the other next to that and now i'm going to change the width for the car image so it's going to go 100 100 and here i'm going to change also the width for the info and let's go 100 2. so this is better let's save that and let's also see this and this should go and be a little bit smaller maybe 15 and this is okay and maybe less margin inside here maybe the margin here is let's go for five something like that and five here yeah i think this is okay let's save that and i think it's okay now i would also go and maybe put that not to be displayed under the screen of seven eight uh this screen seven six eight here i can even here even in the 992 i would hide that filter and i would add an element another element for the accordion what's the name accordion and i would create also the same sort code inside here and in the accordion i would just type filters and so for the mobile he would the person that would come from the mobile he would only see a line that says filter an arrow to click and inside here he would see all the filters and this should not take too much space for the mobile i think it's a good idea to do that so let's do that in in case you don't know how to i'm going to copy that and i'm going to uh click this short code and i'm going first to copy that before i'm doing any changes so let's duplicate that now that i have that duplicate i'm going to click here and i'm going to uh go into advanced i'm going to go into layout and i'm going to click here hidden divisibility so it's hidden in short code and then let's go for this one that will be inside the accordion and inside the first one so instead of the this text as you can see i'm going to remove the text i'm not i'm going to do that now just first add here and then remove the text so i'm going to remove the text and now i can go and remove all of those other tabs so this is the row the next row let's remove that and this is the next row remove that and then we have the content i'm going to remove the content also i'm going to remove also this content and now i have the i condition row this row with the icon which i'm going to remove of course and i have here something that i can type filters filters on k and now i have this shortcode and the accordion content which i'm going to go for one hundred percent okay and this is inside the accordion which i'm going also to go for 100 percent okay so now i have the filters as you can see here and once someone comes from a mobile he will not see anything inside here he will just hit the filters and he can click the icon to open the filters and this will not be too much of space inside the mobile so that was all that i wanted to show you guys this was the video i didn't i'm not going to edit out any mistakes that i have made because i want you to see that i do miss make mistakes whenever i build something i'm not focused every time i'm making mistakes uh when i'm tired and the more i work the more mistakes i do of course it's natural you're going to make mistakes and you're going to search some things and you're going to find the uh results the most common mistakes that is made by oxygen users when they start is the divs that they don't remember that the width of the divs is not automatically assigned to the full width of the row and you have to assign that and the divs usually take the space of the elements so if you want to go across the whole row you have to go 100 percent and this is something that confused me and when i started also so this is guys the tutorial and hopefully you enjoyed please subscribe my channel give me a thumbs up if you like the video and i will see you all in the next one bye guys

Channel: Stratos Tutorials

Views: 977

Keywords: oxygen vuilder, oxygen builder tutorial, oxygen and acf, advanced custom fields tutorial, how to build a used cars website, used cars website, car dealership website, how to build a car dealership website, how to use advanced custom fileds, oxygen and advanced custom fields, oxygen and custom post types, oxygen tutorial video, how to use oxygen

Id: EKLtNjjUjJY

Length: 147min 32sec (8852 seconds)

Published: Thu Dec 31 2020