Create a Multi Vendor ECommerce Marketplace Website - Get Some Learn Now

  I will show you how you can create a multi-vendor marketplace website where other people can sign up and sell their stuff. Let me show the end result of what we will offer in this tutorial. This is the website we are going to make, we're going to create a website, that is the solution to supply and demand. And in this case, it is about cars. So people want to buy cars, and people want to sell cars and our website is the solution for both parties. And we want to make this a smooth experience for the buyer and the seller. And that's why we created this website. In this case, it is about cars. But it can be about jewelry, it can be about Pokemon cards, it can be about 3d printing objects. 

So with what you're going to learn in this tutorial, you can become the leader in your area when it comes to supply and demand to the Internet. In order to create these websites, we're going to make use of WordPress, the elemental page builder, and Crocoblock. So as I said, I'm talking about cars. And what you see over here is that people that want to buy a car can make a selection. So maybe they want to buy boats, or they want to buy a car. And if they want to, they can make a selection over here. Or to Brent, maybe they're a big fan of Tesla, they can select a slot over here. Or they're like, I just want to buy a car. And I wanted to be a new car so they can drag this to I want it to be at least from 2010. And the price range doesn't matter. Just give me some results. 

So I click over here. And then based on all these settings, we see all the results over here. So you see I said at least from 2010. So if you take a look at the year, you will see no cars that are from earlier than 10. But I don't have too much money. So I click on sort I want to go for the cheapest car, what am I wishes, then you get the Ford Fiesta from 2012. And it's just $1,000. And then you see 1315. You can also say I'll be descending I want to go for the most expensive one. I own created Honda the specific I don't know if it's even a car. I'm not that into cars, except for Carfield. Okay, that's a really bad joke. But we can make selections with all these filters over here. And the great thing is that you see how many there are of everything. So I'm a fan of convertibles.

 So I don't need a new car. Just I say everything is okay. And when I release it. So when I change something over here, you see that this is updated immediately. So I want to go for a convertible. Alright, right now I've chosen 30 cars on my website. If you have 1000 cars, then this will make sense and they see all the convertibles this time you only see five. And I'm like yeah, but I want to go for a yellow convertible. And if the website is really big, it can be hard to find. So I go to the color, and I go for yellow. And I see there's only one. If I select that, I see it over here. So you can make sure that the visitor can narrow down what they're searching for. 

And then if they say you know, it needs to be a yellow car, but not a convertible, just the yellow card has only one yellow car is okay. So if I bring the color back to any color, I see if I want to have an automatic Guard are 24 options. Out to go for an electric car, there are three options. So that's how you can filter things. So let's go back to the homepage. You can also filter things based on images like these are SVG files. So maybe people want to go for a motorcycle. So I click over here. And then they see all motorcycles. And you see we go to the same page. If I go back, I also can say I want to see all the cars from Mercedes. And there are also Mercedes boats, I did notice that I see everything from Mercedes. Okay, what else on the homepage, we see our newest.

 So maybe there's a new F and you're like, Whoa, this is such a good deal, I immediately want to take action. Well, if you see a query like this my car, for instance, and you click on it, you see a page that is solely about this car, and we set it up once. And now all the information will be displayed over here. So if I go to a different car, this one, for instance, you see the same layouts, but different information. And there's also a different seller, as you see in the image. So that's what we can create. Well, if I go back to the Tesla Model, three performance, you see the title, the price, amount of kilometers he already has, where you can get it. And here you see some images. And on the front end, it looks beautiful. And it is really easy to upload all this information.

 So when people register and they upload all their information, it will be displayed in a beautiful way. It's also mobile responsive. So does it have cruise control? Oh yes, it has climate control. Interesting. I want to buy this car. So I click on send a message and then automatically the message goes to the author. So I can fill in my name, phone number and say hey, I'm interested. And then the author can reach out to this person and say, Okay, this price, let's arrange something. So that's what You can do. Also in the header, you can say, I want to select cars, auto transport. If you see something you like you can click on it and then you can make arrangements. But what if I want to sell my own car? Okay, well, as soon as I go to an incognito window. 

So now, I'm a totally new user. If I click on create an ad, I will be redirected to the register page. So I say my name is just sing, believer, my email address, just sing lieber@gmail.com I've password and I register. Okay, now when I click over here, I go to another place. Look at this, I go to my own accounts. How great is that? I can go to my user settings. Upload an image. I upload an image. And I say my name is just sing Lieber. I like singing. Okay, I submitted. I can change the button text to update profile. Okay, I want to create a new ad. So I click over here. Let me fill in all this information. So Tesla Model y. And I search for a thumbnail on my computer so that we will be this image. I can get a few images for the gallery. All through the front end. 

People don't have to see the backend of WordPress. I can say where I'm from. I'm from Alabama, Sweet Home Alabama. I'm having a car. It's a Tesla selected over here. model. It doesn't matter. I'll leave it as it is. It's not mandatory. It's from 2019. And what is it? What is it? I don't know. SUV I have no idea. It just drove one mile. I'm not happy with it cannot imagine it but some people don't like it. It's electric. This okay, it's automatic. It's four wheel drive. It has five doors and the car is blue. The price is let's say 80 9000s. This car will blow your socks off. That's right English. Is power steering a little interior it says it has a sunroof electric windows. This everything has everything except for stupid headlight washers. Why would you have that? I don't, I hope I don't offend anyone. I add that. And it says this form successfully submitted check the ads page.

 So now if I go to the ads, this is life on car dealer.cb example that's come. My car is edit. So now when people go to the website, and they search for or at first, if they go to the newest car, they see it over here. If they search for car, and the needs to be a Tesla, and they click on Search, they will see it over here. Now if I click over here, look how beautifully everything is displayed. It does not matter why the price the amount of kilometres, where it's from a few images really nice. And then all the information which I just filled in the description, the basic and advanced options, all displayed exactly how I wanted to be displayed. So now if I click on send a message, I will send the message to just seeing belieber and he can reach out to me. I'm like, Okay, this car has not been sold. 

I've been driving with it for a few months. So what I will do, I want to edit this. So here in my main area, I see an overview of everything I click on edit. I'll say a meanwell if I made 3000 kilometres with it, and I will lower the price. Whereas it's lower the price price to $79. Then I click on edit the ads. And voila, now it's cheaper. So that's what we'll cover in this tutorial. And also a little bit more I'll talk about it in a minute. But I'm talking about cars. But it can also be marketplace about anything about 3d objects. It can be a marketplace for your area where people can sell and buy things it can be about anything you can sell on the internet. So it doesn't have to be about a certain subject. So but it also we'll talk about is how you can add a payment provider to it so people can click on the ad cars in this case, and they can pay on your website. 

Once you can do then you can get a commission for every sale that has been made. So if you sell 3d products that are around $20, you can make sure that you get 5% of every sale that's been made like Fiverr does if I do something at Fiverr I pay $80 And then I pay three or $5 Extra and that is for Fiverr. So for every transaction that will be made on your website. You can make money and I will show you how you can do that. There are also a few other ways how you can monetize this website. Of course, the first one, you can make websites for clients like this. And the sky's the limit. Because websites like these are next level. Of course, when you make a website for a client, you can charge between, depending on where you live between 500 Maybe $5,000 worth of where you can make a website like this for a client, I think you can charge up to $20,000 for it.

 But let's say it will be $3,000. That's still a lot of money that you can make, and they can make it for many clients, I think it will become more attractive as a web design, agency, or person when you can offer this kind of service. Another ways when you have your website, your own website like this, you can place advertisements on it. So people can click on those ads, you can make money with that. You can let people pay money to place an advertisement on your website. Or you can let people pay money, when they're so their ads will be shown on a prominent place in the website on the homepage, for instance. So it will be sold earlier, people are willing to pay money for that. 

And then the latest one, if you take a look at what makes a website available, or what makes an application on iPhone or smartphone valuable is the amount of users so when you will have a website, and a lot of people come there to buy and to sell, your website becomes more valuable. And people big companies are after users. That's why people want to buy WhatsApp, Facebook, Instagram, Snapchat, if I think look at the Dutch website. It's called marketplace translated.nl. It was sold in 1999 for 173,000 euros. Five years later, it was sold for 280 million euros right now it's worth much more. Why because of all the people that are on the website.

 And people on websites are valuable for big companies. So that's why they want to sell everything. That's why people want to try to buy Snapchat, and Instagram and all that stuff because of the users. So the more users you have on your website, the more valuable you're upset because maybe one day you can sell to company they can make the website better. You can enjoy the money and do good things with it. So that's our there are a few ways how we can make money creating websites like this. Since there's so much I will cover in this tutorial, I made timestamps in the description so you can go to a certain part of the tutorial. If you click on the timestamp, you go directly to that part in the video. And if I go too fast for you, you can slow down the speed of the video. I have never put so much effort in the video. And I'm really happy with the result. 

If you are too if you like what you're seeing so far, or if this video was helpful in any way to you, I want to ask you to like this video, they want to learn more about WordPress videos or about making WordPress websites, then feel free to subscribe, because I upload a lot of videos. So let me show you the four steps we're going to take in order to get up and running with this website. If you're starting from scratch, I can show you how to get a domain name and web hosting, and I can give you 60% of discounts. After that we will instal WordPress, and then we will get Croco block and the Elementor page builder. When we have done that we will create an amazing website. 

And if you have a domain name or web hosting already, and you have installed WordPress, they can go to step three, and I'll show you the timestamp so you can go immediately to that point in the video. So the first things we need in order to create a website or a domain name and web hosting. If you have this already, that's great, then you can skip this part. If you don't ever think and go to web hosting F k.com. Hit Enter. And you will be redirected to name hero name hero is in my opinion, the best web hosting provider areas. Why let me give you a few reasons there are more but one, your website will load fast even if you go for the cheapest package. Why? Because name hero has invested in Lightspeed which is way faster than Apache, which is used with a lot of different web hosting companies. Here you see an overview of the differences when you use WordPress. 

The second one, the prices are really competitive, you get premium web hosting for an affordable rate, which is amazing. And the third one really important the support, you can call them 24/7 You can open the live chat 24/7 and you can leave a ticket and they will get back to you. So three ways to get support. And that's what I love about name hero. Now one of the reasons you get searched affordable prizes here at name hero is because I get an exclusive discount for you up to 66% instead of the regular 50% that you get a name hero, and they fail to see what the plans are click over here on this button or scroll down. And there are four packages, the starter clouds plus cloud, Turbo cloud and the business clouds.

 So what are the differences between those packages with the starter cloud, you can start with a one domain name. So if you're really on a budget, this is where you can start. You have one website, one gigabyte of RAM, it's just like your computer. The more RAM you have, the faster your computer will remain also if you're doing a lot of things at the same time. So if you get a lot of visitors at the same time, then you can upgrade but I'm talking about hundreds of visitors per day. You have only limited SSDs source, what does it mean, you can have 250,000 files on your website, which is more than enough, you have free SSL, that means that you can make your website secure. 

With other web hosting companies that can cause money here it is free even with the starter cloud plan, and free website migration. So if you have a website already, you want to transfer it to name hero, you can do that for free. Then we have the plus cloud, what is the big difference? Well, you have more gigabyte of RAM, so more people can go to your website at the same time. And you can have up to seven websites. And the great thing is when you get this package, you can have seven different domain names and all store them on one web hosting package, you get 60% discount, you pay $5.18 per month, and then you can have seven websites. So that is less than $1 per website per month. So my opinion, if you're starting, get this package. And if you're really like, okay, money doesn't matter, I just want to go with the best of the best of the best, then I suggest you go for thermo clouds, you can have unlimited websites. 

So you can even become a web design agency, start to make websites for clients, and host them on your website and charge them $20 per month for web hosting, depending on what you want to offer. And the great thing about this package is that your website's become even faster using an vme storage, which is faster than SSD. So your website will go so fast. And the great thing is those websites are already fast. This one becomes even faster, you have a speed boost plugin, and you will have a free domain, which is quite nice. And then if you're like, you know I have too much money, I just want to get the best of the best of the best thing can go for the business cloud. And then I'm talking like if you have 50 websites hosting on name hero, then I would go for the business cloud, the great thing is you can always upgrade later.

 So you can start with the plus cloud for instance, and then later go to the turbo cloud, send them an email, they will fix it for you. i What i want to do now I want to start with a new website. So I want to start with the plus cloud. So the whole year, I can decide if I want to create a second website or a third one. And I don't pay anything extra except for the domain name. So in order to purchase it, I scroll down and I go to order now. Now when we do register a new domain name a domain name, can we reduce it only once. So if I say I want to have facebook.com, and I click on Search, Facebook is only available. So you need to have a unique domain name. And I would like to go with 30 WP 30, Wordpress, thinking if.com, you can have a lot of different extensions. If you want to go international, I would go for that comm. 

And you can go for your own country. So for instance, my countries, the Netherlands, I can have this one, or the UK. But as you see, there are a lot of extensions over here. So there are so many, but I would go internationally for.com and or locally for your own country extension. And talking about names. If you have to start a new business, use that business name, if it's already taken, you can become creative with your name, I highly suggest you always have your own first and last name s.com You never know what you want to do your life. And if you have it, you have it. So I go for 30 wp.com I click on Search. And it is available. And it's for free. If I go for two or three years at once. So I click on Continue. I'll explain that to you. Over here we can choose our billing cycle. And the great thing is the amazing discount of 60% will be applicable on the first invoice. So if you go for one year, you get one year of discount, two years of discount, or three years of discounts. And the longer you go, the more extra discount you get, as you see, say 30% or 6%. So the longer you go, the cheaper it becomes, I want to go with one year. 

And then there are a few extra things we can take over here, which are like to add dedicated IP address, or I don't need all these things are Encrypt is free. We don't need this one. So I click on Continue. And then really important, what we need is ID Protection, it only costs less than $3 per year. And this will make sure that when you sign up spammers that will see all the new websites in the world will not spam you with a lot of things like hey, let me create a logo or do SEO or create a website for you or they will call you. You don't want that. So if you use ID Protection, they cannot see all your details. So click on Continue. And the great thing is this is crazy, the total amount we have to pay is less than $100. But other web hosting companies really good ones also, you pay around $150, sometimes more in here below $100. I really like it, we save a lot of money. And what we have we have two web hosting plus clouds. So we can have seven websites.

 And we have our domain registration. And since I go for one year, I need to pay around $16 for it, but this is great. This is for 12 months of web hosting and a domain name you can start your business for just $7 per month. So what I can do now I can create a new account so I will leave my details over here. That's not my name. This is my name a lot name, my email address, my phone number. And then my company name. I'm, I have a company with my wife in Skald 13 Anna Media, I'm from this address. So I need to fill in your details over here. How did you find us? Well to YouTube, because I'm showing you, and then you have a sport and if you want to call them or have a chat session with them, they ask for a pin. So you can leave it here and then they know you're really, you know, we need to create a password, of course, make it really secure or you can generate one, and they need to confirm your password. Then I scroll down and you can pay with credit cards, PayPal, Coinbase, or credit card stripe. Well, I want to go with credit cards. 

So I can leave my details over here. I scroll down, do I want to receive emails for special savings? Well, there's a great thing for FERS Black Friday and Cyber Monday. And then they gave huge discounts for extending the service so you can get some money on your name hero accounts. And then they Miro as extra money for you. So in that way you have discount for the next invoice. And if you have read and agree to the terms of service, you can check this. Keep in mind that when you've got here through web hosting fklf Come in, don't pay more, but you get extra discount, and I get a commission. So I see that as a win win situation. Manero will check all your details and see if there's no fraud. Well, if it's you that's filling in the information, then it should be fine. So I can go to the checkout. And it says Order Confirmation order is placed. 

If you have any questions about your order, please open support tickets from your client area code your order number, I want to go to the client area. So I want to congratulate you you have your own domain name a web hosting, that is amazing. And the great thing with name hero your website is live immediately. The only thing is if you go to 30 web.com looks a little bit weird. So we need to instal WordPress. But the great thing is it's not all web hosting companies that your website is live immediately. If you want to instal WordPress, you click over here on my clouds. And then you click over here on web hosting plus cloud, you're gonna log into the cPanel and now we can instal WordPress we need to scroll down or we search over here for WordPress, and that is WordPress manager by Softaculous. Click on it and then I click on instal. 

So, we see the newest version of WordPress. Here we can choose our domain name if you have more domain names, you can select one and then here I want to select HTTPS or was it will be secure from moment one, we need to remove WP otherwise your website will be installed on your domain name is calm forward slash WP. No, you want it to be in the root directory. So people go to 30 WP that COMM And then they go to my website. Here, you can give your website a name and a site description. And you really need to do this now. Otherwise, you can do this only once. Now just kidding, you can do this in the website. I will leave it for now. And we will do it later in the website. Here we can choose a username 30 core, for instance, and a beautiful password. Oh hide. We can let it be created or create your own. Let's see if I can go stronger than 65. In real life, I'm not that strong, shy rather be strong on the internet with my password. So I can say to people that are strong. Man, I'm so strong. And then your admin email and ease of access to this email address. 

And then you can select your site language, you can instal new plugins, the classic editor and the limit login attempts and I don't need those neath need those. I click over here, and I close it because it looks too complicated. This is all fine. You can trust them. This is all fine. And we don't need to instal a thing we will do it from within WordPress. And if you want to, you can send the email installation details to an email address. But I leave it as this I click on instal. And there it is, congratulations, the software was installed successfully. So if I would go to this link, you see that our website is alive already. And it is secure. That is amazing. It looks really bad. And that is what we're going to change of course in this tutorial, but it means you are live at this moment. That means go we bought web hosting and the domain name. And now we are live. 

That's amazing. So this is the front end of the website, everybody that will see your domain or go there, hit Enter. They will see your website. But we want to change the website we want to configure things and in order to do that we need to go to the backend of the website website has a front end that's what you will see what the visitors will see. And there's a back end and if you click over here and they all see the back end. And right now you see it's not secure and it can be that you also see it over here. That's Okay, sometimes this secure sometimes not, but in the end, everything will be secure. So in order to do that, you need to go to the back end. And before we do that I want to talk about the backend a bit more. This is the place for users for you to configure your website to create new pages, upload images, PDFs, if you want to instal plugins, if you want to sell products on the internet, or have a Facebook, lightbox or whatever, all that can be done through the back end. 

And then there's the front end, that is what people see. So really important, the front end and the back end. And if I click over here, I go to the front end. And now, here, you don't see that, but now you see a bar over here, that means that you're logged in. And when you're logged in, you can scroll down and you'll still see this bar, and you can add a new post and a new page at some media, add a new user, you can update things, you can customise things, we'll talk about that, and you can go back to the back end. So this we don't need any more. So right now we have the back end. And if we click over here, we go to the front end. So let's talk about the back end, I click over here. And this is our dashboard overview with a lot of information. And then here at the left, we can have updates. And if I click over here, I scroll down, I see there are two themes sending an update. 

So I can select them, update those. So every time there is an update for plugin or a theme or whatever, you can update it over here, and you'll see in the top bar, then there's posts, we can add new blog posts, we can add PDFs, videos, media, or whatever, worth documents. And we can check them or we can add new ones. Well, within our pages like the homepage, the about page, we can create those. If you have blog posts and people comment on it, you can see that over here, you can approve them or put them into spam. Then there's the appearance, you can change the look of few of your website using themes, we're going to talk about that, then there are plugins extra functionalities for your websites, you can make your website a webshop. Let's take a look. If I click on Add New, you can add the classic editor which is the old editor of WordPress, you can have anti spam, make your website more secure, you can have a forum. 

You can have a social media website, all those things can be added to your websites, then there are users, you can add more users that can change the whole website or you can add a user that only can add a blog post. So you can hire someone that will write blog posts for your website, then you can export your website, import your website, and then there are the settings, we'll take a look at that in a second. As soon as right now, let's go to general in order to make our website secure at an S Oh here, that's everything in this do over here and over here. Then you save it and then you need to log in again. But now is secure. If I go to the front end, it is also secure. So that's great. What I want to do now I want to start with a clean WordPress installation. So if I take a look over here, it's kind of overwhelming. So what I want to do, I want to remove everything, we don't need that I want to start from scratch. 

So over here, I see I have one blog post. So if I click over here, I can bring it to refresh. Then I go to the trash over here. And I can empty the trash. The same thing, we can do F pages, I click over here and I see all the pages. I click over here, so I select them all build actions, move to the trash apply. Then I go to the trash and I empty the trash. Okay, then we go to plugins, to Plugins. They're both deactivated. So if they're activated, you can select them both, say both actions, deactivate. And first, you need to deactivate them first before you can remove them. But they're both the activators. So I click on Delete. I don't need those two. Yes. Awesome. Then I want to go to the settings. General, we can scroll down, we can change the slight side language over here, the Times Ana meets plus one, we can change the date format, the time format. So if you want to have capital M, you can do that. So I use this one, the restarts for me on Monday. So I save the changes. That's awesome. Then I go through the permalinks we're still cleaning up our website and making it look better.

 And we change this day and name to post name why right now if I have a blog post, we went to Australia, it'll say your domain for slash the year, the month, the day and then we finish went to Australia. Now I'd rather have the post name so it will say my domain name forward-slash we went to Australia. So this is better Google also likes it and this is the worst When you go to a blog post, it will say this code, this is not good for the search results, one of the most important things to be found on the internet is your domain name and your URL. So post name, so if I search for how to make a forum, straw said Hostgator. It says Create Forum website. So there are three keywords in the URL. So you see, it's important to have a good post name over here. Save the changes. So whatever the title is in your blog post or AMP page that will be shown over here, instead of this stupid code or the date, which is not necessary. 

