Galéria horgonyalapú navigáció

A Galéria horgonyalapú navigáció elem görgethető képsort készít. A képek egymás alatt jelennek meg, mellettük (vagy alattuk) horgonyos lapozó van, amellyel a látogató az adott képre ugrik. Termékekből, bejegyzéstípus-mezőből vagy kézzel választott képekből dolgozik, megadható hozzá kiemelt videó, és minden részéhez van stílusbeállítás. Termékoldal-sablonban jól használható függőleges, oldalsó lapozós termékgalériának.

Az elem Elementorban és blokkszerkesztőben is elérhető. Az Elementoros változathoz az Elementor ingyenes változata elég.

Az elem beszúrása Elementorban

1. Nyisd meg az oldalt vagy sablont (például a termékoldal-sablont) az Elementorban.
2. Húzd be a Galéria horgonyalapú navigáció elemet a kívánt szekcióba.
3. A Tartalom fülön állítsd be az alábbi szekciókat.

Általános

Itt választod ki, honnan jönnek a képek.

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

A képen a Forrás legördülő és a lenti kapcsolók látszanak. A forrás átváltásakor a hozzá tartozó mezők cserélődnek.

Beállítás	Mit csinál
Forrás	A képek forrása. Három érték közül választhatsz, lásd lent.
Termék ID	WooCommerce-termék forrásnál a termék azonosítója. Termékoldal-sablonban üresen is hagyhatod, ilyenkor az aktuális termékét használja.
Galériakulcs	Bejegyzéstípus forrásnál a galériamező kulcsa. Egyedi bejegyzés-sablonban vagy listaelem-sablonban használható.
Képek hozzáadása	Kézi választásnál a Médiatárból választott vagy feltöltött képek.
Videó bekapcsolása	Kiemelt videó a galériában, lásd a Videó fejezetet.
Nagyítás bekapcsolása	Nagyítás képre mutatáskor, lásd a Nagyítás és lightbox fejezetet.
Galéria bekapcsolása	A lightbox bekapcsolása. Bekapcsolva megjelenik a Galéria szekció, és a kép kattintásra vagy gombbal nagyban nyílik meg, lapozható.

A Forrás három értéke:

• Bejegyzéstípusok: a bejegyzéstípus megadott egyedi mezőjében tárolt képeket jeleníti meg;
• Kézi kiválasztás: a képeket te töltöd fel vagy választod ki a Médiatárból;
• WooCommerce-termékek: a termék galériaképei jelennek meg (a termék kiemelt képe és galériaképei). A Kiemelt kép letiltása kapcsolóval a kiemelt kép kihagyható.

Képek

Itt két mezőt találsz: a Képméret a főképek, a Bélyegképek mérete a bélyegképes lapozó képeinek méretét adja meg. Válassz a WordPress által generált méretek közül.

Navigáció

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

A képen a Navigáció típusa két ikonja látszik (pontok vagy bélyegképek), alatta a Navigáció pozíciója legördülő.

• Navigáció típusa: pontok vagy bélyegképek.
• Navigáció pozíciója: a lapozó a képeken Kívül (ez az alapérték) vagy belül van.

Galéria (lightbox)

A szekció a Galéria bekapcsolása kapcsoló után jelenik meg.

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

A képen az Indítási típus „Gomb” értéke látszik, alatta a gomb ikonja, pozíciója és a vezérlők kapcsolói.

• Indítási típus: mi nyitja meg a lightboxot. „Kép” esetén a képre kattintás, „Gomb” esetén egy külön gomb. Gomb esetén további beállítások jelennek meg: a Gomb ikonja (az Ikonkönyvtárból választva vagy SVG-ként feltöltve), a Pozíció (például jobb felső) és a Megjelenítés rámutatáskor kapcsoló, amellyel a gomb csak az egér ráhúzásakor látszik.
• Vezérlők: mindkét indítási típusnál elérhetők. Kapcsolhatók: Felirat megjelenítése, Teljes képernyős mód mutatása, Nagyítás megjelenítése, Megosztás megjelenítése, Számláló megjelenítése, Nyilak megjelenítése.

Videó

Ha a termékhez videót adtál, a megjelenítését a Videó szekcióban állíthatod (a Videó bekapcsolása kapcsoló után jelenik meg). A mezőkről a Videó fejezet szól.

Stílus

A Stílus fülön formázhatod a képeket és a lapozót. Több rész beállítható: a képek közti térköz, a szegély, a háttérszín és a lapozó. A háttérszín csak átlátszó hátterű PNG-képeknél vagy belső margó megadása esetén látszik.

Ha kész vagy, kattints a Közzététel gombra, és nézd meg az eredményt az oldalon.

https://minta-bolt.hu/galeria-horgony/

A képen a képek egymás alatt görgethetők, bal oldalon pontok jelzik az egyes képeket.

A blokk használata a blokkszerkesztőben

A Gallery Anchor Nav blokk ugyanezt tudja blokkszerkesztőben.

1. Szerkeszd meg az oldalt vagy bejegyzést.
2. Kattints a blokkbeszúró gombra, és húzd be a blokkot, vagy írj be egy „/” jelet és a blokk nevét.
3. A General beállításoknál válaszd ki a forrást: „Post Types”, „Manual Select” vagy „WooCommerce Products”. Itt kapcsolható be a videó, a nagyítás és a Photoswipe-galéria (a lightbox) is.
4. A Photoswipe-galéria Trigger Type mezőjében „Image” esetén a képre kattintás nyitja a lightboxot. „Button” esetén megjelenik a Trigger Button Position (jobb felső, jobb alsó, bal alsó, bal felső vagy közép), a gomb ikonja (Médiatárból választva vagy feltöltve) és a Show on Hover kapcsoló, amellyel a gomb csak egérrel való rámutatáskor látszik. A Photoswipe-galériának külön beállítási szekciója is van.
5. Az Images fülön a képméretet és a Navigation Position mezővel a lapozó helyét (a képek előtt vagy után) adhatod meg.
6. A stílus a JetStyleManager bővítménnyel állítható: itt módosítható a képek közti térköz (Space Between Images), a szegély és a háttérszín. A háttérszín csak átlátszó PNG-nél vagy belső margó megadása esetén látszik.
7. Kattints a Közzététel gombra, és nézd meg az eredményt.

A blokkszerkesztő általános tudnivalóit a Blokkszerkesztő fejezetben találod.