Gomb widget és Gomb elem

A gombok az oldalon a látogatók műveleteit irányítják: egyértelmű felhívást adnak, és növelik az elköteleződést. A Gomb widget látványos, kattintható gombokat ad az oldaladhoz, amelyek megjelenését, viselkedését és link-célját szabadon állíthatod.

Két változat van, attól függően, melyik szerkesztőt használod:

• Gomb widget: az Elementor Editor V3-ban.
• Gomb elem: az Editor V4-ben (atomikus szerkesztő). A két szerkesztő különbségeit lásd: A V3 és a V4 szerkesztő különbségei.

Mire jó?

• Hírlevél-feliratkozásra: egy „Feliratkozom” gomb a cikkek végén.
• Ingyenes próbaidőszak kínálatánál: „Kipróbálom ingyen” gomb a regisztrációs oldalra.
• Blogbejegyzések végén közösségi oldalakra mutató gombok.
• Szoftverek termékoldalán „Letöltés” gomb.
• A nyitó (hero) részben egy feltűnő gomb a regisztrációs oldalra.

A widget hozzáadása és törlése

1. A szerkesztőben kattints a + gombra, hogy megjelenjen az összes widget (V4-ben az összes elem).
2. Kattints a Gomb elemre, vagy húzd a vászonra. A részleteket lásd: Elemek hozzáadása az oldalhoz.

Törlésnél jelöld ki a vásznon a gombot, és nyomd meg a billentyűzeten a Delete billentyűt. Részletek: Elemek törlése és mozgatása.

Gomb widget (V3)

Beállítás lépésről lépésre

1. Add a Gomb widgetet a vászonhoz.
2. A Tartalom fülön, a Gomb szekcióban a Típus mezővel válassz öt kialakítás közül: Alapértelmezett, Információ, Sikeres, Figyelem vagy Veszély.
3. A Szöveg mezőbe írd a gomb feliratát.
4. A Link mezőbe írd a cél URL-jét. A fogaskerék ikonra kattintva beállíthatod, hogy a link új ablakban nyíljon meg, vagy hogy kapjon nofollow jelölést.
5. Ha szeretnél ikont, az Ikon mezőben választhatsz: Nincs, SVG feltöltése (az SVG-támogatás bekapcsolásáról lásd: SVG-ikonok, ikonkönyvtár és soron belüli ikonok), vagy ikon az Ikonkönyvtárból.
6. Az Ikon pozíciója mezővel az ikon a szöveg elé vagy mögé kerül.
7. Az Ikon térköze mezővel az ikon és a szöveg közti távolságot adod meg. Ez a két mező csak akkor jelenik meg, ha választottál ikont.
8. A Gomb ID mezőbe egyedi azonosítót írhatsz, ha szükséges (például Google Analytics-eseményekhez vagy a Meta Pixelhez). Az ID legyen egyedi az oldalon, szóköz nélkül, és csak az A-z, 0-9 és az alulvonás karaktereket tartalmazhatja.

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

A képen a Típus, a Szöveg, a Link (fogaskerékkel), az Ikon, az Ikon pozíciója, az Ikon térköze és a Gomb ID mező látszik.

A Link mezőben a fogaskerék a következőket adja: a megnyitás új ablakban a látogatót az oldaladon tartja, a nofollow pedig megakadályozza, hogy a keresők az oldaladat a linkelt oldallal összekapcsolják.

A gomb méretének módosítása

1. Kattints a Stílus fülre.
2. A panelen módosítsd a Padding értékeit: így szabályozod a gomb méretét.

Stílus fül

Beállítás	Mit csinál
Pozíció	A gomb igazítása az oszlophoz képest: balra, középre, jobbra vagy sorkizárt
Tipográfia	A gombfelirat betűtípusa és mérete
Szövegárnyék	Árnyék és elmosás a gombfeliraton
Normál	Az alapállapot: Szöveg színe és háttér (Háttér típusa, Szín)
Rámutatás	A gomb megjelenése, ha az egér fölötte van: szöveg színe, háttér, és rámutatási animáció; átmeneti idő is megadható
Dobozárnyék	Árnyék a gomb körül
Szegély típusa	A gomb szegélye; vastagság és szín adható hozzá
Sarkok lekerekítése	A sarkok kerekítése
Padding	A szöveg és a gomb széle közti hely

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

A képen a Normál és Rámutatás állapot választója, a háttér, a szegély és a sarkok beállításai látszanak.

A szövegárnyékról és a dobozárnyékról lásd: Árnyék. A gombok színátmenetes háttéréről lásd: Színátmenetes háttér.

Haladó fül

A Haladó fülön a widget pozícióját, térközeit és egyedi kódját állíthatod, ugyanúgy, mint a többi widgetnél.

Az eredmény az oldalon

https://minta-bolt.hu/widget-demo/

A képen a Sikeres típusú gomb látszik: zöld háttérrel és a felirat előtt álló ikonnal.

Gomb elem (V4)

A Gomb elem az Editor V4 felhasználóinak szól.

Példa: átlátszó hátterű, kerek gomb fehér szegéllyel

Egy edzőterem nyitóoldalán egy feltűnő gombot teszel a hero részbe; a látogatók a gombra kattintva a regisztrációs oldalra jutnak.

1. Add a Gomb elemet a vászonhoz. A bal oldali panelen megjelennek az elem beállításai.
2. Az Általános fülön a gomb szövegének mezőbe írd: „Kezdjük el”.
3. A link mellett kattints a plusz jelre, és írd be a cél oldal URL-jét.
4. Ha a gomb túl nagy, nyisd meg a Méret szekciót, és állítsd a szélességet 200-ra, a magasságot 50-re.
5. Kattints a Stílus fülre, nyisd meg a Tipográfia szekciót, és válaszd ki a betűtípust, a betűvastagságot (például 600) és a betűméretet (például 16). Részletek: Betűtípus, méret és szín.
6. Az átlátszó háttérhez nyisd meg a Háttér szekciót, kattints a színmintára, és állítsd az átlátszóságot (opacity) 0%-ra. A színválasztóról lásd: Színválasztó.
7. A kerek, fehér szegélyű alakhoz nyisd meg a Szegély szekciót, kattints a szegély-beállító ikonra, írj be 50-et az összes sarokhoz, kattints a Szegély melletti plusz jelre, a vastagságot állítsd 2-re, a színt #FFFFFF-re.
8. Hogy a gomb az egér fölé mutatáskor megváltozzon, állapotot kell szerkesztened: az Osztályok mezőben kattints a local szó melletti három pontra, és válaszd a Rámutatás állapotot. A mezőben megjelenő szó rózsaszín lesz, ez jelzi, hogy most azt szerkeszted, hogyan néz ki a gomb, ha a látogató az egérrel fölé mutat. Az állapotokról lásd: Elemállapotok.
9. Kattints a Szín melletti színmintára, és állítsd a hex értéket #FFFFFF-re, az átlátszóságot 100%-ra. Így az egér fölé vitelkor a gomb fehér lesz.

Az Általános fül beállításai

Beállítás	Mit csinál
Gomb szövege	A gombon megjelenő felirat
Link	A plusz jelre kattintva adhatod meg a linket; a gombra kattintva a látogató megnyitja. Ha van link, bekapcsolhatod, hogy új lapon nyíljon meg
ID	Az elem azonosítója: így közvetlenül linkelhetsz erre az elemre

A Stílus fül beállításai

A Stílus fül szekciói a V4 elemeknél egységesek: elrendezés, térköz, méret, pozíció, tipográfia, háttér, szegély és hatások. Részletesen: Méret, Pozíció, Tipográfia, Háttér és Hatások.