Információs doboz widget: beállítások, szolgáltatásdoboz, képes doboz és teljes doboz link

Az Információs doboz (angolul Info Box) egy ikont vagy képet, egy címet és egy rövid leírást fog össze egy blokkban, így az olvasó egy pillantással megérti az üzenetet. Több dobozból szolgáltatásrács, funkciólista vagy lépéssor építhető. A widget az Elementor szerkesztőjében a Plus Essential csoportban található.

Előkészületek

• Kapcsold be a widgetet: The Plus Addons → Widgets, keress rá az Info Box szóra, kapcsold be, majd mentsd.
• Szerkeszd az oldalt Elementorral, és húzd az Információs doboz widgetet a vászonra.
• A widget nagy része az alap bővítményben is elérhető. A Körhinta elrendezés, három stílus (2., 5. és 6. stílus), a Lottie ikon és a Teljes információs dobozra kiterjedő link a Pro kiadás része.
• Egy frissen ledobott widgetben már van tartalom: a cím The Plus, a leírás pedig az Elementor helyőrző szövege. Publikálás előtt írd át mindkettőt.

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

A képen az Elrendezés kiválasztása, az Információs doboz stílusa, a cím, a leírás, a Link és az Ikon kiválasztása mező látszik.

Elrendezés és stílus

Az Elrendezés kiválasztása az első döntés, mert a további mezők nagy része ettől függ.

Elrendezés	Mit kapsz
Lista (alap)	Egyetlen információs doboz. Több dobozhoz tegyél több widgetet egy Elementor-tárolóba vagy rácsba.
Körhinta	Több doboz egyetlen widgetben, amelyek csúsznak. Lásd az Információs doboz körhinta fejezetet.

Az Információs doboz stílusa hat elrendezést kínál az ikon, a cím és a szöveg helyére: 1. stílus és 6. stílus között. A 2. stílus, az 5. stílus és a 6. stílus Pro. Válaszd ki a stílust, mielőtt a Stílus fülön finomhangolsz: minden stílus máshová teszi az ikont és a címet, ezért az egyiknél beállított térközök a másiknál ritkán jók.

Tartalom

• Az információs doboz címe: a doboz címe. A Cím HTML-címke mező adja meg, milyen HTML-elemet használ. Az alapérték div, nem címsor. Ha a dobozok valódi szakaszcímek az oldalon, állítsd H3-ra vagy H4-re, hogy a keresők és a képernyőolvasók lássák a szerkezetet.
• Leírás: a rövid szöveg a címe alatt.
• Link: csak a cím szövegét linkeli. A teljes doboz linkjétől különbözik, lásd lentebb.

Mi áll a cím mellett: Ikon kiválasztása

Beállítás	Mit mutat	Kiadás
Nincs	Semmit, csak a címet és a leírást.	alap
Ikon (alap)	Betűtípus-ikont. Az Ikonbetűkészlet adja meg a készletet: Font Awesome, Font Awesome 5, Icons Mind vagy Icon Image (az utóbbi kettő Pro).	alap
Kép	Képet a médiatárból. A Képfelbontás mezővel választasz méretet.	alap
SVG	Feltöltött vagy előre elkészített SVG-t.	Pro
Lottie	Lottie-animációt URL-ből. Lásd az Információs doboz körhinta fejezetet.	Pro
Szöveg	Rövid szöveget ikon helyett, például lépések számozásához. A mező kezdőértéke 0, ezért a doboz addig egy kósza nullát mutat, amíg át nem írod.	alap

A Font Awesome 5 ikonok beágyazott SVG-ként jelennek meg, ezért akkor is látszanak, ha az oldal nem tölti be a Font Awesome stíluslapját.

Gomb

A Gomb kapcsoló alapból kikapcsolt. Bekapcsolva ezek a mezők jelennek meg:

Beállítás	Mit csinál
Gomb típusa	Alap (a lenti stílusok) vagy Globális stílus (egy mentett globális gombstílus).
Gomb stílusa	Stílus 1, Stílus 2 (alap) vagy Stílus 3.
Gomb szövege	A felirat.
Gomb hivatkozása	A cél: teljes URL vagy horgony, például #arak.
Ikon, Ikon pozíciója, Ikon térköze	A gomb ikonja.

Stílus fül

A Stílus fül szakaszai: Cím, Alsó szegély, Leírás, Háttérbeállítások, Gomb, SVG, Lottie, Ikon, Kép, Jelölő szövege, Carousel beállításai, Szöveg, Extra opciók és On Scroll View Animation. A szerkesztő csak azt a szakaszt mutatja, amely az aktuális elrendezésre és ikontípusra vonatkozik, ezért a lista dolgozás közben bővül és szűkül. A Háttérbeállítások a doboz hátterét tartalmazza normál és rámutatásos állapotra; az Extra opciók a doboz rámutatásos hatásait, a Jelölő szövege pedig a kitűzött szöveget (jelvényt) kezeli.

