# Webhely logója widget: logó, cserélődő logó rámutatáskor és ragadós fejlécben

> A Webhely logója widget beállításai: logó felvétele, link, igazítás, második logó rámutatáskor és külön logó a ragadós fejlécben.

A **Webhely logója** widget egy logóképet tesz az Elementor fejlécbe vagy láblécbe, a kezdőlapra vagy egy általad megadott címre hivatkozik, és egy második képre cserélheti rámutatáskor, illetve akkor, amikor a fejléc „ragadóssá” válik. Az ingyenes bővítményben nincs párja, a Pro része.

## Előkészületek

- Kapcsold be: **The Plus Addons → Widgets**, keress rá a **Site Logo** névre, és kapcsold be. Az Elementor panelen **Webhely logója** néven találod.
- A helye egy fejléc- vagy lábléc-sablon (az ingyenes Nexter Builderrel vagy az Elementor Pro Theme Builderével). Egy sima oldalon is megjelenik, de a logónak a fejlécben a helye.
- Szükséged van a médiatárban lévő képre. A widget **nem** a **Testreszabás → Webhely azonosítója** alatt beállított logót olvassa. Ha a widgetben nem választasz képet, semmi nem jelenik meg.

## Logó felvétele

1. Szerkeszd a fejléc- vagy lábléc-sablont Elementorral, és húzd bele a **Webhely logója** widgetet.
2. A **Tartalom** szakaszban a **Logó** maradjon **Normál**, ha egyetlen logót szeretnél. **Dupla**-t akkor válassz, ha rámutatáskor egy második képnek is meg kell jelennie.
3. A **Logó típusa** lehet **Kép** vagy **SVG**. Az alatta lévő mező ennek megfelelően változik: képnél a **Képes logó**, SVG-nél az SVG-logó mezője. A kettő sosem látszik egyszerre.
4. A **Képes logó** mezőben válaszd ki a fájlt. Amíg nem választasz, semmi nem jelenik meg.
5. Állítsd be a **Logó maximális szélessége** értéket. Alapértéke 100 px, ami a legtöbb logónál kevés, ezért ezt rendszerint elsőként módosítod.

![A Webhely logója panel Tartalom szakasza két logóval, dupla módban](./kepek/karuszell-navigacio-2-logo-panel-dupla.webp)

