Elementor Loop Grid – Návod, jak si vytvořit vlastní výpis příspěvků na míru
Loop Grid v Elementoru je mocný nástroj, díky kterému si můžeš vytvořit vlastní šablonu pro výpis příspěvků, produktů nebo vlastních typů obsahu (CPT). Už žádné omezené blogové bloky – s Loop Gridem si navrhneš přesně takový vzhled, jaký potřebuješ.
V tomto návodu ti krok za krokem ukážu, jak Loop Grid funguje a jak ho efektivně použít.
Co je Loop Grid a co umí?
Loop Grid je widget dostupný v Elementor Pro, který ti umožní:
- Navrhnout šablonu jedné položky (např. příspěvku).
- Použít ji pro automatický výpis více položek (např. blog nebo e-shop).
- Zobrazit obsah podle kategorií, značek, autora atd.
- Použít dynamický obsah (obrázky, název, datum, výňatek).
- Stylovat responzivní grid layout.
Jak vytvořit Loop Grid – krok za krokem
Vytvoř si Loop Item Template
Nejdřív si vytvoříš šablonu, jak má vypadat jedna položka v gridu:
Jdi do Šablony → Loop Item (v administraci WordPressu).
Klikni na „Vytvořit novou šablonu“.
Vlož do layoutu prvky jako:
- Obrázek příspěvku.
- Nadpis (dynamický název).
- Meta informace (datum, autor).
- Výňatek / excerpt.
- Tlačítko „číst více“ nebo odkaz.
4. Ulož šablonu.
Tip: Používej dynamické tagy – tím zajistíš, že se data budou načítat z každého příspěvku automaticky.
Použij widget Loop Grid
Otevři si stránku nebo šablonu, kde chceš grid zobrazit.
Přidej widget „Loop Grid“ (v Elementoru).
V nastavení vyber šablonu, kterou jsi vytvořil(a) jako Loop Item.
Nastav počet sloupců, počet příspěvků, stránkování apod.
Pomocí Query (dotazu) vyfiltruj, co se má zobrazit – například:
- Kategorie: Blog.
- Post Type: Produkty.
- Autor: Ty sám(a).
- Tagy, štítky apod.
Design a doladění
- Přizpůsob vzhled gridu (rozestupy, ohraničení, stíny…).
- Zkontroluj mobilní zobrazení.
- Přidej hover efekty, animace nebo vlastní CSS.
Kdy použít Loop Grid?
- Blog s vlastním vzhledem článků.
- Výpis produktů v e-shopu.
- Portfolia a katalogy.
- Dynamické seznamy (např. reference, události, recepty…).
Co potřebuješ?
- Elementor Pro (Loop Grid není ve free verzi).
- WordPress s aktivním obsahem (např. příspěvky nebo WooCommerce produkty).
- Trochu času na nastavení šablony.
Shrnutí
Loop Grid v Elementoru ti dává obrovskou kontrolu nad tím, jak vypadají tvé výpisy obsahu. Ať už chceš zobrazit články, produkty nebo vlastní typy obsahu, s tímto nástrojem je to možné rychle, vizuálně a bez kódování.
