Hamburger panel

A Hamburger panel egy gombot tesz az oldalra. A gombra kattintva egy panel nyílik meg, benne olyan tartalommal, amelyet előre sablonként elkészítettél. Így a kevésbé fontos tartalmat egy kattintás mögé rejtheted.

Bekapcsolás és elhelyezés

A widgetet a Crocoblock → JetPlugins Settings → JetBlocks → Widgetek és kiterjesztések lapon kapcsolhatod be. Csak azokat a widgeteket hagyd bekapcsolva, amelyeket használsz, mert minden aktív widget terheli az oldalt.

Az Elementorban a Hamburger panel widgetet a JetBlocks csoportban találod, vagy a widgetkeresőbe beírva a nevét. Oldalra és sablonba is betehető. Tipikus példa: egy webáruház oldalán a panelben a termékszűrők sablonja nyílik meg, így a szűrők mobilon és asztali gépen is egy oldalsó panelből érhetők el.

Két lépésben: sablon, majd widget

1. A panel tartalmának elkészítése

1. A WordPress vezérlőpultján nyisd meg a Sablonok menüt, és adj hozzá újat.
2. A sablon típusának válaszd a Szekció típust, adj nevet, és kattints a Create Template gombra.
3. Az Elementorban építsd meg a tartalmat a kívánt elemekkel és widgetekkel.
4. Mentsd el, és térj vissza a vezérlőpultra.

2. A widget elhelyezése

1. Nyisd meg az oldalt (vagy a sablont) az Elementorban.
2. Keresd meg a Hamburger panel widgetet, és húzd a vászonra.
3. A Tartalom fül Sablonminta kiválasztása listájában válaszd ki az előbb elkészített sablont.

Az oldalon a gombra kattintva megnyílik a panel a sablon tartalmával.

A Tartalom szekció

https://minta-bolt.hu/wp-admin/post.php?post=13&action=elementor

A képen a gomb ikonjai és felirata, valamint a sablon kiválasztása látszik.

Beállítás	Mit csinál	Alapérték
Ikon	A gomb ikonja zárt állapotban.	három vonal
Aktív ikon	A gomb ikonja nyitott állapotban.	X
Bezáró ikon	A panel bezárásának ikonja.	X
Címke	A gomb felirata.	Továbbiak
Kapcsoló illesztése	A gomb igazítása: Indítás, Középre, Vége. Eszközönként állítható.	nincs kijelölve
Sablonminta kiválasztása	A panelben megjelenő sablon.	üres

A Beállítások szekció

https://minta-bolt.hu/wp-admin/post.php?post=13&action=elementor

A képen a panel megjelenésének beállításai láthatók.

Beállítás	Mit csinál
Pozíció	A panel melyik oldalon nyílik: Jobb vagy Bal.
Hatás	A nyitás animációja: Csúsztatás, Áttűnés vagy Zoom.
Z-Index	A panel rétegsorrendje más elemekhez képest.
AJAX-betöltés használata a sablonhoz	A sablon tartalmát csak nyitáskor tölti be.

Ha bekapcsolod az AJAX-betöltés használata a sablonhoz kapcsolót, a sablon tartalma csak a gombra kattintáskor töltődik be, és megjelenik mellette a sablon gyorsítótárazását szabályozó kapcsoló is.

A Címke mezőbe a Dinamikus címkék gombbal dinamikus tartalom is betehető.

A Stílus fül

A Stílus fülön két szekció van: Panel és Kapcsoló.

Panel

https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor

A képen a panel konténerének beállításai láthatók, alul a takarás és a bezáró gomb.

Beállítás	Mit csinál
Panel szélessége	A panel szélessége képpontban vagy más mértékegységben.
Padding	A panel belső távolsága fent, jobbra, lent és balra.
Háttér típusa	Egyszínű vagy színátmenetes háttér.
Szegély típusa	A panel szegélyének stílusa.
Keretsugár	A panel sarkainak lekerekítése oldalanként.
Dobozárnyék	A panel árnyéka.

A Kitöltés alcím Háttérszín mezője a panel mögötti takarórétegnek ad színt. A Bezáró gomb alcímben a Normál és a Rámutatás fülön külön formázhatod a bezáró gombot (például a Bezáró ikon megjelenését).

Kapcsoló

https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor

A képen a gomb stílusbeállításai láthatók; a panel nyitva van a sablon tartalmával.

A gomb alapbeállításai a Normál és a Rámutatás fülön külön adhatók meg:

Beállítás	Mit csinál
Háttér típusa	Egyszínű vagy színátmenetes háttér; színnel vagy háttérképpel.
Padding	A gomb belső távolsága.
Margó	A gomb külső távolsága.
Szegély típusa	A szegély stílusa; kiválasztás után a vastagság és a szín is állítható.
Keretsugár	A gomb sarkainak lekerekítése.
Dobozárnyék	A gomb árnyéka.

Az Ikonstílusok alcímben a Normál és a Rámutatás fülön a Kapcsolóikon megjelenését állíthatod. A Címke stílusai alcímben ugyanígy külön állítható a címke színe és a betűtípus (tipográfia).

Eredmény az oldalon

https://minta-bolt.hu/demo-hamburger-panel/

A képen a gomb látszik az ikonnal és a Továbbiak felirattal.