Hogyan hozzunk létre egy egyoldalas weboldalt a WordPressen

Sok sikeres weboldal nagy, összetett ügy, sok oldallal és tartalommal. Néha azonban a több valóban kevesebb a webdesign világában. Éppen ezért a hagyományos megközelítés helyett érdemes lehet egy egyoldalas weboldalt létrehozni a WordPressen.

Ebben a cikkben részletesebben foglalkozunk az ilyen típusú webhelyek előnyeivel és alkalmazásaival. Ezután megmutatjuk, hogyan hozhat létre egy egyoldalas webhelyet a WordPressen mindössze három lépésben. Kezdjük!

📚 Tartalomjegyzék:

Miért érdemes egyoldalas webhelyet létrehozni

A legtöbb webhely több oldalból áll. Legalábbis általában van egy kezdőlap, egy kapcsolatfelvételi oldal, egy rólunk oldal, és oldalak bármilyen tartalomnak vagy szolgáltatásnak, amit kínál.

Az egyoldalas webhely ezzel szemben minden fontos információt egyetlen kezdőlapra sűrít, gyakran úgy, hogy több különálló részt is tartalmaz. Az egyoldalas weboldalkialakítás számos előnnyel jár, például:

• Egyszerűség, ami megkönnyíti a látogatók számára a webhelyen való navigálást és annak megtalálását, amire szükségük van.
• Egyszerű karbantartás, mivel nagyon kevés tartalmat kell karbantartani.

Az egyoldalas kialakítás természetesen nem minden webhelyhez megfelelő választás. A nagy, összetett oldalaknak is megvan a maguk helye. Ha azonban kisvállalkozói webhelyet, portfóliót vagy egyszerű üzlethelyiséget üzemeltet, érdemes megfontolnia ezt a formátumot.

Az egyoldalas webhely alapvető elemei

Ha webhelye csak egyetlen oldalra terjed ki, nagyon átgondoltan kell megválasztania, hogy mit tartalmazzon. Fontos, hogy minden információt megadj, amire a közönségednek szüksége van, anélkül, hogy túlzsúfolnád vagy túlterhelnéd az oldalt. Mindennek, amit az oldaladhoz hozzáadsz, okkal kell ott lennie.

Itt van néhány alapvető elem, ha egyoldalas weboldalt szeretnél létrehozni:

• Egy kiemelkedő CTA (Call to Action), például feliratkozás, kapcsolatfelvétel vagy vásárlás gomb.
• Egy Rólunk rész, amely elmagyarázza, ki vagy te, a céged vagy a szervezeted.
• Branding elemek, például a logó és a szlogen.
• A termékek vagy szolgáltatások listája, ha releváns.
• Hivatkozások más helyekre és tartalmakra a weben, beleértve a közösségi média profilokat.
• Elérhetőségi információk, beleértve a különböző csatornákat, ha lehetséges.

Az is fontos, hogy figyelj az említett elemek sorrendjére. Általánosságban elmondható, hogy a legfontosabb információkat és CTA-kat érdemes a legelején elhelyezni, a kapcsolattartási adatokat és linkeket pedig az oldal aljához közelebb. Gondolja át, hogy a közönségének mit kell látnia, és milyen sorrendben, és ez segít meghatározni, hogy milyen elemeket tartalmazzon, és hogyan rendezze el őket.

Végezetül – csak azért, mert egyoldalas honlaptervezést használ, ez nem feltétlenül jelenti azt, hogy nem lehet blogja. Ha mégis blogot szeretne beilleszteni, a WordPress továbbra is lehetővé teszi, hogy az egyoldalas kezdőlapjáról hivatkozhasson a blogjára.

Hogyan hozzon létre egy egyoldalas weboldalt (PONTOS LÉPÉSEK)

Most beszéljünk arról, hogyan kell ténylegesen nekilátni a webhely megtervezésének. Az első dolog, amit meg kell tenned, hogy megnézel néhány létező példát egyoldalas weboldalakra, hogy inspirálódj. Ezután folytassa az első lépéssel.

1. lépés: Határozza meg a webhely fókuszát

Amint azt már megbeszéltük, az egyoldalas webhely létrehozása azt jelenti, hogy nagyon megfontoltan kell terveznie. Ez magában foglalja azt is, hogy tisztában kell lennie a céljaival. Ha egyetlen oldalra korlátozódik, érdemes kiválasztania egy vagy két kulcsfontosságú dolgot, amelyre összpontosítania kell.

