Hogyan hozz létre és szerkessz landing oldalakat

A landing oldalak hatékony eszközök lead gyűjtéshez, feliratkozói bázis építéséhez és egy-kattintásos konverziók ösztönzéséhez. Akár e-mail-címeket gyűjtesz, szezonális kampányt népszerűsítesz, vagy egy értékelés beküldése után köszönő oldalt jelenítesz meg, egy jól felépített landing oldal sokat javíthat az eredményeken.

Ez a modul valamivel technikaibb, mint a korábban megszokott egyszerűbb szerkesztők. Egy rugalmas, komponensalapú építőt használ, amely nagyobb szabadságot ad a testreszabásban, különösen akkor, ha van némi CSS tapasztalatod.

De ne aggódj: a megfelelő utasításokkal és néhány gyakorlati példával, amelyeket ebben a cikkben tárgyalunk, azt fogod tapasztalni, hogy a saját landing oldalad elkészítése ugyanolyan intuitív és kifizetődő lehet.

⚠️ Mielőtt elkezded: A Landing Pages modul használatához a domainednek érvényesítve kell lennie. Ha ezt még nem tetted meg, lépj a 'Beállítások' > 'Email beállítás' menüpontra, és fejezd be a folyamatot.

Menjünk végig minden lépésen, hogy magabiztosan létrehozhassa első landing oldalát a semmiből, vagy finomhangolhassa egy meglévőt.

1. A theMarketerben lépj a „Közönség” > „Landing oldalak” menüpontra.

Itt láthatod az alapértelmezett, használatra kész oldalakat, például a Visszajelzés követő oldalt, a Felmérés oldalt vagy a Leiratkozási oldalt. Ezek a Típus oszlopban „rendszer” jelöléssel jelennek meg.

A rendszeroldal tartalmának szerkesztéséhez kattints a megfelelő toll ikonra, vagy kattints a jobb oldalon található három pontra az engedélyezéshez és közzétételhez.

Egy egyedi landing oldal létrehozásához kattints a jobb oldalon található „+Landing oldal létrehozása” gombra.

2. Válassz sablont, vagy kezdj üres oldalról

Ez a lépés nagyon hasonlít a hírlevélkészítéshez: btegészhetsz az elérhető sablonok között, és teljes előnézetet nézhetsz, mielőtt választasz.

Miután talált egyet, amely megfelel az igényeinek és céljainak, kattints a „Kiválasztás” gombra a testreszabás megkezdéséhez.

Ha van tapasztalatod a landing page készítőkkel vagy van némi CSS ismereted, nyugodtan hagyd ki a sablonokat és kezdj elölről.

3. Állítsd be a landing oldal URL-jét és címét

Figyelj az URL megadásakor, mert a beállítás után már nem módosítható. Az oldal címét később is szerkesztheted, de az URL végleges marad, ezért ellenőrizd, mielőtt továbblépsz.

Tartsd röviden, relevánsan és érthetően. Használj kisbetűket, számokat és kötőjeleket; a szóközöket kötőjellel helyettesítsd.

4. Szerkeszd a landing oldal tartalmát és dizájnját

Első ránézésre a landing oldal szerkesztő hasonlít az e-mail szerkesztőre, de több rugalmasságot és fejlettebb dizájnbeállításokat ad.

A képernyő bal felső sarkában láthatod az oldal címét, amelyet átnevezhet a toll ikonra kattintva, az URL-t, amelyet másolhat a megfelelő ikonra kattintva, és az utolsó mentett időbélyeget, amely megmutatja, mikor frissült utoljára az oldala.

A felső sáv közepén három előnézeti ikont talál, amelyek lehetővé teszik, hogy váltson az asztali, táblagépes és mobil nézetek között, így ellenőrizheti, hogyan fog kinézni az oldal különböző eszközökön. Kattints a szem alakú ikonra, hogy megtekinthesse a landing oldalt a komponensek vagy elrendezési jelölők vizuális iránymutatásai nélkül.

Tovább balra, látni fogja a visszavonás, újra, és mentés ikonokat, valamint a „Mentés és közzététel” gombot és a kilépés gombot az editor bezárásához.

Csakúgy, mint az e-mail készítőben, a képernyő bal oldalán látható a vászon előnézete, a jobb oldalon pedig három fontos fül található: Tartalom, Struktúra és Beállítások.