Okay, let's go to the dashboard, I want to clean it up a little bit, I can collapse everything. Or even better. I can click over here on the screen options. Remove everything. This looks so much better in my opinion. And then I see over here, this area 30 Corp, I want to add my user, I can do that over here or I go to user's profile. And then I can change the look a few of my backhand. So if you see something you like, you can use that. I like to default one, and I scroll down, I want to enter my first name, I want to enter my last name, I can have a nickname, I can change it. And here's the display name publicity right now it says Ferdy Corp. So if I have a blog post, it will say this is written by Ferdy Corp. Oh, I rather have Ferdy Korpershoek, my full name. And now it says howdy Ferdy Korpershoek. That is better. And I want to see an image over here. So you need to have a gravatar accounts right now I have fairly corp@gmail.com and then have a profile picture over here. So right mouse click, open a new tab. Over here, I can sign in for free, like an upload an image and that image will be linked with the email address you use over here when you sign in. 

And if you use the same email address within your WordPress website, then that image will appear. So I have an account over here, it's linked to info at 30. Corporate, as you see. So if I grab this copy, and I paste it here in my contact info email, that means that my Gravatar account will be linked to this WordPress website. So if I update it, and I need to confirm it. Now, you see this image, which is linked to this email account. So you can sign up really easily for Gravatar. And then your profile picture will be seen over here. Then there's a text you can have about yourself. So if you write blog posts, and there's an area with about the author, this text will appear. I make websites for a living. And I love to help people to achieve more in life, something like that, you can set a new password, and you can update your profile. So if I go over here to the backend, it looks clean, no unnecessary stuff. If I take a look at the front end, and this is how it looks, wow, that is so ugly, we're going to make it look so much better. So we have our website up and running. 

Congratulations with that you made the first step. And now we're going to create a beautiful website using Croco block what is Croco block Croco block is a suite of plugins that will help you to create amazing websites. And making this website can be done for just $85. And that is crazy cheap. Thinking about how much you can charge for making a website like this for a client, I'm talking about 1000s of dollars that you can charge to make a website like this for a client, you can start off with just $85. So if you want to get the suite, you need to go to 30 corporate comm Ford slash C B and then we go to Croco block. If you have Croco block already think I skipped this part, we will make use of Elementor in this tutorial. And with Croco block, you get so much more functionalities on your free Elementor page builder. And then we can create an amazing multi vendor marketplace website where other people can sell their stuff on your website. If you take a look at products you see there are a lot of plugins 18 to be exact. And there are dynamic templates, design templates as a library of presets. And there are pre made websites and heresy 150 elements for Elementor. So you don't need Elementor Pro with Croco block you are covered. What can you make with Croco block? 

Well, you can see what you can make over here. So for instance, the car dealer website, that's something we're going to create based on this website. We're going to create an even better website or a similar website where you can choose I want to select a car that I want to buy about BMW. Doesn't matter which model I click on search and then We're going to create the look and feel of this. So I can select you know what, I want to have the highest one that the most expensive one. So I say price high to low as this one. And maybe I think you know what I want to have a convertible. So I can click over here, then it will look like this, I can check it, I can click on it, here, see all the information. And then if I'm interested, I can send a message or I can call this person. And that's how it works. So other people can place an ad over here, and then they can sell their own car. But there's only one, one of the few things you can do, you can also have a spa appointment website, and I have a tutorial on how to make a website like this. So you click over here, you can have a booking, I have to do about it already. If you want to find all the tutorials, I have about Croco block, you can go to 34. 

Let's come and hit enter. And then go to tutorials Croco block. And through two weeks, I'm creating tutorials about all these elements. So you see play button over here and then can watch that video. So what does it cost? Well, what we're going to make can be made already when you invest $85. And I think what you're going to make is worth 1000s of dollars, I'm not kidding, if you can make a marketplace website for a client, you can ask at least $3,000. for it, if you take a look at auto Scout 24. For that now, this is something we're going to make. So we can search for Tesla. Get the results, it looks similar. Those people make a lot of money with those advertisements over here. And this is how it is displayed, we are going to make something like this. And I think this website is worth $100,000, at least I've been working at a company that was getting a website and they had to pay $100,000 for a website that was far less comprehensive than this one. So $85 per year is a great deal.

 But then you can only use it for one website for yourself or for one client, you can also take a look at the unlimited plan. And then you can go or $175 per year and you can make this website for unlimited clients. But what I suggest that's what I've done a year ago, if you go for an all inclusive lifetime deal, it costs $750. So if you make one website for a client, you have the money back and a lot of profits, you will have all the plugins of Croco block for the rest of your life, and you can use it on unlimited websites, I think is an amazing deal. And they were so good that they increase the prices all the time. So I bought it for $300 a year ago. And now it's $750. Maybe it's more expensive while you watch this. Well, you buy it once. And then you can use this for the rest of your life. And as I said before, I will make tutorials about all those plugins. And the great thing is all those websites you see over here, this car dealer website we're going to make from scratch a look alike. You can also import this with a few clicks. And we're going to do that instal. Also we're going to create it from scratch. And we're going to import it so I want to show you the best of both worlds. 

And then you can sell something or make something like this for your client save a lot of time change the images change the structure. And when you watch this tutorial, you will know how to do this after watching this tutorial you will be you'll be a web design geek is in my opinion, what you are after watching this tutorial. So what I will do, I will go for the all inclusive lifetime. I click on Buy now. And then I need to leave my details over here. Well I say for@gmail.com My full name Ferdy Korpershoek My phone number. I'm from the Netherlands I agree to everything and I click on next step. Then I can pay with PayPal or with credit cards. I choose to pay with PayPal okay, I click on Continue. I have done that you go to this page. If you don't go there. Let's go to Croco block. Let's come click on sign in. Now you go there, maybe you need to leave your credentials. And then I have access to all those downloads and I only need one. So in order to start with creating this beautiful website, I searched for jet engine that is the engine of all the other plugins and I can find it over here.

 So I click on downloads. There it goes. Then I go to the website. I go to the back end closes. And then I go to plugins add new Upload Plugin and I drag this one over here. I click on instal now Then i activate it. Or do you see here at the left is jet engine. Awesome. Now we also see Croco block here at the left, then I want to go to a licence, you can get your licence over here at accounts that Croco block. And then you can open this area, you see, I have twice now. So I go to my earlier lifetime membership. I copy the licence key, then I close this. And over here, when I go to licence, I can add my licence. So click on Add New, and paste it again, if you don't see this, can click over here on the licence manager. And now I have access to all those plugins. And the great thing is I don't have to go to Croco block to download them all. I can download them from here. So I want to start from scratch. So step by step, I will explain to you what we're going to do. 

The first thing I want to do, since we have this area, I want to create a title for my website. So I go to settings, general. And I call this one car dealer ship, are you I don't know, just, you can decide what kind of title you want to have. And we're going to make a car dealership website where people can sell their own cars. But you can also create something totally different, like a bicycle rental shop, or you can sell TVs, or you can sell secondhand stuff. So people can go to this website, upload it, and you can even make it in a way that you will get a commission for every sale that will be done. Well that's for another tutorial. In this tutorial, we're going to make a car dealer website where you can, or people can register everybody in the world, they can sell their own car. So the tagline is, sell your vehicle. I don't know if a boat also is called a vehicle. But we're also going to sell boats and other stuff, not only cars, it's cars mainly, but also other things. Okay, that's that if I save it, you'll see it over here, our dealer website. 

So if I go to the website, car dealership for you, okay, then I want to go to the backend. To Appearance Themes, I want to go back to Croco block again, sorry, sign in over here. I want to download the theme that comes with Croco block, it's made specially for that it's called gaffa. I download it. And over here I go to themes, add a new one, upload a theme. I drag it over here installed. Oh, I activate it. I can remove this one. Awesome. And I go over here. And this is the website right now. Well, it doesn't look that appealing. But we're going to make it so beautiful. Okay, I close this, I go to the back end. And what I want to do, I want to add a new custom post type. What is that? Well, this is a custom post type it's called or a post type called posts. So for blog posts, here's 

pages. And it's great that you have two of them. Otherwise, if you only had, I would have pages and you would add your blog posts and pages on the pages, it would become a mess. So with a custom post type, you can keep the structure in our website. And in order to create a new custom post type, we scroll down, we go to jet engine. And over here you see post types. That's what jet engine does. You can create post types and forms and a lot of stuff, we're going to talk about it one thing at a time, I click on Add New. And then over here, I can call this guards. If you have a website about TVs you can just call this TVs. Well, since I'm talking about more than cars only. I want to call this ATS. So every car or every boat or every whatever I sell on my website, it's an advertisement. So I 

call this ads. There's both types luck, and I call this ads without capital. So that's it. If you're making a website in a different language, you can go to labels and give everything a different name. So singular name, I can call this add add new, I can say add a new ad. And if I press step a few times you see to automatically give everything the right name. And then you can translate it if you want to or you change it to something different in English. So you can say edit the ad or add a new as you can change it over here if you want to and then over here it will appear differently in your website. I leave it as this. Then we go to the advanced settings and it is public. I think everything is fine over here. There's one thing I want to add. This over here the menu icon is what you will 

see over here So right now we see pages you see this with boats, you see this? I want to have something else. So if I click on it, I can choose something. Just scroll. So what is an F or a car? Again, search for car? Oh, you see this one? I think this is the best one so far, I can look a little bit further advertisement, how should that be? displayed? If you're selling slots, or keys, you can then use this one. Just for yourself to see to keep navigating through your website easily easy. I think this okay, one I have over here. So that's it. And then over here, what does it support? So when I create a new ad, what should I have over here? Well, I can have a title, it's gonna have an editor where you can play some text about product you promote, but I want to add some other things. For 

instance, the thumbnail or else the author. That's it. Now if I add this post, look what happens over here at the left, I can have ads, or ads. If I click on that, I see nothing. I can add a new one. What will it have, it will have a title, it will have a text and it will have a featured image. So I want to have more information because when I add a car, I won't have more information to display like How old is the car? How many miles do I have already kilometres, I want to show more images. So that's the great thing about custom post types. If I click over here, leave it I don't want to create a new ad, I can go back to jet engine to post types. And I can go over here and now I can add custom fields are it's interesting. And that's what we can do over here made fields we can add meta 

fields. And this will take a while. So if I go to car dealer.cb example.com. This is the website where I've been practising. And I go to bars. Go to this one, for instance. All this information you see over here, in this image, the type of transports the body type, the year the door colour, the minus or kilometres, the engine, all this stuff are made of fields. So first, we need to create this, the description is a text area. So if I create this post, edit this post, you see the title, you see the description. And we have a featured image. But then below we have made a fields, the gallery, the price, the price number, the amount, mileage, body type, the year the door, and then we can have, we can have numbers or text area numbers. Text Area again with we also can have selection areas, 

radio buttons, and the text again, or we can choose something or we can select something. And the great thing is we can do this on the back end. But we also can create a form that will enable new users to upload their own car and upload all this information, fill in this information through the front end of the website, they don't have to go to the back end, check all these things, and then they can name the price over here. And then people can reach out to them. And that's all gonna be automatic. So if you take a look at our website like Airbnb, what you'll see over here are the categories, we're also going to create categories, in this case, this place in the Netherlands. If I click on that, I see everything around. But then we have the same with states. Over here. Also categories which 

will have entire homes, cabins, Munich stays, places where pets are welcome. We have the same with a different kind of s we sell cars, machinery, boats, buses, trucks. And when we click over here, and we go over here we see a listing we have the same, all this information is created with the same principles I will teach you in this tutorial. If I go to Amazon, same thing, different categories, product listings, and when I click on a product, I see a single page. The same principles is what I will teach in the tutorial. This is marketplace. I talked about it in the introduction of the video. So here's the filter, I have categories, I want to go for a car. Then they have placed ads over here there are subcategories. And if I click on the listing I see the information beautifully displayed. 

And the same principle that I will teach in this tutorial. So that's what we're going to do over here at the meta field. So it's going to take a while but it is good to do it will save you a lot of time in the long run. So over here we have a label. So what is it called? I call this gallery and I say DEP and I automatically create The Slug gold gallery. I'm totally fine with that. And then over here the object type, well, it can be a field, a tap accordion endpoint, we mostly use fields, the field type, what kind of field can we have? Well, we can say that they should enter a date, or a time, or text area. So the uploader can have text play some information about this, but we're talking about a gallery. So I want to upload multiple images. And I can do that through a gallery field. Should 

have a description know, the field with well talk about later. But right now, I put everything on 100%. And we're gonna have conditional logic that says, if there's a check fields, for instance, or radio buttons, like yes or no, then we can say, if the answer is yes, then a new meta fields will appear. And if they say, No, no made fields will not appear. Well. That's not necessary over here. So that's the first one, I click on the second one. And as the price so I say, rice. Okay, objection type, well, I wanted to be a field, but I wanted to be a number. You can say the cars or the boats that will be sold on this website need to have a minimum value of $2,000 and a maximum of 100 1000s. You don't have to save points or commas that will automatically be generated. So I can say, you know, 

the most expensive car know what, they can sell their Bugatti over here. So no maximum value. Well, you and then this are fine. Newfields I know this may be a little bit more impart but that will save you so much time in the long run. So the next one is my mileage we're from Europe, so I'm going to use kilometres kill, I don't know how to pronounce it. Miles is better than kilometres, kilometres. So I say mileage, and then I have a number again, fields number, I can say n and then it will automatically select Number. Many value. No all fine. So it's getting easier and easier. But then we're going to talk about body types. So over here, I say the body type of the car. It still filled. But this time, the fuel type. Let me scroll down a bit. The fuel type will be select. But what should they 

select? Well, we are going to give them a few options. So I can say let's start with all DEP all small capitals. And that's selected in the beginning in the beginning. all body types are selected when we use filters. Are we also going to use filters for it? Yes. Oh, it is going to be this my most comprehensive tutorial ever. It took me I don't want to accept excetera exaggerate. But it took me weeks I started in the beginning of December, I sent an email to the guys from Croco block like guys, I'm finally gonna do is after two and a half years. The first time I heard about Croco block was from Darrell Wilson, we have a good friendship. And it was very nice to talk to me about it. And I I finally make those tutorials after two and a half years. But this one man, I think this tutorial is 

going to be four or five hours. I'm not sure. I don't know yet but maybe longer but it's going to be awesome. Okay, the second one, it can be done. Copy, paste. So I will keep the capitals and it's not checked. So the third one hatchback. But I hope you can see now that that this is so much freedom not only for a car or car dealer website. But for any website where people want to sell stuff on the internet, you can make a form that will help them to fill in all the information really quick. And then when they sell something on your website, you can make sure that they need to pay per month if they want to be a member of this website to sell their stuff. I don't know you can let them pay a one time commission when they place an ad on your website and if your website gets more popular, it 

becomes do website in your area about selling cars or selling whatever you can make quite some money with it. So again the investment is not a good investment. So s SUV, SUV, Copy, Paste. New option cross over car copy paste coupe. A convertible I favour this kind of car. Especially when the weather is nice. I hope to have one one day. Now we're in the business of making babies. We will have to in a few months. One is not a baby anymore, but we're into car that can feed our children. So maybe a convertible is not the best option, we can have a van we can have a bus we can have a truck. Or we can have the latest one, I could not fill in not set. Copy, Paste. Okay, that was only one made of fields. So let me update it knew me well meanwell. And then if I go to Croco block now. And then if I 

go to ads at new ad, you see the title, the text and the featured image. And below you see the gallery, the price, the minus the body type, so people can just go over here, select this one. So that makes it so much more easy for people to fill in this information and also for itself. So let's go back to the jet engine, post types. And I agree this is the most boring stuff to do. But man, when your website is getting better and better you I hope you'll get excited as I am when I was learning this, I was like wow, this is so amazing. I can do this. I feel like I'm a WordPress pro now. And I can make I can make beautiful website I can make beautiful as it's already but now this is next level stuff. So from which year? Is the website a fields with a number? Like I say minimum value is 1900 

cars from $18. We do not take or from the 19th century. And no mechs. But I leave it totally. So this new field a door? What kind of door? How many doors? Should it have? Or does it have? How many doors does it have? So we're going to make a radio button. We can allow custom. That's also a possibility that people can fill in their own number, or we give them an option. First option is to copy, paste. Third ones, three. And there's four. And maybe a lot of times five is like normal. So I can say is checked by default. So if you want to have a different different amount of doors, then I should change the number of I think fires maximum. Go to a new major fields. And then there's the engine type. Also, this is a radio and the new field option. The first one is petrol. Petroleum, I don't 

know. And the second one is these all the third one of course, is luck, trick. Awesome. So those are the options, new meta fields. The engine capacity, capacity engine capacity. I'm sorry, English is not my main language. And this is a simple text. So it's all fine. Then there's the transmission and this is a few time called select a little bit different than radio. So I can add a new option. Automatic copy, paste, second option, manual. Third one automated manual and the fourth one continuously variable and let's say that most cars are automatic, so I select that one by default. Then we're going to add a new one. We're almost there. But there's one big one waiting for us which we'll talk about in a minute. Then there's this there's the drive train, drive, train. It is a fields the radio. 

Got a few options. A we paste the second one, f we FW the four types our web our web our WP D and then for WP D That's it anyone this one is a long one okay so at financed option like does def windshields does the Wi Fi all that stuff so okay it's a field and then what a then what a checkbox area there and then we're going to add a lot so those have power steering copy based does it have leather interior interior those have a sunroof electric windows and then people that upload their car can select all this stuff, what does it have, they can select multiple things. And then on their website people can select cars based on the sunroof or based on electric windows when I was younger I hope to one day to have a convertible with electric windows most of them have and they are convertible and 

I would like to give rides to people on randomly I would have would like to have a nice car and then go to the city just drive around see if people wanted to have a ride and I could have electric went up so that was for me mandatory for my next car now my car has its and I have not given any ride yet but it's good to have dreams let's continue some roof electric windows do we have on board windows do we have climate control I can AERCO we have cruise control we have Park Tronic probably that they can park themselves the cars do they have a seat? Heating or seat heating? Do they have a rain sensor so to put up a rain sensor today for light sensor when you go to a tunnel the lights go on automatically. Do they have a headlight washer when I see that I'm always like why? Headlight washer but 

all cars have it are heated mirrors so when it snows you can let them be heated and then you can see your mirrors again. Power accessories do we have multiple steering wheel multiple steering wheel seats with shape memory. So when I sit in my car that automatically adjusts my wife's it's my car or our car. It's adjust to her settings. I'm going to start with a media button instead of a key and the latest one he has we're finally there it doesn't have GPS navigation. Whoa, that's it. So one more. Is it a oh sorry not over here. One more major fields. Is it a VIP car? Do I think this is a VIP car I can decide that. So I'm VIP. Is it VIP and that's for me to decide. So I will make this field invisible for the uploader but it is a switcher Heather so my keyboards are this. That's it. Then I 

scroll all the way up if I want to it's not necessary but look at how much information we filled in over here. Look what it does, because now if we go to the ads and the new ads, Look how beautifully it is displayed. As information over here the price mileage the body type the year, the door, what we can do to make it even look better. I close this, I can go to jet engine again to the post types edited and then over here at the price for instance, can open it then I can say Show only 50%. Then if I go to the mileage, I can also say, show the field with our 50%. Now, when I want to add a advertisement, I do not see everything below each other. But here you see it next to each other well, it looks better, but it can be that some people will miss this area. But I just want to show you that 

it is possible, I will bring them back so everything will be below each other. But it's up to you what you want to do with that post types. Edits might go back to the price, was it the price is 100. Then thing below the mileage kilometres? Also 100%. Also. So what we will do now we will create a few taxonomies like categories or different words for that categories, like the state, where does the car come from, because maybe people don't want to buy a car that's from the other side of the United States. Or we can talk about the colour, we can create the brand. And maybe think, Well, why do we not just as as a custom field, or a made a field as we just did? That's a good question. But with taxonomies, you have more freedom to display things or filter things visually. So it gives you an 

example, if I want to show all the brands on my website, it is easier to do that using a taxonomy instead of a custom field. So that's the difference. With the custom fields, you can fetch information. But with taxonomy, you have a little bit more information. So that's the reason we have custom fields. And we can display all the information of the cost of fields in our website using elemental, groco blog. But with taxonomies are a different word categories, you have a little bit more freedom to display the taxonomies in the way you want to there's a difference. Let's do it. So what is next, while we still cannot see, we can still decide what kind of object is is the car or is the boat or something else. So we need to add some categories. So we go to post types, excuse me, we go to 

taxonomies. And our any can add a category and that will be shown. For instance, over here category stacks. That's what we can create over here. So I click on add new. I call this one types of transport that it should be added to this area. So I searched for ATS. Then I scroll down and I go to meta fields and I add one and it's going to be an icon because we want to give every single type of transport an icon so I call this one type of transport. I can tap OK, it's fields and there's a text area. I can also say you know what make it this what we will do we will make it a an image. So where is it media. So we can upload a custom icon or image to every different type of transport. That's it, I add the taxonomy. And I go to the second one taxonomies I add a new one. And this is makes other 

words for brands. So we're going to have BMW Tesla, all the all the brands we have for our cars, boats, everything we have to offer on our website is linked to the ads. Then over here I want to link an image to it. So every brand every make will have their own logo that looks better on the website or professional and we need to edit manually so I click on new meta fields, meta field I don't know. And I say thump nil or the make thumbnail step to grey this okay fields and then is media. And that's it at taxonomy and now we have two already over here. I want to make the third one it's called models it's linked to ads and that's it. Then I want to have the colour so I go to taxonomies again so we can select cars based on their colour or boats or whatever. Again linked to the ATS edits and 

