# Kicsúszó panel (Off-Canvas)

> Az oldalra becsúszó panel beállításai, és a megnyitása gombbal, bármely widgettel vagy menüponttal.

A **Kicsúszó panel** widget az oldal fölé becsúszó panelt készít. Megjeleníthet szöveget, menüt, mentett szakaszt, mentett oldalt vagy mentett widgetet. A panel megnyitható gombbal, ikonnal, szöveggel vagy bármilyen más elemmel.

## Tartalom

A **Tartalom** szakaszban két mező van:

- **Előnézet**: bekapcsolva a szerkesztőben valós időben látod a panelt.
- **Tartalomtípus**: mi jelenjen meg a panelben. **Tartalom** (szöveg, HTML), **Menü**, **Mentett szakasz**, **Mentett oldal** vagy **Mentett widget**.

![A Kicsúszó panel widget Tartalom füle a tartalomtípussal és a szövegszerkesztővel](./kepek/fejlec-lablec-offcanvas-tartalom.webp)

*A Kicsúszó panel widget Tartalom füle a tartalomtípussal és a szövegszerkesztővel* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A képen az **Előnézet** kapcsoló, a **Tartalomtípus** és az alatta lévő szerkesztő látszik.

## A panel beállításai

A **Kicsúszó panel** szakaszban a következők állíthatók:

| Beállítás | Mit csinál |
|---|---|
| **Szélesség** | A panel szélessége képpontban, eszközönként külön. |
| **Pozíció** | Melyik oldalról jelenjen meg: bal vagy jobb. |
| **Megjelenési hatás** | **Csúsztatás** vagy **Tolás**: a panel ráúszik az oldalra, vagy eltolja azt. |
| **Fedvény színe** | A panel mögötti oldalrész színe, amely kiemeli a panelt. |

A panel háttérszíne és belső térköze a **Stílus** fül **Kicsúszó panel** szakaszában állítható.

## Megnyitás: megjelenítési beállítások

A **Megjelenítési beállítások** szakaszban választod ki, mi nyissa meg a panelt: gomb, ikon, szöveg vagy egyéni osztállyal/azonosítóval megjelölt elem. A **Megjelenítés** mező a nyitóelem típusa, gomb esetén ezek tartoznak hozzá: **Gomb szövege**, **Pozíció** (például **Beágyazott**), **Igazítás**, **Méret** és **Ikon kiválasztása**.

![A Kicsúszó panel widget Megjelenítési beállítások szakasza gomb típusú nyitóelemmel](./kepek/fejlec-lablec-offcanvas-megjelenites.webp)

*A Kicsúszó panel widget Megjelenítési beállítások szakasza gomb típusú nyitóelemmel* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A képen a **Megjelenítés** értéke **Gomb**, alatta a gomb szövege, pozíciója, igazítása, mérete és ikonja látható.

A gombnak és az ikonnak lebegő változata is van: ilyenkor a nyitóelem a böngészőablak jobb vagy bal szélén marad, görgetéskor is.

## A panel bezárása

A **Bezáró gomb** szakaszban a bezárógomb mérete, pozíciója és stílusa állítható. Külön kapcsolható, hogy a panel az **ESC** billentyű lenyomására, illetve a háttérre (a fedvényre) kattintva is bezáruljon.

## Navigációs menü a kicsúszó panelben

Függőleges, oldalról becsúszó navigációs menüt három lépésben készíthetsz:

1. Húzd az oldalra a **Kicsúszó panel** widgetet.
2. A **Tartalom** szakaszban a **Tartalomtípus** mezőben válaszd a **Menü** értéket. A WordPress összes menüje megjelenik a listában, válaszd ki a kívántat.
3. A **Megjelenítési beállítások** között a **Megjelenítés** mezőben válaszd ki, mi nyissa meg a panelt: **Gomb**, **Ikon**, **Egyéni osztály** vagy **Egyedi ID**.

Az oldalon a nyitóelemre kattintva megnyílik a menü. A többi beállítással (szélesség, pozíció, hatás, bezárás) tovább alakíthatod.

## Megnyitás bármelyik widgetből

Bármelyik Elementor-widget megnyithatja a panelt, ha ugyanaz az egyéni osztály vagy azonosító van beállítva a panelnél és a widgetnél is.

1. A **Kicsúszó panel** widget **Megjelenítési beállítások** szakaszában a **Megjelenítés** mezőben válaszd az **Egyéni osztály** vagy az **Egyedi ID** lehetőséget.
2. Írd be az osztály nevét vagy az azonosítót a megjelenő mezőbe. Osztálynévnél **ne** írj elé pontot, azonosítónál **ne** írj elé kettőskeresztet (#).
3. Nyisd meg annak a widgetnek a **Haladó** fülét, amellyel meg akarod nyitni a panelt (például egy cselekvésre ösztönző widgetet), és ugyanezt az osztálynevet (vagy azonosítót) írd a **CSS-osztályok** (illetve **CSS ID**) mezőbe.

A widgetre kattintva ezután megnyílik a panel.

## Megnyitás menüpontból

A WordPress-menü egy pontja is megnyithatja a panelt, egyéni CSS-osztállyal.

1. Húzd az oldalra a **Kicsúszó panel** widgetet, és állítsd be a kívánt módon.
2. A **Megjelenítési beállítások** között a **Megjelenítés** mezőben válaszd az **Egyéni osztály** értéket, és írd be az osztály nevét.
3. Nyisd meg a **Megjelenés → Menük** oldalt.
4. Hozz létre egy egyéni linkes menüpontot, amelyre kattintva a panelnek meg kell nyílnia.
5. A **Megjelenítés beállításai** (Screen Options) panelen kapcsold be a **CSS osztályok** mezőt.
6. A menüpontnál a **CSS osztályok (opcionális)** mezőbe írd be ugyanazt az osztálynevet, amit a 2. lépésben megadtál. Ügyelj arra, hogy a menü hozzá legyen rendelve egy menühelyhez (például az elsődleges menühöz).

### A panel megnyitása az egész webhelyen

A fenti módon a panel csak azon az oldalon nyílik meg, amelyen a widget szerepel. Ha minden oldalon és bejegyzésben szeretnéd, tedd ki a panelt a láblécbe a `wp_footer` horoggal. A következő kódot a sablonod (vagy gyermeksablonod) `functions.php` fájljába illeszd:

```php
function ultimate_elementor_off_canvas() {
    echo do_shortcode( '[uael-template id="a-kicsuszo-panel-szakaszanak-azonositoja"]' );
}
add_action( 'wp_footer', 'ultimate_elementor_off_canvas' );
```

Az `a-kicsuszo-panel-szakaszanak-azonositoja` helyére a mentett sablon azonosítója kerül:

1. Mentsd el sablonként a panelt tartalmazó szakaszt (az Elementorban jobb klikk a szakaszon, majd mentés sablonként).
2. Az azonosítót a [Mentett szakaszok és szakaszazonosító](https://hub.hellowp.io/hu/plugins/ultimate-elementor/altalanos-mentett-szekciok/) fejezetben leírt módon találod meg.

Így a panel a webhely minden oldalán és bejegyzésén elérhető lesz.