dashellle
Daria Zelinska
Copywriter
Updated on
Tutorials

How to Build a Car Dealer Website with Elementor and Crocoblock

What do you need to create a full-fledged car dealer website? In fact, this is a complex digital architecture. There are custom post types with cars and their specifications, which can be filtered by VIP and Popular ads, Types of Transport, etc. Filters that contain a good deal of parameters. Not to mention user accounts and a workable communication form between advertisers and buyers. 

We know your pain. That’s how it struck us – why not create a dynamic website template, which you could grab, customize a little, and hit the road?! 

In this article, we’ll be showing you the ins and outs, share some tips, and explain the role of every included plugin. Ready, steady, go!

Table of Contents:

Functionality

Wrapper
JetBlocks: Creating a Login Form

Core
JetEngine: Adding Dynamic Content
JetSmartFilters: Setting Advanced Filters
JetElements: Tuning the Visual Side
JetThemeCore: Creating Single Pages & Site Structure
JetPopup: Adding a Contact Form

Extra
Archive Template
Kava Theme

How to Get Crocoblock Car Dealer Template

Bottom Line

Functionality

Our Car Dealer website is a pre-coded and pre-designed dynamic template, made with Elementor and a bunch of Crocoblock plugins. For a better understanding of how it all works together, we opted to explain every plugin in isolation.

Wrapper

As a teaser, we’ll take a look at the website’s exterior represented by header and footer.

JetBlocks: Creating a Login Form

The JetBlocks plugin will help you create these two key elements fast and easy. As to header, we opted for minimalistic yet functional design, adding the opportunity to quickly navigate around the website and place ads. 

To implement the navigation functionality, you’ll need to open Elementor and seek for the Navigation Menu widget. Adjust and style the menu items as you need.

Next, there’s a green “Place an Ad” button that’s made with the help of the Dynamic Link widget. Once clicked, it redirects a user to the login page or My Account page. The widget itself anticipates several scenarios and suggests possible user actions. If the user has no account, the widget encourages to sign up via a corresponding message.

The login form itself is made with the Login Form widget by JetBlocks. Drag and drop it to the desired page area and adjust to your liking in Elementor. All the necessary fields like Email and Password, as well as the Login button and Forgot Password? links are included.

Moving on to the footer, it contains links to different website pages. To the right, you’ll find all necessary social media, brought into being by Elementor Social Icons. We’ve gone the extra mile and added the Subscribe to Newsletter functionality using the JetElements plugin.

Pro tip

To recreate the footer on your own, you’ll need the abovementioned JetBlocks and JetElements.

Core

Car Dealer is a complex system with a lot of internal correlations. Since this dynamic template is deemed to push the buy-and-sell activities within a car dealer niche, it will be advertising the available vehicles. 

To make it work, we are going to create custom post types (aka CPTs) and beautiful layouts to showcase them. Next, we’ll be setting relations between the posts; otherwise, Houston’ll have a problem. 😁 It’s also necessary to output all the car-related details dynamically. Last but not least, the cars should be broken down into categories, and that’s what taxonomies are for. You guessed it right – we’re going to use JetEngine to shape the core.

JetEngine: Adding Dynamic Content

This plugin gives you power beyond imaginary. To take off, you’ll need to create as many custom post types as there are cars to be sold. Make sure to fill in the meta fields correctly, it’s vital. The meta fields allow for the dynamic output of the car parameters. All the data must be input in the admin panel with due attention; afterward, you’ll manage to display everything on the single page template.

JetEngine’s dynamic widgets help to automate the process like a lot. Pull out the car parameters from the meta fields to the frontend by means of Dynamic Field, Dynamic Image, Dynamic Terms, or any other widget of your choice.

Taxonomies are added here to simplify the filtering routine. Imagine you want to search for a car by color, model, or year. It’d be convenient and fast, wouldn’t it? Keep that in mind and proceed to create taxonomies. Feel free to add any categories you might need; we opted for Color, State, Models, Makes, and Types of Transport.

NOTE:

Take your time to configure the taxonomy settings properly. In the long run, they’ll take the pain out of filtering, allowing you to quickly sort all ads and customize the output.

The next checkpoint is layouts. We want our ads to be showcased in style; therefore, it’s crucial to create a new listing, which is going to serve as a template for the remaining CPTs.