then the latest one I click on new I solid sound is calling me to come downstairs really nice. When he calls you cannot make look good. So I need to wrap this up. And that is from which state it is. And if you're from Europe, you can say country or if you're from one country, you can say, province. So in this case, we're gonna say state, we link it to ATS. And we need nothing else over here at the taxonomy, and what you'll see now here at the ads, you see all adds add a new athenee. See, colour model state makes typography the same, as you see over here, at the posts, categories in text. So this, those are taxonomies, we added those, so we have more ways to filter things in our website. That's the reason why we don't put it at the custom fields. Because we can also put it at jet engine. 

Sorry, post types. Over here, we can also put it below there, like the brand and make all those things the model the states. That's why we place it over here. We have more ways to organise things in our website. Okay, ladies and gentlemen, I hope you're happy with the results you have so far. Let's create our first ad and see what happens. So we've set up a lot of stuff, maybe you're a little bit confused, I do my best to show you exactly what we are doing. So we understand it. What we're going to do now to make you understand and better is we're going to create our first app, we're going to add a car to this website. So I go to ads at New. And then I want to say Tesla Model three, then performance. Like I say, wrapped wrapped that I can throw right over here text about the Tesla this 

amazing Tesla goes to 100 kilometres per hour in just 3.4 seconds. It is brand new, and you are free to contact me for a test right? I don't know if something like that. So now I have all this information over here. Let me publish it first. Like to save things. And then I click on choose Media, I want to add a few images. I have no images yet. So I click on select files. I have 10 images of my car. I own a Tesla. It was my dream car. I'm not a car fan, but I'm a fan of Elon Musk. So add all those and now I am the proud owner of a Tesla. My wife also loves the car. That's what I like. Okay, they're all selected. I click on choose Media. And there they are. Awesome. If I go up, close this and I go to add over here I can go to the featured image in there I can choose the image I want to 

display. Well, I think this one maybe this one from the top. Yeah. Is the featured image that's that's what will be shown first in the website. So we have the gallery. The price Okay. Let's say we're talking about dollars over here. $50,000 it has let's talk about kilometres. It has 21,000 kilometres. The body type it is a sedan. It is from 2019 There's five doors including the back door. The trunk, the engine type is electric engine capacity, I say 3035 kilowatts, transmission is automatic. It is four wheel drive. As far as options okay, it has power steering it has leather interior. It has a sunroof and as electric windows, it has onboard Windows climate control cruise control should add an E and S parktronic. This one has not but you can upgrade the Tesla so it will have seating yes I 

use it all the time. Rain Sensor, light sensor. No, it mirrors no our accessories. Multiple steering wheel seats with shape memory. Start with medium and GPS. Yes. And if I want to I can check this so it will be a very important car and I can let people pay. So it will be in my very important area. And then they will be on the homepage on a beautiful place where people can see it so they can pay extra money so you can be this website owner and people can sell things through your website and you can make money with it. That's so we're going to make a lot of tutorials about that to show you everything, how it works. But this tutorial itself is already really in depth. I think this VIP, let's check it okay. I say updates. But then we can go over here and we have more information at the F. So 

we have the colour, this one is black. If I say comma, it will we attack, the model over here is a performance. The states Well, let's say it's from Cali Fornia. Mix, well, this is from brand Tesla. The type of transport is a car. And there's the featured image. So this is all the information. If I click on update, I can preview it. And that probably looks a little bit weird. This how it looks. So that's not very interesting, we're going to make it look so much better. And before we do that, and go back, what I want to show you now if I go to colours, I edit a colour, as you see where it counts. So when more people say that the colour is black, they can see it over there. Model is performance. So you can select everything in the website on performance, I want to have a performance car, 

and everything will appear. The state is from California. So we can select all the cars in California. And we created this with this form. And this the same form we're going to create on the front end so people can register and upload their own car, or anything you want to sell on your website. So let's go through all the ones that makes it is the brand of Tesla. And since we have created this as a taxonomy with an image, I can go over here. And I can add a thumbnail thumbnail with the Tesla logo, make sure that all the logos you upload for all the brands, all the mics are the same height and width. So it will look better. That's what we have done over here. So this area we created with taxonomy, jet engine taxonomies, then if I go to mix, and this, how we have created this. So that's 

really nice. And when I was practising, I almost came to the point of quitting, like, Hey, this is too complicated for me, I will not make a tutorial about it. And then I started one time more to try because I already promised people that I will make tutorials about this. And then all of a sudden, it all dawned on me like Oh, so this how it works. And I really hope I can give you that same feeling like Hey, I finally get it. And that's why I want to show you I learned everything the hard way by trying trial and error, reverse engineering. So I was a complete demo and checked everything how it works, try to to make exact same website. So I can show you the shortcut, just straight to the point talk on how it is done. So what we have over here at the posts is nothing, because we have I'm 

talking about ads over here. And there it says Tesla Model three performance wrapped. So what I can do now, if I want to, I can go to jet engine, post types. And then I go to the ads because I saw there was a small error. So if I go to the meta fields, and there was another one cruise control, so if I go to transmission man Oh no, it's crucial. It's frozen. Oh, I think you're at as far as options. Yes, cruise. Control over here also. So I want to update the post. What I want to do now I want to fill this website with ads. But we need to meet can do that manually. But in order to save some time for you, we can also import a demo on a different area in our websites, you can have your same domain, then we can export it from that demo website and import it over here and then that way save a 

lot of time. If you want to you can do everything manually. But for the sake of the tutorial, I don't think you're served if I take three hours to add so much more ads over here. So I will show you how you can do that. In order to do that I go to name hero accounts. My clouds my web hosting package I log into the cPanel and I search for word Press, click over here. And now let's click on instal. And this time on my domain, but this time I want to go for the demo website. I'll leave everything as it is. I use my username, my height is great password to use my email. And maybe think Why do you do this? Well, first, maybe the world don't want to create this all from scratch. You want to just import it and then adjust it while that is possible. And I'm showing you right now how you do that. 

So really important that you have a subdomain over here are actually your domain and then forward slash, me slash should have a four slash over here. And I click on instal. So our current website is at 30 WP or yourdomain.com. And the next website will be on yourdomain.com forward slash demo website forward slash and then there's the website. So there it is, as you see for the core of WP, that's comm demo website WP admin I log in. And then I go to 30. Or let's go, fortunately, CBT I go to my accounts. I feel as membership ship, copy the licence key, we need to go to the quickest installation with Croco block wizard. Try it now. That goes then I go to plugins add new Upload Plugin by drag it over here. And that will help us to instal a website really quick. Okay, activate the plugin. I 

want to click on let's go. Here's my licence key again. Full Croco block installation instal. I use a CAFA thing, continue with the parent theme. And then I choose or is it I choose the car dealer website. If I can find it here, let me see our dealer. There it is. I click on Start installation. And I click on Continue. Well, this will take a while to instal all the plugins we need. And then we can export the information we need and import it in to our current website. In this way, you save a lot of time. Because I've shown you now how you can create your own, how you can add your own ads, it can be your car, it can be anything. So now I want to go to the next step. And then it is better if I have a complete website with a lot of products on it otherwise, looks a little bit weird. So I 

want to replace my existing content with demo content. Click on Continue. And I need to fill in my password over here to confirm it. So I click on Confirm after filling in my password, this will take a while. So I'm gonna take a sip of water. Okay, this completed so if I click on continue this regenerating all the thumbnails. And it says we're all set, we can take a look at our websites or proceed to the editing pages or go to the Croco block dashboard. Well, let's take a look at our website. This is the website and as you see at this moment, this is an error in the website is because of new update of Elementor. But with a new update of Croco block, they will fix it I have a lot of conflict with these guys from Croco block. So if you don't take a look at that, but at the rest, you see the 

VIPs I was talking about it. So if people pay money or if the cars already beautiful, or you can make your own selection over here, like hey, I want to show the best cars over here. Recent ads so if people add an app, it will appear over here. So we're going to build something like this. So you can do also this way that you import this website and change all the information. But I will show you not only how to make our sample I want to teach you how the process works so you can make any website you have in mind with these principles. So what I want to do now I want to export all the ads over here. So if I go to the back end and I go to the ads. You see I have all those ads over here and I don't want to create them from scratch. There are some things we need to do manually but I just want 

to export them right now. Okay, this is a tricky part of the tutorial maybe it's not for you. But what I want I want to have a website full would ads but I'm not going to spend hours hours and hours and hours to create a manually. So what I will do, I will import ads from the demo website, our expert on there, and then I will import them in this website. But it's really important that if you do that at all the settings are the same. So the taxonomies, the titles, slugs, they all need to be the same. I'm talking about the custom fields. So if I say, body type on my current website, and at my demo website, it says the body type, they do not match when I try to import them, and then those that data will be lost. So what I will do now, I will take some time to make sure that the information 

on the demo website is the same as on my current website. And if that is the case, then we can import all the data from the demo website into our current website. And it will look so much better. So let's do this for the reason because of the tutorial. So because I think it looks better when we have a website fluid as they want to have a website with only one app and I show you everything in this tutorial. So that's the reason. Let's do it. Okay, before we start importing out, though, something really important, I'm here at my dashboard of my current website. And I'm at the dashboard of the demo websites. If I take look over here at ETS, I click on it. What I see over here is model. If I click over here on the demo website, I go to the ads, I see models, if this is not the same over here, 

as over here, and I tried to import all these settings, all these assets over here, it will not import the model settings because it's not the same. So make sure everything is the same. And I will help you to do that. Because I made a few mistakes I came I found that out later. So the first thing we go to the taxonomies we change model over here. Model Two models also over here. Really important. Then another thing at the post types, and the ads, also over here, jet engine. Sorry, both types. And the ads, I changed something to kilometres well, over here. It's called mileage. So again, I need to bring it back, I can change it later. But when I want to import the same thing I need to do that otherwise, this information will not be sent to me to the new website. So over here, it is a text 

area. Here it is a number so I need to change it to text. So we just Same. Same goes for the price. It's a number, but over here. It's a text, I can change it later. Now I need it to be text. Update. I don't need to update this. But and then one other thing really important. Over here, it's it's as far as options, although settings. Over here, it says Advanced option. It needs to be exactly the same. Otherwise, do not import everything as you wanted to import it over here, below this list, see that as an array, and then click on Update. Oh, here's an ad. And over here, it's a single car on our website, it says ads. So I need to change that method, I can change it back, single car update. And then one more thing really important also here, option value at the demo website. If it says let 

me see power steering like this, it needs to be exactly the same. So if there is a capital S over here, it will not import correctly. So take a look at it if it's all the same. And then it will all be imported the right way. If you're ready, you can go to your own website click on update post. Now we're ready to import and then go to the ads. You see I have all those s over here and I don't want to import them from scratch. There are some things we need to do manually but I just want to export them right now. We need a plugin for that there's something really stupid. Over here I have everything the same as what I just created in the tutorial is to see the gallery the price, but somehow these images do not count. And there is a plugin that can help us to copy this images image. So I will 

do that. So I need to go to let me see Plugins Add New. First let me update this really quick. Okay, and I go to Plugins Add New. And we search for exports media with selected content. We searched for a plugin from Yoast here it is instal now include all relevant attachments in your export, that's what we need. So I click on Activate. Then I want to go to Tools, exports not all contents only the ads and export media which selects content, that's now the extra option because of that plugin. So click on downloads the export. That goes, now I go to my website, my current website, then I go to Tools import. Over here, I click on around the importer. Now we can drag this over here, upload an import. I select Ferdy Korpershoek as the user download and import all the file attachments, I click on 

Submit. And since all the settings are the same, it says all done have fun. Remember to update the password and roles of important users. Well, we have not done that. I click on the ads. And there they are. Awesome. So now if I click on one of the ads, this one for instance, see the title works. The description over here at that colour white that model the state Iowa make the brand. And it is the type of transport is water transport, the featured image of here, an image, the price, the mileage, the body, all that stuff. Also, this is all important to a shoot. But I had to check a few things as I shown in the video to make sure it was all important right way. All the big question is are the images over there, that will be great. The most important one for me is the featured image and that 

one is over there. I see nothing in the gallery, maybe in a different image. I take a look at the Honda. For me, the most important thing is a featured image. And this one it doesn't work, unfortunately, but what I can do. If you take a look at the order, Honda Yamaha, fac click over here. I see there's a green motorcar or a motorised resaved motorcycle, I choose Media and then as the first one over here, so what I can do, it's I know it's a worth way of doing things. I can go over here I can hold Command or Control, click, click, click lick, lick, lick it are like 70 cars or vehicles or ATS and I need to do that manually. So now if I say Ctrl tap there's a red one. I click over here there's the red one. But it's not necessary because by default this image will be shown in our listing. So 

it's up to you if you want to do that I show you how we can do that. Just go over here scroll down. We have the second one. The third one we have this one. It's okay I think it will take you 10 minutes to do it. This one and that you need to find a way for Safaga yellow okay read the next one is read so Ctrl tab, scroll down read read Okay, next time is the fourth one of that row yellow for the row okay and over here is the two images of the same thing. If I'm right so I can see come on or I can do images to the gallery it's not true it's a different vehicle. Body see I'm doing quite well I know maybe you're like What is this for stupid tutorial but this is just for me the best way to show you how to work with his website when you have a full website. I don't know if this is the right 

one. Yes, this green one, let me go back and get rid of this one. Challenger. So I will fast forward and then I will be back with you. So now I have a website full of ads, but I want to display them in a beautiful way on my homepage. And I also want to create a grid. So we can have an overview of all the listings just like this website, for instance, out of Scout 20 four.com. And that's done with a listing. Just as with Airbnb, with a lot of those websites, you need to create a listing what is a listing, a listing is an area in your website where you can place all the information about the subject. So in this case, in my Tesla, for instance, now to display the beautifully that can be done with a listing. And when we've done that, we can place that listing in a grid, so it will be 

displayed on our website. So let's do it. Well. If I go to Air B and b.com. Over here you see a filter. If I scroll down, this these are categories like cities in the Netherlands is all fine. If I would click somewhere, so let's click on button. These are listings. This is a listing. So what is a listing it is an area with information about the item. So right now we are talking about houses. And here we have the title that is a super host. Here we see the gallery. So the more images you add, they will automatically be displayed over here. Here's the title, the subtitle, and some information to guests, one bedroom, two baths, all this information is fetched from the custom fields. So people create an account at Airbnb, I need to fill in information about the house need to upload images, 

the title, where it is in button in this case, and then people can leave reviews in there will automatically be displayed over here. And that's the listing. So this is a listing. And the great thing is that we can design this area, and then other people can upload things and it will all be displayed the same way. So we're going to create a listing to give in the other example. If you go to amazon.com I shop by category, this is a listing. So the image of the product, the title of the product, the brand of the product, the reviews, and then the stock is available or not. So all this information will be shown semi. So here, a different image, and different title, different brand reviews, different information, but all in the same way. And that so this is listing, and we're going to make 

that I hope I made that clear. And when we're going to make it, you will get more. So I scroll down and go to jet engine listings. And we need to instal Elementor I found to get Elementor you can go to Ferdy Corp comm Ford slash Elementor is the best free page builder Darris and elecrical. Rocket is even better, it's element on steroids. We can click on Start here or get started. And then they asked us a lot of questions. Well, what you also can do go to the website and instal it from there. So we can click over here on instal the Elementor page builder. And I click on instal now. Okay. Awesome, I can close this. And then again, I can close this and close this. So I keep the home page the dashboard clean. Then I go to jet engine again and two listings. I want to add a new one. So what is 

it? It is a post from post type ads. That's the custom post type we created. Listing item name. Well we can call this add listing. And we want to edit it with Elementor. So I click on Create listing item. Okay, I think this part is much more fun than what we have done so far. So what I can do now, look at this. First, we're hitting the Elementor. And we can add a new section, one column for instance, see three icons, I want to have four, also here, and I can so in order to get four I click over here, I go to the user preferences and I add the editing handles there that makes it easier to duplicate things, create new things, close things, etc. And then the second one, the user interface, I want it to be dark. That's a personal preference. Once that works better, I click on update. So what 

we will do, we will fetch information from the custom fields like the year the amount of miles or kilometres, the year that was made. And we will add that over here in a listing. So I want to start with an image. So I search over here for image, and I want to go for a dynamic image and we are installed jet engine, this will be added, this is added on top of elemental that makes it so amazing, because Croco block will add extra functionalities to Elementor. So I drag it over here. And it's automatically getting this image. So if I click over here at settings, it is the title at listing it is published. And if I go to listing settings, it is listing the source posts from the post type ads, and automatically getting information from the first post. But what I want to do, I want to display 

this in columns of three. So what I can do, I can make this smaller. So we can see better how it will look on the website. So let's say 350 Maybe a little bit bigger 400. So that's what I like. And then of course, we can go back by clicking here, I can change the image size can be a little bit smaller to this 400 pixels wide, three on some of these, okay. But I rather show it the 16 by nine quality. So let's see this a little bit small. So what I can do now I can also say You know what, I'll make it smaller. out it's too small, for hundreds. Go back over here. So you need to play around with that a little bit. medium large, then we have a high quality image of here. Awesome. Then I leave this as this, if I want to I can go to the border type, grade rounded corners. Now if that's what you 

want, you can do that. Then I go back to the content or over here. Then I search for let me close this, I do not search, I close everything except listing elements. So here I can see them all dynamic fields, we are going to talk about a dynamic in images, this one anaemic, maida information, right, I want to add a dynamic fields. So I drag it here below. And it will be the title by default of the Tesla. And that's what I want. So the source is post, then the object field, I can choose the date. So when it was published, I can show content while this description, an excerpt. We don't have that my nickname, so from the person that uploaded this. So we can add all that information automatically based on all the information of this item. So right now I say title. And I'm happy with that. And 

then I can go to typography, make it the title, really make it bold. If I want to I can make it capitals, but it's not necessary for me. I do want to make it a little bit bigger. And it doesn't have to be really big. So 20 is okay, we make Tesla Model three, performance. Awesome. So what else do I want to show over here? Well, how about the price. So I go to all the elements, I scroll down, and I want to have a nother dynamic fields, drag it here below. And this time, I want to go for Naida data, then I can select all the custom fields recreated the gallery, the price. So I hope you understand now that we have all this information that people have filled in, or we can fill it in ourselves. And now through Elementor. We can showcase this however we want. So now it's getting fun, I hope you 

think the same. So I go to price. And then says 50 Well, 50,000 it's not appealing. So what can we do? We can use the customised field outputs. So this is a code for the price or for the number and then over here I can have dollar sign space for one, two or not. Okay. But what I also want to have, I also have a Filter field output. Over here, I can have a callback and I want it to be a format number. Look at that. That's what I like. And then I can choose what I want to show how many decimal points do I want to have out of zero? So now it looks like that I can also change this into a point, then I go to the Stell, I want to make this also real a little bit bigger. Also bolt and I can go to the colour, and I can make it green, if I want to. until I'm happy with the results, I think this 

there's a little bit too much space. So I can click over here, go to Advanced, uncheck the margin, and then at the top, click over here. So I unlink all the four values. And here I go to the minus out there check now sorry, with a zero, I uncheck them. And then I say minus, raise it a little bit closer make it really cosy. So Tesla Model three performance and cost $50,000 If you want to get inspiration, you can go to alto scouts 24 Let's come search for results. And this is a listing. So it's the title. So you can have a really long title. And you can also drag it on top like that, then below you can have the image and then if you want to, we can also have the image at the left and all the information at the right if we want to death. Hey, let's do that let's do something crazy, we can 

click over here. First let me measure this 800 So I can go to the settings this thing settings and make this 800 in the image becomes really big but we're going to fix that in a minute. Then over here I'm duplicated so now there's a left area and the right one I close this so let's see the title on top Tesla Model three performance and the image below can be a little bit smaller and then you know what we get make it complicated more complicated. That is I can click over here and I can go to the basics and I can add an intersection you're on top so I'll get rid of this area then I drag the title above this area this one I drag to the left and this one I drag to the right I click over here I go to Advanced and I remove this again. So right now it shows looks a little bit more like that over 

here uncheck this at the button decreases a bit so it comes a little bit closer and then over here also have no spacing and advanced I uncheck this and I uncheck this like that the price can be bigger advanced bring it a little bit more to the top and then below we can have more information. Well how can we display it? Well, let me show you. I go over here close this and go for a new dynamic fields like that. This time I want to go for meta data again and I want to say something about the car. So what do I want to show when people see this for the first time? What do I want to show what do they show over here? The amount of kilometres so that's for sure. So I click on mileage and then again we can do the same we did just a few minutes ago over here with price but now I can click over here 

I can search for car. I can I can if I want to and there it is. But this saying this says nothing. So what I want to do I want to make it clear about kilometres. So how can I display this what I showed you before, first customer field output, here's the number after that I say, k, m kilometres. Like that. Then here, the fallback again as a four month number. I want to have zero over here, and a point over here, like that. And then I want to make it bigger. I can also choose a colour over here. I need to go to spell for that. And then I go to the typography. I say open, sans sans make it bigger? And not too bold. But let's say 500 or 600. Yeah, I'm happy with that. Okay. What do people else want to know, they want to know from Nigeria this. So what I can do now I can duplicate this area, 

click over here. Go to the made up data and change it to here. But this time, I don't need to kilometres and stuff. So I need to go over here, Remove that. Remove the point and then shows the year, then I can change the icon to a calendar for instance. Or what a check mark. That's cool. Let me show you some magic. Now. I click on update, we can change it later. But right now, if I would go to the dashboards by the way, if you want to go to the dashboard, you can also say Ctrl E or command a search for dashboard, type it in and then click over here, then go immediately to that area. I want to create a page over here. And I call this one home, publish and publish. Now, I want to edit it with Elementor. And since we use Croco block on jet engine, we can add a listing. Look at this. I can 

