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.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
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<img>. 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:
<article class="my-card">
<a href="{{tpae_permalink}}">{{tpae_image}}</a>
<h3><a href="{{tpae_permalink}}">{{tpae_title}}</a></h3>
<p class="meta">{{tpae_author_meta}} · {{tpae_date_created}}</p>
<a class="more" href="{{tpae_permalink}}">Read more</a>
</article>
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 <img> 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 — every control in the widget.
- Add a Read More button with the built-in styles
- Show blog posts in a grid layout
