---
title: "How to Create Custom Elementor Post Loop Skin with Smart Loop Builder?"
url: https://theplusaddons.com/docs/create-custom-elementor-post-loop-skin-with-smart-loop-builder/
date: 2024-10-22
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Do you want blog cards that match your own design exactly, not a preset style? Smart Loop Builder lets you write the card yourself in HTML and CSS, then fills..."
image: https://theplusaddons.com/wp-content/uploads/2024/10/image-156-1024x536.png
word_count: 648
---
# How to Create Custom Elementor Post Loop Skin with Smart Loop Builder?
##
- Smart Loop Builder is a style option in the Blog/Post Listing widget from The Plus Addons for Elementor, and it is available in both The Plus Addons for Elementor (Free) and Pro, with Pro presets labelled Beta.
- The Plus Addons for Elementor lets the user write the card in HTML and CSS, then fill it with each post’s data by adding dynamic tags such as {{tpae_title}}, {{tpae_permalink}}, {{tpae_excerpt}}, and {{tpae_image}}.
- Shortened tags support numbers after an underscore, including {{tpae_title_50}}, {{tpae_category_1}}, and {{tpae_description_120}}, while {{tpae_description_N}} counts raw post content and can cut mid-tag.
- Troubleshooting notes that unclosed HTML tags can break the page layout, preset-style controls do not apply in Smart Loop Builder, and custom fields are not available as tags.
Do you want blog cards that match your own design exactly, not a preset style? Smart Loop Builder lets you write the card yourself in HTML and CSS, then fills it with each post's data.
It is a style option in the Blog/Post Listing widget from The Plus Addons for Elementor.
*To check the complete feature overview documentation of The Plus Addons for Elementor Blog Listing widget, [click here](https://theplusaddons.com/docs/blog-listing-widget-settings-overview/).*
***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***
[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing/?utm_source=tpae&utm_medium=docs&utm_campaign=text#blog-post-wgts)
## Before You Start
- **Edition:** Free — available in both The Plus Addons for Elementor (Free) and Pro. Labelled **Beta** in Pro. Some ready presets are Pro.- **Basic HTML and CSS.** You write the markup; the widget supplies the data.- **Widget to enable:** Blog/Post Listing, switched on under **ThePlus Settings > Widgets**.
## Step 1: Choose Smart Loop Builder
Add the **Blog/Post Listing** widget. In **Content > Layout**, set **Style** to **Smart Loop Builder**, then pick a layout.
## Step 2: Start from a preset, or from scratch
A **Smart Loop Builder** section appears on the Content tab, with an **HTML** field and a **CSS** field.
- **From a preset:** click **Ready Presets**, pick a template and download it. Its HTML and CSS fill both fields, ready to edit. Some presets are Pro.- **From scratch:** write your own HTML in the HTML field and styles in the CSS field.
## Step 3: Add the dynamic tags
Anything you type is static. To show each post's own data, place these tags in your HTML:
| Tag | Outputs |
| --- | ------- |
| `{{tpae_title}}` | Post title |
| `{{tpae_permalink}}` | Post URL |
| `{{tpae_excerpt}}` | Post excerpt |
| `{{tpae_description}}` | Post content |
| `{{tpae_image}}` | Featured image, as a complete image tag |
| `{{tpae_image_url}}` | Featured image URL only |
| `{{tpae_author_meta}}` | Author name |
| `{{tpae_author_url}}` | Author archive URL |
| `{{tpae_author_logo}}` | Author avatar |
| `{{tpae_category}}` | Post categories |
| `{{tpae_tag}}` | Post tags |
| `{{tpae_date_created}}` | Publish date, in your WordPress date format |
| `{{tpae_time_created}}` | Publish time |
| `{{tpae_date_created_time_ago}}` | Relative date, such as 3 days ago |
| `{{tpae_date_created_day}}` | Day of the month only |
| `{{tpae_date_created_day_month}}` | Day and month |
| `{{tpae_date_created_month_year}}` | Month and year |
| `{{tpae_date_created_m_y_d}}` | Month / year / day |
| `{{tpae_date_created_f_d_y}}` | Full month name, day, year |
| `{{tpae_date_created_M_D_Y}}` | Short month name, day, year |
| `{{tpae_date_created_d_m_y}}` | Day / month / year |
| `{{tpae_date_created_m_d_y}}` | Month / day / year |
| `{{tpae_date_created_d_m_y_h}}` | Day / month / year and hour |
| `{{tpae_date_created_h_m_a}}` | Hour:minute AM/PM |
| `{{tpae_date_created_d_m_y_g}}` | Date with GMT offset |
| `{{tpae_date_created_iso}}` | ISO 8601 date |
| `{{tpae_date_created_rfc}}` | RFC 2822 date |
### Shortened versions
Three tags take a number, written straight after an underscore:
| Tag | Outputs |
| --- | ------- |
| `{{tpae_title_50}}` | The first 50 characters of the title |
| `{{tpae_category_1}}` | Only the first category, as a link |
| `{{tpae_description_120}}` | The first 120 characters of the post content |
Use any number. Note that `{{tpae_description_N}}` counts the raw post content, including any HTML inside it, so a cut can land mid-tag. For a clean, short summary use `{{tpae_excerpt}}` instead.
> *{{tpae_image}} outputs a complete image tag, so do not wrap it in your own ![]()
. Use {{tpae_image_url}} when you need only the address, for example in a background style.*
## Example
A simple card with an image, title, author, date and a read-more link:
`
{{tpae_image}}
{{tpae_author_meta}} · {{tpae_date_created}}
Read more
`
Style `.my-card`, `.meta` and `.more` in the CSS field. You can adapt code from CodePen or JSFiddle the same way — replace the static text with tags.
## Limitations
- **Your code, your responsibility.** Unclosed tags in the HTML field can break the rest of the page layout.- **Preset-style controls do not apply.** Title Limit, excerpt Count, the Read More Button and the Style-tab typography are for the built-in styles. In Smart Loop Builder, shorten with the numbered tags and style with your own CSS.- **Posts only.** The tags cover standard post fields. Custom fields are not available as tags.
## Troubleshooting
### A tag shows up as plain text
Check the spelling exactly, including the double braces. For example it is `{{tpae_author_meta}}` — a misspelt tag is printed exactly as typed.
### The image is broken
You wrapped `{{tpae_image}}` in an `![]()
` tag. Use it on its own, or use `{{tpae_image_url}}` inside your own tag.
### My CSS does not apply
Make your selectors specific to your own class names so the theme's styles do not win.
## Related Docs
- [Blog Listing widget: settings overview](https://theplusaddons.com/docs/blog-listing-widget-settings-overview/) — every control in the widget.- [Add a Read More button with the built-in styles](https://theplusaddons.com/docs/add-read-more-button-in-blog-posts-in-elementor/)- [Show blog posts in a grid layout](https://theplusaddons.com/docs/show-blog-posts-in-grid-layout-in-elementor/)
## Frequently Asked Questions
**Q: What do I need before using Smart Loop Builder for blog cards?**
A: Smart Loop Builder is part of the Blog/Post Listing widget in The Plus Addons for Elementor, and it works in both Free and Pro. The key setup point is that the widget must be installed and activated, then enabled under ThePlus Settings > Widgets. It is marked Beta in Pro, so it is best treated as a custom HTML and CSS card builder rather than a preset design system.
**Q: How do I make a custom post loop skin instead of using a preset style?**
A: Smart Loop Builder is the route when you want full control over the card markup instead of a built-in layout. In the Blog/Post Listing widget, set Style to Smart Loop Builder, then build the card with your own HTML and CSS. The important tradeoff is that preset-style controls like Title Limit, excerpt Count, Read More Button, and Style-tab typography do not apply here, so your CSS has to handle the look.
**Q: Can I use Smart Loop Builder for custom fields or only standard post data?**
A: Smart Loop Builder is limited to standard post fields. The available tags cover things like title, permalink, excerpt, description, featured image, author data, categories, tags, and several date formats. Custom fields are not available as tags, so if your design depends on extra metadata you will need to work within those standard fields or choose a different approach.
**Q: Why does my tag show up as plain text in the loop card?**
A: That usually means the tag spelling or braces are off. The tag has to match exactly, including the double braces, such as {{tpae_author_meta}}. If even one character is wrong, it prints exactly as typed instead of being replaced with post data. This is the most common failure mode when building custom HTML cards.
**Q: Why is my featured image broken in Smart Loop Builder?**
A: The usual cause is wrapping {{tpae_image}} inside your own tag. That tag already outputs a complete image element, so nesting it creates invalid markup and can break the image display. Use {{tpae_image}} on its own when you want the full image tag, or switch to {{tpae_image_url}} if you only need the URL for a background style.
**Q: What is the best way to shorten titles or excerpts in a custom loop card?**
A: Use the numbered tags when you want a controlled cut without relying on preset limits. {{tpae_title_50}} gives the first 50 characters of the title, {{tpae_category_1}} returns only the first category as a link, and {{tpae_description_120}} trims post content to 120 characters. One gotcha: {{tpae_description_N}} counts raw content including HTML, so it can cut through tags; {{tpae_excerpt}} is cleaner for short summaries.