---
title: "How to Create Elementor Custom Post Type Loop Skin?"
url: https://theplusaddons.com/docs/create-elementor-custom-post-type-loop-skin/
date: 2023-08-28
modified: 2026-04-10
lang: en
author: "Aditya Sharma"
description: "Do you want to make your custom post type loop design really stand out from the crowd? For this, you can use the custom skin feature of the Dynamic Listing..."
image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Create-Elementor-Custom-Post-Type-Loop-Skin_-1024x536.jpg
word_count: 849
---

# How to Create Elementor Custom Post Type Loop Skin?

## 

- Utilizes the custom skin feature of the Dynamic Listing widget from The Plus Addons for Elementor to create unique post type loop designs.
- Recommends using Elementor Pro for fetching dynamic data when creating a custom post type loop skin.
- Employs Advanced Custom Fields (ACF) to create a custom post type called Cars and add fields like Mileage, Transmission, Date, and Price.
- Integrates the created template with the Dynamic Listing widget, allowing for multiple layouts and dynamic content display.

Do you want to make your custom post type loop design really stand out from the crowd? For this, you can use the custom skin feature of the Dynamic Listing widget from The Plus Addons for Elementor. 

A custom post type loop skin is essentially a template that allows you to display custom post types in a specific way.

*To check the complete feature overview documentation of The Plus Addons for Elementor Dynamic Listing widget, [click here](/docs/dynamic-listing-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing//#dynamic-listing-wgts?utm_source=tpae&utm_medium=docs&utm_campaign=text)

https://www.youtube.com/watch?v=ID5BWK0yP3A

To do this, follow the steps -

For instance, we will be creating this custom post type layout design.

![dynamic listing custom post type custom skin demo](https://theplusaddons.com/wp-content/uploads/2023/08/dynamic-listing-custom-post-type-custom-skin-demo.png)

For creating a custom loop skin, we recommend using the [Elementor Pro](https://elementor.com/pro/) plugin for fetching dynamic data.

### Create a Custom Post Type

To create a custom post type you can use the free[ Advanced Custom Fields (ACF)](https://wordpress.org/plugins/advanced-custom-fields/).

For instance, we’ll create a custom post type called Cars.

1. From the Dashboard, go to **ACF** > **Post Types** and click on **Add New**.

![](https://theplusaddons.com/wp-content/uploads/2023/08/tpae-dynamic-listing-custom-post-type-loop-skin-acf-1.png)

2. On the next page add the post type name and adjust the settings as per your requirement. Once done click on the **Save Changes** button to create the post type.

![](https://theplusaddons.com/wp-content/uploads/2023/08/tpae-dynamic-listing-custom-post-type-loop-skin-acf-2.png)

### Add Custom Fields to Custom Post Type

Now, we’ll create some custom fields for our custom post types.

1. To do this from the Dashboard, go to **ACF** > **Field Groups** and click on **Add New** button. 

2. Add a name to the field group.

3. Then we’ll add a number field type and name it Mileage. 

![](https://theplusaddons.com/wp-content/uploads/2023/08/tpae-dynamic-listing-custom-post-type-loop-skin-acf-3.png)

Click on the **+Add Field** button to add more fields. Following the same process, we’ll add the following fields - 

- Transmission as a select field type.

- Date as a select field type.

- Price as a number field type.

4. Once done, from the **Settings** section, we’ll set the location to our custom post type **Car** under **Rules**.

![](https://theplusaddons.com/wp-content/uploads/2023/08/tpae-dynamic-listing-custom-post-type-loop-skin-acf-4.png)

5. Once done, click on the **Save Changes** button.

6. Then you have to add value in the custom fields on each Car post.

![custom fields custom post type](https://theplusaddons.com/wp-content/uploads/2023/08/custom-fields-custom-post-type.png)

### Create a Custom Post Type Loop Template

Now, you have to create a custom post type loop template using Elementor.

1. To do this from the Dashboard, go to **Templates** and click on **Add New**, then select **Section** as the template type, give a name to the template then click on **Create Template** button.

![create elementor custom post type loop template](https://theplusaddons.com/wp-content/uploads/2023/08/create-elementor-custom-post-type-loop-template.png)

> *Note: For creating this template we’ll use both The Plus Addons for Elementor *[*single post widgets*](https://theplusaddons.com/elementor-builder/blog-builder/)* and *[*Elementor Pro*](https://elementor.com/pro/)* widgets.*

2. Add a container then to add the post image, we’ll use the [Post Featured Image](https://theplusaddons.com/elementor-builder/blog-builder/post-featured-image/) widget and style it according to your requirement.

3. Then, for the post title, we’ll use the [Post Title](https://theplusaddons.com/elementor-builder/blog-builder/post-title/) widget and style it according to your requirements. 

4. Now to add the price, we’ll use the Elementor Heading widget and to make it dynamic, click on the **Dynamic Tags** in the **Title** field and select **ACF Field** under ACF.

Then click on the **ACF Field** and from the **Key** dropdown, select **Price**.

![dynamic custom post type price](https://theplusaddons.com/wp-content/uploads/2023/08/dynamic-custom-post-type-price.gif)

Style it according to your requirements.

5. Now, we’ll add a three column container to show more details. On the left column, we’ll add the Elementor Icon widget then we’ll add the Elementor Heading widget.  

To make it dynamic, following the above mentioned process, click on the **Dynamic Tags** in the **Title** field and select **ACF Field** under ACF.

Then click on the **ACF Field** and from the **Key** dropdown, select **Mileage**.

![dynamic custom post type mileage](https://theplusaddons.com/wp-content/uploads/2023/08/dynamic-custom-post-type-mileage.png)

Style it according to your requirements.

6. In the same process, we’ll add the remaining two custom field values, Transmission and Date then style both according to your requirements.

7. Once done, publish the template.

> *Note: Following this process, you can use different widgets to create the layout as well and make them dynamic using the Dynamic Tags of Elementor Pro.*

### Use the Template With Dynamic Listing Widget

Once you have created your custom post type loop layout, use it with the Dynamic Listing widget.

1. Add the Dynamic Listing widget on a page or template.

2. Select the appropriate listing type from the **Post Listing Types** dropdown (except ACF Repeater) and select your custom post type from the **Post Type** dropdown.

3. Then select **Custom Skin** from the **Style** section.

4. Now, you have to select your template from the **Select a template** dropdown.

You can turn on the **Multiple Loops** toggle to use multiple layout designs together for your listing. You can use up to 5 templates together.

> *Note: In order to use Multiple Loops, you have to create separate custom templates for each loop template.*

5. Then, you have to select the appropriate layout type from the **Layout** section.

> *Note: For using Masonry and Metro layout, you have to design your templates accordingly.*

6. If you are using multiple loops, you can arrange the templates in reverse or random order from the **Template Order** dropdown.

Now, your custom posts will show in your custom layout.

Also, read [How to Show Posts from Multiple Post Types in Elementor](https://theplusaddons.com/docs/show-posts-from-multiple-post-types-in-elementor/).