Webhely logója widget: logó, cserélődő logó rámutatáskor és 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.

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.

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).

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.

https://minta-bolt.hu/tp-kn2-logo-dupla/

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

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ásnak 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éget. 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.