search for listing and there it is the listing grid. So now it all comes together. Look at this, I drag it over here. And now 18 Gentlemen, into select the listing I just called ETS listing or F listing. Wow, do you see what is happening over here, I know it does look really bad right now. It's because of the columns. If I say one column, it'll show all the information below each other. So as you see different image, different title, different price. And that's what you can do with a listing what you see is that I use a different image for my Tesla, a 16 by nine aspect ratio, and all the other images. So I better change this one to the same aspect ratio. So the old looks better. But that is what you can do. With listings, you can fetch information from the custom fields and then display 

it like this. Or like this, of course you need to make it better. So that's what we are going to do. And of course, we will talk about filters. In this tutorial, man we're going to make an amazing website is going to be amazing. And I know it's a long tutorial. But now we'll learn is you can show this as a service to people. And you can make amazing websites and ask 1000s of dollars for it. So I need to do something about that. About that image, I think I should get rid of the 16 by nine. But what I can do also this also what I like about Elementor when I go to the homepage by clicking on the i If I hover over here, I can go immediately at the listing or I can go to the home page with element and edited with Elementor. And then I click over here, I can edit it from within this page. So if 

I want to duplicate this area I update it and I go back it will be updated everywhere. So that's what you can do. I prefer to go to listen at once and again if I click on Monday, let's see if I can find it. That's this thing though, but we can go to the dashboard and to jet engine listings and it's with Elementor So let's bring it back to the way we had it because I think this a little bit too much. So what I want to do, I create a new area with one column. And then I drag this over here. Below that, I want to have the title. So let me grab the title. And then below that maybe I want to have this area, so that's okay. Or maybe not No, I drag it over here below. This one over here below, I remove all this stuff, I go to the settings. And I make it 400 again. And what you saw before there 

was a different way to display the image. So if I go to sell a sorry, to medium. Let's go to post thumbnail. Yeah, I think that's better. So now if I make it 370 in width, here at the settings and I say command II homepage, command, click, it says nothing found, because we need to link the homepage to this page. So I click on the customizer. Then I go to the homepage settings. And then I select a static page. And that will be the home page. So whenever I go to the home page, this is what people see people that go to 30 wp.com At this moment, will see this information. They're still all below each other. So I click on edit with Elementor. And I need to add some columns. And now it's getting better and better. So I click over here, sorry, on the blue area, they say I want to have three 

columns and then adjust automatically so becomes a little bit smaller. So that's what we see right now. It's not perfectly aligned yet, but I will fix it. So you see what we're doing over here, we're creating a listing. So what else do we want to show over here? Well, how about the engine, but before I continue, I decided that I want to make use of this area. So drag this over here. And the second one there, you know what I will create a new intersection like this one over here. The second one over there. Remove this one. And the third one over here. So here I want to decide what kind of transmitting Is it is it the automatic or not. So again, I click here Mater, change it to the transmission. And over here, I can find it I can search for bar, and then maybe this one, like shifting up. 

Okay, it shows this. I don't know why. So let me see. Maybe because we use a format number. I don't want to use it at all. And then says automatic. Duplicate this one. Drag it over here. Next thing, where is it from? But there is no mater data. Now we need to go back. Scroll down all the way our dynamic terms so I drag it over here. And then from taxonomy and then receipt from the state, and then it will say California, but it's not style, so we need to style it. Well, first I want to add an eigen. So I've searched for something like map. I can add one of those whatever I want. I use this one. Okay, so far so good. Then I go through the Stell labels, text. And remember I said Open Sans I think it was 20 the text probably not. So I can also click over here go to Stell Open Sans 16 600 Open 

Sans 16 600 Well still loves beer. Okay, then there need to be a little bit more spacing. So I check this And then at the left. Okay, I think we can make those all a little bit bigger all the icons. So over here, it goes to the I can change the size a bit. 18. And I think the text can also be a thing. Like I say command, copy, or right mouse click Copy, basis, cell basis, and base style. And then also over here I need to do that I can can be dating, and the text can also be anything and the colour, let's talk about colours. What kind of colours do you want to use in your website? Well, it totally depends on what kind of website you want to create. Let me remove this, I can click over here and I go to the site settings, I can choose a few colours for my website. So what is the style of 

your website? Right now, I don't have style really a we can talk about later. But right now I won't have this dark colour. And I want to base it over here to base over here. So and then I can say over here races, the colour of the price. When I've done that, okay, click over here. If I close this, I click over here, I go to the Stell. And instead of choosing a minimal colour, I can click on the icon over here and I can choose the right colour. Also here, I can go to the style and I choose the global colour called primary. And that's also what I can do over here. Style is to are linked to primary and then copy to sell. Basic, Basic and basic. But now if I want to click over here, I want to go to label and I just select the text colour default primary and then it's exactly the same colour. 

Is it the same height? Or the same size? Let me see a thing? It seems a little bit smaller. So it Yes, I knew it. So I hope you understand what we're doing over here. So the question is, what do we want to show first, when people see this advertisement? Well, an image is good. The title, the price amount of kilometres, the year it was built or bought? The transmission automatic, where it's from what else the engine, so engine type. Electric applicators, how about the engine capacity. Different I can of course. So I go for it, go for the oil lamp. oil can also hear of course I need to change the I can. Maybe this. Okay, so far, so good. But if I go to the homepage, Command E. Oh, it's still there. Awesome. Command click, so I open it in a new tab. I like it. But what I would like is to 

have a little bit more space where I can do that. But what I want and what I mean is I wanted to I don't know, I want to have some I want it will be clear that this is one area. So what I can do, I can go over here to the section. And I can go to the Stell sorry, it's not the section, click over here and I see Edit section, go to the Stell and then I can have a border I can make it a few pixels. So let me leave like that. And let's see what happens if I refresh this. Now it's clear that this is one area but I don't like it. I think this does not look professional when I go to alto scouts sometimes you need to it's okay to have example websites it doesn't have to be the best design and just has to be practical people need to be able to navigate through the website. So this is how they do 

it. Their background is a little bit grey. And then these areas are white. So if I click over here, I go to the background color to make it white Okay, now I don't need a border anymore. But still a section none. Okay. Nothing changes now or there's no border anymore. But what I can do, I can edit the page with Elementor I can go to that section. If I make it a little bit grey over here, still color see a little bit, little a little bit, maybe a little bit more. So then I click over here. I go to layout. Now to make the content full width. Same I want to do over here at settings. I want to get rid of the title. And I want to make the Page Layout fluid Correct. Same goes for ascending. Looks a little bit stupid if you have a professional website and the words are not correct. So I 

duplicated this, here's descending, the only thing I need to change is descending. So I update it. And over here I hold Command, and I go to the homepage. So I go to all the cars. And then I can say I want to go for the cheapest one. So I sorted price ascending. And voila, $1,000 is the cheapest one. And then it goes up. So that's what we can do with the price. But we can do with more things. If we go to our scouts, any for that come auto scouts. I go to the Tesla results, I can filter them over here on the best results or price ascending, descending, latest offer First, there's actually by default all this happening. So I can say I like to duplicate it. Newest eth. And then I go for a date. And descending is the newest first, I'd obligated. And I say oldest and when a car sold you can 

get it off your website of course. So maybe people are like okay, what is the guard has not been sold, maybe I want to buy it or fix it. So here it is. SME update. So let's check it refresh the page. And I say I want to have the oldest app and then you see December 27 2019 And then the next one is from January 2 If I say the newest first it will probably be the Tesla because that's from I think from yesterday so that works so far. So goods I want to go for the most expensive one. So descending go from the highest to the lowest I see 30 are equally and then it goes lower lower lower. What else well, we can go to the mouse so it's even with kilometres is so called mileage do not know that. I can say by made a key. And then I can say mileage descending so we can check it over here. What do 

they do? Mileage ascending Biolage and like to copy the world ascending and then duplicated, and mouse descending. But look what happened. I used a made a key. So now it's reading the numbers as text. So if I refresh this, look at this. If I say I want to go for the car with the with the least amount of mileage, so I say ascending. You see 10,003 metres and after that 105 And then 10,000 And then one other eight. So what is happening is reading this as a text. So it sees zero or 10100 then sees 105 So now it's not reading it as a number. So I was like oh no, there's a bug and then I found out through hard knocks through the hearts trying out. Oh it needs to be numeric, numeric, numeric thing. So now if we try it again. Man, I get excited since since I learned this my life so much better. 

I really feel happy like whoa, this is great. So miles descending 175 150 to 157. I mean 152 51. So it's working. Check them all out. Because if you do something wrong, you can get problems with people that are complaining, too, then 1221 Yeah. So what else? First registration are lost, but I think I'm happy with how it is right now. So that was our first way of doing this. But what I want to do I want to style this a bit more because right now it's a little bit ugly. So I can go to the style. Let's see what we can do, we can go to percentage and say make it 100%. With so over the whole, all with select, how should it look? Well, as I said before, just try, see how it works ating should be fine. Make it six hundreds sorts. You can have background colour and text colour that is white, but 

it's getting too much attention. So always bring it back. We will wait It was sort of say over here. So if I refresh this sort For best results, you see immediately that the first one think this looks great. But you can do more, of course. So when we select something else we look, I can change the box shadow, okay, there's the label. And there's the button. Well, in this case, I sometimes you can say apply it, but I wanted to be there at once, then there's as far as I do nothing with it. Okay, if I should put a label over here, I can say something. So here I said, apply our value change, or I can click on Apply, and then show the Apply button. But I don't want that. It's an extra click, and I don't want that I want the experience to be perfect. Okay, well, that is our first filter. So I 

want to buy an expensive car. Let's go for the price descending. And then you see the two most expensive cars over here, you click on it, send an email, it's getting better and better. I like it a lot. Or we can go to the ads over here. And then we can do the same thing. So now it's not only it's also motorcycles, it's everything. So if I go to the most expensive thing, it will probably be a bolt or a buzzer. Oh, if you want to buy this bus scanner, k 310 Be my guest. So that's nice. And of course, when we add all this stuff over here, it will be shown. So let's go for the next thing. If I take a look at our scouts 24 I see over here, you can choose the brand also bolt on make. So make sense, then the model. So the model three, then the variant like performance. So let me see if I can do 

that. No. But I like this. So I want to make something similar here at left sidebar. And you said you see their display a different way. That's also what we can do if we change the listing. And we click over here, and we decide to show only one column, change the image to the left, we can we can make it look exactly like this. And that's that's amazing. That's great that you can do that without doing a lot of code. So far, I think we did not do any code. So how can we create that? Let me update this. I want to create a model hierarchy what I mean with that, first you choose your type of transport. So you say a car, then you can choose your brand or your make, then you can choose the model. So that's what I want to do. I want to create it over here and make it as beautiful as over here. So 

I go to the dashboards. Then I go to Smart Filters Add New. And I call this the model IRR key is also worth I think of gay Yes, but I nailed it the filter label model hierarchy hierarchy, just the same. And then what kind of filter settings I want to have. I want to let people select what they want. So they cannot type it in but they need to select it. So it will be hierarchal what does it mean? First you can select one thing, only the top the top select the top option. When you have chosen that based on that the new thing appears you can choose a second thing. So you need so there's some hierarchy the first one first, the make then the model and then the performance not the other way around so I cannot choose model three over here. That's what appear when I choose The breadth. Yes, so I 

select the level. And the first one is type of transport placeholder, well, we're also type of transport so and then taxonomy is the types of transport, then the second one is the make. So I call this the make, copy it as it and I select it makes, then the third one is the model. So I say model. While we have not a big website, we have 70 cars, so there will not be much models left. But I just want to illustrate how that works. Okay, that's it, the rest is what we're going to do in Elementor. So I go through the listings again, I excuse me, similar. And the ATS edit with Elementor. And then I searched for the Select Filter, there it is, I drag it over here at the left. So select the filter while it's called model, hierarchy. Then I select the jet engine, again, I apply X and I play, apply 

the value change. So here's the type of transport make a model that I can show the filter the filter label above, if I want to, it's not mandatory, because also here I have that already. lets you do it for now. And then the second option, the indexer options, you can apply an indexer with with the counter and stuff. So it shows how many cars there are. But since we don't have that big website, we do not do it over here. You also are if you have a big website, you also do not show it so I will turn it off. But later in the tutorial, I will definitely talk about it. And then I go to the styling because it looks a little bit sad over here. The question is do I want to use the text above? Well, I can place them next to each other as well I will do on the homepage. Now placed below each other, 

the width can be 100%. So it's totally from the left to the right. Of course over here, I can have some bedding. So let's go back to the cell. Select the selector. Again, want to see what of this I can bigger. I think 18 is perfect. And 600 is also perfect. And then I don't think I need this. But if you want to change that you can go to the label and see if it's true. Yeah, it's true. We can change it but I want to turn it off. Like that. And above I can have a heading saying hey, choose whatever you want to do. So I click over here to get over here again, not over here. Oh, I dragged it still select. So over here, Okay, looks good. I think it's perfect, I don't need something else. Now I have a label well we don't use it now. And that's the bottom we don't use a button it's automatically 

changing the value based on what we select. We'll talk about button later. And grouped filters change the width he says the space between it we can make this a special area like click over here go to Advanced go to the backgrounds make it blue a it's up to you that suit for now to give a little bit more attention and then I also want to increase this a bit more so let's see what we got when he homepage and then we go to the ads page. I can also search for the ad space age now. Okay, so we can sort it. But let me first check I want to check virus now you only see cars then I only want to select Mercedes there's only one and then also the model I can choose 500 30 Okay, now since there's only one, I cannot sort it out, um, what I can do, go back to model, go back to make. And then I can 

sort them. So I can say I want to go for a beautiful weather transport thing, probably both. And say, I want to have the most expensive one. So we're getting there, we're getting there, man, oh, man, this most expensive one. So based on those two things, we can navigate already better through the website. But there are so much more. If you take a look over here. This is all what we also can do. So what is next, we can go back. Now let's go to the backhand to jet Smart Filters and add a new one. If I go to a car website, I want to check it immediately on convertibles. That's my favourite kind of car. So I want to create a body type filter. A copy it, I paste it and I paste it. And this time, it can be a checkbox. So a checkbox checkbox checkbox list, I really should go to bed, I said I go 

to bed, then I continued recording. So I'm so excited the data source I want to make use of custom fields and then into the custom fields key. Well, let me go to jet engine, the post that's click on the ads. And I can search for the body type just to make sure, but a dash between it. I can add them over here. Then get choices from the fuel data using jet engine. Also over here, body type. Okay, that's it. Let's go back to Elementor. And then over here, I want to refresh the page. And then I want to go for a check box filter and drag it over here below. And then of course I need to select the body type filter. I select jet engine again, I want to show a filterable label here above body type. And again, I can go to this assignment to additional settings. I can enable search top some 

necessary, more or less drop down and scroll but I'm more fine. If I would say scroll. You can scroll over here. That's really what I don't want. Here we can create an indexer. So they'll say how many sedans there are and how many convertibles we'll take a look at that later on to go to the cell. And we can place everything next to each other like this is an option. I like the column horizontal offset it's only if you have horizontal lines and see the difference. alignments I like to be at the left a space between is okay then there see item so how should it look like well, I wanted to be a bit bigger text 16 and 600 Okay, and I want to have this area to be able to look better so I go to label and make it railway and how about 2600s or just bolt then eating maybe better Yeah. And a little 

bit more space. So bedding bottom then 8765 Yeah, whatever you want, I think can be increased a little bit. Okay, so far so good. May be text the items 16 updates. Important thing if they are checked, how should it look? background colour blue, like that. That's Oh man, that is really nice. And maybe a little bit bigger. Okay, so I'm happy with this and the great thing is we can couply copy duplicate or copy this cell to a different to a different filter. So I go to next filter command he dashboards open a new tab, go to left So as next one transmission, so I go to the Smart Filters I want to create a new one. I call this one trans mission, copy it, paste it and paste it. And I want to filter to be a checkboxes list. I can select the Data Source custom fields, and I can select the Custom 

Field key. So let me go to post type in a new tab, ATS scroll down search for transmission, copy this paste over here. But what I also can do I want to I can go for a manual input. So I go to post types there is transmission, there are four options, I open them all. So I grab the first one. Basically it bases I select the second one. Base it based it, I selected the third one. They said they said what I can do now I can give it a different label. So I can say that this one should be read. So let me show you my first finish this new option. Okay, and then on top of this one over here without capital publish. So new filter transmission. So if I go to Elementor, I refresh the page. Wait, let me update it. Okay, I think updating is also good. I want to duplicate this area selected, and this 

time I searched for transmission. There it is. appear like that's one thing is missing. But why is that? Over here, I've got a label. So let's do the thing. What happens when you say many more inputs, and you put the query variable over here, then can give the labels auto names. So I can say continue with continue. Okay, let's leave it at that. I can say our auto forward slash manual. Manual, and auto, I can remove all this stuff on the labels. And then again, if I update it, or I renew it, or I do both. You see the labels are different. So that's what you can do when you do manual inputs. And then over here, you still need to link it to the right ID. Okay, I copy and paste though. Copy and paste, copy and paste. That's okay. Copy and paste. So update refresh. Looks like this. So if I 

take a look now at the website and I go to ads. I can select only automatic parts or ads over here. So only the thing that's are automatic, this one is automatic. I know this one. So here we see if it's automatic. This is only select automatic, only the thing you'll see is the only thing you'll see is automatic. So if I would say manual and automatic. You say see manual manual, automatic automatic and never no arrow you see one of those suits. So that's the power off these filters over here. So if I want to have an automatic convertible, I select convertible and automatic and then I choose this one. How great is that? But there are so much more ways to to let people select what they are searching for. So let me create a few more. Let's go to the filter. Add the new one. And let's go for 

engine type. Is it based it again? A checkbox says list Let's go for the manual input or over the custom fields. And then over here we have custom fields. So where is it engine type, copy paste it, good choices from the field data. Also over here, publish. Refresh. Scroll down, I duplicate this. I select it by changes to engine and that er petrol, diesel electric. Let me check if it works. Always check it, refresh. And then when it works, you can be happy like, hey, if it doesn't work, figure out how it should work. Or by the way, if you can't figure something out, you can go to Croco block that's come as a help centre, Knowledge Base troubleshooter, but also feature a request or submit a ticket. So that's amazing. So I want to have an electric car. There's only one probably, yeah. Oh, 

man. This is amazing. So if I would say, over double, it will select nothing. No DDoS faults because there is no convertible right now. This could be a website with 1000s of cars if you wanted. So later the store tutorial I will show you how people can add their own cars. It's getting better and better. So what else can we do over here? Well, there's much more we can do. How about choosing the app based on the colour? Well, let's go to the filter, add a new one. Call this $1 sign colour and then this Yeah, now just getting just colour this enough copy. It's basic, basic, I got you isn't it? I got you. Okay, no hierarchy or the stupid words. I should live in the United States for a while that will help me but up. I also have my life over here. So the data source taxonomies it's not a metre 

made no custom field it's taxonomies over here at as we have colours, so now we need to choose taxonomies then we can choose colour. I scroll down I can say select or any colour and that's it, we select this colour over here publish and since we're here, we can create something similar. And that's the state. So I click on add new state Copy, Paste, Paste, we go for Select Select Data Source taxonomy and this time state that's it publish. So then we go to Elementor this time we cannot duplicate it because this is a checkbox filter. And now we need to have a normal filter or select filter, select Filter. Drag it over here so two styles also. Not that well then not that good. And over here I need to select colour there it is. Select jet engine IX Ooh. During this one on, okay, then I go to 

the cell. It can use some styling. I wants to be in percentage, but 100% of the whole width just as over here. Hey, maybe I can let me see this is also select yes. Hey, just copy this. What am I doing? Wasting your time? Well, you can do this. They still Boom shakalaka Boom shaka laka laka okay, but maybe a little bit less still. So I go to advanced to backgrounds. See no backgrounds. We know we are friends but right now I don't want you Sorry. Call me later. Colour. Yeah, the label of course. Well, we can check how other labels look. I think eating I think six hundreds. I think a little bit more bottom padding. So choose a colour. Awesome. And then the second one. The only thing we need to change over here is the state. Save Okay, we're getting there. So there are a lot of things we can 

use to select the car, we have in mind, um, all that also wants to do over here, take a look at this area. I want to make it zero copies. And I want to basis though better. We also can use sliders, why not, I want to show you as much as possible in this tutorial, as you see. So I go back to the filters, add a new one. Like before the price, Copy, Paste, Paste. And then this time, I want to select a range. So the value prefix is $1. And unless you're from Europian, you want to use something else or whatever you want. Then there's 1000 separator, I like to make use of point for that decimal separator doesn't matter because I don't want to have decimal. So I say zero over here, the minimum minimum value is $0. The maximum value can be 300,000. I think there's a boat. That's almost that was 

more so let's say 500,000. It's up to you. But yeah, you will see in a minute how it will look. And the step is in 1000. So do we have budget of 1000 or 2000 or 3000. So you cannot say a budget of 1500. So you know what, I'll bring it back to 100 get minimum and maximum dynamically? Well, I leave it as it is and the query is barites. Okay, publish what will happen? Well, let's find out. I go to Elementor I refresh the page and I scroll down then I go and I search for a range filter. Drag it over here I select the price awesome. So now people can select the amount of money they are willing to spend based on the lowest input and the highest output you can see everything that fits within that price range really nice. Okay, let me select it again. Price is filters for jet engine the value 

changes at once when you release the mouse well to show to filter label guess price and then I can change the filter label maybe to filter by price. Okay, then we go through the cell destroy this four pixels can make it bigger, but force okay with me. And a default colour let's make it white. Or really light grey. That means that if somebody slides to the left over here or here at the right area outside of the dots is this colour. Do I want to have a border now No. While I have a border radius, no. Then over here two points with those points. I can make them bigger and then of course height also and then the background colour I wanted to be the primary colour like that. I want to have a bigger border radius. So they're around as soon as they around I'm okay. Then we can go through the 