*A Webhely logója panel Tartalom szakasza két logóval, dupla módban* (https://minta-bolt.hu/wp-admin/post.php?post=60&action=elementor)

A képen a **Logó** értéke **Dupla**, ezért a **Képes logó** alatt megjelent a **Rámutatáskor megjelenő logókép** mező is.

![A kész logó az oldalon](./kepek/karuszell-navigacio-2-logo-front.webp)

*A kész logó az oldalon* (https://minta-bolt.hu/tp-kn2-logo/)

A képen a logó 220 képpont szélesen látszik a bal felső sarokban.

## Link, igazítás

Az **Extra opciók** szakasz a képen kívüli beállításokat tartalmazza.

- **Logó URL-típusa**: hová vigyen a logóra kattintás. Az alapérték a **Kezdőlap URL**, az egyéni hivatkozás kiválasztása pedig megjeleníti a logó URL mezőjét az Elementor szokásos beállításaival, például megnyitás új lapon vagy nofollow.
- **Igazítás**: balra, középre vagy jobbra. Kezdetben egyik sincs kijelölve, és a logó balra áll, amíg nem választasz.
- **Rögzített fejléc logója**: másik logó, amikor a fejléc ragadóssá válik (lásd lent).

![A Webhely logója Extra opciók szakasza](./kepek/karuszell-navigacio-2-logo-panel-extra.webp)

*A Webhely logója Extra opciók szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=61&action=elementor)

A képen a **Logó URL-típusa**, az **Igazítás** és a bekapcsolt **Rögzített fejléc logója** látszik, alatta a ragadós logó képe és szélessége.

## A beállítások

### Tartalom

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Logó** | **Normál**: egy logókép. **Dupla**: két kép, amelyek közt rámutatáskor vált. | Normál |
| **Logó típusa** | Képfájl vagy SVG. Ez dönti el, melyik médiamező jelenik meg. | Kép |
| **Képes logó** | A logókép. Ez az egyetlen hely, ahonnan a widget logót vesz. | Üres |
| **Képfelbontás** | A fájl melyik regisztrált WordPress-képmérete kerül ki. Az Elementor saját képméret-vezérlője. | Teljes |
| **Logó maximális szélessége** | A logó legnagyobb szélessége képpontban, eszközönként. Tartomány: 0 és 1000. | 100 px |
| **Rámutatáskor megjelenő logókép** | A második logó rámutatáskor. **Dupla** módban és **Kép** típusnál jelenik meg. | Üres |
| **Rámutatáskor megjelenő logó maximális szélessége** | A rámutatásos logó legnagyobb szélessége, eszközönként. Tartomány: 0 és 1000. | 100 px |

SVG típusnál a fájlmező helyett az SVG-logó mezői jelennek meg: a mező azt kéri, hogy csak `.svg` fájlt válassz a médiatárból.

### Extra opciók

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Logó URL-típusa** | Hová vezet a logó: a kezdőlapra vagy egyéni hivatkozásra. | Kezdőlap URL |
| **Igazítás** | Balra, középre vagy jobbra, eszközönként. | Nincs kijelölve |
| **Rögzített fejléc logója** | A ragadós fejlécben látszó harmadik kép. Csak **Normál** logónál kínálja fel a widget. | Ki |
| **Képes logó** (Extra opciók) | A ragadós logó képe. Ugyanaz a felirat, mint a **Tartalom** szakaszban: ez a **Rögzített fejléc logója** alatti. | Üres |
| **Logó maximális szélessége** (Extra opciók) | A ragadós logó legnagyobb szélessége, eszközönként. | 100 px |

Három felirat kétszer szerepel ugyanabban a panelben: a **Képes logó**, az SVG-logó és a **Logó maximális szélessége** egyszer a **Tartalom**, egyszer az **Extra opciók** alatt. Az **Extra opciók** alattiak mindig a ragadós logóra vonatkoznak.

## Logó cseréje rámutatáskor

A logócsere akkor hasznos, ha a márkának két változata van, például egy ikon és a teljes szövegjel. A widget ezt külön CSS nélkül elvégzi.

1. Szerkeszd a fejléc-sablont, és jelöld ki a **Webhely logója** widgetet (vagy húzz be egy újat).
2. A **Tartalom** szakaszban állítsd a **Logó** értékét **Dupla**-ra. Alatta megjelennek a rámutatásos logó mezői.
3. A **Logó típusa** legyen **Kép** vagy **SVG**. Ez dönti el, melyik mezőpárt kapod: **Képes logó** és **Rámutatáskor megjelenő logókép**, vagy a két SVG-mező.
4. A **Képes logó** mezőben válaszd ki az alap logót, és állítsd be a **Logó maximális szélessége** értékét (alapérték: 100 px).
5. A **Rámutatáskor megjelenő logókép** mezőben válaszd ki a második logót, és állítsd be a **Rámutatáskor megjelenő logó maximális szélessége** értékét (ez is 100 px-ről indul). Ha ezt a képet üresen hagyod, rámutatáskor semmi nem történik.
6. Mentsd az oldalt, és mutass a logóra a nyilvános oldalon. A második kép lép az első helyére.

![A logó nyugalmi állapotban](./kepek/karuszell-navigacio-2-logo-dupla-nyugalmi.webp)

*A logó nyugalmi állapotban* (https://minta-bolt.hu/tp-kn2-logo-dupla/)

A képen az alap (kék) logó látszik.

![A logó rámutatáskor a második képre cserélődik](./kepek/karuszell-navigacio-2-logo-dupla-hover.webp)

*A logó rámutatáskor a második képre cserélődik* (https://minta-bolt.hu/tp-kn2-logo-dupla/)

A képen a kurzor a logón áll, és a piros második kép váltotta fel az elsőt.

Hogyan működik:

- Nyugalmi állapotban csak az alap logó látszik. A rámutatásos logó ott van az oldalban, de rejtett és teljesen átlátszó.
- Rámutatáskor helyet cserélnek: az alap logó elrejtődik, a rámutatásos logó teljes fedettséggel, a beállított szélességben látszik.
- A csere a widget dolga, és csak akkor kerül rá a hover osztály a burkolóra, ha tényleg van megadva rámutatásos kép.
- A két kép mérete külön állítható, így egy magasabb vagy szélesebb változatot is vissza lehet igazítani.

## Másik logó a ragadós fejlécben

A ragadós fejlécnek gyakran más logó kell, mint a teljes méretűnek: kisebb jel, vagy olyan változat, amely tömör háttéren is olvasható. A **Webhely logója** a **Navigation Menu** widget ragadós állapotát követve cseréli a logót, ezért a két widgetnek együtt kell működnie.

A ragadós logó nem önálló. Csak akkor működik, ha ugyanabban a tárolóban vagy szakaszban van egy **Navigation Menu** widget bekapcsolt **Sticky Menu** beállítással. Nélküle mindkét kép megjelenik a kódban, de a csere sosem történik meg, és a szerkesztő nem figyelmeztet.

Előfeltételek:

- Két logó a médiatárban: a normál és a ragadós.
- A **Navigation Menu** (Pro) widget be van kapcsolva a **The Plus Addons → Widgets** oldalon.

A ragadós menü beállítása:

1. Szerkeszd a fejléc-sablont, és ugyanabba a tárolóba vagy szakaszba tedd a **Webhely logója** és a **Navigation Menu** widgetet. Ez fontos: a ragadós viselkedést a menüt tartalmazó tárolóra alkalmazza a widget, és a logó ezt a tárolót követi.
2. Jelöld ki a **Navigation Menu** widgetet, a **Navigation Bar** szakaszban a **Select Menu** mezőben válaszd ki a menüt.
3. A **Navigation Menu** **Extra Options** szakaszában kapcsold be a **Sticky Menu** beállítást. Alapból ki van kapcsolva.

A ragadós logó beállítása:

1. Jelöld ki a **Webhely logója** widgetet. A **Tartalom** szakaszban a **Logó** legyen **Normál**, és a **Képes logó** mezőben válaszd ki a mindennapi logót. Állítsd be a **Logó maximális szélessége** értékét (100 px-ről indul).
2. Az **Extra opciók** szakaszban kapcsold be a **Rögzített fejléc logója** beállítást. Csak akkor látszik, ha a **Logó** értéke **Normál**.
3. A megjelenő **Képes logó** mezőben (az **Extra opciók** alattiban, nem a **Tartalom** szakaszbelit) válaszd ki a ragadós logót, és állítsd be a **Logó maximális szélessége** értékét.

Mentsd az oldalt, és görgess annyit, hogy a fejléc ragadóssá váljon: a ragadós logó veszi át a helyet.

Az **Extra opciók** fenti képén látható a kiválasztott (zöld) ragadós logó és a 120 képpontos **Logó maximális szélessége**.

Hogyan működik:

- Mindkét logó mindig az oldalban van. Görgetés előtt a normál logó teljesen látszik, a ragadós teljesen átlátszó.
- A csere akkor történik, amikor a fejléc ragadóssá válik: a görgetési pozíció túllépi a fejlécet, a tároló „ragadós” jelölést kap, a normál logó elhalványul, a ragadós előtűnik.
- A kiváltó a **Navigation Menu**, nem a **Webhely logója**: a menü szkriptje jelöli meg ragadósnak a tárolót, amelyben áll, és a logó stílusa ezt a tárolót követi. Ezért kell a két widgetnek ugyanabban a tárolóban lennie.
- A két logó mérete külön állítható. Az **Extra opciók** **Logó maximális szélessége** csak a ragadós logóra vonatkozik, ezért lehet kisebb a teljes méretűnél.

## Honnan jön a logókép

A logó mindig csak a widgetben kiválasztott kép. A widget nem olvassa a **Testreszabás → Webhely azonosítója** alatti logót, és nincs saját tartalék. Ha a **Képes logó** mező üres, a widget üres, nulla szélességű tárolót ad ki: se kép, se helyőrző, se webhelynév. Ez akkor is így van, ha a Webhely azonosítójában van beállított logó. Rugalmas (flex) fejlécsorban az üres tároló egy láthatatlan, nem kattintható elem.

Ha úgy tűnik, hogy a logó eltűnt a fejlécből, nyisd meg a widgetet, és nézd meg a **Képes logó** mezőt. Rendszerint az üres.

## Hogyan működik (összefoglaló)

- A logó egyetlen hivatkozott képként kerül ki. A **Kezdőlap URL** a kezdőlapra mutat, új lap és rel attribútum nélkül.
- A kép alt szövege és a hivatkozás címe a webhely neve (a WordPress webhelycíméből), nem a képfájlból, és nincs vezérlő a módosítására.
- A **Logó maximális szélessége** valóban korlátozza a logót: egy 520 px széles fájl alapértéken 100 px szélesen jelent meg, a csúszka 220-ra emelése után 220 px szélesen.
- Az egyéni hivatkozás működik a link beállításaival: új lapon nyílik, és nofollow jelölést kap, ha bekapcsolod.
- Az **Igazítás** működik, ha választasz értéket: a **Jobbra** jobbra tolja a logót. Érintetlenül a logó balra áll, és nincs kijelölt gomb a panelben.

## Korlátok

- Nincs tartalék a Webhely azonosítójából. Üres **Képes logó** esetén üres, nulla szélességű tároló jön létre.
- A logó kicsiként indul: a 100 px alapérték keskenyebb a legtöbb logófájlnál. Ha a logód apró, ezért van, a csúszka 1000 px-ig emelhető.
- Az **Igazítás**nak nincs működő alapértéke: kezdetben egyik gomb sincs kijelölve, és a logó balra áll. A **Balra**, **Középre** és **Jobbra** értékek helyesen működnek, csak választanod kell.
- Nincs **Stílus** lap: a panelen a **Tartalom**, az **Extra opciók**, a súgó és az Elementor **Haladó** lapja van. A térköz, a szegély és a háttér a **Haladó** lapról állítható.
- Az alt szöveg és a hivatkozás címe nem szerkeszthető: mindkettő automatikusan a webhely neve.
- **Dupla** módban üres **Rámutatáskor megjelenő logókép** esetén egy logó jelenik meg, és a rámutatás nem változtat semmit.
- A ragadós logó és a rámutatásos logó nem kombinálható: a **Rögzített fejléc logója** csak **Normál** módban érhető el, ezért egy widget nem csinálhatja mindkettőt.
- Érintőképernyőn nincs hover állapot, ezért telefonon és táblagépen a látogatók mindig csak a nyugalmi logót látják.
- Nincs átmenet-vezérlő: a csere időzítése és lefutása nem állítható.
- Ragadós **Navigation Menu** nélkül semmi nem történik. Ha a ragadós logó be van kapcsolva és van kép, de nincs **Sticky Menu**-s **Navigation Menu** ugyanabban a tárolóban, a csere soha nem fut le, akármeddig görgetsz. A szerkesztő nem figyelmeztet, ezért a beállítás elromlottnak tűnik. Ha a menü másik tárolóban van, ugyanez a helyzet.

## Hibaelhárítás

**Nem jelenik meg semmi a logó helyén.** A **Képes logó** mező üres. A widgetnek nincs tartaléka: nem használja a Webhely azonosítója logóját, és nem mutat helyőrzőt. Nyisd meg a widgetet, és válassz képet.

**A logó túl kicsi.** A **Logó maximális szélessége** 100 px-ről indul. Emeld a **Tartalom** szakaszban, a csúszka 1000 px-ig megy.

**A logó nem mozdul balról.** Alapból egyik **Igazítás** gomb sincs kijelölve. Kattints a **Középre** vagy a **Jobbra** gombra az **Extra opciók** alatt.

**Nincs Stílus lap a widgeten.** Nincs. A térközhöz, szegélyhez és háttérhez a **Haladó** lapot használd.

**Rámutatáskor nem történik semmi.** A **Rámutatáskor megjelenő logókép** üres. Ha a **Logó** értéke **Dupla**, de nincs megadva hover kép, a widget egy logót ad ki. Válaszd ki a második képet, és mentsd.

**Nem találom a Rámutatáskor megjelenő logókép mezőt.** Csak akkor létezik, ha a **Logó** értéke **Dupla**, és a **Logó típusa** **Kép**. SVG típusnál az SVG megfelelő mezője jelenik meg helyette.

**A rámutatásos logó rossz méretű.** Külön csúszkája van: a **Rámutatáskor megjelenő logó maximális szélessége** értékét állítsd, ne a **Logó maximális szélessége**t. Mindkettő 100 px-ről indul.

**Görgetéskor nem változik a logó.** Szinte mindig a **Navigation Menu** miatt: ellenőrizd, hogy ugyanabban a tárolóban van-e, mint a **Webhely logója**, hogy ki van-e választva menü a **Select Menu** mezőben, és hogy a **Sticky Menu** be van-e kapcsolva az **Extra Options** alatt. Mindhárom kell.

**Nem találom a Rögzített fejléc logója kapcsolót.** Az **Extra opciók** szakaszban van, és csak akkor látszik, ha a **Logó** értéke **Normál**. Ha **Dupla**-n áll, állítsd vissza.

**Két Képes logó mező van.** Igen. A **Tartalom** alattiban a mindennapi logó van, az **Extra opciók** alattiban (a **Rögzített fejléc logója** alatt) a ragadós. Ugyanez igaz a **Logó maximális szélessége** mezőre és az SVG-mezőre.

**A ragadós logó rossz méretű.** Használd az **Extra opciók** alatti **Logó maximális szélessége** csúszkát. A **Tartalom** alattiban csak a mindennapi logó méretét állítod. Mindkettő 100 px-ről indul.