Done? Now, add it to the Listing Grid widget and customize the item until it looks like you want it to. The best part is that you do it once, and all the style settings apply to the rest of the ads automatically. Pure magic!

Listing Grid can display ads in a number of different ways. For example, the search results page can contain a filterable car catalog, where advertised vehicles are presented as sequences of rows and columns.

Except for that, we can showcase a lot more in the front. Take blog posts. They are conveyed as rectangles with images and text areas. At first glance, it doesn’t seem to be a listing grid; however, such a layout is achieved thanks to that widget.

The same applies to VIP Ads, Recent Ads, and Popular Car Brands. In fact, take a look at the backend to spot the exact number of active listing items.

If you scroll down the Home page, you’ll see the Last News and Test Drive sections. These were created using the JetEngine plugin as well.

car dealer template. blog section view on the frontend

Besides, you can filter a ready-made listing grid and bring up any given posts. A VIP list, for instance, can be sorted by the Is VIP toggle switch. Prior to it, we filled in this meta field in each custom post type manually. Once you try to filter by this category, the dynamic template will readily output the posts having this toggle switch enabled.

Profile Builder

JetEngine’s functionality stretches far beyond, and we are about to spill the tea. It allows transforming the regular car dealer website template into a full-fledged marketplace. There will be two main categories of users:

  • ad owners, who are supposed to place and edit ads;
  • potential buyers, who are meant to view the car selling ads and reach out to their owners.
jetengine profile builder functionality. user roles illustrated

Although we do not deprive you of the administrator role, the main intent behind the car dealer website is to bridge the gap between ad owners and customers. It is going to be a dynamic ecosystem, where users can interact freely, oftentimes, with no supervision. To make it happen, we’ll be using the Profile Builder, a new JetEngine module.  

Here’s the outward of a personal user account:

As you can see, users get two default tabs; the first houses their own ads that can be edited at any time. The second tab with the account settings lets users add and edit their bio.

When editing a placed ad, the user sees a form where he/she can edit all the data, added previously to the meta fields.

If the user wants to place new ads, he/she is supposed to fill out a form with the necessary meta fields. Right afterward, the ad post will be created automatically. It will contain the outlined meta fields, which will be storing the data from the form that the user has already filled. More to it, these data will be pulled into the single page template, which makes the ad look its best on the frontend.

You can also edit the existing ads. After saving the changes, the advertisement CPT will be displayed with the updated details.

JetSmartFilters: Setting Advanced Filters

Sure, there can’t be a car selling website without the opportunity to search for the needed item almost hands down. Multi-level filtering tools are the next big thing for the Car Dealer template. To create those, we’re going to need JetSmartFilters.

For this particular template, we’ve added in Color, Mileage, Engine Type, Drive Unit, Transmission, Engine Capacity, Body Type, State, Year, Price, and Model Hierarchy. Let’s check out where they are located.

On the Home page, there are hierarchical filters meaning that every new filtering level appears only after the previous level is selected. Besides that, we’ve added two range filters for price and year and a regular select filter to pick the state.

With the help of the Apply button widget, we’ve made it possible to select all filtering parameters and apply them at once. Once activated, the hierarchical filter will redirect the user from the Home page to the catalog page with the list of filtered cars.

Here’s how it looks like in the front. As soon as we hit the “Search” button, we’ll change over to the Car Catalog page with the filtered results:

Now, it’s time to make sure the filtering tool works even better from the catalog page.

As you can see, this page contains a lot more filters than the Home page does. Here, we spot the following:

  • 1 hierarchical filter for car model selection;
  • 2 checkbox filters for Body Type and Transmission;
  • 2 range filters for Price and Engine Capacity;
  • 2 checkbox filters for Drive Unit and Engine Type;
  • 2 range filters for Mileage and Year;
  • 2 checkbox filters for Color and State.

Moreover, there’s the Apply Filters button, which is responsible for applying all filtering parameters at once, and the Reset All Filters button, which clears all filters you might have applied. To showcase the variety of ads, we’ve used the Pagination widget, so the users always know there are more cars to view and choose from.

Pro tip

JetSmartFilters works absolutely great with JetEngine. Besides, there are many more filters to add to YOUR website.

JetElements: Tuning the Visual Side

The variety of visual effects is delivered thanks to JetElements. Take buttons, for instance; they are made using the similarly named widget. Icons from the Popular Car Brands section are added by means of the Inline SVG widget. Also, we’ve used the Video Player widget to form the Test Drive block on the Home page.

