Gomb widget: beállítások áttekintése

A Gomb (angolul Button) widget cselekvésre hívó gombot tesz az oldalra. 23 előre elkészített stílus közül választhatsz, és a stílusok mind elérhetők az ingyenes bővítményben is.

Használat előtt kapcsold be a widgetet: The Plus Addons → Widgets, keress rá a Button szóra, és kapcsold be a kapcsolóját. Az Elementor szerkesztőjében a panelen keress rá a Gomb névre, és húzd az oldalra. Az Elementor ingyenes változata is elég hozzá.

https://minta-bolt.hu/tp-gomb/

A kép az alapértelmezett Stílus 1 gombot mutatja a megadott szöveggel.

Az Elrendezés szakasz

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

A képen a gomb típusa, stílusa, igazítása, szövege és linkje látszik.

Beállítás	Mit csinál	Alapérték
Gomb típusa	Alap: a gomb megjelenését a Stílus fülön állítod. Globális: egy előre megadott globális gombstílust használ (a Globális stílus mezőben választod ki).	Alap
Gomb stílusa	A 23 stílus egyike (Stílus 1 … Stílus 23).	Stílus 1
Igazítás	A gomb igazítása balra, középre vagy jobbra; asztali, táblagépes és mobil nézetre külön állítható.	nincs megadva
Szöveg	A gombon látszó felirat.	Bővebben
Gombcímke szövege	Extra szöveg a gombon, csak a Stílus 23 esetén jelenik meg.	Ide kattintás
Rámutatáskor megjelenő szöveg	A gomb másik felirata, amely az egérrel való rámutatáskor látszik. Csak a Stílus 4, Stílus 11 és Stílus 14 esetén van, a többi 20 stílusnál rejtve marad.	Ide kattintás
Link	A gomb célcíme.	#
Egyéni attribútumok hozzáadása	Saját HTML-attribútumokat adhatsz a gomb elemhez.	ki

A gombfelirat rámutatáskor történő cseréjéhez tehát válassz egy olyan stílust, amelynél a Rámutatáskor megjelenő szöveg mező megjelenik (Stílus 4, Stílus 11 vagy Stílus 14), és írd bele a második feliratot.

Ikonbeállítások

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

Az Ikonbetűkészlet listából azt a könyvtárat választod, amelyből az ikon származik. Három lehetőség van:

• Font Awesome: klasszikus ikonok.
• Font Awesome 5: modernebb ikonok a Font Awesome 5 gyűjteményből.
• Icons Mind: letisztult, minimalista ikonok.

A választott könyvtártól függően más-más ikonválasztó mező jelenik meg. Az ikon helyét és méretét ezek a beállítások adják meg:

Beállítás	Mit csinál
Ikon pozíciója	Az ikon a felirat előtt vagy után áll.
Ikon térköze	A távolság az ikon és a felirat között; eszközönként állítható.
Ikon mérete	Az ikon mérete; eszközönként állítható.
Igazítás	Az ikon függőleges igazítása a gombon belül: fent, középen vagy lent; eszközönként állítható.

Egyéb opció

Az Egyéb opció szakasz Gomb ID mezőjébe azonosítót írhatsz. Ezzel az azonosítóval közvetlenül a gombhoz irányíthatod a látogatót (horgonylinkkel), vagy JavaScriptben is hivatkozhatsz rá egyéni működéshez.

A gomb formázása: Stílus fül

A Stílus fülön a Háttérbeállítás szakaszban a gomb belső és külső térközét (Padding, Margó), a betűtípust, a színeket, az ikon méretét és a hátteret állítod. A rámutatáskor érvényes színek külön vannak.

Különleges

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

A Különleges szakasz kapcsolói és listái külön hatásokat adnak a gombhoz. A képen jól látszik, melyik kapcsoló melyik hatást indítja.

Beállítás	Mit csinál	Alapérték
Mágikus görgetés	Görgetésre mozgó, átlátszóságot vagy méretet változtató hatás a gombon (a beállításai Pro funkciók).	Nem
Speciális effektus	Fedvényhatás a gombon: két hatásszín állítható (a beállításai Pro funkciók).	Nem
Parallaxis egérmozgással	A gomb az egérmozgás irányában elmozdul (a beállításai Pro funkciók).	Nem
Teljes szélességű gomb	A gomb kitölti a tárolója teljes szélességét.	Nem
A gomb rámutatáskor érvényes effektusai	Rámutatási animáció: növelés (grow), lenyomás (push), beúszás (bounce in), lebegés (float), vízszintes és függőleges billegés (wobble), árnyékos lebegés, árnyékos növelés és sugaras árnyék.	nincs kiválasztva
Árnyék színe	Az árnyék színe; csak az árnyékos lebegés, az árnyékos növelés és a sugaras árnyék hatásnál jelenik meg.	nincs megadva
Időközönkénti rázó animáció	A gomb időnként megrázza magát, hogy felhívja a figyelmet.	Nem
Időközönkénti rázó animáció időtartama	A rázás ismétlődésének ideje másodpercben; a kapcsoló bekapcsolása után jelenik meg.	5

Rámutatási effektus a gombon

A Különleges szakasz A gomb rámutatáskor érvényes effektusai listája kilenc kész animációt ad. Az animáció akkor indul, amikor a látogató a gombra mutat, és akkor áll le, amikor elhagyja. CSS-t nem kell írnod, és az effektus a 23 stílus mindegyikével működik.