Ehhez fontolja meg, hogy milyen elsődleges CTA köré tervezi az oldalát. Mit szeretne, hogy a látogatók mit tegyenek – regisztráljanak egy tagságra, vásároljanak egy terméket, vegyenek részt egy eseményen, vagy vegyék fel Önt egy munkára? Az oldaladon mindennek arra kell ösztönöznie az embereket, hogy megtegyék ezt a lépést. Ez azt jelenti, hogy megadod a szükséges információkat, elmagyarázod az előnyöket, és egyértelművé teszed a következő lépéseket.

2. lépés: Válassz egy minőségi egyoldalas témát

Ha úgy döntöttél, hogy egyoldalas webhelyet készítesz a WordPressben, bármilyen témát használhatsz. Azonban gyakran okos stratégia, ha olyan egyoldalas témát választasz, amely kifejezetten az ilyen típusú webhelyek kialakításához készült. Ezek a témák megkönnyítik az összes szükséges információ felvételét, miközben vonzó dizájnt tartanak fenn.

Az egyoldalas téma kiválasztásakor a következőket kell keresned:

• Egy oldalépítő, amely tartalmazza az előre beépített elemeket, amelyekre szükséged lesz, például a kapcsolatfelvételi részt.
• Egy módszer az oldalad több, vizuálisan megkülönböztethető részre bontására.
• Navigáció, amely lehetővé teszi a látogatók számára, hogy az oldaladon belül a különböző részekhez ugorjanak.
• Egyszerű módja a CTA gombok hozzáadásának és személyre szabásának.

Egyoldalas témákból rengeteg van. A Neve például egy többcélú téma, amely tökéletes tömör, de átfogó egyoldalas oldalakhoz. Kompatibilis számos népszerű oldalépítővel, tartalmaz egy élő testreszabót, és segít az egyoldalas webhely gyors beállításában. Előre beépített szakaszokat is tartalmaz a kapcsolattartási információkhoz, az önéletrajzához, egy kirakathoz és sok máshoz.

3. lépés: Tervezze meg az oldalát

Mihelyt tudja, hogy mit szeretne tartalmazni az oldala, tisztában van a fókusszal, és kiválasztott egy erős témát, elkezdheti ténylegesen megtervezni az oldalt. Azt szeretné, ha az oldal megfelelne a célközönségének, tükrözné a stílusát, és a céljai teljesítésére lenne optimalizálva – ami azt jelenti, hogy nem szabad egyszerűen egy formulát követnie.

Az alábbiakban azonban néhány javaslatot érdemes szem előtt tartania az oldal összeállítása során:

• Tartsa egyszerűnek az oldalát, és ne tartalmazzon semmi olyat, ami nem szolgál egyértelmű célt
• Elkülönítse egyértelműen a különböző részeket különböző fejlécekkel, hátterekkel stb.
• Hozzon létre olyan navigációt, amely gyorsan átvezeti a látogatókat a szükséges részekhez.
• Az elsődleges CTA-kat tegye kiemelkedővé és meggyőzővé.

Az alábbi tanácsokat követve pillanatok alatt képes lesz egy fantasztikus egyoldalas oldalt létrehozni.

Most beszéljünk az eszközökről. Hogyan tudsz tehát a lehető leghatékonyabban és leggyorsabban nagyszerű egyoldalas webhelyet készíteni?

Elkészítsd egyoldalas webhelyedet az Elementorral

Az Elementor egy könnyen használható, funkciókban gazdag oldalépítő, amely megkönnyíti tetszőleges számú oldal létrehozását egy WordPress webhelyen belül. Ez teszi tökéletes eszközzé ahhoz, hogy nagyszerű egyoldalas webhelyet készítsen vele.

A következő részekben megmutatjuk, hogyan teheti ezt meg. A példa, amit használunk, egy gyümölcs- és zöldségbolt webhelye. A weboldalnak lesz:

• egy oldal, számos, a tartalomnak helyet adó résszel
• egy menü, amelyre kattintva a látogatók közvetlenül a megfelelő részekhez juthatnak
• egy fejléc, amely a logót és a menüt tartalmazza
• egy lábléc

