Hogyan lehet létrehozni egy „repülős” CTA gombot a navigációs menühöz

Cselekvésre ösztönző gomb hozzáadása a navigációs menühez több kattintást és jobb konverziós arányt eredményez. Ezért fontos, hogy világossá tegye a látogatók számára, hogy „erre a gombra kattintani kell, és értékes”. A repülési animáció nagyszerű módja annak, hogy felhívja a figyelmet a webhely egyik gombjára. A fejlécgomb egyszerű „beszállási” műveletéhez csak egy kis CSS szükséges.

Nézze meg a teljes útmutatót a CTA gombok létrehozásáról a fejléc menüben, 5 ingyenes gombtervezéssel, amelyekből beugorhat a menü CTA gyors beállításához.

Ehhez az oktatóanyaghoz megtanul egy egyszerű CSS-t, amellyel létrehozhat egy fly-in animációt a cselekvésre ösztönző gombhoz, és beállíthatja, hogy csak a webhelyének kezdőlapján jelenjen meg. Hozzáadunk egy „shop” gombot egyedi stílusokkal. Ebben a példában láthatja, hogy a gomb bal oldalról jelenik meg, amikor lefelé görget az oldalon.

Mivel legfelső részünk a webhely üzletének van szentelve, úgy döntöttem, hogy csak akkor aktiválom ezt a menüpontot, ha a felhasználó el akar görgetni rajta. Ez a technika a WordPress & Divi szolgáltatásait használja e hatás eléréséhez.

Csak a kezdőlap megcélzása

A létrehozáshoz a választót előhívja a .home osztállyal. Ez hozzáadja az egyéni stílust ahhoz az oldalhoz, amelyik otthon van beállítva a WordPress webhelyén.

Animáció „görgetés közben”

Divi egy .et-fix-header osztályt ad hozzá a # main-header ID on-scrollhoz. Így tudja használni a testreszabót, hogy a fix fejléc másképp viselkedjen a görgetés után (alapértelmezés szerint ez csak kissé zsugorodik). Hackelheti ezt a funkciót, hogy létrehozhassa a „görgetés előtti” és a „görgetés utáni” állapotokat az új CTA gombhoz.

A gombstílusok létrehozása

Ez a kód alkalmazza a gombstílusokat a navigációs menü első elemére. Beállíthatja a háttér színét és a párnázást, de ügyeljen arra, hogy a negatív margót megegyezze a felső párnázattal, hogy ne ellensúlyozza a többi menüpontot.

Görgetés előtt

Ez a kis kód hozzáadja a gombot balra, és láthatatlanná teszi, hogy amikor görget, balról repüljön be.

Görgetés után

Most használja ezt a kódrészletet a gomb újbóli láthatóvá tételéhez az eredeti helyzetbe való visszahelyezéssel. Vegye figyelembe az ’.et-fix-header’ osztály megjelenését.

Ez az! Három aranyos bit CSS, amely sima menüelem-animációt hoz létre. Az első gyermek álosztályt használtuk az első elem megcélzásához, de könnyen használhatta a menüpont azonosítóját vagy az „utolsó gyermek” álosztályt, hogy bejöjjön a jobb oldalról.

Tudjon meg többet a blog CTA gombjairól, és rengeteg ingyenes CSS stílus kódrészletet szerezzen be az ingyenes Divi Snippets könyvtárból. Gyorsan alakítsa át a webhely stílusát a másolás és beillesztés kódbeállításokkal. Nagyon jó. És mint mindig, ne felejtse el lőni nekünk egy üzenetet az alábbi megjegyzésekben, ha bármilyen észrevétele vagy kérdése van.