# Dinamikus listázás: egyéni bejegyzéstípus kártyája HTML-ből és CSS-ből

> Az Intelligens ciklusszerkesztő (béta) stílus a Dinamikus listázás widgetben: egyéni bejegyzéstípus kártyája saját HTML-lel és CSS-sel, a korlátozásokkal együtt.

Az **Egyéni** stílus egy Elementor-sablonból építi fel a kártyát. Ha gyorsabb a kódot megírni, és nem akarsz külön sablont megnyitni és szerkeszteni, használd az **Intelligens ciklusszerkesztő (béta)** stílust: a kártya szerkezetét egy HTML-mezőbe, a megjelenését egy CSS-mezőbe írod, és a widget ezt jeleníti meg minden elemhez.

A widget Pro, az Elementor és a **The Plus Addons → Widgets** oldalon bekapcsolt **Dinamikus listázás** kapcsoló kell hozzá. A szerkesztő általános használatát és a bejegyzés címkéit a [Blog/bejegyzések listája: egyéni kártya](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/bejegyzes-termek-listak-smart-loop/), a termékkártyát a [WooCommerce-termékkártya](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dinamikus-listak-lista-termek-kartya/) fejezet írja le.

## Lépések

1. Add az oldalra a **Dinamikus listázás** widgetet, és a **Bejegyzés típusa** mezőben válaszd ki az egyéni bejegyzéstípust (a példában a **Könyvek** értéket).
2. A **Tartalom elrendezése** szakaszban a **Stílus** ikonjai közül válaszd az utolsót, az **Intelligens ciklusszerkesztő (béta)** stílust.
3. Nyisd meg a megjelenő **Intelligens ciklusszerkesztő (béta)** szakaszt. A **HTML** mezőbe írd a kártya szerkezetét, a **CSS** mezőbe a hozzá tartozó szabályokat.

![Az Intelligens ciklusszerkesztő HTML és CSS mezője egy könyvkártyával](./kepek/dinamikus-listak-4-panel-smart-loop.webp)

*Az Intelligens ciklusszerkesztő HTML és CSS mezője egy könyvkártyával* (https://minta-bolt.hu/wp-admin/post.php?post=240&action=elementor)

A képen a **HTML** mezőben egy `article` kártya látszik a címmel és a kivonattal, alatta a **CSS** mezőben a keret, a lekerekítés és a térköz szabályai.

A példában használt HTML:

```html
<article class="konyv-kartya">
  <h3><a href="{{tpae_permalink}}">{{tpae_title}}</a></h3>
  <p>{{tpae_excerpt}}</p>
</article>
```

A `{{tpae_permalink}}`, `{{tpae_title}}` és `{{tpae_excerpt}}` címkék helyére a widget minden elemnél a saját adatát írja be.

![Az egyéni könyvkártyák rácsban, címmel és kivonattal](./kepek/dinamikus-listak-4-konyv-smart.webp)

*Az egyéni könyvkártyák rácsban, címmel és kivonattal* (https://minta-bolt.hu/dl4-smart/)

A képen minden könyv a saját HTML-ből és CSS-ből épített kártyán áll: kerettel, címmel és kivonattal.

## Beállítások

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Stílus** | Az **Intelligens ciklusszerkesztő (béta)** a HTML/CSS-alapú kártyastílus | Az első kész kártya |
| **HTML** | A kártya szerkezete (csak ennél a stílusnál látszik) | Üres |
| **CSS** | A kártya stílusa (csak ennél a stílusnál látszik) | Üres |

## Korlátozások

- A stílus **béta**: tekintsd újabb, még fejlődő lehetőségnek az **Egyéni** stílus mellett, nem kötelező váltásnak.
- Ha a **HTML** mező üres, a widget nem jelenít meg bejegyzést, hanem ezt az üzenetet írja ki: „A Smart Loop Builder funkció bekapcsolásához add meg az értékeket mind a HTML-, mind a CSS-mezőben.” Ez a várt működés, nem hiba.
- A több sablon váltogatása (**Több ismétlődés**) az **Egyéni** stílus funkciója, az intelligens ciklusszerkesztőnél nincs.