Itt egy előnézeti kép arról, hogyan fog kinézni a weboldal a végén:

Majd részletesen végigvesszük az egyes lépéseket, de íme az alapvető folyamat:

1. Telepítsd az ingyenes Neve témát.
2. Telepítsd az Elementor plugint, ha még nem tetted meg.
3. Állítsd be a weboldalad “vásznát” – a fejlécet, a láblécet és a menüt.
4. Add hozzá a tartalmat az Elementor segítségével.
5. Hivatkoztasd a menüt a dizájnod különböző szakaszaihoz, hogy létrehozd az egyoldalas navigációs hatást.
6. Állítsd be a dizájnodat webhelyed kezdőlapjaként.

Telepítsd az ingyenes Neve témát

• Menj a WordPress műszerfalon a Megjelenés → Témák → Új hozzáadása menüpontba.
• Keresd a “Neve”-t
• Kattints a Telepítés gombra
• Mihelyt a WordPress telepíti a témát, kattintson az Aktiválás gombra az élesítéshez

Telepítse az ingyenes Elementor plugint

• Menjen a Plugins → Add New
• Keressen rá az “Elementor”
• Telepítse és aktiválja az ingyenes Elementor Page Builder plugint.

Most, egy tiszta WordPress telepítéssel, aktív Neve témával és az Elementor Page Builderrel készen állsz az egyoldalas weboldalad építésére.

A fejléc, a lábléc és a menü beállítása

A Neve téma segítségével beállítod az egyoldalas weboldalad fejlécét, láblécét és menüjét.

Főcím

Lépjen a WordPress műszerfalára, és kattintson a Megjelenés → Témák → Testreszabás gombra a Neve téma testreszabásához:

Először válassza ki a weboldal színeit és hátterét

Majd a Testreszabás panelen kattintson a Fejléc → Logó módosítása menüpontra, és adja hozzá a webhely logóját. Állítsa be a logó szélességét, adja hozzá a webhely címét, a webhely ikonját és egy szlogent. Válassza ki, hogy a fejlécben megjelenítse vagy elrejtse a webhely nevét és a szlogent.

Az Elrendezés lapon válassza ki a fejléc elrendezését, valamint a színt, és állítsa be a kitöltést és a margókat. Alternatívaként válasszon egyet a fejléc előbeállítások közül.

Menü

A következőkben létre kell hoznia a fejlécben megjelenő navigációs menüt. Ehhez kattintson a Menük → Új menü létrehozása menüpontra. Adjon neki nevet, és állítsa be, hogy a menü helye egyenlő legyen az Elsődleges menüvel.

Kattintson a Tovább és az Elemek hozzáadása gombra. Itt adja meg a létrehozandó szakaszok nevét. Például Fő, Rólunk, Termékek és Kapcsolat. Ehhez kattintson az Egyéni hivatkozások gombra.

Az URL mezőbe írjon be egy hashtaget, amelyet az adott szakasz neve követ. Később, amikor beállítja az Elementort, úgy fogja konfigurálni, hogy ezek a hivatkozások a dizájn adott szakaszaira mutassanak. Például:

• #about-us
• #products
• #contact

Footer

Lépj tovább a Footerre, és add hozzá a szöveget és a háttérszínt. Itt bármilyen tetszőleges tartalmat hozzáadhat:

Hit Publish to save all the changes

Az oldaladnak ebben a szakaszban már van fejléce, lábléce és menüje. Valahogy úgy kell kinéznie, mint az alábbiakban. Most már készen állsz arra, hogy az Elementor segítségével hozzáadd a fejléc és a lábléc közé kerülő tartalmat:

Új oldal létrehozása és tartalom hozzáadása az Elementorral

Az új oldal létrehozásához lépj az Oldalak → Új hozzáadása menüpontra. Adjon nevet az oldalnak. Ha a téma biztosít oldalsávokat, akkor az is megjelenik. Az oldalsávokat azonban kivághatja, ha az Oldalattribútumokat teljes szélességre állítja.

A megnyíló új oldalon kattintson az Edit with Elementor gombra. Ez megnyit egy panelt a bal oldalon. A jobb oldalon van a szerkesztési terület, ahol láthatjuk, ahogy a weboldal formát ölt.

Egy gyors bevezetés az Elementor felületébe