a. Tartalom

A legtöbb blokk itt tükrözi azokat az e-mail szerkesztőben, de van néhány kulcsfontosságú különbség és speciális komponens, amelyeket a landing oldalakhoz terveztek.

• Link – Hozzáad egy alapvető szövegblokkot, amely tartalmaz egy hyperlinket.
• Link blokk – Az e-mail szerkesztővel ellentétben a linkek nem közvetlenül az elemekre, hanem azok szülő konténereire vannak alkalmazva. Ez a blokk lehetővé teszi, hogy bármilyen tartalmat (például gombot vagy képet) helyezz el egy cellában, amely kattintható linkként működik.

• Kép – Hozzáad egy képet.
• Kapcsolt kép – Hozzáad egy képet, amely egy link blokkba van csomagolva, lehetővé téve, hogy a felhasználókat egy adott URL-re irányítsa, amikor rákattintanak.
• Idézet – A szövegtömb egy változata, vizuálisan úgy van kialakítva, hogy kiemelje a véleményeket vagy kijelentéseket.
• Űrlapmezők – Hasonlóan a pop-upokhoz, ezek lehetővé teszik, hogy húzással és ejtéssel űrlapmezőket (mint név, e-mail, telefon) helyezz el lead generáláshoz vagy feliratkozásokhoz.
• Térkép – Testreszabható Google Maps widgetet ad hozzá. A cím és a vizuális stílus a helyére kerülés után állítható be.

• Fülek – Bevezet füleket váltható tartalomterületekkel (pontosan úgy, mint a Tartalom, Struktúra és Beállítások fülek, amelyeket jelenleg felfedezel). Különböző blokkokat helyezhetsz el minden fülbe, hogy változatos információkat jeleníts meg.

• Eszköztipp – Lehetővé teszi az interaktív fölé húzott üzeneteket. Húzza és dobja az eszköztipp elemet, testreszabja a szöveget a jobb oldalon, majd helyezze el a tartalmat, amely fölé a felhasználóknak kell húzniuk.

• Gépelt – Animált szövegeffektusokat ad hozzá (gondolj a írógép effektusra). Testreszabhatod a sebességet, kifejezéseket és stílust a beállítások fülte.

b. Struktúra

Ez a szakasz hasonlóan működik az e-mail szerkesztőhöz; egyszerűen húzza és dobja a vászonra az elrendezési elemeket, majd helyezze a tartalom blokkokat a cellákba. Ez tisztán tartja az elrendezést, és biztosítja, hogy az oldal megfelelően jelenjen meg az eszközökte.

c. Beállítások

A Beállítások fül extra irányítást ad arra, hogyan jelenjenek meg és viselkedjenek az elemek a landing oldaladon. Ha nem ismered a webdesign terminológiát, ne aggódj; egyszerű magyarázatokkal és gyakorlati példákkal fogjuk lebontani.

Általános > Kijelző – Ez a beállítás meghatározza, hogyan jelenik meg egy elem a többihez viszonyítva:

• Blokk: Elfoglalja a tartály teljes szélességét. Nagyszerű főcímekhez vagy bannerekhez.
• Inline: Az elemeket vonalban tartja másokkal (mint egy hivatkozás egy mondaton belül).
• Inline-block: Az elemeket másokkal egy vonalban tartja, miközben lehetőséget ad a szélesség és magasság beállítására.
• Flex: Lehetővé teszi a fejlett igazítást és elrendezésvezérlést (lásd alább a Flex beállításokat).
• None: Elrejti az elemet. Hasznos, ha meg akarja tartani az elemet a szerkesztőben, de nem akarja megjeleníteni az oldalon.

Általános > Lebegés – Ez a beállítás lehetővé teszi, hogy egy elemet a tartója bal vagy jobb oldalára mozgasson. Leginkább képek vagy kis ikonok esetében használatos:

• Nincs: Alapértelmezett, nincs lebegés.
• Bal: A szöveg vagy tartalom körbefut jobbra.
• Jobbra: A szöveg vagy tartalom balra körbefut körülötte.

Általános > Pozíció – Segít az elemek pontos elhelyezésében:

• Statikus: Az alapértelmezett pozíció, külteleges elhelyezés nélkül.
• Relatív: Lehetővé teszi, hogy az elemet elmozdítsa a normál helyéről.
• Abszolút: Az elemet a legközelebbi tárolóhoz viszonyítva helyezi el.
• Rögzített: A felhasználó görgetése közben a helyén tartja az elemet. Ideális ragadós fejlécekhez vagy gombokhoz.

Bármely más pozíció esetén, mint a statikus, látni fog mezőket, amelyek Top, Right, Left és Bottom címkével vannak ellátva. Ezek lehetővé teszik, hogy pontosan beállítsd, hol jelenjen meg az elemed. Például, ha a relatív pozíciót választod és beírsz 20px-t a Top mezőbe, az elemed 20 pixellel lefelé fog elmozdulni az eredeti helyéről.

A Flex beállítások csak akkor érvényesek, ha a Kijelző flexre van állítva.

Flex irány – Szabályozza az elemek irányát egy tárolón belül. Hasznos, ha függőlegesen szeretnéd egymásra helyezni az elemeket, vagy megfordítani a sorrendjüket:

• Sor: Az elemek balról jobbra sorakoznak fel (alapértelmezett).
• Row-reverse: Az elemek jobbról balra sorakoznak fel.
• Oszlop: Az elemek felülről lefelé sorakoznak.
• Oszlop-visszafelé: Az elemek alulról felfelé sorakoznak.

Flex wrap – Megmondja az elemeknek, hogy egy sorban maradnak-e, vagy a következőre törjenek:

• Nowrap: Mindent egyetlen sorban tart.
• Tördelés: A tárgyakat a következő sorba helyezi, amikor a hely elfogy (ideális rácsokhoz).
• Wrap-reverse: Elemeket fordított sorrendben csomagol.

Tartalom igazítása – Vízszintesen igazítja az elemeket:

• Flex-start: Mindent balra igazít.
• Flex-end: Mindent jobbra tol.
• Középre: Középre igazítja a tartalmat.
• Space-between: Egyenletesen osztja el az elemeket, nincs rés a széleken.
• Space-around: Az elemeket egyenletes hézagokkal veszi körül.
• Space-evenly: Egyenlő távolságot állít be az összes elem között.

Elemek igazítása – A tartalmat függőlegesen igazítja egyetlen soron belül:

• Flex-start: A tetejéhez igazítja.
• Flex-end: Az aljához igazítja.
• Középpont: Függőleges középre igazítás.
• Alapvonal: Igazítja a szöveget a közeli szöveg alapjához.
• Nyújtás: Kitölti a függőleges teret.

Igazítsa a tartalmat - Hasonló az elemek igazításához, de több soron keresztül működik. A legjobban akkor használható, amikor az elemek átlapolódnak, és a sorok közötti függőleges távolságot szeretnéd szabályozni.

Extra - Ezek a további beállítások lehetővé teszik, hogy vizuális effekteket vagy stílusjavításokat adj az oldalad elemeihez. Segíthetnek felhívni a figyelmet a kulcsfontosságú területekre, vagy dinamikusabb élményt teremteni.

Az átlátszóságot az „Átlátszóság” szakaszban szabályozhatja. Állítsd 1-re a teljes láthatóság érdekében, vagy alacsonyabbra a halványabb megjelenésért. Ezenkívül a „Transzformáció” beállítással forgathatja, méretezheti vagy mozgathatja az elemeket.

5. Mentse el és tegye közzé a landing oldalát

Miután a landing oldalad elkészült, kattints a szerkesztő tetején található „Mentés és közzététel” gombra.

Vissza fog kerülni a Kezdőlap listájára, ahol láthatod az oldal címét, URL-jét és közzétételi állapotát. Ha később módosítani szeretne, egyszerűen kattints a toll ikonra a szerkesztő újbóli megnyitásához. Ha le kell venni egy oldalt, kattints a három pontra, és válaszd a „Szüneteltetés” lehetőséget. Miután ezt megtette, az URL-en keresztül már nem lesz elérhető.

És kész is vagy!

Tudjuk, hogy ez egy technikaibb modul volt, de most, hogy elérted a végét, magabiztosnak kell érezned magad a szerkesztő navigálásában és olyan landoló oldalak építésében, amelyek segítenek kitűnni, hatékonyabban bevonni és könnyedén konvertálni.