# Listing Templates

The layout of all published listings will be displayed according to a single listing template. You can make your listings more unique by creating an original template for them.&#x20;

1. [**How to create a single listing template using Elementor.**](#how-to-create-a-single-listing-template-using-elementor)
   * [Switching between demo templates.](#switching-between-demo-templates)
   * [Creating custom listing templates.](#creating-custom-listing-templates)
2. [**How to create a single listing template using WPBakery.**](#how-to-create-a-single-listing-template-using-wpbakery)
   * [Saving demo listing layout as a template.](#saving-demo-listing-layout-as-a-template)
   * [Creating custom listing layouts.](#creating-custom-listing-layouts)
   * [How to set a global template for listings.](#how-to-set-global-template-for-listings)
   * [How to set global templates for multi-listing types.](#how-to-set-global-templates-for-multi-listing-types)

## How to create a single listing template using Elementor

It is possible to create several layouts and set them as the default for all newly published listings with Elementor.

### Switching between demo templates

When demo content is imported, the default template for a single listing will be created by the system. By opening **Motors Plugin > Listing templates** section, the following templates can be found for further customization:

* [**Carousel Gallery**](#carousel-gallery)
* [**Mosaic Gallery**](#mosaic-gallery)
* [**Modern**](#modern)
* [**Classic**](#classic)

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FMqOfxCYtuYPcZrrk7pG0%2Fimage.png?alt=media&#x26;token=0d1d7f65-6869-4a13-9b8c-7b6fac2bb4c3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The following layouts are available in **Dealership One**, **Dealership Two**, **Classified One**, **Classified  Two**, **Classified Three**, and **Multi Listing types** demos.
{% endhint %}

{% tabs %}
{% tab title="Classic" %}
Link for demo listing:

{% embed url="<https://motors.stylemixthemes.com/elementor-classified-one/listings/bmw-m5/>" %}

The preview of the Classic template:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FrjjNEuKG2cn78JczYZiv%2FMotors%205.17%20-%20Single%20lsiting%20template%20elementor%20classic.png?alt=media&#x26;token=e4cd2005-4303-435a-8dab-f00389350cae" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Modern " %}
Link for demo listing:

{% embed url="<https://motors.stylemixthemes.com/elementor-classified-one/listings/lamborghini-huracan/>" %}

The preview of the Modern template:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FNmoGUGKwLSn771FkKjN7%2FMotors%205.17%20-%20Single%20lsiting%20template%20elementor%20modern.png?alt=media&#x26;token=565dde12-45c2-4fd7-bb50-0fb315bde7b6" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mosaic Gallery " %}
Link for demo listing:

{% embed url="<https://motors.stylemixthemes.com/elementor-classified-one/listings/lexus-is250/>" %}

The preview of the Mosaic Gallery template:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FFp8SxS2r9go7FXKUvDIE%2FMotors%205.17%20-%20Single%20lsiting%20template%20elementor%20mosaic.png?alt=media&#x26;token=a37f88bd-547e-4112-b1ff-e2173a91b4ed" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Carousel Gallery " %}
Link for demo listing:

{% embed url="<https://motors.stylemixthemes.com/elementor-classified-one/listings/acura-ilx-2021/>" %}

The preview of the Carousel Gallery template:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FY03ICdShnrN55wHO4l2w%2FMotors%205.17%20-%20Single%20lsiting%20template%20elementor%20carousel%20gallery.png?alt=media&#x26;token=5ca868ab-21bb-42d8-8eec-610cbcbeaee7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Creating custom listing templates

You can either edit the default templates by clicking on the "**Edit**" button or create your own template by clicking the "**+ Listing Template**" button.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FhvebFDUr1vn49Te3VOu9%2Fimage.png?alt=media&#x26;token=07d9c837-e224-403c-ab55-fd3dd4579638" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When customizing the templates, use widgets from the "**Motors Single Listing**" section to display listing data.
{% endhint %}

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FKyGV6HyAO16FmJES5ufw%2FMotors%205.17%20-%20Single%20lsiting%20template%20edit%20with%20el.png?alt=media&#x26;token=b069250a-5ed4-40ae-9c9c-3a1ecdbc65da" alt=""><figcaption></figcaption></figure>

You can change the image size when editing the **Image size** element on Elementor widgets:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FUdntfZVSnRcoWucpIDzE%2Fmotors%20edit%20image%20size.jpg?alt=media&#x26;token=3421a423-a344-4a23-8aa9-c713302548a5" alt=""><figcaption></figcaption></figure>

After creating templates, you can set it as default, and it will be applied to all listings.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FxGh7TyzlL8NVmnAzO0eQ%2Fimage.png?alt=media&#x26;token=263a3e4d-5717-4281-9c6e-7a1ebb67d6a5" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Please note template will be applied automatically to all listings that users and dealers publish on your website.
{% endhint %}

## How to create a single listing template using WPBakery

You can create your own template for listings using WPBakery Page Builder. To do this follow the simple steps below.

### Saving demo listing layout as a template

When demo content is imported, the template for a single listing will be created by the system. To save the layout of demo listings globally go to the **WP Dashboard > Motors Plugin > Listings** section and edit one of the published listings:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FvV5KUmwDIvPuJxgpEBsw%2Fimage.png?alt=media&#x26;token=31099731-84a4-4215-b261-bfa30eef2146" alt=""><figcaption></figcaption></figure>

To save the demo listing layout as a template, click on the "**Template**" icon.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FiOQWzQUdc9q4oV0lkwze%2FMotors%205.17%20-%20Single%20lsiting%20template%20save%20as%20temp.png?alt=media&#x26;token=ad3d2eb3-e981-47d6-902d-824915da337f" alt=""><figcaption></figcaption></figure>

In the opened window set the title and save the template :

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FA8AphDYr7nEgtjGVkSWl%2FMotors%205.17%20-%20Single%20lsiting%20template%20name.png?alt=media&#x26;token=7f35e817-87f8-4fa8-aaea-61db3d319bd4" alt=""><figcaption></figcaption></figure>

### Creating custom listing layouts

Using the WPbakery Page Builder you can build the unique layout. To do this, create a blank listing by going to **Dashboard > Motors Plugin > Listings > Add new:**

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FQ6l4MBtRg6POdv208C7l%2Fimage.png?alt=media&#x26;token=f54edb1c-4b27-474d-a5ee-672d8992dfc7" alt=""><figcaption></figcaption></figure>

While editing the listing select the "**Blank Page**" option to continue:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FxFpfgMtlUvcjpMickTaz%2FMotors%205.17%20-%20Single%20lsiting%20plank.png?alt=media&#x26;token=52a818d7-4b7e-4baa-8a21-57fca9812d65" alt=""><figcaption></figcaption></figure>

Click on the **Plus** or **Add Element** to add a new widget:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FaubLkNKG8TdZLs0bYLQL%2FMotors%205.17%20-%20Single%20lsiting%20add%20eleemnt.png?alt=media&#x26;token=7e7e07cd-f7ba-4a87-93f0-b19fb97eaa49" alt=""><figcaption></figcaption></figure>

Select the required elements and add them.

{% hint style="info" %}
While building layout, use widgets from the "**STM Single Listing**" section to display listing data.
{% endhint %}

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FuDV6mMd2Phq0NAhQNzj6%2FMotors%205.17%20-%20Single%20lsiting%20add%20stm%20elements.png?alt=media\&token=c57cbc6c-56ea-4bfa-912b-690723e06ad4)

Afterward, you can save your template by clicking on the template icon.

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2Fvzwuo5t8jtoZJPqK98BG%2FMotors%205.17%20-%20Single%20lsiting%20custom%20save.png?alt=media\&token=2b3ced2d-fc7c-4fe4-bc84-f1b69af5ed81)

In the opened window set the title and save the custom template :

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FDKhSR2sbrgrJAgoxZUvp%2FMotors%205.17%20-%20Single%20lsiting%20custom%20save%20name.png?alt=media\&token=dd33189e-81cd-4874-b721-f6ba88acd24a)

### How to set a global template for listings

Now you can apply your template as default to all your future listings. To do this, follow **Dashboard >** **WPBakery Page Builder > General Settings** from your dashboard. By scrolling to the section **Default template for post types** for the **Listings** select the template you saved from the dropdown menu and save changes.

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FQp3lBfZsWh1hjDzX9XUn%2FMotors%205.17%20-%20Single%20lsiting%20%20template%20globally.png?alt=media\&token=6dc862e9-a754-4205-b6a5-e9eea35992a6)

{% hint style="info" %}
Please note this template will be applied only to the listings you will create in the future. All listings that you already have on the website will save their layouts.
{% endhint %}

### How to set global templates for multi-listing types

By installing the **Motors Listing Types plugin,** it is possible to create several post types.

{% content-ref url="../motors-listing-types" %}
[motors-listing-types](https://docs.stylemixthemes.com/motors-theme-documentation/motors-listing-types)
{% endcontent-ref %}

In **Dashboard > WPBakery Page Builder > General Settings,** you can set individual templates for each listing type:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FtRk4OMof3oawh01qTNkF%2FMotors%205.17%20-%20Single%20lsiting%20%20template%20globally%20for%20mlt.png?alt=media&#x26;token=d7b7da57-1302-4e45-83b8-d4e62dd7836b" alt=""><figcaption></figcaption></figure>
