# Térköz, Rövidkód és Oldalsáv widget

> Üres térköz beszúrása, rövidkód beágyazása és a sablon oldalsávjának megjelenítése az oldalon.

## Térköz widget

A **Térköz** widget testre szabható üres helyet ad az oldal elemei közé. Bárhol létrehozhatsz egy ilyen térközt, és kitöltheted színnel vagy képpel is, így formák és díszítőelemek készítésére is jó. A widgethez Maszk funkció is használható, amellyel a térköz alakját változtathatod.

Tipikus felhasználás:

- térköz a főkép és az oldal fő tartalma közé,
- egyenletes távolság egy többoszlopos elrendezés oszlopai közt,
- térköz a menü és a tartalom közé,
- egyforma térköz egymás alatti termékek között: a képek és leírások közé tett egy-egy térköz magasságát egyformára állítva rendezett rácsot kapsz.

### A widget hozzáadása és beállítása

1. A szerkesztőben kattints a **+** gombra, majd húzd a **Térköz** widgetet a vászonra. Lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).
2. A **Tartalom** fülön a **Térköz** szekcióban a csúszkával add meg a függőleges hely nagyságát. Mértékegységként px, em, rem, %, vw vagy vh választható. Lásd: [Mértékegységek kiválasztása](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-merteku-egysegek/).

![A Térköz widget Tartalom füle a térköz csúszkájával, 60 px értékkel](./kepek/widgetek-terkoz-tartalom.webp)