values those values over here. They can be bolder of course and bigger about 80 and 600 Okay, I'm happy with that label. Make it real way. I think 20 Mm. Bolts. I think eating. So it's same as this one. Label ating 600. Change the two way we can maintain the same style and over here. Sorry, label change it too, shall not so this to say masked out, okay? I want this bar to also to be blue. So I go to the slider and the range is range, that one can also be blue and maybe yeah four or five or six. Okay, they can be they can be a little bit more spacing. So let's see, there's no button, no Apply button, group filters, vertical space. Alright, well there's only one filter so there doesn't need to be group stuff. But what I like so the slider for instance, I would like to have some space so let 

me see margin at the top five and then I should go to the label uncheck this and at the bottom also say 545. Okay so if I go to the website commands II, so let's go to the homepage and then ATS I can say okay, doesn't matter which car or which thing I want to spend a maximum of already 30 1000 or 39 and the minimum of this then there will be no car that exceeds or is lower than this number, but I really don't like this filter. So what I will do I say make it from 50,000 or 550,000 so it's easier to slide so let me refresh this now the maximum is 50,000 It's easier to slide so if I bring this down that Tesla is gone but if I bring this up, everything I will see is between 23,043 So you don't see any other number. So that's the price range filter and we can apply it multiple ways. So if I 

go to the filters again go to add new and I go for mileage copy paste and paste again arrange the suffixes am kilometres the separator is a point this is zero and the minimum value is zero and the maximum value is let's say one on the 50,000 Okay, now we're also mileage without capital M and now it becomes easy the only thing we need to do is duplicate what we already have update the page select the price range filter and change it to Biolage and there you go copy base Estelle somehow the colours do not reflect maybe it's a small Bach book that's we can do is with this but we can also do this with a year. So again there I go. Again I need to set it up once and then it stands forever after we change it. So automatic arrange notice okay. Where I can see your space no separator the same 

minimum value 90 at the maximum value 2021. Here here with a small way I mean, let me refresh the page. Scroll down. Okay, better obligates selected and change it to here Okay, there needs to be space update update. So if I were to have a part of this, not much kilometres, let me refresh this. I can see I also have a card that has a maximum of 26,000 kilometres that I saw the Tesla because it's below 26. But what I see I can do it on the cue metre. So I want to go back I'll get rid of here. And then I go to the filter to metres or mileage. Look how many filters we already have. Wow. And then the step is a 1000s. Update. Very fresh. And then we'd need to start to think, what are people filtering on first? Is it body type? Or maybe transmission? Or maybe it's a year. So we can drag this 

more to the top? You see now it's per 1000? So, yeah, what's the first thing people think of? I think the price is important one, so I drag it up. Over here, the price. Also the mileage No, I think, bring it over here. This one too stilted up. Because I think that's more important. We know that you're searching for something like this. So it is more important than price Biolage then the year and then things like this transmission engine. Let me do the engine first. Transmission, the colour, the state I think colour the Texas too big. So I go to the cell. You get more familiar with it, the longer you work with it. No copy. basis though. Okay, so let's talk about those numbers behind this area. So if I would go to the website right now, and I say choose cars. That's okay, I can choose a 

convertible all this stuff, but I want to see numbers I want to see how much there is everything. So if you wanted also keep watching. So I can click over here, I can scroll down and go to the indexer options, I can apply an indexer but let me do it first over here at the body type. So you can see the results immediately. Here at the content, our indexer options do I want to apply an indexer but before you do that, you need to go to smart filter settings and then at the indexer you need to turn this on and select ads. Okay, then I turn this on nothing happens all to show the founder. Now something happens. And here I can say if it's empty so if there is nothing you can disable the search you cannot select it. But I just want to show it I still want to show it even though there are zero 

change the counters when do I want to change the counters and then select our filters changed. So if I select something over here then a new calculation will be made on all other areas. So if there are like 80 cars, so I select cars then those numbers will be recalculated like how many cars are there with the settings so it will remove all the boats and all the other stuff so let me just show how it works. I'll turn it off over here sorry I click over here yes turn on Yes. Yes. Show otter here I do the same. Yes, yes. Show all our filters changed. I did what everything Yes, yes. Show on show Yes, yes. Oh okay. That's it. I can do to wherever I want. Then I refresh the page. And what happens? Well, nothing. Because right now, I say cars, I see zero cars, everything is zero. But if I go to 

Audi, I still see cars over here, but it says zero over here. So what we need to do, after we change things over here, we need to go to the backend to Smart Filters. And then we need to index the filters again. So every every time we make a change over here, click on the red button. Now it's indexing everything. And now when we refresh the page, if I click away, I see oh, there are 29 cars, okay. So how much are there off? BMW etc, there are four. Okay. And then I can see from W BMW because those numbers changed based on the settings over here. When I say I want to have a convertible, it only says one. But if I would have all makes it, we'll change this to four. So the numbers change, based on what I select over here. So if I choose electric, there are no convertibles, nothing, only ones 

now that this this was. So they all talk with each other because we decided here at the archive, that they should change the calendars based on other filters. So I think this is amazing. What I will do, I will do something crazy, I will turn them all off. And it also works on the homepage, when you create a filter, we're going to do it later in a minute. So turn it off. Okay, I click on update, I turn them off everywhere. So since we have this filter over here, I also want to edit somewhere else. So I can copy this filter. Then I can say command D homepage. Close all this for now. I want to go and edit this page. I create a new section over here. And I say right click based. Awesome. What I want to do now i i can show them like this, or I can go to stelle. I scroll down to groups filters, 

because this is a group filter. And I want to change the position from below gelatin next to each other. So go to the option a line. And then looks like that's kind of like that. So I go to the group item with two percentage and I say 100%. But now there's no gap. So in order to create a gap, go to the horizontal but an S horizontal space can increase it, decrease it. And that looks much better. I want to change a few things, I want to go to content. And in this case, I don't want to have to apply on value change. So I'll go through the results. After they click on an Apply button. I don't want to show the filter on the label. If I do that, you see type of transport over here, but I have already in the label. So I leave that that then I want to go to the page to ADS, I want to edit this 

page with Elementor. Because I want to copy a few other things. I go to the ads archive. I want to let people select things based on the price. So I've copied this by paste it over here and the year copy, paste, okay. Then I go to this elements to advance background and I say backgrounds are also done. Click on it. Remove it. And now I want to include the background in the section. So go to the style of the section, background type, I can also make a gradient like that sound that appealing but if I will make it blue, if it's in the style of the website a why not? So let's do that for now. Okay, then there is my first element. Then there's my second element and if I click over here, I can go to advanced, I can go to the positioning, and I can say the width should be custom and I can make 

it If the percent the same thing. Wait, let me fix this first with the colours and stuff. So I go to the Stell. First I go to the label as much, definitely be white. And I want to go to the values Val use, make them white that wants to go to the slider, we think that is not selected can be white with a little bit transparent. And then the range I want it to be white or maybe green. Then I want those circles those dots also to be green. And then I also have a little bit more space between the label. Let's make it 10. Okay, and then from values, the top 10 Can I say right mouse click, copy, right mouse click, they sell. And then I go one time over here, I go to advance betting I make it 15 or 25. Right mouse click Copy, right click paste the cell gay then I want to create an Apply button. 

So apply button, drag it here below. No below that. If I cannot manage to do this, I can go to the navigator and drag this on top. Now it's over here. So I can change over here this filter is for jet engine and I need to apply it apply types Ajax Iraq's and over here I want to say search. The question is Where should it be redirected to. So when people fill in all this information, where should they go. But of course, they should go to let me go to the home page and then to the ads page nine copy this link. So with the information you get over here, they should be redirected to this page with all the settings they have created over here. So I say based over here oh that's it then we can go to the style make it a bit bigger ating instance or 16 When I hover over it, you know what I want 

the background to be like that when I hover over it I want it to become blue I go to Advanced uncheck this Netta left I increase it although I think it's aligning I can have a little bit more space on top maybe over here I click Advanced uncheck this and at the top I say 15 And at the bottom I say 15 or even then copy basis now and at the over here at the button at the bottom of the button out to increase a little bit space. Okay, update so let's take look how does it look on the homepage Okay, well, the first thing I think is more space over here, less space over here. But let's try it I want to search for a car. How about Mercedes? And there's only one model. So I click on search and then the see only model. But if I would go back can say I want to search for a car that's at least 10 

years old or at most maximum amount of this area. What happens before I click on Apply? That's what I see over here, I see the results. So that's also an option what you can do. So then we should make this less high, should in decrease this area. And then you see the result immediately. Well, that's also great thing. But now if I click on search, I go to this area. Why is this happening? Probably because we make use of AI x. So if I update it, man, we're getting, we're creating a beautiful website. It's crazy. So right now, if I say cars, nothing happens over here. I see Adi. And now if I click on search, I see all the artists, only one at the archive Ed's pitch. So I have to say I like the idea of Iraq's. So people can do both can do both, they can see the result immediately. I want to 

go for a boat water transport. But I don't have much money. That's a lot. And then I see those two, wow. Oh, I think we should not use it because it's creating a problem in our website. So sorry, I ox, we have to go for a page reload. So we have created the filter. What I see a few things. First, is area. At the bottom, I say zero over here at the top, I say zero over here at the top, I say zero over here, at the top, I increase it on both sides with 20. Same goes over here. Increase it with 20. In the offset area. Over here, I only want to show three, all to show six results. Update. So if I refresh the page, it looks better in my opinion. So now we can select based on the transport over here. And then the brand, the brands will only be visible when we select something over here. Because 

it's hierarchial hardest whatever, then Honda, and then there's only one model. So when you use those three search filters, you narrow it really down. I don't know if that is what you want. But it's up to you. I just showed the principles you can make any website with same principles. Now. I can also say, I don't care. I just want a car. It's really old. Well, there's none. But then I can adjust over here. Well, about this. And then there are a few. I like this 130 $1,000, by the way, still surprised. Another view. I was like, Oh, this is a nice car. Let me get it. I think like that. Let's get it. I'm searching for a family car because we're getting our second baby child. And that will be great. But then I can sell this Tesla and have a beautiful house. It's called Gold SUV. I don't know. 

I'm not that into cars, even though I'm making more upset about it. So, so far, so good. We did a lot already. Both we're going to take a step further. How about we're going to make it look better, because right now I'm like, Yeah, it's nice, but let's see what we can do with this. So what I've done, I went to a stock photo.com. And I searched for a few cars as you see my recent search Tesla. And those are fake images. But the quality can be really high. So I saw this image and I was like yes, I want to have this in my background. I want to make it more appealing the beginning of our site, of course, we're going to take a look at the header that looks really weird. But right now I want to make this area better. So what I did, I added a few images. Now I can add those to this area. So I 

click over here. I go to the style of the website and I change this to a slideshow or you can choose one image, because the more images you load, the slower What's that becomes, I click on the image I upload the files, I select them, and I already have them over here, those five so I pay like nine euros for this image, but then it can give you it gives, it gives the first impression to your website. So I think it's an important thing. Okay, I insert the media. But then I need to get rid of this colour. Yes, and I need to go to the layout. Now to change the height to a minimum height, I can increase it. So let's say by 50 that I go to the Stell because right now I don't see the car and I go to the position I can say centre centre. And then I can go to size and I can make it cover so you 

see most of it, what I like as an attachment is to be fixed. So in scroll looks like that. I like and don't mind this area buff, it's it's sort of what I can do, click over here for now, go to Advanced, uncheck this and decrease this area. So it looks better in my opinion, okay, so we scroll down. Now I can go over here to the column, everything is over here and then I go to sell and I want the background to be black but then I want to make it transparent so I drag it to the left they can see through it then I go to Advanced and by the way if I want to know more about Elementor I've so many tutorials about it but I have one that's focused on all the basics Elementor tutorial 30 This one three months ago just all about basics of Elementor how to work with padding margin. So right now I 

want to go to the bearing no sorry margin and I increase it like this maybe also here a little bit file to see the results this is what it was and this is what it is now well I think it looks better. What you can do if you want to you can go to the sell or within the free version of Elementor I think this is great. You click over here then can go to the slideshow let me see if I have the right section now sorry I was in the column. So let me go back to the section still remove this build to the slideshow click on the plus upload files and then I want to upload the other files 123 and four for cars. I can use this only once so I cannot use it on 20 website I have one licence but I think it will make an impression and what I tried to do also find normal cars but offshore of course a nice 

like photo only see almost only see beautiful car. So I was like okay, this also looks beautiful. At the other hand, the question is does this resemble the website because this is a really beautiful image then you can buy this car so that's a question that you can ask yourself so this one is will be more fitting I guess if I would bring this to the front of the Tesla also. So this is our first where's the dark background? Oh, I changed it of course. Because I changed it to slideshow. Yeah. So you see, sorry, let me go back to the section. And then over here I can say every five seconds the image should change and I wanted to take one second. So 1000 milliseconds and I want to do fade instead of sliding you can also make it slide and then this will happen after five seconds I like fading 

and then taking one second make us cover updates so it looks like that. But now it's not sticky anymore or fixed. So what I like to do I like to use a Ken Burns effect over here. I love this effect. This effect made me start a YouTube channel. I was like wow, since a theme has this option I want to make a video and show people how it works. I never finished that video. I only uploaded one part but it worked for my photography business. It was beautiful and I think it gives a beautiful effects It slows down your website a little bit. If you want to check the speed of your website, go to the backend to plugins, add new search for Query Monitor instal it now activate it. Now you see something over here. So if I go to the homepage takes not too long to load, it's, it's really good. So I'm 

happy with that. Okay, and now it still works. So I can say cars. Let's go, you know, doesn't matter which car, it should be a new car. So let's say at least, then I click on Search. And then I will see only cars that are from 2015 and up to 19 2016 2019 17. And then like I saw them price descending, so I'll go for the most expensive one. Awesome. So you can be creative, when you want to change the look of your website. And you know what, I want to start with the Tesla one with this one. And with this one, then like that, I like I like this, this is the first impression. So on gets. So okay, I can choose something okay over here. So I'm really nice types of transport, popular car branding, I could have a title over here, and it's saying grid. So first, let me make this bigger, I go to the 

cell, make this 24 copy, it's a cell and then copy. And over here, paste probably here below. So I drag it up. I say newest ads. So there's our homepage. And I'm happy with it. Right now I want to do a few things to make the website look better. So if I go to the ads, I see this area, I really don't like it. So what I can do, right mouse click Inspect. And I see it has everything to do with a page title. So what I can do now I can you know what I will try to make it easier. Go to the customizer. I scroll down I go to the additional CSS and over here, that page dash title, open opening parentheses, and then I say font size zero pixels and then a scene anymore. But what I don't like is that there's a big gap. So what I can say is margin margin top minus 100 pixels. But that's too much. So I 

say 70 I think is better. So that's a little bit of gold. But I'll show you exactly how I can do that. I'm not a coder. It's just a little bit of information. It's like I can say in French module server stuff up. Yeah, it should be almost like more flair. That's it. So a little bit of code is a little bit of knowledge. I have enough to do things like that, but I'm not a coder. Okay, so I go to the homepage looks good. This area looks beautiful types of transports. When I click on cars, I don't see cars really big over there, I just see this, then I can sorted by price descending. I can go for the black bars. So I scroll down. I say colour black also can make this a checkbox. It's It's all possible. So all the black cars over here. I can say I want to go for the oldest ads. Nobody wants to 

buy that. So maybe I want to buy this okay. Or I say it should have a lot of mileage. Wow. Again, sometimes I just want to do because I like the website so much and I can reach out. Send the message and when I sent this it will be in his mailbox. We can get in touch and then we can do the selling and then when it's worked. He can read from this website. So what is next? What is next is that what I see over here, it does look a little bit too weird in my opinion. So what I want to do, I want to add a few things. So I click on edit with Elementor, I can do two things, I can click over here to the cell, make the different colour background, or I can copy this background, so copy this colour over here, paste the colour, they go to advanced, I change this to zero and then add padding, I 

increase it 20. So the background will be included otherwise, you see a white stroke, I don't want that. Also hear 20. So there's a small change over here. Otherwise, I'd load like like it when two areas two sections have the same background colour. And over here, I do the same like this 20. So there's a little bit more space over here. Otherwise, it can be a little bit crowded. So what do we see on the homepage, people can decide for themselves, how to filter what they're searching for, they can decide based on the type of transport what they want to choose, and popular car brands, or the latest one, so maybe this one just came in. And they are like, Hey, that sounds good. That looks good. Let's do this. So I'm happy with the homepage, of course, we're going to optimise it for all 

devices later on to do one more thing or a few more things at the ads page. So I go to the dashboard. Then I go to Croco block, female lawyer and I go to the ads and I open them it's with Elementor. I want to add pagination below this area. Otherwise, people only see the first 10 results and that's what I don't want. So I searched for back there see begging nation, I drag it over here. And actually it's it's quite okay, everything is alright over here, I just need to select jet engine. And then the controls are all fine Previous Next, if you do website in different language, we can do that. All fine. And over here, we can change a few things. So let's go to the item. And to show you where we are, how we can do things. Okay, that's where we are okay, I bring this back to nothing. I won't 

have a border border type. They said about two pixels. And I want to have a light grey colour really light. It doesn't doesn't does not need to, it should not distract. But it should be visible. Then I want to go to the border radius. The more I increase it, the more I see those rounded edges. So five, okay for me. When I hover over it, then I want to go to the typography of the item over here. Make it 600 Okay, make it a little bit bigger. Not too much. 1416 Yeah. 16. Okay. No 16 600 I can say yeah, capitals, but I'm okay with that. So when I hover over it what should happen when I hover over it, I want the background colour to be blue. I want the border colour to be blue. So the whole item background is blue and then the text colour to be white. That's it. Then if I go to this era, when 

I'm on the current area, I want to have the same so when I'm on page four I wanted to be shown like that. It's we're on page four, okay, betting you can make this area bigger. So what I can do, I can uncheck this and at the right I can say 15 The left I can say 15 So it looks like more it is a square. I have a little bit of space left Okay, looks good to me. Update. Of course, we need to check it out. test if it works. So I want to go to the homepage I go to the ads scroll down. And I go to the second page, and then I scroll up automatically. And then I go to the second page. And as you see over here, I see I'm there so great. What I want to do now oh man, there are still a few more things we are going to do. But right now I want to take a look at the header. It's a gay, but I want to 

have more freedom later, we're going to add a search bar, really nice one connected with a pop up. And then when people search, you see results immediately. Really nice. Just this is my most in depth tutorial I've ever made. So the first thing I want to do, I want to create a custom header. So we can do much more in the future. I go to the back end. Me to insert a few things or go to Croco block updates and installation. I've checked it on Croco block. And then the pricing if you have this package, jet elements is not included in jet tricks is not included. But all the other things we use that Smart Filters, jet engine, jet theme core jet pop up and jet jet tricks not but those four, those are included in the dynamic package, which is only $85 per year. And then you can make this website 

it's correct. See that you can do that. What I want to add, maybe you think the jab menu, but no, that's for a different tutorial. I'll do jet blocks. Jet search for later. This jet shirt search included Yes, it is included in the dynamic package. But I'm searching for Richard block, do I already have it, I guess of course, activate it. And then activate chat search. We're going to use it later. Okay, now what I can do now I can go to Croco block female there. We build two templates already. But this time I want to add a header. So I click on Heather. Add new header, like all this one main header. Or since I only use one Heather, Heather create the template. And it's going to be a basic header. But I want to be in charge of how it looks, it's going to be almost the same. But later, we're 

going to make it look better. But it's there already. So I click over here. And I want to have two columns. I go over here I searched for an image and I drag it over here. Then I select the image I want to go for the logo of the website. This one insert, and I want to align it to the left, I want to give it a link custom URL and that is to forge slash no matter where you are in the website. When you click on the four chillis link, you go to the home page, then I go to the sell through width in pixels. Make it to hundreds. When you hover over it if you want to, you can do an animation. Rather not so close it. I'm just okay with it. Click over here. So this error can be smaller. So there's more space for the menu. So I click over here, make this 30% Then I go over here and I search for 

navigation menu with the colours. I drag it over here. As I said we're going to keep it simple. I want to select the Main Menu F A horizontal menu and I want to align it to the right okay and I go to sell and we can have a background colour if we want to. I want to have a colour that is the secondary colour. And I want to make it bold over here. So on to have the real way. font. How about ating? How about 600 in weight? And how about upper case? I think 500 or 600? Maybe and then a little bit smaller. And then 500? Yeah. Okay, what's just happened when I hover over it we can do quite a few things. As you see over here when you hover over it you can change the background colour like that bar and I'm good I'll change the text to the blue one like that. Here's a sub menu. So how does it 

work, and when it's active, I leave it as it is just the normal colours. Then the drop down, you don't see that well. So what I can do, I can click on publish. Then I can go to the settings, go to the conditions, and I want to display this on the entire site, update the sake of it, I go to the homepage, click over here and there is a new menu. But I want to go to the customizer, go to the menu. And then I want to drag ads over here. So for now I can I can show you better what you can do with this. So I close this. And if I want to edit it with Elementor just hover over here and then I can add the heading. So I like this overview. That's why I like to make simple use simple titles, otherwise, it becomes a mess over here. So there we are, again, when we have over here we can decide how it 

will look. So I click over here and then we can take a look but will trigger all mobile stuff. Go to the cell, the top level the drop down I can colour this colour do you want it to be different colour? Well, if you want that it's possible. We can have border stuff drop down, I can size how big should that I can be, well, I'm okay with that. Then I want to go for the drop down. And here we can change things. So right now, the the width is like this, if I increase it or I decrease it. So you see it's, it's become really small. So I leave it empty. So it's free to stretch when it needs to. Okay the background colour just to show you what is happening. Get sometimes I use the background colour to to see where I am what I'm editing. Okay. Let's talk about the items. Okay, the text colour 

