---
title: "How to Create a Custom Post Type Loop Skin in Elementor Using Smart Loop Builder?"
url: https://theplusaddons.com/docs/create-a-custom-post-type-loop-skin-in-elementor-using-smart-loop-builder/
date: 2025-10-15
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "Dynamic Listing's Custom style lets you design a card visually as an Elementor template, but sometimes raw code is faster - full control over every tag, no template to open..."
image: https://theplusaddons.com/wp-content/uploads/2025/10/How-to-Create-a-Custom-Post-Type-Loop-Skin-in-Elementor-Using-Smart-Loop-Builder-1024x538.jpg
word_count: 412
---

# How to Create a Custom Post Type Loop Skin in Elementor Using Smart Loop Builder?

## 

- Utilizes Smart Loop Builder in Elementor to create custom templates for Custom Post Types like Portfolio, Events, and Products.
- Employs the Dynamic Listing widget from The Plus Addons for Elementor to integrate custom HTML and CSS into post type listings.
- Requires installation of The Plus Addons for Elementor and creation of a custom post type using Advanced Custom Fields (ACF).
- Incorporates dynamic data tags such as {{tpae_title}} and {{tpae_excerpt}} to display respective content in custom templates.

Dynamic Listing's **Custom** style lets you design a card visually as an Elementor template, but sometimes raw code is faster - full control over every tag, no template to open and edit separately.

**Smart Loop Builder (Beta)** is that code-based option: a plain **HTML** field for the card's markup and a **CSS** field for its styles, both live-rendered into the loop.

For the full settings tour of the **Dynamic Listing** widget, see [Dynamic Listing Widget Settings Overview](https://theplusaddons.com/docs/dynamic-listing-widget-settings-overview/).

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

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

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Edition:** Dynamic Listing is a **Pro** widget - it needs The Plus Addons for Elementor Pro installed and its license activated. It will not appear in the free plugin.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Dynamic Listing** and turn its toggle on.

## Steps

- Add the **Dynamic Listing** widget, with **Post Type** set to your custom post type.- Under **Content Layout**, set **Style** to **Smart Loop Builder (Beta)**.

![Style control set to Smart Loop Builder (Beta)](https://theplusaddons.com/wp-content/uploads/2026/09/dynamic-listing-style-smart-loop.webp)

Write the card's markup in the **HTML** field and its rules in the paired **CSS** field, in the Smart Loop Builder (Beta) section that appears. Leaving HTML empty shows a built-in placeholder message rather than a blank/broken card, confirmed directly in the plugin's own rendering code.

![The Smart Loop Builder HTML and CSS fields](https://theplusaddons.com/wp-content/uploads/2026/09/dynamic-listing-smart-loop-template.webp)

## Settings Overview

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Style | Smart Loop Builder is the raw HTML/CSS loop-skin option. | style-1 |
| HTML | The card's markup (Style = Smart Loop Builder only). | (empty) |
| CSS | The card's styles (Style = Smart Loop Builder only). | (empty) |

## Limitations

- Labeled **Beta** in the live control model - treat it as a newer, still-maturing option alongside the visual Custom-style template picker, not a required upgrade from it.- If HTML is left empty, the widget shows a fixed "Please enter values in both HTML & CSS..." message instead of rendering any posts - confirmed in the plugin's own source, not a bug worth reporting.

## Related Docs

- [How to Create Elementor Custom Post Type Loop Skin?](https://theplusaddons.com/docs/create-elementor-custom-post-type-loop-skin/)- [How to Create a Custom WooCommerce Product Loop Skin in Elementor Using Smart Loop Builder?](https://theplusaddons.com/docs/create-a-custom-woocommerce-product-loop-skin-in-elementor-using-smart-loop-builder/)

## Not verified

So you know exactly what has and has not been checked:

- The full list of per-post placeholder tokens available inside the HTML field (for title, excerpt, image, link, etc.) was not exhaustively enumerated - only that the field accepts markup and renders it.- Multiple-loop-template controls (Loop Template 2-5, Multiple Loops switcher) belong to the Custom style, not Smart Loop Builder - not re-tested here.