Ha gondolkodtál azon, hogy saját weboldalt csinálsz a vállalkozásodnak, akkor a Divi-vel ez könyen elkészítheted. A Divi az egyik legnépszerűbb WordPress oldalkészítő (page builder), amivel vizuálisan tudsz profi weboldalakat összerakni.
1 órás videós útmutató: Weboldal készítés Divi-vel
Mielőtt elkezded: WordPress oldal létrehozása
A Divi nem önálló rendszer – a WordPress-en belül működik. Az első lépés tehát az, hogy a WordPress adminfelületén létre kell hoznod egy új oldalt. Ezt az Oldalak menüpontban tudod megtenni: hozz létre egy „Főoldal” nevű oldalt és tedd közzé.
Ezzel még nem végeztél, mert WordPress-ben alapbeállítás szerint a blog bejegyzések jelennek meg a főoldalon – nekünk viszont a most létrehozott statikus oldal kell főoldalnak. Ehhez:
- Hozz létre egy második oldalt is, pl. „Blog” névvel (akkor is kell, ha nem tervezel blogot)
- Menj a Beállítások → Olvasás menüpontba
- A „Kezdőlap” legyen a Főoldal, a „Bejegyzések oldala” legyen a Blog
- Mentsd el a módosításokat
Ezután az URL-ben már csak a domain neve fog látszani – nem lesz mögötte semmilyen /fooldal toldalék. Ez a megfelelő beállítás.
Divi Visual Builder elindítása
Ha megnyitod a frissen létrehozott főoldaladat, a felső sávban megjelenik a Visual Builder engedélyezése gomb. Erre kattintva indul el a Divi vizuális szerkesztője.
Három lehetőséged van az oldal felépítéséhez:
- Nulláról – üres vászonra te teszed fel az összes elemet
- Előre elkészített sablonokból – Divi könyvtárából választasz, és azt szabod testre
- AI segítséggel – a Divi AI generál neked egy kiindulópontot
Divi Visual Builder elindítása
A legpraktikusabb kezdőknek (és tapasztaltabbaknak is) a sablon alapú megközelítés, mert azonnal van mivel dolgozni. A Divi könyvtárában rengeteg iparág specifikus sablon van: vízszerelőtől a kávézóig, fotóstól a coachig.
Válaszd ki a számodra legjobb sablont, a View Live Demo gombbal előnézetben is megnézheted, majd az Use This Layout gombbal betöltöd az oldalra.
Hogyan épül fel a Divi szerkesztője?
Mielőtt belevágsz a szerkesztésbe, érdemes megérteni a Divi logikáját – ez sokat segít, ha valahol elakadsz.
A Divi három szinten szervezi az oldal tartalmát:
- Szakasz (kék) – az oldal nagy tematikus blokkjai (pl. fejléc, szolgáltatások, rólam, lábléc)
- Sorok (zöld) – az oszlopos elrendezést határozzák meg (1 oszlop, 2 egyenlő oszlop, 1/3 – 2/3, stb.)
- Modulok (szürke) – a konkrét tartalmak: szöveg, kép, gomb, ikon, videó stb.
Divi page builder felépítése: Szakasz, Sor és Modul
A bal alsó sarokban váltani tudsz számítógép / tablet / mobiltelefon nézet között – ez kulcsfontosságú a reszponzív megjelenés ellenőrzéséhez.
Szövegek és gombok szerkesztése
A szövegek szerkesztése egyszerű: rákattintasz a szürke szöveges modulra (fogaskerék ikon) és a megnyíló panelben átírod a tartalmat.
Néhány fontos SEO szempontú tanács, amit érdemes szem előtt tartani:
H1 cím (főcím): Minden oldalon csak egy darab H1-es cím lehet. Ide érdemes a legfontosabb kulcsszót beépíteni – például: Vízszerelő Budapest és környéke. Ez jelzést ad a Google-nek, mivel foglalkozik az oldal és a látogatóknak is egyből egyértelmű, hová kerültek.
A H1-es címben mindig szerepeljen a legfontosabb kulcsszó
Alcímek: Ezek legyenek H2 vagy H3 szintű fejlécek.
Gomb szövege: A gombnak cselekvésre ösztönző szöveget adj, pl. Hívj minket! vagy Kérj ingyenes felmérést!. A jó gombszöveg közvetlenül a konverzió felé vezeti a látogatót.
Telefonszám és email cím beágyazása a gombba
Ez egy olyan trükk, amit sokan nem ismernek, pedig hatalmas különbséget jelent mobilon:
- Telefonszámhoz: a gomb link mezőjébe ezt írd:
tel:+3620XXXXXXX - Email-hez:
mailto:info@domain.hu
Mobilon az előbbi közvetlenül a tárcsázót nyitja meg, az utóbbi pedig automatikusan megnyitja az email alkalmazást (pl: Gmail-t), és a te email címed lesz a címzett. Egy kattintás = kapcsolatfelvétel. Ez az apró beállítás komolyan növelheti a megkeresések számát.
Képek cseréje
A sablonokban általában ún. stock fotók vannak – ingyenes, jogtiszta képek. Jogilag maradhatnak, de nem ajánlott, hiszen:
- Egy rólam szekcióban saját fénykép sokkal több bizalmat épít
- Referenciafotók (munkák közben, elkészült projektek) hitelesebbé teszik a vállalkozást
- A stock fotókkal egy sablon semmiben nem különbözik a konkurensétől
Képet cserélni egyszerű: kattints a képmodulra (fogaskerék), majd válaszd ki vagy töltsd fel a saját képedet a WordPress médiakönyvtárból.
Tipp: Ha egy képre nem tudsz rákattintani, lehet, hogy a sablon azt nem önálló képmodulként, hanem oszlop háttérként illesztette be. Ilyenkor a zöld sorra kattints, és ott keresd a háttérkép beállítást.
Új szekciók hozzáadása és tartalmak másolása
Nem kell a sablon eredeti felépítésénél ragaszkodnod. Kétféleképpen tudsz bővíteni:
Új szekció létrehozása nulláról
Húzd az egeret egy szakasz aljára, ekkor megjelenik egy kék + gomb. Ezután a zöld sornál kiválaszthatod az elrendezést (1 oszlop, 2 oszlop stb.), majd azon belül hozzáadod a szürke modulokat (szöveg, kép, gomb stb.)
Szekció másolása másik oldalról
Ez egy kevésbé ismert, de nagyon hasznos Divi funkció. Ha például egy másik sablonban láttál egy tetszős elemet (pl. harmonika / GYIK blokk), akkor:
- Nyisd meg azt az oldalt a Divi szerkesztőjében
- Jobb klikk a szekcióra → Másolás modul
- Menj vissza a főoldalra
- Jobb klikk a kívánt pozícióra → Beillesztés modul
Jobb klikk és Másolás modul
Ezzel nem csak modult, hanem szakaszt és sort is tudsz másolni – elrendezéssel, stílussal együtt. Nagyon praktikus, ha például a sablonodból hiányzik egy elem, de egy másik sablonban megvan.
Fejléc és lábléc beállítása
Fejléc
A fejlécet a Divi → Téma teszabása → Fejléc és navigáció menüpontban tudod szerkeszteni. Ez nem az oldal tartalma, hanem a globális sablon része.
Amit érdemes ott beállítani:
- Logó feltöltése (a sablon beállítások első menüpontja)
- Telefonszám és email cím megjelenítése a fejlécben – több helyen is látható kontakt adat = több megkeresés
- Keresés ikon kikapcsolása – ha egyoldalas weboldalad van, nincs mit keresni rajta, csak zavaró
Lábléc
A lábléc a Divi → Téma builder → Globális lábléc menüpontban állítható be. Ha a sablonodban már el van készítve egy jó „footer szekció” a főoldal tartalmában, azt kimásolhatod és beillesztheted a globális lábléc szerkesztőjébe – ezáltal az összes aloldalon megjelenik majd (ha lesz több aloldalad).
Globális lábléc beállítása
Mobiloptimalizálás
Ma már a weboldalak látogatóinak többsége mobilról böngészik. A Divi sablonok ugyan általában reszponzívak, de érdemes ellenőrizni és finomítani.
A böngészőben nyomd meg az F12-t, majd kattints a képernyőméret kapcsoló ikonra – ezzel szimulálhatod, hogyan néz ki az oldal mobilon.
Ha pl. a H1 cím túl kis méretű mobilon, azt így javíthatod:
- Kattints a szöveges modulra → Tervezés → Fejléc szöveg → betűméret
- Váltás a mobiltelefon ikonra
- Állítsd be a mobilos méretet (pl. 36 px) – ez nem érinti a számítógépes nézetet
Minden beállítást külön tudsz testreszabni az egyes nézetekre (számítógép/laptop, tablet, mobil).
Érdemes-e Divi-n belül sablont használni?
A sablonok használatának van egy fontos hátránya, amit érdemes mérlegelni: ha egy nagyon elterjedt sablont veszel alapul, előfordulhat, hogy a konkurensed weboldala nagyon hasonló lesz a tiédhez. Ez bizalomvesztést okozhat a potenciális ügyfelekben – főleg kisebb iparágakban, ahol az emberek ismerik egymást.
Ha egyedi megjelenés a célod vagy ha egy komolyabb, több aloldalas weboldalt szeretnél , érdemes nulláról felépíteni a saját oldaladat. Ez több munkával jár, de az eredmény 100%-ban a tiéd.
Szeretnéd mélyebben elsajátítani a Divi-t?
Ez a cikk és a videó csak az alapokat mutatta be, de egy vállalkozói weboldal ennél jóval több elemből áll: tárhelyválasztás, domain, WordPress telepítés, bővítmények, SEO alapbeállítások, kapcsolati űrlap, rólam oldal, képoptimalizálás, karbantartás…
Ha szeretnéd mindezt egy helyen elsajátítani – a WordPress tanfolyamomban pontosan ezt találod. Egy kitalált kávézó weboldalán keresztül mutatom meg az egész folyamatot az elejétől a végéig, több mint egy tucat részletes videón keresztül.
👉 Nézd meg a WordPress tanfolyamot
Minden benne van, amire egy kisvállalkozónak szüksége van ahhoz, hogy önállóan elkészítse és karbantartsa a saját weboldalát.
Budai Kristóf
Helló, Budai Kristóf vagyok, WordPress weboldal készítő. A célom az, hogy mindenkinek profi és jól működő weboldala legyen. Ezért is írom ezt a blogot, hogy minél több embernek tudjak segíteni.