should be the secondary one. Okay. And the font it can be as big as this one maybe a little bit less big smaller. How about 16 uppercase 500 Okay, so far so good. What happens when I hover over that area? I want to make the background colour blue. I want to make the text colour. White Okay, I think it can be smaller Okay, I'll do something with the bedding. So top five bottom five about 15 and here five here five Okay, how about 10 just playing around then everywhere Okay, when it's active, I do nothing. I can have a divider. You can see now you see now I can make it blue. Well, I don't need that. So that's good. And now I go to the website command E or Ctrl E on page it looks like that. So if I click on the water transport, ultimately go to that area, I can filter it out. If I want to go 

for the cheapest one well there you have it. $4,000 and it is yours. Okay, are you guys ready for the next thing for someone to remove the plugin where a monitor can be activated and you can delete it What we're going to do, we're going to make this website, multi event. That means that customers, viewers can create an account register, and then add their own stuff, in this case cars or boats to this website, and they can sell it and everything will be set up in a way that is automatic. So for this part, what I will do you need jet tricks, it's not included in the dynamic part, but you can buy it as a standalone product. So if you go to Ferdy Corp comm Ford slash CB, or go to Croco block comm and go to products, jet tricks, you can buy it for $19 per year. So I will show you what we're 

going to do I edit the header with Elementor. And then I want to create a new column over here, remove this. Now to add a button, simple button, just the normal one from Elementor. What I say over here is create an add on to an item a source would have plus or minus one. Okay, I want to go to the link for slash register. I go to the cell. And I go to the background and I make it green. So it looks appealing, then I want to go to real way. Make it 16. Make it 600 And make it uppercase. I want to align it to the right I can do that at the content. drag this over here. Or I also can do, I can drag it over here. I click here advanced, go to positioning, make it in line. And also here advanced positioning, make it inline. And I can get rid of this area. Okay. But now it's all aligned to the 

left. So I want to go over here, vertical alignments or horizontal to the end like that. So there's also a possibility, maybe that's better. I click over here again, and I go to the hover area on to make it blue. Wow. And then I want to duplicate this area. Over here, I want to go to the register page. So people that are not registered or not login, I want to show this to those people. So what I say at Dynamic visibility, you need just tricks for that. I say enable this. And I say show element if the condition is met. And if is when people are not logged in. So this will be shown when people are not login, create an ad. And then when I click over here, it goes through the register page that I click over here. I go to Ford slash my accounts, for instance, or post new ad. Okay, let's, we 

will change this later. Now I go to Advanced dynamic visibility. And over here we say if the user is logged in, so you see the same button, the one redirects to the register page. And when you're logged in, it redirects to the page where you can add a new car. So we need to create a page where people can register. How can we do that? Well, let's go to the dashboards. Often revenue, click on page and we will create a register page. I click on Publish twice. So now we are not logged in and click on the button Create a new ad you go to the register page. We're going to create it with an Enter. But before I want to go there, Command C Command V I need to go to the settings. Sort of people can be enabled here at General to create an account because right now it's not the case membership. 

Anyone can register. A new user default role will be the author if you make them administrator they can see all access to your website changed everything. So we give them the highest level in order to upload their own at and as the author. So I save the changes. I refresh the page. And then I go to the settings here at the left corner. And I click on Page Layout Elementor canvas, so no header, no footer, only this page, then I create a new section, two columns over here, I say the height, minimum height, vertical height of 100%. Then I will go to the cell to the background. And I grab a beautiful image of a car. I like this one insert because here the images the cars a little bit at the right so there's a lot of space over here for the Register Form. I bring the size to cover. And then I 

go over here, I search for a rich Register Form. I drag it over here. And then you see how ugly it looks. Before I want to edit this, I go over here and I drag a heading in it. They say register here bring it to the centre, go to the cell and then make the text colour white. Why? Well, I can go to the Column Settings, go to the backgrounds or to sell background type colour. Select the colour black, make it a little bit transparent. I really like this. I think it looks professional. Then I go to the Advanced area and it's betting I say 330 and add margin I also say 20. Okay, I make this bigger register here. I'll check this embedding the forum a little bit closer. Then I click over here, you don't see but their sticks over here. If I want to get rid of the text or I can make the label text 

white. So if I go to labels, I go to the Text Colour and I make it white you see it over there, but what I prefer is not to have it at all. So if I go to content and I removed label will be gone. Same for email gone. All the labels password label repeat password label gone in 60 seconds. Then I go to the Stell inherit bedding I uncheck this. I not check it, increase it until I think yes, I like it and then add margin at the bottom like that. Then I want to go to the fields. Typography. Let me see I have this handy because here you see the text has typed how big it is. And here you see the text that has not type the label or the placeholder text. So I can make the colour darker. Let's make it red to see what is happening. Well, nothing is happening. So I don't need to do that over here. 

But the placeholder colour if you make it read through seat so I say secondary and then over here again, Open Sans 16 and 600 Okay, then I want to do the same with the written text. So this is the placeholder text but when I actually start typing let me see I think that this this area I'm not sure why is it Why is nothing happening. Well, let's check it if I start typing over here yeah, yes, exactly. So the same text Open Sans hochma, they Open Sans 16 and 600. And the same colour if you want to change the background colour, you can do that. I like it the way it is or I can make it white. Over here to register button submit The backgrounds make it and maybe green and obviously it's updating in all the textbooks grades, only there's a blue area over here in the background. So let's go back 

to the labels make sure okay here everything is okay. And make sure that the background colour everywhere the fields is white so I copy discolour. Okay, submit typography, 16, no uppercase, so I say normal or normal okay, what I can do, I can make the button look like it's spread or bring it to the centre. I think this looks great. So, if everything is correct, when I go through website, and I'm logged in, I click away I go to page that does not exit exist yet, as you see. But if I go to the website incognito, like that, by mouse click incognito. Then I click here, I go to the register page. Wow. Now if I register Ferdy Korpershoek. My email is Ferdy korpershoek@gmail.com. My password is and then confirm it. Before I continue over here at the fields, I can say Where should you be they're 

redirected after registration where you can create a custom URL and then create a thank you page like thank you for being registered. Or again, redirect them to their account page. So we'll take a look at that later. Right now I say Register. And also one more thing. If people hover over here, the Submit area wants to be blue. So they see something's happening. Okay. Right now I click on register, then I go to the homepage. And now, if I go to the back end to the dashboards is all I can see all this stuff. I cannot touch it, but I can see it. I don't want people to see it, because then they can see all the ads. Even though they cannot fix it, they can view it. So I don't want that. So what I can do, I can create a new ad. Look at this. So now people can go to this page and add their own 

car. So I click on Copy. Then I go to the homepage again, edit with Elementor Oh no, I need to edit the heading. But when I'm in Elementor. I can click on Edit Header. So create a new ads. This was a register page when people are logged in. They click on create a new ad, it goes to this page, I can remove this area. So let's see how that works. I'm still incognito. So if I go to the homepage, and I'm logged in now, as you see over here, if I click on create a new ads. I can go over here. And I can edit so I can add a title Tesla performance model three. It's an amazing car, I can upload images. I can then price all this information. And then when I publish it, it will be shown on the website and it will be ultimately replaced. But that's right now how it works. And I think that is amazing 

because now it's a multi vendor website. People can sign up at this moment. They go to the homepage, and then they can click on create a new ads and then they can create a new ads. So an ad of course is with one d and if I want to I can also call this one register. But then people probably don't know why should I register. So if you say create a new ad and they see that they need to register so I think this beautiful this looks fine. In the next part of the tutorial, I will show you two things. First, I will show you how someone can register on your website and create their own ads on the backend of the website. So they log in, they go to the back end, they click on create an ad and they see the backend of WordPress and there they can do everything What I like about this way is that it is 

easy to set up, it just make a link to the right place where people can add a new ad, then they can also edit the ad. And that's quite easy to do. What I don't like is that it doesn't look professional. And people need to be instructed on what to do otherwise, they can forget to fill in some important information. The second way is to is what I will show you is how to create a form on the front end of the website, they can get their own accounts, when they go there, they can create a new ad. And then they can do it all on the front end, bro, what I like about that is that looks so much cleaner, and better. People don't need to go to the backend of the website, they just can do it from the front that the thing I don't like is that it is harder to set up, we need to set up a form, or we'll 

have to link everything which is other. But I'm here with you, I will show you step by step how it is done. What I was practising, I had a few errors. And I was like, Where does it come from. And through that process, I learned how it works. So today's tutorial to this part of the tutorial, I will show you step by step if everything is still working, because if we create a really comprehensive form, and we publish it on the front end, so people can add their own ads, and it doesn't work. We've kind of know where the error comes from. So now and then we have done a few things in the form, I will publish it. That's it. So we will know how things are going. My suggestion is that you watch both parts, how to do it with the back end and how to do it with the front end. And then you can decide 

for yourself which one to do. So let's dive right into it. So since our marketplace website is a multi vendor website, I can add a new car. But before I do that, I want to have some instruction over here. Why because people don't know that there's also information over here that they need to fill in. So what I also could do, or what you can do, when people click over here, after they're logged in, you can have a video with instructions. So what I will do, I'm logged in as my my own user, so I go to the back end and I go to jet engine post I've said it's a little trick I do the works I think so, over here we have the meta fields now to duplicate this one and Alt and drag it on top I open it and then call this one in structions so here I say in capitals instructions in instructions and then 

I start typing in a label besides filling in all the information in this area, there are also a few fields that need to be filled in you can find them at the right area of this page. You see two taps, ads and blocks and block How does it look hover over new Control or Command on Mac at unblock. So, people need to go to the Add area mind control right so when I go I go to this area click on the ad area and fill in the colour. So I need to change colour models state makes and types the colour the model the make state the type of transport and the featured image. You can start typing in each field and you will see suggestions popping up. If you don't see them you can select the right suggestion. If you don't see them, you can fill out the right in permission. Good luck. Okay, update the post 

type. I go to my incognito area. My refresh the page I say or reload. And that's what it will do. And then over here, I see the instructions. Okay? It's not it's not state of the art, but it gets the job done. So what I want to do I want to add a Tesla Model X performance. And then I say, when you drive in this car, or it will knock your socks off, even when you are not wearing socks. Oh, it says choose Media. Oh, man, I need to change this fields gallery to a checkbox. And then I need to have one fields and it says okay and then update it I copy this beautiful text, come on our reloads by information still here awesome. I just say okay, then I choose Media Assad to choose a few images for this car. I select them from my computer. And I think the third one is amazing. I open it but I can 

add more multiple files so I can also say or until 11. Open choose Media. Awesome. The price $120,000. Yes. The mile is $12,000 a mile or kilometres. Maybe I should make this clear. That's about kilometres. The body type. It's an SUV. It's from 2019. It has five doors. It's electric. And this is the fleet five, five, whatever that means. It's automatic. It is four wheel drive. It has power steering level sunroof, electric windows onboard computer climate control cruise control. This one has parktronic seating a rain sensor? A light sensor? No headlight washer. heated mirrors? No. Our assessories multifunctional steering wheel. i Yeah, those seats were cheap, Mary. Such watermedia Yes. Wow, it's a very nice car. Okay, then I'm not finished, I need to go to the app. As I said over here in 

the instruction. And I colour it is white. When I type it, I see this area model is a performance. It's not entirely true. So I say Model X. That's it. If I say come up, it will be a new tech, which is amazing. For the next visitor. The state it's from Galilee Forney. The mix is Tesla. And it is a car. On the cars the featured image the best image I can find it's the first one I uploaded. This one set featured image. So that's it. I'm the user I just registered and I click on publish and publish again. And I have to say I was a little bit worried like hey, but now the visitor that signs up who I don't know can go to My Media and remove everything. But that is not possible. They can check it they can even save it. So if they are having secret images of cars or bathroom, they can save those 

and watch it but they cannot remove it so they can watch it but do not change anything. So now if I go to my website, look at this. I go to the homepage. I was this close this. Close this. Now if I scroll down wow there it is. Awesome. So what I see if I click over here, look at this. This is what I just filled in. The image looks great. I can navigate a different aspect ratios. That's okay. Then over here, the type of transport just all the information we just filled in on the website is displayed beautifully. We address the scars as well knock your socks off all the advanced and basic options. But what I see over here, there are two people I don't want that this only one car owner right now it shows multiple things. So I want to go over here Edit I want to add or change the single add 

is this area. I want to fix something because I don't like this at all. And it shows multiple offers because I did not select the shoot only select One author. So if I would go to the user query, and then roles or exclude include by user ID, so I say, percentage. And then author underscore ID, percentage. Now to fetch the current author of this car, well, that is from this car, it's Ferdy Korpershoek. But if I save this, now it's showing the template over here. So if I go to the homepage now, on every page where on every page where a car is shown, it will fetch the information of the author of that car. So the one that created the ad will be shown over there. So if I would go to the Tesla, the other Ferdy Korpershoek, should be shown as you see different image. Awesome. But what I can do 

over here, in the Incognito area, I can update it. But I can go back over here, I'm still logged in as the new user, I can go over here, edit the profile. Now to scroll down all the way and I want to change my image, I can do that over here. But then I need to link it with a gravatar account. And not everybody wants to do that. So I want to add two areas, extra areas over here are one button custom image, I go over here to the website where I'm logged in as the administrator, I scroll down, I go to jet engine, and I click on it. And I see a list of options. And I want to add something, I want to add the profile builder. I click on safe, then I want to scroll up, I want to go to the skins manager presets down to us and I want to import the user profile with editable content, I click on 

imports. Close it was first I need to go to the permalink settings. Go to post name, save it one time. And just because I'm in a really good mood, I save it a second time. Okay, then I go back to jet engine. I click on it, and I go to the skins manager again, presets. I also insert the Edit ball user setting space for user profile. Interesting. I click on the imports. I close it now if I go to the Incognito area, and I refresh the page. I have some extra functionalities. Over here, I can choose my own profile picture. So let's choose it. And let's choose one that will make sure it is a different image. So if I search for 30. Okay, let's use this one, I open it. So with my thumbs up, that's the new created user. Keep that in mind. I choose the media. And then here below, I click on Update 

Profile. But then still, if I go to the website and I go to the Tesla, the new one, I still see my old image is linked to gravatar. So how can I fix that? Well, I edit edit with Elementor. And then I want to add the owner card, which is a listing item, this area over here. Then I want to click over here. Now to I don't want to use the editor because it needs to be linked to gravatar ultimate use of the profile picture. Well, since I don't have one, click on update and I don't see it anymore. But what I can do, I can go to the homepage or to the dashboards even though I have on over here, I go to my profile. Also I have this area. So I choose Media. Upload files, select files, I want to add this image so I update it or open it. Choose media. And I save it so now that they saved because if 

I would go to my Tesla, which I uploaded, I see my image over here for the corpse hook. And if I go to the new Tesla from the new user, you see the person with the thumbs up is in PNG, so even see the background. So that's how it works. They're both named Ferdy Korpershoek. That's, that's the thing. If I want to change his name, I can go over here. I can have my first name and last name in this place like this update I refresh the page. First I want to have mine number over here, but I think that can cause a lot of trouble. So what I did, you can send me a message now. And then you leave your name, your email address and your phone number, and then the owner of the car can call the person that is interested. So that's even better. So I will leave it at that. So now people can register, 

then they can upload their car. And people can now be interested in this car, we make sure that everything is organised. So I click over here on Tesla, I only see two Tesla's and as you see, the person that signed up is now a guru. He just filled in some information, I have to say, using the front form is better. And we need to make it as easy as possible for users to upload their image. And to upload new cars, I will use the front page form so people stay on the website can fill in all the information there, you can also make sure that everybody that publishes a new car will not it will not be published immediately. But you need to consent with it before it will go online. So people don't upload weird photos of I don't know, I don't know about what, there are people in the world that can 

do that. So you keep in charge of what will be posted on your website. So are you ready to create a front end form, I've been playing like crazy about this subject, because it was so hard to get it right. And I am confident that it will work. So right now when people click on create an ad, they go to the back end, I don't want that I want to go to the front end. So we just said it in a tutorial. But if you're skipping to this part, then you need to go to jet engine. Go to modules. And if you've not done, so you need to turn on the profile Biller, click on safe. For the sake of the tutorial, I deleted few things, I will show you what will happen when we turn this on. So now, the profile Biller, we have a new option, the profile builder over here at the Jet Engine, we have three tabs. Here, 

we can create an account page. But we don't have that yet. But what I can do, I can let it be created by jet engine. So I go to jet engine. Then I go to the skins manager, I go to presets. And here it says User Profile. What else have content configure user profile module to allow registered users to publish and edit posts. Okay, that's one thing. So I click on Import, then I need to go to the permalink settings. And then to save it, I always saved twice, sometimes a third time. And then if we take a look at pages, we have a new page called accounts. And now if we go to jet engine, profile builder, we see that is linked with the account page. So now if I go to the website, I say forward slash accounts. Hit enter. We have our own page. Wow. So we have our main area where no data is found. 

And we can add a new post. And if you do that, look at this. We can create a thumbnail or a featured image, the post title and the post content. So now we can create a new blog post. Well, we don't have blog posts over here. But this is possible by default. So if you want to have a multi vendor, Blog Post website is also possible by default, it's installed. But we need to instal something else. So I go to the back end. I go to jet engine to the presets at shortcode. Generator I mean the skins manager presets. And then the second all editable user settings or base page user profile. So it means that people can adjust the information over here. So people register, but then they want to upload an image or they want to change a name maybe how can I do that? Well, we need to instal this area 

over here. So I click on import. Now you don't have to go to the permalinks. Now it is there. So if I would refresh the page. There are user settings. So people can upload their own profile picture, change the email address and change their name and then submit it and then it will be changed. But what I want to do now when I go to Accounts and from our own lab, let that be the place where people go. So if I copy this for slash account, and I have over here and I change the header, so when people click on create a new ad, they should not go to the backend of the website and create a new app from the backend. Here is register and here is the backend now it should go to account of From the account page, they should be able to create their own app. So I go to the website, I'm logged in, I 

click on create an ad, I go to my account there, I can create a new post or a new ad. So if I don't want people to create a new post, I can go to jet engine and then to the profile builder. And then I can go to the Account page. Over here, add new posts, I can open it, I can say, I edit from the menu. And the same goes for the edit post, I just found the menu totally hidden. So if I save it, and I'm on my accounts, people cannot create a new post. But they only can change the user settings. Well. We want them to create an advertisement. So how can we do that? Well, we're going to take a look a lot about edit post, because the same principles are applied. So we're going to create a form where people can create their own ad on the front page of their website of our website. So the first 

thing I want to do, I want to go to the templates. And this time for the first time, it's vary from Elementor. I don't know why they did it, but it's just the case. So I hold Command, click over here. And now we see four new templates, user Edit User edit posts, at posts and user posts. So if I open edit post, alt command, and it's with Elementor. I see this page. So I want to grab this section, which contains the menu of our account. And this form, I'll say right mouse click save as a template. And I call this one account, front end form at save it. So this now in my templates, we have quite a few accounts front end form. Okay, I closes. Now I want to add a new page. I call this one a page, like all this one, create a new at the end, create a template. Then I click on the folder over 

here. I go to my templates, I insert it closes. So there it is. But if I click over here, it is linking to the form new posts. So now we can create a new post, but we want to create a new app. So let me publish it for now. Then I go to the profile biller again, I refresh the page, I go to the Account page. And then I want to create a new area, create a new sub page, like all this one, create a new ad. Slug, just say that it will be created automatically. Now the template create. Now to create a template we just created to create a new ad. We do not hide it from the menu. It's visible for everybody. So if I safe, and I refresh my account, I see a third tab over here for an option. Third option, create a new ad, the only thing is, we will create a new post. So here it says account create a 

new ads, but it's fetching the form that helps us to create a post. So we need to select a form that will help us to create a new ad. But how can we do that well in to create that form. We can go over here to forms then I want to take a look at new posts. So I opened it all in commands in a new tab. And let's see how this is build up. Okay. So I can use this as a starting point. So what I can do over here, I can duplicate it, so I duplicate it. Here it is quick edits, and I say create a new F update. And then I can click over here. And remember I told you before we have this website, your domain or slash demo website. Then I can scroll down to jet engine forms. There we can see the example form. So let me see. Here's called new posts and that it's referring to creating a new advertisement 

and Luke is looks really overwhelming. Look at this, this is the four so you can go to the back end. Let's upgrade and add from the back end which is ultimately great already. But it's a little bit more complicated. People need a little bit more instruction, or you can let them do it from the front end, but they need to create this form from scratch. riddled we what we can do, we can export this form, so I can go to jet engine forms. Over here, I can click on New Post export. And there it goes. But I want to show a little bit how to sell. But we can take this as an example. And I like to bring examples to the left. So left is the example, add new post, alright, is what we need to create. Before we start over here, I have here the accounts create a new ad with this form, I want to change 

its form. So over here, I have Elementor, open or you click on Edit Create Page, and I will close this, I'll close this. So the example form, our form and the result of the form. So I select this over here, like like the create the form great yet. So this is now the form that we are creating over here. And here we have the example. Okay, we don't have to create this, but I will show you how you can create a form. So all the stuff over here, boats, post id, this is just for WordPress to see what kind of advertisement is created, it WILL GET and POST ID that's necessary. Before great, amazing form over here, I want to test if it works, because if you take look at the example over here our form as a possibility to have a successfully submitted form. But there's also a possibility to have an 

