Egyoldalas weboldal készítése Divi sablonnal

Szerző: 2019. Júl. 1.honlapkészítés, WordPress

Péter szeretett volna a vállalkozásának egy egyszerű, de megbízható és szép honlapot. Két éve foglalkozik ökotudatos kertészkedéssel, de azt vette észre, hogy bár szinte mindig van elegendő ügyfele, a legtöbbjüket nem érdeklik a környezetbarát módszerek. Arra gondolt, hogy egy bemutatkozó weboldal segíthet olyan új ügyfeleket szerezni, akik valóban elkötelezettek a környezettudatosság és a vegyszermentes kertgondozás iránt. És ezért hajlandóak vállalni az ehhez szükséges odafigyelést és türelmet.

 

Péteré klasszikusan az a fajta vállalkozás, amelynél első pillantásra nem tűnik fontosnak egy honlap megléte. Ügyfeleit tipikusan helyi Facebook csoportokban és személyes ajánlások útján szerezte. Ezért, bár már a vállalkozás elindítása idején felmerült, sokáig halogatta egy saját weboldal felépítését.

Végül néhány visszajelzés után belátta – szerintem helyesen -, hogy egy vállalkozásnak ma már akkor is szüksége van honlapra, ha az ügyfeleit nem az internetről szerzi. Egyszerűen az emberek automatikusan mindenre és mindenkire rákeresnek a világhálón, és az így talált információ meggyőző ereje – vagy hiánya – fontos szempont lehet egy-egy vásárlói döntés meghozatalakor.

Más szavakkal, nem elég megbízható kertésznek lenni, annak is kell tűnni, nem csak a való életben, hanem az interneten is.

Amikor átbeszéltük az elképzeléseit, Péter azt mondta, elsősorban egy bemutatkozó weboldalt szeretne, amelyen tömören szerepelne minden lényeges információ a munkájáról, a vállalt szolgáltatásokról, a biokertészkedés szemléletmódjáról.

Fontos szempont volt számára az is, hogy később könnyen lehessen bővíteni a weboldalt blogszekcióval és képgalériával. Miután meghallgattam, azt javasoltam, hogy készítsünk egyoldalas weboldalt. 

 

Az egyoldalas (one page) honlap előnyei

 

Az egyoldalas weblapok esetében minden tartalom, minden szekció, elem és blokk egyetlen oldalon jelenik meg. A menüsor nem más, külön betöltődő aloldalakra mutat, hanem ugyanannak az egyetlen weboldalnak más-más részeihez segít eljutni.

Az egyoldalas honlapok legfontosabb előnye, hogy jól néznek ki. Szép és áttekinthető, modern megjelenést nyújtanak.

Az ilyen weboldalakon nagyon egyszerű a navigáció, mobilról és tabletről különösen kényelmes, hogy a teljes honlap végigböngészéséhez elég csak görgetni, nem feltétlenül kell legördülő menükben keresgélni és kattintgatni.

 

Hátrányok egyoldalas weblap esetén

 

Az egyoldalas honlapok nagy hátránya a keresőoptimalizálás (SEO) terén jelentkezik. Ha azt szeretnénk, hogy egy weboldal sok keresőszóra jelenjen meg előkelő helyen a Google találati listáin, akkor nagyon sok, minőségi tartalmat nyújtó aloldalra van szükség, amelyek egyenként más és más kulcsszóra vannak optimalizálva.

Egyszerűen egyetlen oldalra nem lehet annyi tartalmat bezsúfolni, hogy érezhető eredményt (= sok látogató) hozzon számos különböző keresőszóra. 

Ha tehát nagy forgalmat szeretnénk a Google-ból, akkor az egyoldalas honlap nem a legjobb ötlet.

Ellenben, ha egy egyszerű bemutatkozó weboldalt szeretnénk a tevékenységünknek, vagy akár egy-egy terméknek, és közben csak néhány, gondosan megválasztott kulcsszóra akarunk optimalizálni, akkor jó megoldás lehet egy jól megszerkesztett és átgondoltan összerakott egyoldalas weblap.

Egy tipp az egyoldalas honlapok keresőoptimalizálásához: a SEO egyik széleskörben elfogadott alaptörvénye, hogy egy oldalon csak egyetlen H1 tag-et használunk. Az egyoldalas weblapok esetében azonban érdemes minden nagyobb (<div> kóddal elválasztott) blokknak külön H1 tag-et adni. Ezzel lehetőség nyílik arra, hogy a külön blokkokat más-más kulcsszóra optimalizáljuk.

Természetesen nem szabad ész nélkül H1 tag-eket dobálni mindenhová, mert trükközésnek fogja venni, és büntetni fog érte a Google algoritmusa. A keresőóriás hivatalos álláspontja szerint azonban ha mértékkel és csak indokolt esetben élünk ezzel a lehetőséggel, akkor nem lesz vele gond. 

 

Egyoldalas honlap készítése Divivel

 

Péter weboldalának elkészítését kulcsszó kereséssel kezdtem. Hamar kiderült, hogy a honlapot három keresőszóra érdemes optimalizálni: biokert, biokertész és biokertészkedés. Mindháromra havi 300-400 lekérdezés fut le, miközben a verseny meglepően alacsony (kevesen optimalizálnak ezekre a kulcsszavakra). 

