fbpx
2008 óta foglalkozom WordPress rendszerek megtervezésével és kialakításával. Ezen idő alatt számtalan sikeres oldal felépítésében vettem részt. Ezt a tapasztalatot szeretném átadni neked. A siker kulcsa a tudás!

Egy értékesítői oldal tervezésénél rengeteg mindenre kell figyelni, akár marketing szempontból, akár a megjelenés szempontjából. Természetesen fontos a szép megjelenés, dinamikus tartalom és az oldal összképe is. Ebben a bejegyzésben megmutatom, hogyan kell létrehozni egy olyan értékesítői oldalt, aminek asztali megtekintés esetén az oldal első részében egy sticky (ragadós) területünk van visszaszámláló és szöveg modullal.

Ez azért jó, mert a vásárlóban folyamatosan van egy sürgetettség érzése, hogy az extra kedvezményes ajánlatról lecsúszik, így nagyobb eséllyel fog vásárolni Tőlünk. De mutatom, hogy pontosan mire gondoltam.

Felül látható egy piros sáv, illetve alatta egy sötét sáv, ami tartalmaz egy visszaszámláló modult, illetve egy CTA gombot. Ez a két sáv pedig ezen az oldalon fixen rögzítésre kerül az oldal tetején, görgetés közben, így mindig szem előtt maradva. Ezt könnyen létrehozhatjuk egy rendszeres szakasz létrehozásával, illetve két (zöld) sor beszúrásával. Mindkét sor esetén különböző háttérszín került megadásra, egy teljes sor, illetve egy 2/3 és 1/3-os megoldásban. Fontos, hogy mobilon nem érdemes engedélyezni ezt a szakaszt, mert túl sok értékes tartalmat vesz el mobilos megjelenítésben, illetve nem is ilyen tagoltan jelenik meg.

Letölthetővé tettem ezt a szakaszunkat – ide – kattintva. Későbbiekben megmutatom, hogyan tudod használni ezt a szakaszt a saját oldaladon.

Hogyan kezdj neki felépíteni a sticky menüt Divi-ben?

A letöltött .json fájlt be fogjuk importálni a Divi-be, így az admin oldalon kattintsunk a Divi » Divi könyvtár menüpontra, majd az Importálás és Exportálás gombra. Itt válasszuk az Importálás lehetőséget és kattintsunk a válasszunk fájlt gombra és értelemszerűen válasszuk ki a letöltött fájlunkat (sticky-menu-divi.json).

Második lépésként hozz létre egy új oldalt, majd adj neki egy címet és az oldal tulajdonságok menüpontnál pedig válaszd ki a Blank Page lehetőséget. Ezzel a lehetőséggel eltüntetjük a fejléc és lábléc menüt, szóval egy teljesen új és lecsupaszított oldalt hozunk létre. Ez fontos lépés, mert ha nem választod ki a Blank Page lehetőséget, akkor az oldal tartalmazni fog egy fejléc és lábléc menüt is, amire egy értékesítői oldalon nincs szükségünk rá.

Amint létrehoztuk az új oldalunkat, akkor kattintsunk a Use Divi Builder (lila) gombra. Utána három lehetőség közül tudunk választani. Itt válasszuk az építés megkezdése lehetőséget (első).

Amint betöltődött az üres oldalunk, nincs mit tennünk, mint létrehozni egy új rendszeres szakaszt. Itt válasszuk a hozzáadás könyvtárból lehetőséget és válasszuk ki a feltöltött elrendezésünket (sticky-menu-divi)

Ha mindent jól csináltunk akkor ez a látvány fogad minket.

Annyi dolgunk van még vele, hogy a felette lévő rendszeres szakaszt töröljük. Ehhez csak kattintsunk a képen látható felső kék sávban lévő kuka ikonra, így legfelül már csak a piros és sötét sávval ellátott sorunk lesz látható. Ezeknek a soroknak innentől kezdve már változtatható a hátterüknek a színe, szabadon módosíthatóak a modulok a saját elképzelésednek megfelelően. Viszont van még egy rossz hírem, ez még nem lesz sticky menü, ehhez szükségünk lesz még egy bővítményre, amit azonnal telepíteni is fogunk. De előbb még el kell helyeznünk egy CSS azonosítót a rendszeres szakaszunkba. A letöltött és beimportált elrendezésünk ezt már tartalmazza, de megmutatom, hogy pontosan miről beszélek.

A felső rendszeres kék szakasz esetében kattintsunk a beállítás ikonra, majd lépjünk a haladó fülre, ahol a CSS azonosítónál szerepelnie kell a sticky elnevezésnek. Ezt módosíthatod bármi más szövegre. Amire figyelni kell, az az, hogy ne legyen benne ékezet, lehetőség szerint csak szöveg legyen benne. Ezzel még lesz dolgunk, szóval jegyezd meg, ha netán módosítottad volna.

Mint ahogy feljebb említettem, tiltani fogjuk a mobilos és tabletes megjelenést, mert nem nézne ki szépen ezeken a platformokon, ezt is a haladó fülön érhető el lejjebb görgetve a láthatóság opciónál. (Ezzel egyébként semmilyen teendőd nincs, mert alapból tartalmazza a letöltött és beimportált fájl).

Amint ezzel a lépéssel elkészültünk, elkezdheted felépíteni az oldal további tartalmát. Mint ahogy említettem, szükségünk van még egy bővítményre, amit most telepíteni is fogunk. Kattints az admin oldalon a Bővítmények » Új hozzáadása lehetőségre. Itt pedig a keresőbe írjuk be ezt: Sticky Menu (or Anything!) on Scroll. Erre a bővítményre lesz szükségünk, úgyhogy nyomjunk a telepítés gombra.

A bővítmény telepítése és bekapcsolása után elérhetjük a Beállítások » Sticky Menu (or Anything!) menüponton keresztül. A sticky element opciónál írjuk be a fent létrehozott CSS azonosítót, ami az esetünkben ez lesz: #sticky (ha módosítottad, akkor arra írd rá, de fontos előtte a kettőskereszt, különben nem fog működni). A Check for Admin Toolbar opciónál tegyünk egy pipát. Aztán mentsünk rá a beállításokra.

Kattintsunk az advanced settings fülre (második lehetőség a bővítmény beállításánál) és a Z-index: (optional) résznél ez az érték szerepeljen: 99998. A többi érték maradhat üresen, majd szintén mentsük el a beállításainkat.

Ha ezzel végeztünk, akkor már az oldalunk tartalmaz egy sticky menüt. Ha több oldalon szeretnéd ezt használni, akkor minden egyes rendszeres szakasz esetében ezzel a CSS azonosítóval kell ellátni, így több oldalon is használhatóvá válik. Amint megváltoztatod a CSS azonosítót vagy pedig kikapcsolod ezt a bővítményt, akkor nem fog működni, amit most együtt felépítettünk, úgyhogy érdemes figyelni erre.

Remélem hasznos volt számodra egy a cikkünk, ha bármilyen kérdésed van ezzel kapcsolatban, kérlek írj hozzászólást és segíteni fogunk!

Most elérhető

50% kedvezménnyel

yoast seo

tovább a fizetéshez

December 12-ig