Szolgáltatásdoboz készítése

A szolgáltatásdoboz egy kis kártya: megnevezi a szolgáltatást, egy mondatban leírja, és tovább is visz. Ehhez az alap bővítmény elég.

1. Húzd az Információs doboz widgetet az oldalra.
2. Hagyd az Elrendezés kiválasztása mezőt Lista értéken.
3. Az Információs doboz stílusa mezőben válaszd az 1. stílus, a 3. stílus vagy a 4. stílus értéket: ez a három ingyenes.
4. A cím helyére írd a szolgáltatás nevét, a leírásba egy mondatot.
5. Az Ikon kiválasztása maradjon Ikon, és válassz ikont az Ikonkönyvtár mezőben, vagy válts Kép értékre.
6. Kapcsold be a Gomb kapcsolót, add meg a feliratot és a hivatkozást.

https://minta-bolt.hu/tp-d6-szolgdoboz/

A képen az ikon, a cím alatti vonal, a leírás és a Tovább gomb látszik.

Tudnivalók:

• Egy widget egy doboz. Négy szolgáltatáshoz négy widget kell: tegyél egy három vagy négy oszlopos tárolót, és minden oszlopba egy Információs doboz kerüljön. A Körhinta elrendezés ismétel ugyan, de ez Pro.
• A dobozok nem egyenlítik ki a magasságukat. Ha az egyik leírás hosszabb, igazítsd a tároló beállításaival, vagy kapcsold be a The Plus Addons → Extensions alatt az Equal Height kiterjesztést (lásd a Widgetek és kiterjesztések fejezetet), vagy rövidítsd a leírásokat hasonló hosszúra.
• A gomb valódi hivatkozás, ezért horgonnyal (#arak) is működik.

Képes doboz készítése

A képes doboz ugyanaz az Információs doboz, csak az ikon helyén fénykép vagy illusztráció áll. Csapattagokhoz, termékkategóriákhoz és esettanulmányokhoz jó.

1. Töltsd fel a képet a médiatárba.
2. Húzd az Információs doboz widgetet az oldalra, és hagyd a Lista elrendezést.
3. Válaszd az 1. stílus, a 3. stílus vagy a 4. stílus értéket. A három stílus abban különbözik, hová kerül a kép a szöveghez képest.
4. Töltsd ki a címet és a leírást.
5. Az Ikon kiválasztása értéke legyen Kép.
6. A megjelenő Kép használata ikonként mezőre kattintva válaszd ki a képet.

https://minta-bolt.hu/tp-d6-kepesdoboz/

A képen a doboz képe a cím és a leírás fölött áll.

A Képfelbontás a mező alatt azt dönti el, melyik legenerált fájlt tölti be az oldal:

Képfelbontás	Mit kér az oldal
Teljes (alap)	Az eredeti feltöltött fájlt, teljes méretben.
Thumbnail	A kis négyzetes kivágást, jellemzően 150 × 150 képpont.
Medium, Medium Large, Large	A WordPress köztes méreteit.
Egyéni	A te megadott méretedet.

A beállítás a letöltött fájlt változtatja, nem csak a megjelenített méretet. A Teljes érték egy kis dobozhoz is az eredeti, nagy képet töltetné le, ezért válassz a megjelenő mérethez közeli felbontást. A Stílus fülön a Kép szakasz tartalmazza a kép szélességét, térközeit, szegélyét, lekerekítését és rámutatásos hatását.

Tudnivalók:

• A kép az ikont helyettesíti, nem egészíti ki: az Ikon kiválasztása egyszerre egy típust ad. Ha visszaváltasz Ikon értékre, a kiválasztott kép nem vész el.
• Az alternatív szöveg a médiatár kép adataiból jön, ott állítsd be.
• Nincs kivágás vagy fókuszpont: a Képfelbontás csak a már legenerált méretek közül választ. Átkeretezéshez szerkeszd a képet a médiatárban.
• A widget magától nem tölti késleltetve a képet, ezért sok teljes felbontású képes doboz nehéz oldalt ad.
• Egy widget egy kép. Egy sor képes dobozhoz widgetenként egy oszlop kell.
• A 2. stílus, az 5. stílus és a 6. stílus Pro nélkül teljesen üres dobozt rajzol, nem esik vissza ingyenes stílusra.

Link a teljes dobozra

Az a kártya, amelyik csak a kis címre reagál, hibásnak hat. A látogató a doboz közepére kattint, és azt várja, hogy az működjön. A Teljes információs dobozra kiterjedő link egyetlen hivatkozásba csomagolja az egész dobozt, így az ikonra, a címre, a leírásra vagy az üres részre kattintva is megnyílik a célod.

Ez Pro funkció, és csak a Lista elrendezésben van itt. Körhintában ugyanez a kapcsoló minden Carousel információs doboz sor belsejében található.

Két „Link” mező

A Tartalom fülön két azonos nevű mező is lehet, és a panel nem különbözteti meg őket:

Melyik	Hol van	Mit linkel
A cím linkje	Mindig látszik, közvetlenül a Leírás alatt.	Csak a cím szövegét.
A teljes doboz linkje	Csak akkor jelenik meg, ha bekapcsolod a Teljes információs dobozra kiterjedő link kapcsolót.	Az egész dobozt.

A kettő nem adódik össze. Amint a teljes doboz linkje be van kapcsolva, csak az számít, a cím mezőjébe írt hivatkozás figyelmen kívül marad. Hagyd üresen az első mezőt.

Lépések

1. Add meg az Információs doboz stílusát, a címet, a leírást és az ikont a szokásos módon.
2. Hagyd üresen a leírás alatti Link mezőt.
3. Görgess lejjebb a Tartalom fülön, és kapcsold be a Teljes információs dobozra kiterjedő link kapcsolót.
4. Közvetlenül alatta megjelenik egy második Link mező: írd bele a cél URL-jét.
5. A mező beállítás ikonjával megadhatod, hogy a link új lapon nyíljon, vagy nofollow jelölést kapjon.

https://minta-bolt.hu/tp-d6-teljeslink/

A képen a doboz egyetlen hivatkozás: a cím már nem külön kattintható.

Működés és korlátok

• A link magát a dobozt veszi körül, ezért az ikon, a cím, a leírás és a körülöttük lévő térköz is kattintható.
• A dobozban lévő Gomb megtartja a saját Gomb hivatkozása mezőt: a gombra kattintva oda jut a látogató, ahová a gomb mutat, máshová kattintva a teljes doboz linkjére.
• A link csak a publikált oldalon él. A szerkesztőben a dobozra kattintva a widget kijelölődik.
• A mező kezdőértéke #, nem üres. Ha bekapcsolod a kapcsolót, de nem írsz valódi URL-t, a doboz végig kattintható, de nem visz sehova, az oldal csak az elejére ugrik. Mindig adj meg valódi címet.
• A dobozban a gombon kívül nem lehet másik, eltérő célú link: a leírás szövegében lévő hivatkozást is elnyeli a külső link.
• Pro nélkül a kapcsoló látszik, de a doboz nincs linkbe csomagolva, ezért a kattintás nem csinál semmit.

Hibaelhárítás

Jelenség	Teendő
A doboz teljesen üres.	Ellenőrizd az Információs doboz stílusa mezőt: a 2., 5. és 6. stílus Pro nélkül nem rajzol semmit. Ha egy oldal ilyen stílussal készült, és később kikapcsolod a Pro-t, az ikon, a cím és a leírás eltűnik, figyelmeztetés nélkül. Váltsd a dobozokat 1., 3. vagy 4. stílusra, mielőtt eltávolítod a Pro-t.
Nem találom a Lottie lehetőséget.	Az Ikon kiválasztása listájában a Lottie csak aktív Pro mellett jelenik meg.
A doboz címe „The Plus”, alatta helyőrző szöveg.	Ezek a mezők kezdőértékei. Írd át őket.
A widget nincs az Elementor panelen.	Kapcsold be az Info Box widgetet a The Plus Addons → Widgets oldalon, mentsd, és töltsd újra a szerkesztőt. A Plus Essential csoportban van.
A dobozra kattintva nem történik semmi.	A Teljes információs dobozra kiterjedő link ki van kapcsolva, vagy a mezője még #. Nézd meg a publikált oldalon, ne a szerkesztőben.
A doboz rossz oldalra visz.	Valószínűleg a cím Link mezőjét töltötted ki, a teljes dobozét nem. Töröld az elsőt, és töltsd ki a másodikat.
Csak a cím kattintható.	A Teljes információs dobozra kiterjedő link nincs bekapcsolva.
A kép hatalmas vagy elmosódott.	Állítsd át a Képfelbontás értékét.
A kép rossz helyen van.	A helyét az Információs doboz stílusa adja, külön igazítás nincs. Próbáld a 3. vagy 4. stílust.