error. And if we create a really comprehensive form, and it doesn't work, we don't know where the error is. So rather test it now. So I scroll down over here and there are posts submit actions. And I want to take a look at it, click over here. And what it says over here right now is that the type is insert an update. So that's an action that will be done, we can insert a post or update a post, well, that's what I want. Then the post type, right now it's post, but we need to place it at ads. So we can insert a new ad. And when we do that when people click on Submit, it will be published, I can also say it should be pending review. And then I can have a second area where I say send an email to me. So I can see if if the if the FBI agent is okay, and I can publish it myself. Right now I say 

publish it immediately. Then there, then, and then here are field maps we're going to take a look at later. But I want to test if everything works. What we can do post id, it should be select post property, don't do anything with this. Otherwise, you get crazy Eris tell me I'm talking about experience. I'm not. I'm seeing this with a purpose because man, I've been fighting with this area, but the right now it seems to work. Then there's a thumbnail area, it is linked to the post thumbnail. And then there's the title link to the post title. And there's the content, link to the post content, apply the changes. And then the second thing is we can redirect people to a page, redirect them to a page, which page static one and then I can select the page over here. And I select nothing, because I 

just want to see them that that this area is okay. So I click on apply the changes of here form successfully submitted here below. It says form successfully submitted. Go to the ads to see your submitted F. Smiley. Yeah, of course, it's good to smile also on the internet, and then update. So let's check out if this works. And of course, we don't have all the information about how many doors does it have. But I just want to see if it works. So I want to go to the website. Base it and then just click over here, right mouse click open incognito, or create a new user. So I click on create an ad. Since I'm not a user, I'm not logged in, I go to the register page I say Justin Bieber just sing a ghouls debts Justin Bieber info at 30 wp.com password and I click on register there or go to the 

homepage. And now if I click again, I can go to my special area. I can create a new ad and that's the forum we just have created. So not much information. So I select the thumbnail. How about this Ferrari okay, then I create a title, Ferrari. And you say, Hey, this is an awesome Ferrari So the question is does it work now if I click on Add New Post form successfully, so I'm going to go to ads to see your submitted app. So right now, if I click on ads, there it is Ferrari $0. Because all this information we need to create yet in our form, this is the date of today. I click on it, I see no image over here. So no price, no amount of miles, just saying Bieber. Awesome. If I click over here, I can go to the user settings, I can choose a file to upload about 3020 21. I say my name is 30. I love 

Ferraris. I submit it. Okay, I'm happy with this, it's working. So now we can build the form. And when something is not working later on in the tutorial, or create a form, we know, it has something to do with the form, not with something else else. So if I click over here, I should see my image over here. Yes. And my name just seeing Bieber just today. And all this information is empty, because there is not the form for it yet. So what I can do now. So what I will do, I will continue with this form. And then we'll try it out later again. Then there's the media so we can add the thumbnail. So if I click over here, we can select the type. So we can have a text area like what's your name, we can create any form. Now, by the way, when you use all the stuff, you can also create forms just for 

creating a form. And after that, all the information will be sent into your to your email account. But right now we are creating a new advertisement. So I'll just start with the thumbnail. And I call this one thumb, nail. And the name is the name you give it and then afterwards, we need to link this field with the fields of our post type in this case, thumbnail. When they're linked WordPress knows when somebody fills in the thumbnail over here, it needs to go to the thumbnail area of the new advertisement is going to become very clear when I started talking about everything. So as a label, you can work with labels. And we work with label a seat over here. So I like to give an instruction uploads a featured image. So when I update Oh, no, no, no, I did it wrong. First you need to apply it 

otherwise, it is is lost. So it's good that I have this oh, I can teach you that it works like that. First need to apply the changes and then update. So again, some nail upload a featured image. Okay, that's all fine attachments, maximum of three megabytes or three images, but I want to have one image, and two megabyte not one megabyte. Otherwise website comes really big. These are fine, apply changes first, and then update. But before I upload the thumbnail, I want to give the car a title. So I have the title over here already, I can drag it up. So I click away I edit it. And then it is a text with a text field. I call this title and I say title of the ad. Okay, that's it, apply update. And now when I refresh this page, what you'll see over here is the title first and then the thumbnail 

see. So now it's the case that we are going to create a form that has all the information from our ads post type. So the year the mileage the transmission and then we need to make sure that everything from this form is linking exactly to the post type of ads. So all the things will be stored in the right place in the website and everything goes the right way automatically but we never need to set that first. So we also talked about the gallery and if you want to know what we need to add in this form, we can go to jet engine post types hold Command or Control click and bring it to the left to the ads. So we want to have a gallery and over here see the code of gallery the name ID copy it I go to my form and I click on Add Fields I dragged here below media so first feature they mentioned 

then a media area, I say gallery oh here or I base it. So I know for sure just the right ID, then I say upload images of your ads, or your car, if you're only uploading cars or whatever you sell. I can also upload multiple images because people need to be instructed of what is possible. Okay, it is required. And I want to select JPEG and hold Command or Control PNG, and I want to have a maximum of one megabyte the maximum of 12 images. Okay, apply the changes. Let's continue. So after the thumbnail, what else do we want to show? The price really important. So what kind of price is the car at a fields, drag it below the gallery. And I call this one. I can also say number, but I say text, let me see what this over here. The price is number. So I will also say number, type n number. I say 

Bryce, because I know that's that is the ID, the labourers price of the Earth, I can give a description, I can have placeholder text, I can say you need to sell it for at least $1,000 and maximum of $500,000. I leave it empty. I just say apply the changes. Let me update it. Let's see how we're doing if I refresh this area, so we see the title of the ad, upload a featured image, upload it upload multiple images of your ad prize of the ad, and then post content. So so far, so good. What else would he have if the title Okay, now I want to place all this information, like the colour models state make some type of transport, how can I do that I click on Add Fields, drag it over here. And then I changed this to select because I want to let people select an option. I call this a state the label 

is from which state is the ad. And then over here to fill options form I choose terms, and then I can select the taxonomy. In this case, the state nice apply to changes. But it also can do if I go to the state, I can make it smaller in the form so I can say 1/3 like that, and I can duplicate it, I can drag this to the right, I can drag this one to the right. And I click over here and this time it's still select but it's no state but it's a transport type. So I say type ash off ash transport type of transport okay. So over here at terms I only need to change two types of transport I click on apply and I go to the third one and that can be the colour which choose a colour and then here are terms okay and I just need to say colour okay fly out duplicate it and again this time I want to make 

it 50% Also this one then drag this one over here. So, I say model which model select a model terms models apply changes and then the second one which is the brand so I say make choose or make slash brand and then say makes over here okay apply? I think actually this is more important than the other one. So let's see, where are those areas over here state first I want to select type of transport. So type of transport goes over here. Then comes the brand. I make a smaller D and I will say I will make everything 50% So type of transport it's a car which which brand Okay, it's Tesla, from which state is it, okay from Kansas or Kansas, which colour and then colour goes down. This one goes up. In all I'm in a good mood 1/3 1/3 1/3. Okay, if I update it. Let me click over here, close this you 

see over here, type of cars, okay? Make. So you can select all this stuff. So that makes it easier for people to fill this in. And we're going to change the look a few later. But this is how you can import all this information. So we can have the next fields, what else do we want to know and then there's year, the body so number select so options, the mileage text, engine type, we can have a radio, we can have a range, drive time doors colour. So as you see there still a lot to cover. But as I said before, when you check things now and then so I removed a new fields for now I want to go back to the Insert update post. So I click over here. And now you see there are more fields that we can link. Supposedly, it's the same thumbnail. Since we changed text over here, we need to realign them 

as we did before. So thumbnail, the title is the post title, the content is suppose content, and then we need to go to the gallery. And that is post made up. And now I go to the post types. I search for gallery, I copy the gallery ID as really necessary to do this the right way. Otherwise your form can get stuck. And that's not what we want. That's really frustrating. So every custom fields we created over here is an post made up. So again, post Mater this time the price. So we go through the form, sorry, we go over here to the post type, scroll down near see the price, copy it basic. So state is not pose made up but as opposed term. So I can select the state models also post term, I select models. And there's make also post term makes. And there's the type of transport post term type of 

transport and then a stickler also post terms and colour. So when it's over here, it's taxonomy. It is also also poster I want to set custom fields called post made up. Okay, first applied over here, update it. Now let's go to just sing Bieber over here. created this first app bar says there were no custom fields in the form, we did not create a lot of form fields. A lot of information is blank. So how are we doing so far? Great. And so if something goes wrong, we know it has something to do with the form maybe something something's not aligned, correct. So check that double check that I create a new ad. This time it is the Tesla Model S i upload an image which is actually a Tesla or a five I bought it at I stock photo. And then I can also have gallery. So gallery we are you. So the other 

four images, open them. We will I can continue. But I think this car is round $129,000. It's a car. It is from Tesla. I live in Colorado. And it is the performance. So black one, I say this car is amazing. I click on add new posts. Fingers crossed. Oh man, it worked. Oh man, it worked. We're on a good way. So now there's so much more information over here at the ATS while we go to our Tesla Model S app. There it is the Tesla Model S and what you see is information is not over here because here we did not have that form. But here you see more information as we have because right now we have more forms. So type of transport, the colour, the description, not that much information yet but the price, the title, where it's from. And it all has to do with the information over here. So we need to 

fill in More forms just like our example over here. And then we can create a full working front end form. So as you see, as you saw, just I created a new account just in Justin Bieber, and I uploaded my first post already, I have my image over here. So that's how it works. So what we will do now we will continue to create a form. By now we should know how it works. But what I will do, I want to import a premade form, and then I will show you how you can adjust it. So you can work with that and save some time, I think it's now clear how it works, what I will do, I will import the rest of the form or I will import a new form. So I click on update. And I go to jet engine forms, I want to import the form. And I choose this one. I click on start import. So there it is. And I call this one 

create at update. So what I can do if I want to I can, I can change this form. And what I can do over here, I can close this now, I can edit this with Elementor. And I can choose this new form, create ads. I click over here. And I select Create. And then you'll see the other one. Create that. So that's our imported form. Okay, that looks nice, but I want to make it look better. So I can go to the Stell. I don't know what happened where my voice but it's getting harder to talk. So I have a sip of water, but I want to finish it sterols so bad. So I didn't want to wait a few days. But I think I'm understandable i You can understand me. So now we can make our forum look better. So we can have a divider between the rows? If so, how should it look? Well, first, let me create a colour okay, then 

you see better? Well, for me, it's really important that it is easy for people that fill this in that they had that as easy as it. So I take a look at everything well, there are rows and our columns. So if I just check it out, always. So if I say nothing, it seems to be fine. If I have more areas, I can create more space between them. But I'm fine with that. Then we have labels. So the label is a text you see above this area. Now I want to make it bold, let's say really make it 16 And make it 600. Okay, just see that looks good. We can also create a gap just check everything out how it works. Thank you have a description, this area over here for instance, you can make it blue to see where the description is. And you can make the text bigger to see where it is I thought it was a 

description. But there's not. We don't have that as far as I know. So if I go to the type, I can have a description over here. And if I feel some text over in, in over there, how should it look? Well, this example website, I don't need it anymore. I don't need this anymore. So we have the form. We have the look. Okay, let's scroll down the alignment of description. So we go to the fields, the typography of the field, if I say something over here, this law model at all. Why how should that look, but I think it's a little bit too thin. So I can go to the typography, I can make it 16 I can make it 500 It's not that bold as the other text but that's okay. The placeholder colour if there's a text over here, now, see what happens when you change the colour. There are no placeholder texts. Also 

something you can decide to create over here. placeholder so the placeholder text means that if there's some title let's cancel this and you say at the title placeholder fill in your title. You update it. update this. Now refresh it you see in the title fill in your title. Well, if that's the case, then I like it that this greyed out because otherwise people think it's already filled in and I don't want that but what you can do, get rid of all the labels and just create all the titles in the form it will make your form look better, but this is what we're used to. So I leave you with this. Let's go to the style again. Fields I can not say enough, just play around with it, see what's working. Make it bigger. 10. Okay, I like a border radius of too much, five COVID border type solid or 

something else, increase it change the colour. Well, let's not do that. You see, by default, there are some settings already. So if there is no border radius, for instance, there still is, but it's, it's from the settings. So if I would say, zero, then it will be a square. Well, I like zero, there is a box shadow, especially when you click on it. So I'm not a big fan of Bach, cello. But that's okay. Then if we have different kind of areas over here, I'll do we want to display them next to each other, with some with a gap between them. Well, I like to keep things below each other can change the typography, it's a little bit small my opinion so I say 16 make it 500. Also, you can increase the betting on check this net the left I say zero. So for every different kind of fields, there are 

settings so the range again, we can play around with those colours. Some colour, make it blue, the value if there's a value, it becomes blue also. So that's how you can change everything. This looks great. This looks great. The costs, you notice titles, those look quite small. What I will do I will remove those from the form because I think it's unnecessary. Okay, there's not much space between all the columns, the rows, so maybe increase it a little bit let me see. Yeah, no, not that much, of course, but a little bit more. So let's say 16. Okay I think it looks great, I updated then I go over here and all the headings. I removed them and also the title you see over here, I want to drag it on top because I think it should start with a title. Okay, there's the title, then I also don't need 

this description. So I close that this heading will just say thumbnail and gallery and then there's the state transport type and make the model the year and again I can make it the 1/3 change the order okay, this is good I removed the heading as I said let me see if there are more headings. Okay, update refresh. One more thing on change the type of transport I want it to be 1/3 so 1/3 Then so to type the brand that I want to have to brand then I want to have the model. And this one is just like that update. Okay, what we've done first, we created this form from scratch for a part. Then we imported the form. Then over here we styled the form. And now it's time to link the form with our actual advertisements that people can place. So really important over here what should happen? Of course 

we talked about this already, so I will go through it fast. Here form successfully submitted. Check that at page two See your brand new F, something like that. Then I click on Add notification, drag this down. And I change this to insert of the post, as I told before, it's about ads post that is published. And then we need to link everything again, well, I've talked about this, the only thing that's different now is that they're different IDs over here, doesn't matter as long as the link to the right thing. So the post, Id select the post, thumbnail. And as I said, there are two different forms, except for the title and the thumbnail, here's the thumbnail of the post contents. Let me do that quick. Then that's the gallery. The gallery is a made up. Transport type is a term, as I see 

transformed that we talked about this already. So I'll just fast forward, and then we will see if it works. And this is what is dangerous, because here it says body or like what, what does mean by body. Or if I click on Apply Changes, I save it. Since we have imported this form, they decide to give things different names. So if I click over here, you see it's talking about body types. And if I go to jet engine, post types, and drag this to the left, and I click on Edit, I go to the Mater fields, and we see body type select this one. But the best thing is if it will be by the type over here already, but it's not the case. So I click on cancel. So I need to make sure I connect this the right way here at insert an update post. Otherwise, it will not be in the information. So people upload 

something and it doesn't work. But when it all fits when it's all linked together. It will ultimately go the right way. So we're talking about post meta net based here. Mileage post Mater mileage here it says engine type over here. It says something else. No, it says the same. Haha. But for the next one I think it was Medha engine volume. Yeah, that's different capacity. So my I prefer to give everything the same thing everywhere. So over here and over here, so there's less chance things to go wrong. Sir editor wrong place. Post Title, Location is a state. So it's a term state. Apply. Update. So we're going to just sing Bieber again. Can you do this again, with all the information I'll let's see. Create a new ad with a complete form, create a new ad. The title is the Tesla Model y 

thumbnails car five. You know the car that has not been there yet. This one. We can also go to call this Toyota. Our 234 Probably doesn't exist. So there's no problem. The gallery it is from Connecticut's. It's a car. It's a Toyota and Toyota boats. So Toyota 911 I should make an extra optional here like not set. So this first off for instance, and then check it by default. I'll show you in a minute how I can do that. It's from 2019 It is a SUV. I don't know it is only 40 34,000 kilometres. And it is a diesel is the volume transmissions automatic. It's a four wheel drive. It has five doors. It is black. The price is at $9,000. This is amazing. So it has power steering. It has letter in there and all this stuff and now I click over here if this works. That means our form works perfectly. 

form submitted successfully, but I'm redirected. So the question is does it work? If I go to the ads So let me go over here. Go to the ads. It works. Let's check it out. Let's check it out. All this information is filled in. So far, so good. This is filled in. It's from Justin Bieber, the price from his from, I don't see the images over here. So okay, it works, the form works, that's more important than for me to I already have the form works. And it's not complete then that it does not work at this. And I don't know why. So I go over here again, let me check gallery area. Let me check it out. It's media, I removed the underscore the label as the gallery. I can also say add images to the gallery. Any registered user? Yes. Apply the changes. Update, and we need to see if they are linking. 

So I'm over here, insert update post. The gallery? Yes, this makes so much sense. We forgot I forgot to do that. So post a made up and then gallery. This makes so much sense. Okay, apply the changes and also something went wrong over here. So I want to remove the whole redirection page are to go to the engine type. Now, the third option, which says electric value needs to be the same as over here. So if I would go to the engine type the third one is electric with a capital E. Okay. Save it. Guys. I'm really happy with the results. Of course, there are a few things that were not going the right way with the gallery for instance. But um, the form works. Now people can sign up, fill this in. So let's do it again. Creating that before we do it, okay, okay. Okay, since we're covering 

everything, so what I will do, I will go to the fields model over here. And then I want to make it not required so people can leave this empty. And then if I scroll down, the placeholder is not selected, select that. And that's okay for me so people don't have to feel the same. So if they can't find their own model, it's okay. Apply Changes. Update. So I click on Create new ad. That's not selected. Okay. There we go for you on the Pacific. Choose one. I think there's a Honda. I don't think so. I don't know. I don't know. And there's the gallery. We need to check that extra carefully. Since it did not work the last time it was not connected the right way. It is from Sweet Home Alabama. It's a car. It's a Honda Pacific specific. It's not selected. We leave it like that. It's from 2021 Did 

you know that? No. And it's definitely a I don't know man. I don't know how I want to cry now. Let's make it a convertible. Why not? Mileage is so new. It is only 1000 kilometres. It's an electric car with a super duper engine volume. If that can be connected or linked. Four wheel drive. It has three doors. And it is black and the price is 340 29. And I this car is amazing. It will bring you from her home to your work and back. It has so many great options. It has a sunroof and it's convertible. And it does rain sensors as new as says value must be equal to 2009. Okay, okay. Okay. I exaggerated a bit. It's from 2019, app new, successfully submitted, I don't go to a web page that does not exist. And if I go to my ads there are this the Honda Pacific. Wild works. I'm so happy. I am so 

happy. It all looks amazing. I am really, really happy. So now we can reach out. And then he gets an email just saying beaver gets an email. Awesome. What else can we do with the form? Well, right now after submission, the form will be created, we can add something else. Well, as the owner of the website, I would like to be notified when somebody adds a new ad. So I can see if it's all okay. So type after submission, send an email to the admin email. That's the best in this case, you can also send it to someone else or a custom email, reply, it's all not necessary. I can say a new app is added at a new authority. I'll repeat that come from doesn't matter. And then I can say, here is the app, I can have a link if I want to, I can see the price at once. But I rather would go to that link. 

So that's okay. Apply. Update. So when somebody has a new ad, I get a notification through email, because I'm the administrator of this website. Now people are men, we can do so many things over the weekend, navigate to our website, people can find cars, they can filter things, they can filter, filter things on the brand, the colour, whatever, then they think, hey, but I want to sell my own car. So they can register, they can polish the old car through the back end or through the front end. And that's amazing. And I'll just show you how you can make the accounts of the vendor look better. Because it looks a little bit bad, we're going to make it look better, I want to add a few things, like an overview of all the guards have placed a way to edit their own ads to the front end, so they 

don't have to go to the back end. And it can remove ads, because if it's sold, they don't need it anymore. So they can remove it from the website. So let's do that. So if I go to my account by clicking here, I think it just looks ugly. I see no data found it's just looks bad. So how can we make this look better, I go to edit with Elementor user post. Okay, what I want to do, I click over here at the settings, I want to hide the title. And I want to click over here on to make it full width. Let me go back again to the settings, change the page layout to Elementor full width. Then I go to this area again. Sorry, I'm bringing back to box. But I want to change the background. So I click on still classic, I make it a nine, a NINE and a NINE, I think okay, like that. Then I go to the Layout, I 

want to change the height to a minimum height. Now I go to vertical height of 100. Okay, so far, so good. Then I want to go to the vertical now the column position I want to add it to the top. Then I want to go to Advanced uncheck this MC if I make it zero, what happens okay, I think that is better. Even bring it down a bit. And it's 20 Okay, then I want to go to the padding top. I increase it. I can do the Pixel Perfect. So really nice. I think 40 Okay, then I go over here to this area. Let me go to this column as fast then the bedding. I increase it to 15 then I click over here. I want to go to the Estelle and bring it to the left. When I hover over it I want to change the look of fuel so I scroll down right now. I see the background type that is white. I like that when I hover over it. 

I want the background to have this colour and then the text To be white. So the other way around like that, when it's active, I want to have a background also that is blue, and the text colour and it is white. Okay. So I click over here again, I go to fonts, and I uncheck this area on the top, I say, zero. And over here, click over here, go to Advanced, and then add margin, or padding, let's increase it 15, I answered this, and then the left I say nothing. And at the top, I also say nothing. Okay, let me go back over here. I'll change the gap between the items. So here, margin bottom. Five is fine. I think that already looks better. I click on update. And then I want to click over here, right mouse click, see, and then save as a template. I call this account template. I save it. I close 

this. And then I click on the eye of the tiger, and then go to the user settings. That looks ugly. So I click on edit with Elementor user or edit user that page. Then I do the same things over here. I say hide the title, and change this to Elementor full width will save automatically. Then I click on the plus over here. Click on the folder, my templates and I search for the account template over here. I inserted click on No. Okay, but all to drag this area over here. Like that, then that area below can be moved removed. I click over here, I go to advanced. And I bring the top margin to zero so the lines and then over here. I will change this later. Because first I want to click on the I want to go through third step. And I click on edit, create ads. And then I do the same thing. Click 

