--- 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-11 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? ## - Utilizes the Blog Listing widget from The Plus Addons for Elementor to create custom blog post designs. - Employs Smart Loop Builder under the Layout tab to select and customize layouts for blog listings. - Integrates dynamic data using specific tags like {{tpae_title}} and {{tpae_excerpt}} in custom HTML templates. - Offers ready presets for quick customization, allowing users to download and modify templates directly within Elementor. 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_title}}

  

{{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/)