Közben lezajlott a tárhely és domain regisztráció. A következő lépésben átküldtem néhány Divi “elrendezést” (layout) Péternek véleményezésre. Tudni kell, hogy a Divi nem egyszerű sablon, hanem gyakorlatilag egy vizuális honlapépítő program, amelyben számtalan elem és modul segítségével a nulláról tudunk teljesen új weblapot felépíteni, de lehet használni a beépített elrendezéseket is. Természetesen az utóbbiakat is a felismerhetetlenségig lehet variálni, ezért a Diviel viszonylag egyszerű szép, és teljesen egyedi weboldalt készíteni. 

Péter, szerintem elég jó ízléssel, a vadi új “Gardener” elnevezésű csomagot választotta, amelyet külön kertészeti vállalkozások számára fejlesztett a Divi mögött álló Elegant Themes csapata. A layout csomaghoz több aloldalra (főoldal, landing page, szolgáltatások, kapcsolat, stb.) elég minta tartozik. Ezekből – Péter igényei nyomán – kiválogattam azokat a blokkokat, szekciókat és modulokat, amelyekre szükségünk volt az egyoldalas honlaphoz. 

Divi Gardener layout pack

Navigáció beállítása egyoldalas honlapon

 

A készen kapott elemek aprólékos személyre szabása után jött a navigáció beállítása. Szerencsére a Divivel ez nagyon könnyű feladat. Először is a WordPress kezelőfelületén az “Oldal szerkesztése” menüpontban (jobb felső sarok) a Divi oldalbeállításoknál megtaláljuk a pontnavigáció lehetőségét.

Ha engedélyezzük, a weboldal jobb szélén megjelenik a pontnavigációs menü (szürke alapon fehér pöttyök), amivel mindig könnyen követhető, hogy a honlap mely részénél tartunk éppen böngészés közben.

Divi pontnavigáció

Ezután következett a menü megtervezése. Az egyoldalas honlap esetében, ahogy arról már volt szó, a menü egyes pontjai nem más aloldalakra, hanem az (egyedüli) főoldal különböző szekcióira mutatnak.

Ehhez ki kell választani egy olyan elemet, amelyre szeretnénk linket a menüből, majd a beállításoknál a “Haladó” fülre kell kattintani. A “CSS Azonosító és Osztályok” menüpont alatt a CSS azonosítóhoz adjunk meg egy szót, ami például ebben az esetben a “Biokertesz” volt.

Fontos, hogy ez fog szerepelni az URL-ben a klasszikus slug helyett, ezért egyrészt kerüljük az ékezeteket (mert a helyükön % jel lesz), másrészt érdemes a SEO szempontjainkat is szem előtt tartani, amikor megadunk egy azonosítót. Praktikusan a “főoldal-1” nem igazán jó megoldás.

Divi CSS Azonosító megadása egyoldalas honlap navigációhoz

 

Lépjünk a WordPress vezérlőpultban a Megjelenés >> Menü ponthoz. A szokásos módon készítsük el az elsődleges menünket, de az oldalak és bejegyzések helyett válasszuk az “Egyéni hivatkozások” lehetőséget a menü elemeinek létrehozásához.

Az URL mezőbe hashtaggel írjuk be az előző lépésben megadott azonosítót, ami ebben az esetben #Biokertesz. A Hivatkozás szövegéhez írjuk azt, amit szeretnénk, hogy megjelenjen a menüben, például Rólam, Kapcsolatok, stb, majd adjuk hozzá a menühöz. 

 

Menü elkészítése egyoldalas honlap esetébem

Ha visszalépünk a honlapra, azt fogjuk tapasztalni, hogy a főmenüben rákattintva a megadott menüelemre az oldal a kívánt részhez gördül. Érdemes fix menüt használni, ami nem tűnik el görgetés közben sem, és akkor a felhasználó mindig nagyon könnyen tud lépegetni a weboldal különböző részei között.

Amikor ezzel kész voltunk, már csak a tartalom finomítására és a mobilos megjelenés optimalizálására volt szükség. Az eredmény szerintem és Péter szerint is egy igazán szép egyoldalas weboldal lett. Remélem ezt (hiszen ez számít igazán) Péter ügyfelei is visszaigazolják majd.

0 hozzászólás

Egy hozzászólás elküldése

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

Üzleti honlap készítés egy éves teljes körű garanciával

Profi honlap akár egy nap alatt  30 napos garanciával

2019 © Honlapszaki.hu 

andras@honlapszaki.hu

Rólam

Ajándék emailtanfolyam

Saját weboldal vállalkozásoknak:

az ötlettől a megvalósításig

Szükséged lenne egy ügyfélcsalogató honlapra, de nem tudod, hogyan kezdj neki?

Akkor neked szól a négyrészes mini emailtanfolyam! Próbáld ki, teljesen ingyenes!

Köszönöm! Hamarosan megkapod az email tanfolyam első részét!

Pin It on Pinterest

Share This