over here, remove the title. And maybe you want to show that's great as well, you can leave it it's it's not like everything that I do is perfect. But I just want to show what is possible. I click on the plus I insert my template which is called account template. And I'll import the special settings. Okay, and then I drag this area over here. There it goes. And then below. Remove this area again. Oh, I forgot I think I should also remove the whole section below. So what I'll do, click on right mouse click Copy. I update it. I go to the Edit User. I paste the cell. So that was better. And then here below, remove this area. Okay, so that looks better than you think. So now, if I go to just sing Beaver and I click over here it looks better user settings and create a new asset. Okay, I've got 

the background. So I can click over here. There it works the background. And then I forget the background. I don't know why that. So what I want to show over here at Main is all the s we have published. So Justin Bieber has added four ads already. I want to show them how well let me go to the normal website again. And then I go to the back end, exit to the dashboards. I close those two. Now let's go to listings. And I see that listing. I edit it with Elementor over here, right mouse click save as a template. I call this F listing for user, save, it's okay, I close this, I go back to the dashboard. I click on this logo. Here, I'm still listening. So I click on Add New, and are all to add a new listing, it's post for the ads, like all this one user at this thing. Great with Elementor. We're 

going to create nothing, we're going to import something. So I click on the folder, my templates at listing or user, I insert it, not the special stuff. Okay, well, that looks weird. I want to click over here. I want to make this 800. Let me see post ads. Let me update it. Close it. Then I'll edit it again with element and I hope it will load all the information like the Tesla, for instance. Okay, that's better. This is also fine. That hasn't doesn't have to be Tesla. Why did I make this wider? Well, I want to do something, I want to change the look of view a little bit. So I hover over here, I click on the plus. And I want to drag this image to the right. Like that, and I want to write this date to the right. If I want to know command Z. Okay, so I I'm like, Okay, this sounds good. This 

looks good update. And remember, it's called the user area. So what I will do, I will go to the homepage, say Monday homepage. Wait a second, I click and then I go over here, I still see nothing. So I go to edit with Elementor edit the user posts. Now it's alright says no data is found was found. I click on it. And it's a listing grid. And that's what I want. If it's not there, you can edit yourself, that was here already. So it also has a few pre made settings so that I like that, I just need to select this over here, user app listing. So I said is already here. So it's already pre configured. Because if we go to the post query, here, we can select what should be shown over here. So if I click on the post parents, it says over here gets posed with status published and both from the 

author from a current user. So I'm the current user for the court at this moment. And everything that's in the website is uploaded by me, except for the latest few cars. So right now if I click on update, I go to Justin Bieber, and I refresh the page. Now you see everything that he has uploaded. Ah, nice. So now we can see how things are going and he can actually can don't have that much. What I want to do now I want to make him give give people the opportunity to edit those things. So maybe it's not sold for a few months now if they have two or 3000 kilometres. Not that the next car more appealing, but let's be honest, it's it has more kilometres or miles. So then you can edit it or you can lower the price you think, hey, nobody's selling buying this. So I will lower the price. So it 

looks really nice. And that looks better. So main user settings and create a new ad. So that's how we made this better. What I want to do now I want to show you how you can make this editable from from within the front page, so that people cannot go to the top area anymore because I rather have them on the website. And then when we've done that, we can remove this top bar with a simple setting. Okay, in order to create an edit area over here so people can edit their own ads and remove it. We go to the front end and I go to the back end. I mean I go to my own user, my administrator area and then I go to jet engine forms. And what we can do to form we have already like the form to create an ad. We need to duplicate it And I click on it. So it will, it will be exactly the same form. And then 

this time I say, Edit, F, F F. Sounds weird. But hey, that's just the best title for this form. Okay, this is all fine with me. And I need to change one thing over here. This form originally was about creating a new post and new app. But now it's about editing this. So over here, originally, it was creating a post. So it was creating a post id. But now we already have a post ID. So I changed it to post ID and then it will update. Post really important, then again, important, everything is important in this tutorial, click on live changes, and I am a little bit addicted to saving I like to save all the time, every time also, when I'm editing videos come on s every time. Sometimes I lay a bed at night. And I say, Come on s mon SMRs is what I'm saying. I said oh, sorry. I was saving in my 

dreams again. Okay. On this point, the jokes can only become better. It's not even a joke. It's stupid store. Hey, I hope you It made you smile. So what I need to do in this form, I need to click over here, presets for field Val use. Okay, the source is the post, and then get post ID from is from a URL query variable. And that is this one. And I like it the way it is underscore post underscore id what it does it it fetches. So if I click on Edit somewhere, it's saying yeah, but with what which post should be edited. And then it will link to the post? Yeah, I tried to explain it. It just works. Okay, I did, I tried it, but it did not work. Now I need to do the same with it already before. So what I will do, I will go to form a hold command. So I opened it in a new tab. Then I go to the 

create ads form. I scroll down and over here, this area, okay, and I just will do what it says over here. So post ID. In this case, it can be the post id the thumbnail post thumbnail. So I tried to do it by heart post content is post content. But if I don't know anymore, I think this was terms no mater, then this gallery, or I can go over here. It's the same order. Copy. Paste. So what I'll do I will go over here to all the stuff transport type is a term make is a term model is a term here is made a body is there or not. No mileage is a made up area engine type. Mater Mater Mater force horse, polar is therm prize is made up options is made a title is Title, Location is a term. So over here I say state over here I say colour colour model make Oh, if that happens then or there's there goes 

something wrong with editing the form. So again it needs to be perfectly in line with everything else. That's transport. So now I just can go and copy year basis body type mileage engine type I can imagine this is a seven plus hour tutorial when I do not phosphor those things but what I did not like about some tutorials is then there's a tutorial like hey, this is what we're going to do. And I did 90% already for you. And this is not what you need to do and I was like okay, you skip the most important part. There are there were not much tutorials about this. If I really got stuck I was able to reach out to the people are really nice at Croco block and you also can submit tickets and give IDs for upcoming things. They listen to you this one I really liked so everything seems to be fine. I 

will copy this query because we need it. Oh, before I save it, oh, man, I'm gonna save it over here. Now I need to save it over here. Otherwise all the information could be gone. I was afraid of that. So now, if we check it, it's still there. So let's go to the homepage. Let's go to the account. Name. Yes, that is the account page. Okay, then I want to edit the user add listing, so the listing item, this area over here. So I click on User add listing, then I searched for the dynamic link, dynamic link. I drag it over here. I want to align it to the right goes to the Stell. typography, make it Open Sans, Open Sans 16 600. Okay, and how to change the content. So the source I changed from permalink to profile page. And then I select this profile page to home the main page. So this one, the 

label is edit. Beautiful, scroll down, I turned this on F query arguments there I paste this. What I just got from this area, I copied it. And I basically have here, then I say equal and then I need to find current ID with two percentage things. Oh, why is another working? Command C? When V? Okay. I must click Copy. Base and equals is gone. So, command plus plus plus plus show you this equals current ID. Why? Well, I'm not gonna try to explain it. You don't know it fairly? Well. I understand it a little bit. Yeah, yeah, no, I'm not gonna do it. Update. You can add an icon if you want to. Edit. Wallah. Sir. Sir, updates. Okay. Now I say command II, I go to the homepage, I wait for 20 minutes. And then I can click over here was 20 minutes, I got it out. And then I go to create an ad. But 

it's not about me. It's about just saying, Bieber. So if I refresh the page, it says added. And if I click over here nothing happens. And I know why it dawned on me all of a sudden, of course, something is not. Right. So what I need to do, I need to go back to the back end, we need to create another page where people can edit the form because if they create the form over here, on the account page, there is a form so they will be redirected to main again. So what we will do, we go to the back end. Sorry, I did not explain this to me. Once I had to figure it out myself again, I go to jet engine. And then to the profile builder. In here, I see the pages or the account page, I see main ad post edit post. So what I can do over here, create a new title, edit, F step, then I need to make a 

template. I can hide this from the menu. I save it. So there's an example when we started this, and it's called Edit posts, and that is also the template. So if I go to Elementor below templates, I search for edit posts, I can take a look at it. It's a really simple page with a form. That's it actually. So we need to do that ourselves. As you see over here is a form. So I need to do the same. So I go to the dashboard. I want to add a new template. In order go to templates otherwise, and new. Yeah, like that page, like all this one, edit app. Create a template Click over here, remove the title or No, I will leave it there. And then I say Elementor full width. I click over here, I search for the forms form. I drag it in here. And then I select form edit F. There it is. Awesome. Yeah, let me 

go to a different page over here at Grant at and go to create a new ad. I have here edit this area down to copy to paste and paste the style of this this form. So copy paste Estelle. Now click on the Plus, I'll get the accounts templates. So we keep in the same style, by templates account template, not import settings. Yes, and then I drag this form over here. Okay, as far as about editing the ad, so maybe I should also change a few things over here. Above that, I want to have a title that says edit the F bring it to the right. Make it a car secondary and create some distance okay. The top, okay, then bottom button. Like that. Okay, so I publish it. Then I go back to the dashboard. I go back to jet engine profile builder. I go to Account page. I go to edit the ads, which is not visible in 

the menu. And then I select the template edit app. Okay, I save it. We're not there yet. Now I go to the listing jet engine listings. I go through user atlasing edit with Elementor. Okay, then I go over here. And a profile page. I select Edit F. This can all be the same. I update it. Fingers crossed again. Because right now it should work. So I go to the main page. I'm really I feel a lot of tension right now. I click on Edit or it works. It works. So it's called the Honda Pacific if I call this the Honda specific I change the price to 429 Oh man. Okay, I need to change the text. Add a new ad Okay. successfully submitted if I go to main, and the price and the name are different on the specific and it's more expensive. Wow. should see me right now. Oh, man. It works. It works. It works. 

Man working hard pays off. I've been having so much trouble learning these things sometimes. And then when it works, it makes me so happy and that's how my life in the case I've been mean I've been what designer like eight times and I quit and I do it again and I quit. And then I found out about a new tool that made it easy. And I know this is next level stuff. So it can go wrong but when it works. So again, I want to make $100,000 Extra I click on Edit I say you know what? Because 189,000 Add a new ads. Okay, so a few things I want to do. Okay, it's it's okay to be happy but now it's time Go back to work. First watch and go when I edit. Yeah, when I edit the form, so when I edit the ad, click over here. What should happen? What if I want to decide if I scroll down? All the way at 

notification redirection to a page, redirect them to a static page, which is account. Okay. Updates. No, no, I like updating. Then I go to the button. And I say, edit the app. Apply the changes. Update. So now we're going to check it just sing Bieber, where are you? i Man, main. Okay, here's my ads. So let's bring this back to normal price. I click on edit. I'm bringing the price back to 329. It says edit that. I click on it. And now I should go back to the accounts. It's not happening. But it says status success. Okay. Oh, it's not safe somehow. Insert update. Sorry, redirect, static page accounts. Apply. Update. Go to the main area 329, edit. I scroll down. 339 or 37? AD is the ad, I go to the Account page. Yes, and as 337 Wow, wow. If you'll learn how to integrate this with 

WooCommerce, so that people can buy the products on your website, click Add to cart or buy now and integrated with stripe so they can pay it really. And the money goes through your account. And you can make sure that the money goes to the right person. And everybody's happy that I suggest you watch this tutorial in the description or you go to 30 corporate comm and then go to tutorials and their search for integration. And then after thorough about how to do that. Do you want to integrate your multi vendor ecommerce marketplace website with a commission structure so that every sale that has been made through your website? Did you get a commission out of that, because that's a really nice model to work with. And then I suggest you watch this tutorial, or you go to the description, or after 

thorough or you go to 30 chord with Tom Nichols, it's Durrells Croco block, and then search for permission. And you'll find a thorough I'll explain that. So now it's time for something really important. We need to optimise a website for all devices. So that's what we're going to do now. And I think that we can wrap it up. How does this website look on a tablet and on a phone if I go to auto Scout 20 four.com It looks amazing. And if I say right mouse click Inspect. And I click over here I go through the mobile version. And there see the header menu. It looks like this. Only form nothing else. Go through the search results. And then you see the filter over here. You see the information, the advertisements and if I like something, I can click on it. Then I go to the single item and it's all 

optimised for all devices. They even have an app really nice. And the tablets look like this. So let's to lead with our website I've not optimised at all. If I click on inspect and click over here. Okay, there it goes wrong already. Okay this is our ads page. Doesn't do that good. So there's enough work to do. Okay, let me go to single ads. Okay, now, that's not what we want, we're going to make it look better. It's it's not the worst. But man, you don't want to send people to this website on a mobile right now. So, first I go to the homepage, we're going to change it by click on edit with Elementor. For every page, every individual page will start with a tablet mode by clicking here, and tablet. And I think it looks great on tablets. Also this, this, okay, if you think it's too small, 

you can click over here. And everywhere you see this icon, it means we can change the parameter settings for every device. So the columns are 12345678 On a desktop, it says eight but on a tablet, I can say you not make it six then looked like that. So if that's what you want to do, you my guest, and he was adds three in a row, I think it's too much. Also starts to do weird things over here. So I click over here and change the amount of columns to do on a tablet. And they look beautiful again. Okay. Okay, so for a, the tablet, I think it's okay now. Then we're going to take a look at the header later. How about No, well, wow, that looks really bad. So first, I want to click over here, I go to Advanced, and I uncheck padding and margin. Okay, then I go over over here to this cell, I scroll 

down to group filters and I change it from line to columns. Then I'll change the vertical space. Give it some space. Okay. Over here, I click, I go to advanced. I scroll down to responsiveness, right? Sorry, positioning, I changed it to 100%. Same goes for price. That's let's bounce, positioning 100% I click over here. That's content, I want to change the alignment. I cannot do it here. So I go to scale. I scroll down and I see alignment for the mobile. Bring it to the centre. So that looks nice type of transport. Well, that doesn't look that nice. So I changed the amount of columns to three. Let's make it two. Okay, so people scroll over here, they can choose what they want to choose popular car brands. Click over here. How about three, and everybody's happy again, can scroll click on 

it. On here, it looks a little bit weird. Well, in order to fix that, I click over here, go to the Stell change the gap to zero. Everything is great. The newest ads, click over here I change it to one column. So so far, so good. Here's everything in one row. I think that's great. I click on update. And then I'll take a look at the header. So I go back to the desktop version. Hover over here, edit in the header closes. I think when people want to log in register and upload their own car, they should be on a desktop computer. So what I want to do if I go to the tablet mode, I click over here I go to advanced. I scroll down to responsiveness and I say hi this on the tablet and hide this on a mobile. So only when people are on a desktop computer they can see those buttons. Also your advanced 

responsive sorry I did on tablets and other mobile update. So it looks like this. I have over here. So look like that looks like that. Okay with that. Let's go to the mobile. That looks a little bit weird. What I want to do, click over here. I bring this to the centre click over here. This will go to the right, because this is not visible on a on a mobile, but since we're editing it, you see it. So I want to align it to the right menu, I mean the the trigger alignment point, and the menu alignment to the centre, mobile manual layouts full width. So I need to click on update, take a look at the preview or actually go to the home page by clicking here. Right mouse click inspect and I can click over here. And I can navigate like that okay, I want to change it. So I click over here, I'm 

bringing this one to the centre update and also here, I want to see horizontal alignment centre. So now, when it when it's updated, it's in the centre, you click on it, you see this, you can navigate through the website. I think that's amazing. So what is next, I close this, go to the homepage. People click somewhere and then they go to the ads archive page. So this this area, so I click on Edit, and I want to edit the archive. So this whole page, okay, let's go to the tablet view. Click over here. Now let's change the columns to one. And then I want to click over here. And as you see for the column, I can increase this to 40. So this has more space than this goes to the next area. So over here, I say you know what we're gonna have 60. So one column, that gives us a lot of space. So there 

is also space to over here. And then I click over here again, advanced, and I change the padding to 20. Also here 20 Because we have a lot of space left. So it doesn't look too crowded. Okay, updates. Then we go to mobile. And the question is, what do we want to first this area? Or this? Well, I think this is great. What I can do now, I can say no, it's here, people can choose a car and the model. And body type, I think the rest should be left then I can click over here. For instance, the the mileage if I want to remove that, I can say advanced, responsive, turn it off for a mobile, so they will not see it. But I want to have over here, over here, go to sell to the border. And here you see border radius. Let me first select a border type over here. And then at the top, I say you know 

uncheck this and I say five, change the colour to secondary. And I may get 15 Because I want to see that there's a show there's a separation. So let's say 20 between the selection that the filter, and then this over here, but what happens now if I go back to the tablets, I also have border so at tablet, I have to say zero and a desktop I always have to say zero otherwise you keep seeing that. So let's go back to the mobile. So you can hide everything you want to hide over here. So go to this area earlier. And this again. looks fabulous. Fat bootless. Click on the I don't say 30. Don't say it. The tiger. I click over here. Doesn't matter that there's nothing wrong. It doesn't matter. I need to go to the homepage and I go for that on that specific. Okay. Is that maybe the trickiest one, I 

click on single ads. And on tablets. It's okay again, I can click over here, make this 40. And I scroll down over here. I say 60. Okay, maybe a little bit too much. How about 30? And 70? Okay, can I can create some space on pairing then, and this is fine. Okay, so people can see all the information, it's all still great. Maybe it's not. So in that case, I can click over here, go to Distel typography and then says for tablets, you can make everything a little bit smaller like copy, paste style. But I'm okay with it. So Luke's goods updates. Maybe let's go to the desktop, I want to align this here. So here's aligned perfectly, but on a tablet. It is not so over here. Left, I don't know why it says that. I click here, go to Advanced positioning, make it full width. Then this one also 

positioning for with like that. Okay, then we go to the mobile of the last page we have. Okay, OK. This is not what I want. What I want to see is the title, the price, the amount of kilometres, and where it's from. But I don't want to have this area. But if I remove this, it will also not be shown up here on the desktop. So what I will do, I will duplicate this area, it's nice to have them. I click over here, I say this should be hidden. Responsive, it should be hidden on a mobile. Okay, over here, this one, I say at Advanced, it should be hidden in the desktop, and a tablet. So I've this one that's for the mobile and this one's for everything else. So I click over here, and I go to the Navigator. I call this seller guard. And I scroll down, I click on the plus create a section with one 

area. As you see over here, I call this one seller guard section. I open it, it has one column I opened that column. So there is now a space for the seller card I drag it over here. I release it. So in the column over here, below is the seller card for a mobile. But when I go to a tablet, it is here at the left and this one will be hidden. So in that way. For desktop this, the left for tablet is here it is here at the left for a mobile. It's not sending the wait. So we see this, I mean, click over here, increase the betting a lot. 30 So we see the title, the price range it has already then we see images. See this stuff? Also here. Let me see how it goes. If I go to Advanced betting there's enough space to bring it closer. And there's the description. All the options and over here. I say 

make it one column and then there Sierra people can reach out to me. Okay, so how about the forum? Well, let's check it out. I go to the homepage. I make it smaller. So I click over here. Okay. Sounds goods. I can say cars. Let's go for Tesla and I go and search. Okay, I scroll down. And I see the results Tesla Model S Tesla Model X performance and the Tesla Model three performance, okay? I click over here, because it's a loose booth. Because it's my own car. I scroll down, I like the images, I can click with my thumb over here, go back. Okay, I noticed St. Refer the lifts, or lift. And then I'm like, Okay, I'm interested, send the message. And I think this looks optimised already. So we don't have to do anything, I can leave my name, my email my phone number, and send the message. And 

then Ferdy, the owner, the author of the scar will be able to get in touch with me. So now we've optimised our website for all devices. There is so much I want to cover but I've other tutorials for that what I want to do now to wrap it up. If I am logged in, I go over here. But if I'm not logged in, I go to the Incognito window. Click here. Now I can register. But if I'm not logged in, and I want to log in, I can do nothing. So how can I add that I can go over here, say WP, but people don't know that. So what I want to do I want to add a login button over here. And I think that's yourdomain.com forward slash WP dash login of bhp. Yeah, that's it. So what I want to do, I want to go to the registration page pages just there as well Elementor. Okay, and then I provide area over here. So I 

can also do this button triggered here, below. And then I can say login, link it over here. aligned to the left, I grab the same you know our grip a different colour like that. And now I go to Advanced uncheck this and at the top, I say minus until I think it is perfectly polite. Well, as I said before on the phone, I don't want people to log in so it's okay like this. So click on update. And now I want to make sure that people cannot go to the back end. So then I need to go to the backend myself. As an administrator, I go to jet engine option pages, I mean the profile builder Okay, look at this the account page or find users page No, hide the admin bar. So I can also restrict admin access that means only nobody can go to the backend. So if Justin Bieber wants to go over here he can login 

he doesn't go to the backend of he says you know what, I know a little bit of WordPress WP admin. You will be restricted but he's still gonna edit things. So why it man? This is it if you have any question, if you're missing something and it can be that you missed something, let me know I will make tutorials about it because I don't want to give you 95% of the information I want to give you everything. I think personally that this is an amazing tutorial. It will benefit you a lot. So are you still happy? Thank you for watching this tutorial. I hope you'll learn a lot of stuff. I call this a tutorial but I think it's a course it's an in depth course. I think it's more than six hours or seven hours man. I hope you're happy with it. It was really nice to make it and at the same time when I 

was getting stuck. I was really frustrated. But I'm really happy with the end result. I want to thank you for watching it and I hope you like it and if you like it please like this video. Subscribe for more upcoming WordPress related tutorials. And then I hope you have a great day and I wish you all the best with your website.

                          Helping Tutorial