Kicsúszó panel (Off-Canvas)

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.

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.

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:

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ó fejezetben leírt módon találod meg.

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