1. Húzd a Gomb widgetet a tárolóba. A Tartalom → Elrendezés szakaszban válassz Gomb stílusát a 23 közül, és add meg a Szöveget.
2. Válts a Stílus fülre, és nyisd meg a Különleges szakaszt.
3. Az A gomb rámutatáskor érvényes effektusai listából válaszd ki az effektust. Az alapérték a Rámutatási effektus kiválasztása felirat, ami azt jelenti, hogy nincs effektus.

Effektus a listában	Mit csinál	Mire jó
Növekedés	Kicsit megnöveli a gombot	Szinte bármilyen cselekvésre hívó gombhoz
Tolás	Lenyomja a gombot	Valamit elküldő gombokhoz
Pattogó megjelenés	Felrugaszkodó mozgás	Játékos, fogyasztói oldalakhoz
Lebegőpontos szám (a „Float” effektus, a felirat a magyar felületen így szerepel)	Felemeli a gombot	Kártyákhoz, árlistákhoz
Vízszintes imbolygás	Oldalirányban rázza	Figyelemfelkeltésre, módjával
Függőleges imbolygás	Fel-le rázza	Mint az előző
Lebegő árnyék	Felemeli a gombot, és árnyékot vet alá	Lapos gomb térhatásához
Grow Shadow (a felirat a magyar felületen angolul áll)	Megnöveli és árnyékot ad hozzá	Sötét háttéren a leggyakoribb választás
Sugárirányú árnyék	Lágy, sugaras árnyékot terít szét	Finom hangsúly mozgás nélkül

A Lebegő árnyék, a Grow Shadow és a Sugárirányú árnyék effektusnál a lista alatt megjelenik az Árnyék színe mező is, hogy az árnyék illeszkedjen a színeidhez, a szürke alapérték helyett.

Korlátok:

• Egyszerre egy effektus választható, a gomb nem növekedhet és lebeghet egyszerre.
• Érintőképernyőn nincs rámutatás: telefonon és táblagépen a látogató semmilyen effektust nem lát, ezért ne erre bízd annak jelzését, hogy a gomb kattintható.
• Eszközönként külön érték nincs: az effektus minden töréspontnál ugyanaz.
• Az Árnyék színe csak az árnyékos effektusoknál számít, a Növekedés vagy a Tolás mellett nem változtat semmit.
• Néhány gombstílus magától is animál rámutatáskor. Ha ráteszel egy effektust, zsúfolt lehet, ezért nézd meg az eredményt közzététel előtt.

Hibaelhárítás:

• Az effektus nem indul el: ellenőrizd, hogy a lista nem maradt-e az üres alapértéken, majd generáld újra az Elementor fájljait az Elementor → Eszközök oldal Regenerate CSS & Data gombjával, és ürítsd az oldal előtti gyorsítótárat vagy CDN-t.
• Hiányzik az Árnyék színe mező: csak a három árnyékos effektusnál jelenik meg. Válassz közülük egyet, és a lista alatt megjelenik.
• Az effektus furcsán néz ki a gombstílus tetején: válts egyszerűbb stílusra, vagy állítsd vissza a listát a Rámutatási effektus kiválasztása értékre, és hagyd a stílusra a munkát.

Ha folyamatos, saját magától ismétlődő animációt szeretnél rámutatás nélkül, azt a lent leírt Folyamatos animáció adja, a rázást pedig az Időközönkénti rázó animáció kapcsoló.

Tooltip és folyamatos animáció a Haladó fülön

A Gomb két további funkciója nem a Tartalom vagy a Stílus fülön, hanem a Haladó fülön található, és csak a Pro változatban használható:

Funkció	Beállítások
Tooltip (buborékszöveg)	Tartalom típusa (sima szöveg vagy szerkesztő), leírás, szövegigazítás (balra, középre, jobbra), szövegszín, pozíció (balra, jobbra, fent, fent kezdő, fent záró, lent; alapérték: fent), megjelenítés (rámutatás vagy kattintás; alapérték: rámutatás), téma (sötét, világos, áttetsző; alapérték: sötét), nyíl (nincs, alapértelmezett, kerek), animáció (eltolódás el, eltolódás felé, halványítás, nagyítás, perspektíva), megjelenési és eltűnési idő (alapérték: 250 és 200 ezredmásodperc) és az interaktivitás (alapérték: be).
Folyamatos animáció	Animáció hatása (pulzálás, lebegtetés, dobálás, forgás; alapérték: pulzálás), animáció rámutatáskor, az animáció ideje másodpercben (alapérték: 2,5) és a transzformáció kiindulópontja (kilenc pozíció közül; alapérték: középen).

Görgetési animáció és haladó beállítások

Az On Scroll View Animation szakasz minden widgetnél ugyanúgy működik: a widget a látótérbe görgetéskor animálva jelenik meg. A Haladó fül további beállításai szintén minden widgetnél közösek.

Tudnivalók

• A gombnak minden stílusnál van Szöveg mezője; a Gombcímke szövege és a Rámutatáskor megjelenő szöveg csak a fent említett stílusoknál látszik.
• A bővítmény kiegészítő útmutatókat is ad a tooltip, a folyamatos animáció, a rázó animáció és a teljes szélességű gomb beállításához; ezek a fenti táblázatok beállításaira épülnek.