Mielőtt továbblépnénk, vessünk egy pillantást az Elementor panelre. Számos kreatív elemet vagy widgetet tartalmaz, például címsorokat, bekezdéseket, képeket vagy videókat. Ezeket áthúzással adhatja hozzá a tartalmához.

A panel bal felső részén található a hamburger menü, amely számos lehetőséget nyit meg. Itt globális szinten állíthatod be a színeket, a betűtípusokat és a téma stílusát. Mondanom sem kell, hogy ez rengeteg időt takarít meg az új oldalak hozzáadása közben.

Erről a fülről bármikor kiléphet a WordPress műszerfalára is.

A panel alján lehetőség van az oldal beállításainak módosítására, az oldal elnevezésére, a szerkesztési előzmények megtekintésére és a reszponzív módok közötti váltásra. Emellett van egy navigátor is, amely az oldal szervezett nézetét mutatja.

A szem ikonra kattintva megtekintheti az oldalt, és ha készen áll az élesítésre, nyomja meg a Közzététel gombot.

Most itt az ideje elkezdeni a tartalom hozzáadását.

Kétféleképpen hozhat létre egy egyoldalas weboldalt az Elementorral

Ebben a szakaszban kétféleképpen választhat, hogy az Elementorral építi-e fel az egyoldalas weboldalt:

1. Beilleszti az Elementor egyik előre elkészített sablonját, majd a kívánt módon testre szabja. Ehhez kattintson a mappa ikonra a design élő előnézetében, és megnyílik számos sablon, néhány ingyenes és sok profi. Az Oldalak lapon teljes oldalak teljesen kész terveket találsz. A Blocks fülön előre elkészített sablonokat talál egy nagyobb oldal egyes szakaszaihoz (ez a leghasznosabb egy egyoldalas weboldal esetében).

Az adott sablonra kattintva bármelyik sablont beillesztheti. Ezután minden elemet teljes mértékben testre szabhat.

2. Alternatívaként a nulláról is kezdheti, ha a plusz gombra kattintva hozzáad egy szakaszt, és egy üres vászonról építi fel a designt.

A jelen bemutató céljaira mindkét módszer kombinációját alkalmazzuk – a weboldalunk első szakaszát a nulláról építjük fel, majd a sablonblokkok közül választva kitöltjük a többi szakaszt.

Hogyan hozzuk létre az egyoldalas weboldal szakaszait az Elementorral

Az Elementor szakaszokat, oszlopokat és widgeteket használ bármely oldal elrendezésének létrehozásához. A szakaszok a legnagyobb építőelemek, és ezeken belül oszlopokat adhatsz hozzá. Ezeken a szakaszokon vagy oszlopokon belül hozzáadhatod a kívánt widgeteket.

Kattintson a “+” jelre egy szakasz hozzáadásához, és válassza ki az oszlopszerkezetet.

Amint egy szekció fölé mozdul, egy kék keret jelenik meg egy fogantyúval a tetején. Ezzel a fogantyúval új üres szakaszt adhat hozzá a meglévő szakasz fölé, vagy szerkeszthet/törölhet egy szakaszt. A középen lévő pontokra kattintva hozzáférhet a szakaszvezérlőkhöz – elrendezés, stílus és speciális. Továbbá a pontokon való húzással felfelé vagy lefelé mozgathatja a szakaszokat, és a jobb gombbal kattintva további opciókat, például a duplikálás vagy törlés lehetőségét is megjelenítheti.

Hasonlóképpen, a felső sarokban lévő oszlop ikon fogantyúra kattintva oszlopelrendezéseket választhat a szakaszon belül. Az oszlopok szélességét és a köztük lévő távolságot is beállíthatja. A dobozokra jobb egérgombbal kattintva további oszlopokat adhatsz hozzá, duplikálhatod a meglévőket, törölheted őket és így tovább.

Az Elementor panelről bármilyen elemet (úgynevezett widgetet) behúzhatsz az oszlopba. Amint egy elemet hozzáad egy oszlophoz vagy szakaszhoz, a jobb felső sarokban megjelenik egy ceruza ikon. Erre az ikonra kattintva az Elementor panelen megjelenik a tartalom, a stílus és a speciális szerkesztési lehetőségek.

Hogyan hozzuk létre az első szakaszt