*A Térköz widget Tartalom füle a térköz csúszkájával, 60 px értékkel* (https://minta-bolt.hu/wp-admin/post.php?post=73&action=elementor)

A képen a **Térköz** csúszka és az értékmező látszik, mellette a mértékegység-választó.

A **Haladó** fülön a widget pozícióját, térközeit és egyedi kódját állíthatod.

## Rövidkód widget

A **Rövidkód** widget szögletes zárójelek közti rövidkódokat ágyaz be az oldalba vagy a bejegyzésbe. A rövidkód egy rövid kódrészlet (például `[gallery]`), amely meghív egy funkciót, vagy dinamikus tartalmat jelenít meg: videót, űrlapot és hasonlókat, anélkül hogy bonyolult kódot kellene írnod.

Ha például egy kapcsolatfelvételi űrlap rövidkódját írod be, az a telepített űrlapbővítményhez kapcsolódik, és az űrlap ott jelenik meg az oldalon, ahová a widgetet tetted.

Rövidkódot a **Szövegszerkesztő** widgetbe is írhatsz, a **Rövidkód** widget viszont erősebb: a rövidkód eredményét a szerkesztőben azonnal látod, nem kell előnézeti módba lépned.

1. Add a vászonhoz a **Rövidkód** widgetet.
2. A **Tartalom** fülön a **Rövidkód** szekcióban az **Add meg a shortcode-ot** mezőbe írd be a rövidkódot. A mező fölött az **Alkalmazás** gombbal frissítheted az oldalon a módosítást.
3. A megjelenést a **Haladó** fül **Egyéni CSS** beállításával finomíthatod.

![A Rövidkód widget Tartalom füle a rövidkód beviteli mezőjével és az Alkalmazás gombbal](./kepek/widgetek-rovidkod-tartalom.webp)

*A Rövidkód widget Tartalom füle a rövidkód beviteli mezőjével és az Alkalmazás gombbal* (https://minta-bolt.hu/wp-admin/post.php?post=73&action=elementor)

A képen a mezőben a `[gallery]` rövidkód áll, a tetején az **Alkalmazás** gomb látszik.

### Rövidkódok a WordPressben és az Elementorban

A rövidkód az adatbázisban létrehozott tartalmat jeleníti meg bárhol a webhelyen. Általában szögletes zárójelek közé kerül, például `[gallery]`. Sok bővítmény használ rövidkódot (WooCommerce, eseménynaptárak, bbPress), és az Elementor is generál rövidkódot a sablonokhoz és a globális widgetekhez.

**Alapértelmezett WordPress-rövidkódok.** A WordPress eleve tartalmaz rövidkódokat. Egy galériát például paraméterekkel is beilleszthetsz:

```text
[gallery size="medium" link="file" columns="2" ids="421,422,420,417,416,415"]
```

Ez kétoszlopos galériát készít hat képből: a rövidkód a megadott azonosítójú képeket használja. A rövidkódban ne legyen szóköz a szögletes zárójel és a név között, különben nem működik.

**Egyedi rövidkódok.** PHP-val saját rövidkódot is készíthetsz. Ezt általában a gyermeksablon `functions.php` fájljába írják; kódrészletek tárolására harmadik féltől származó bővítmények (például Code Snippets) is használhatók.

**Elementor-sablonok rövidkódja.** Az Elementor a sablonjaihoz (oldalak, szakaszok, globális widgetek) is rövidkódot készít. Ezeket számos widgetbe beillesztheted (például fülek, csúszkák), és egyedi megoldásokat építhetsz belőlük. A sablon rövidkódját az **Elementor → Szerkesztő → Sablonminták → Elmentett Sablonok** listában a **Rövidkód** oszlopban találod.

![Az Elementor sablonlistája a Rövidkód oszloppal](./kepek/hibaelharitas-sablonok-rovidkod.webp)

*Az Elementor sablonlistája a Rövidkód oszloppal* (https://minta-bolt.hu/wp-admin/edit.php?post_type=elementor_library)

A képen a **Rövidkód** oszlopban az `[elementor-template id="…"]` alakú rövidkódok látszanak.

Az Elementor-sablon rövidkódját a WordPress blokkszerkesztőjének **Rövidkód** blokkjába is beillesztheted, például űrlapot, cselekvésre ösztönző elemet vagy marketingtartalmat ágyazhatsz be a bejegyzéseidbe.

Példa: három sablont készítesz egy-egy cselekvésre ösztönző widgettel, elmented őket a sablonkönyvtárba, majd a rövidkódjukat beilleszted a csúszka (slides) widget leíró mezőibe. Így egyedi diák készíthetők.

Fontos: sok esetben a rövidkód nem jelenik meg a szerkesztőben, ez a normális működés. A kimenetet új lapon vagy másik böngészőben nézd meg az oldal előnézetén.

## Oldalsáv widget

Az **Oldalsáv** widget a WordPress-sablonban (témában) definiált bármelyik oldalsávot az oldalra helyezi. Sok téma előre elkészített oldalsávval érkezik: ezek az oldal fő tartalmától elkülönülő területek, ahol widgeteket, navigációs menüket vagy egyedi szöveget jeleníthetsz meg.

Tipikus felhasználás: egy kisvállalkozás egyes oldalaira oldalsávot tesz kapcsolati adatokkal, legutóbbi bejegyzésekkel és közösségi linkekkel; egy blog a népszerű kategóriákat és legutóbbi bejegyzéseket mutatja; egy étterem a menüt, a foglalási űrlapot és a térképet; egy fotós a portfólió-kategóriákat és az Instagram-hírfolyamot.

Az Elementor Hello sablonja alapból nem tartalmaz widgetmenüt és oldalsávot. Ha azt használod, előbb ki kell egészítened a sablont a widgetmenüvel, csak ezután használható az **Oldalsáv** widget.

1. Add a vászonhoz az **Oldalsáv** widgetet.
2. A **Tartalom** fülön az **Oldalsáv** szekcióban az **Oldalsáv kiválasztása** listából válaszd ki a megjelenítendő oldalsávot.

![Az Oldalsáv widget Tartalom füle az Oldalsáv kiválasztása listával](./kepek/widgetek-oldalsav-tartalom.webp)

*Az Oldalsáv widget Tartalom füle az Oldalsáv kiválasztása listával* (https://minta-bolt.hu/wp-admin/post.php?post=73&action=elementor)

A képen a lista a „Nem találhatók oldalsávok” szöveget mutatja, mert ezen a webhelyen a sablon nem hoz létre oldalsávot. Ahol van oldalsáv, ott a neve itt választható ki.

A **Haladó** fül itt is a pozíciót, térközöket és egyedi kódot állítja.