Certainly, these are only a few JetElements applications. Its functionality is richer. Perhaps, the best part of it it’s the ability to output the information both statically and dynamically.

JetThemeCore: Creating Single Pages & Site Structure

Another pillar plugin that’s been used to put this dynamic template into practice. Gently, JetThemeCore helps us work out the entire site structure. Moreover, this plugin is indispensable for creating single pages for advertised cars, where all details will be pulled out from the admin panel dynamically. 

Here’s how a single page looks like in Elementor:

From here, we can see that important information is mainly displayed by means of JetEngine’s dynamic widgets. Basically, it’s necessary to create the Single Ad template just once, and it will be further applied to the remaining ads. To fine-tune the CPT content, you’ll simply need to fill in the meta fields by hand. Like so, you won’t be wasting time on the creation of a thousand lookalike Single Ads.

For example, let’s take the Suzuki SX4 post type. We’ll be filling in the meta fields that had been created previously with JetEngine. The entire process takes place in the admin panel:

Once we open this post on the frontend, we’ll see a ready-made page created automatically. The single page template will be applied to it, and the dynamic widgets will pull out all the advertisement details from the post types. How cool is that? See for yourself:

What else can we do using JetThemeCore?

Since it’s good for replicating blocks and sections, we can use it to affix Header & Footer on every webpage. Plus, JetThemeCore was used to create a template for blog posts. This means that every new article will be subject to the established structure.

Don’t freak out. 😉
The working principle remains the same: you just add the needed widgets to make it work as desired. If you take static widgets, they will be displayed in the same fashion everywhere you add them to. As to dynamic widgets, they’ll be showing different data on different pages depending on the filled meta fields.

JetPopup: Adding a Contact Form

We’ve already mentioned efficient seller-buyer communication, so here’s another useful thing to achieve it. On the single page, you can find the Write a Letter option, which lets a potential customer contact a car owner. 

What makes it even handier? It’s the format. The message can be sent via a pop-up, designed with the help of JetPopup.

Once a user hits the “Send a Message” button, he/she will see a contact form. If you want to make a pop-up on your own, read this tutorial.

NOTE:

You can create as many pop-ups as you want, add them to pages of your choice, and set various visibility conditions. Just don’t go overboard. 😄

Extra

Archive Template

How would you like to showcase the catalog of popular car brands? We’d suggest creating an archive template. It can be done with the help of JetThemeCore. Or, you can use the one we’ve embedded in this car dealer website template.

Pro tip

This particular archive template can be customized as you like. Just like everything else on our Car Dealer website.

Kava Theme

Want to brush up your website’s exterior a little? Opt for a laconic and functional theme. As a dynamic template owner, you get access to a variety of themes that can be applied in no time. For those of you, guys, who value usability over everything else, there’s a second to none suggestion – Kava.

Why you’ll love it:
Our Kava theme is lightweight and highly customizable. You can juggle all its blocks and sections freely, and it’s your content that will be more noticeable whatsoever. Besides, you can install it hands down – just read here how.

How to Get Crocoblock Car Dealer Template

morpheus suggests to upgrade the existing plan

Believe it or not, there are two case scenarios:

1. You are a Crocoblock user. 

If you’ve already been a paid member, you can simply upgrade your current plan to All-Inclusive. In this case, you will be paying the difference between the package you’re currently using and the desired All-Inclusive set (Yearly/Lifetime for either 1 website or Unlimited). And there’s more to it. The All-Inclusive set opens up all Crocoblock Extras, not just Car Dealer. 😎

2. You are not a Crocoblock user yet.

Go to the Pricing page and get yourself a lovely All-Inclusive Yearly/Lifetime set. You’ll access all Crocoblock plugins and Extras, which are Dynamic Templates, Design Templates, and Interactive Popups

Any trouble during installation? Go check out the Installation Wizard video tutorial.

Bottom Line

That’s all folks! The plugin exploration has come to an end. Now you know exactly how this dynamic template works. All plugins are fully compatible and can be easily merged to meet your goals. The pre-set functionality saves you time and effort. 

One more thing. We strived to pack the template to the greatest extent saving the room for development. The result you see is a replica of our vision, but you can get creative and rework the suggested architecture. Rush into the car dealing world quick as the wind!