Az első szakaszt arra fogjuk használni, hogy a látogatók megismerjék a vállalkozás jellegét és egy kicsit a vállalkozásról. Ebből a célból a szakasz teljes szélességét felhasználhatja egy háttérkép hordozására. A szakasz elrendezésének szerkesztése közben beállíthatja a tartalom szélességét, és a szakaszt az oldal teljes szélességére nyújthatja, egyszerűen egy gomb átkapcsolásával.

A háttérkép hozzáadásához válassza a szakasz szerkesztése lehetőséget a fogantyúban lévő pontokra kattintva. Látogasson el a panelen megjelenő Stílus lapra, és töltse fel a képet a Médiatárból. Állítsa be a kép méretét, valamint az átfedést.

Egyetlen oszlopot adunk a szakaszon belül, és a szakaszon belül középre helyezzük. Az oszlopon belül három widgetet fogunk használni – egy fejlécet, amely közli a látogatókkal, hogy friss gyümölcsöket és zöldségeket árul, egy szövegszerkesztőt, amely felhívja a figyelmet a házhozszállítási lehetőségekre, és egy gombot, ahonnan a látogatók rendelést adhatnak le.

Heading widget hozzáadása:

Szöveg widget behúzása:

Gomb widget hozzáadása:

Most az egyes widgeteket a szerkesztési lehetőségek segítségével testre szabhatjuk.

Ha szeretné, a widgeteket három külön oszlopban is hozzáadhatja, ha az oszlop ikonra kattintva oszlopokat ad hozzá. Amit itt fontos megjegyezni, hogy minden egyes widgetet aprólékosan beállíthatsz az elrendezés, a stílus és egyebek tekintetében.

A többi szakasz létrehozása

Most, hogy az első szakasz elkészült, áttérhetünk a maradék háromra – Rólunk, Termékek és Kapcsolat.

Amint már említettük, az Elementor könyvtárból származó kész sablonblokkokat fogunk használni e három szakasz létrehozásához. Az Elementor mindegyik kategóriában számos ingyenes sablonblokkot tartalmaz, és a könyvtár kereshető.

A Rólunk szakaszhoz egy egyszerű sablonblokkot fogunk választani egy fejléccel, szövegszerkesztővel és videó widgettel. Mindezt helyettesítheti saját tartalmával.

A sablonblokk a helyettesített tartalommal:

Éppúgy használhatunk sablonblokkokat a Termékek és a Kapcsolat szakaszhoz is. A Kapcsolat szakaszhoz használt sablon közösségi média ikonokkal van ellátva. A Stílus fülre kattintva szabályozhatja az ikonok színét, méretét, kitöltését és egyebeket.

Mivel az Elementor nagyfokú testreszabhatóságot tesz lehetővé, ezeket a szakaszokat az importált sablonoktól eltérő megjelenésűvé teheti.

Amikor befejezte a kívánt változtatásokat, kattintson a zöld Publish gombra, és a változtatások élesítve lesznek a webhelyen.

A menü összekapcsolása az egyoldalas szakaszokkal

Hogy kattintható navigációs menüje legyen, össze kell kapcsolnia az Elementor-design különböző szakaszait a 3. lépésben létrehozott navigációs menüvel. Ehhez nyissa meg egy szakasz azonosítóját, és lépjen a Speciális fülre. Az Elementor panel CSS ID mezőjébe a megfelelő szekcióban írja be a megfelelő szekció nevét hashtag nélkül.

Például, ha a menüje a #about-us-ra hivatkozik, akkor a CSS ID-t about-us-ként adja meg. Ezután ismételd meg a folyamatot az összes olyan szakaszra, amelyre hivatkozni szeretnél:

Kialakításod kezdőlapként való beállítása

Utolsó lépésként az imént létrehozott oldalt állíthatod be az Elementor segítségével létrehozott egyoldalas weboldal kezdőlapjaként. Ehhez menjen a Beállítások → Olvasás menüpontba. Kattintson a Statikus oldal kiválasztása gombra a Kezdőlapja megjelenik alatt, és válassza ki az Ön által létrehozott dizájnt. Végül kattintson a Változások mentése gombra.

Ha bármelyik lépés összezavarja, talál egy teljes útmutatót a WordPress statikus honlapjának beállításáról.

Végre az egyoldalas honlapja készen áll. Íme egy példa arra, hogyan nézhet ki:

Következtetés