Így épül fel a weboldalad – ingyenes honlap tartalom listával és leírással

Mi micsoda a honlapon és hogy néz ki. Szigorúan laikusoknak! 🙂

Szeretnéd, ha weboldalad modern lenne, nemcsak kép meg szöveg lenne benne, de előre félsz a webdesignereddel való megbeszéléstől, mert ő csak dobálózik mindenféle szakkifejezéssel, te meg próbálsz okos fejet vágni, mintha értenéd miről van szó? Nem baj, ha nem születtél technikai zseninek, és egyáltalán nem vagy otthon a weboldalak világában. Az alábbi cikkben összefoglalom egyszerűen, közérthetően milyen részekből áll a honlapod, és az egyes tartalmi elemeknél mire érdemes figyelni, hogy ne az ellenkező hatást érd el, mint amit szeretnél.

Tehát nézzük sorra, milyen elemekből áll a weboldalad, és milyen tartalmi elemeket lehet illetve célszerű elhelyezni oda. Az egyszerűség kedvéért zárójelben odaírom az angol megfelelőjüket is, mert előfordulhat, hogy némelyikkel már találkoztál és a magyar elnevezés nem mond semmit.

Legfelső info sáv (Top bar)

Ez a honlapod legteteje – nem minden sablon tartalmazza. Célszerű ide olyan információt tenni, amit mindenképp szeretnél, ha minden oldalon megjelenne és kéznél lenne a látogató számára. Lehet ez a telefonszámod, az email címed, a közösségi oldalad ikonjai. (1. kép)

Szintén kerülhet ide egy tömör felhívás az új tanfolyamodra, programodra stb. Ez utóbbi esetben légy nagyon tömör. (2. kép)

Manapság nagyon trendi a hamburger menü (más néven lenyíló menü) elhelyezése. (3.kép)

TIPP – Az infot vagy középre helyezd, vagy jobbra, balra csak olyan adatot tegyél, ami kevésbé hangsúlyos, vagy feltűnőbb helyen a weboldaladon megismétled.

1. kép - Top bar Facebook linkkel, telefonszámmal, email címmel
2. kép - ingyenes kurzusra felhívás linkkel a Top barban
3. kép - Hamburger menü a Top barban

Fejléc 

Különböző funkciója lehet, széleskörűen variálható felület. Kerülhet bele kép, slider (váltakozó képek), videó. Kötelező eleme a logó, és a főmenü. Leegyszerűbb és legátláthatóbb, ha az elején a fejlécednek vagy nincs háttere, vagy olyan színt választasz, ami harmonizál az arculatoddal. 

Divatos az úgynevezett átlátszó fejléc, ezt leginkább akkor látod, amikor olyan, mintha magán a nyitó képen helyezkednek el a menüpontok és a logó. Átlátszó menü esetén különösen oda kell figyelni a nyitó kép minőségére és elrendezésére, mert ha kitakarja a logót, vagy olvashatatlan lesz tőle a menü, akkor inkább ront az összképen, mintsem javít. 

TIPP: Képek, videók, sliderek lassíthatják az oldalad betöltését, ügyelni kell a feltöltött dokumentumok méretére, ugyanakkor modern és ütős hatást adhatsz így a weboldaladnak.

Főmenü

Honlapod oldalainak listáját rakhatod ide. Számtalan elrendezés közül választhatsz, a sablonod variálhatósága, vagy html tudásod szabhat csak határt.

TIPP: Ügyelj a nagyon egyszerű menü-szerkezetre, kerüld a 2-3 szintnél több almenüt, a főmenübe sem érdemes 5-6 opciónál többet betenni. Ha mindenképp sok információt szeretnél megosztani, érdemes tematikusan csoportosítani őket. Jó megoldás lehet, ha egyes oldalakat rejtetten hagysz, és csak bizonyos oldalakon keresztül engeded oda a látogatókat.

Szintén érdemes megfontolni, hogy valóban minden menüpontra szükség van-e, tényleg fontos, hogy a látogatóid ismerjék céged történetét, valóban szükség van egy külön oldalt szentelned ügyfeleid véleményének?

Gondold át, hogy az egyes tartalmi elemeket nem lehet-e egy oldalra összevonni (például szolgáltatások és azok árai), vagy könyvtárba rendszerezni és jelszóval ellátni (például tudásbázis esetén), előfizetőknek elérhetővé tenni stb.

Minél egyszerűbb és átláthatóbb a menüd, annál biztosabb, hogy a látogatóid végig kattintgatnak minden opción.

Nyitó kép, vagy ismertebb nevén a “hajtás feletti rész”

A hajtás feletti rész elnevezés még a hőskorban ragadt meg, amikor még csak napilapokból tájékozódtak az emberek. A címoldalon különösen összehajtott rész felső felére kerülnek a mai napig a leglátványosabb képek, címszövegek. 

A honlapon is jó esetben a fejlécen és a nyitó képen kívül mást nem lát a weboldaladra érkező, ezért úgy is mondhatnánk, ez a görgetés feletti rész – én jobb szeretem a nyitó kép megnevezést.

Mivel az agy gyorsabban feldolgozza és értelmezi a képeket, kulcsfontosságú a nyitó kép hangulata és  tartalma: mit mond el a kép rólad, a szolgáltatásodról, arról az élményről, amit Veled kap meg az olvasó – szavak nélkül?  A kép után jön a szöveg- ami jó esetben harmóniában van azzal, amit a képpel sugallni akarsz.  Szólítsd meg a látogatót, hogy be tudja magát azonosítani (pl vállalkozó nők, katás vállalkozók, elvált férfiak stb.), és azt is áruld el tőmondatban, hogy mit kap tőled az illető. Weboldalt, amire büszke lehet, átlátható könyvelést, csajozós kocsikat stb.

A nyitó kép lényege, hogy egy képpel és kevés, azaz könnyen olvasható, egy blikkre befogadható tartalommal tudasd a látogatóval, hogy mire számíthat az oldaladon.

Fő tartalmi rész, vagy más néven body.

Ide kerül a fő mondanivalód. Rengeteg látványelem áll rendelkezésedre, hogy a honlapod ne legyen egy kép vagy szöveg-rengeteg.

Íme egy lista, mivel színesítheted a tartalmi részt:   

  • Ajánlások (Testimonials)
  • Akciógomb (Call to action)
  • Arhívum
  • Ár táblázat
  • Bejegyzések (legfrissebb, vagy kiemelt)
  • Banner
  • Címkefelhő
  • Csúszka (Slider)
  • Felhívás (Alert)
  • Fejlődés mutató (Progress bar)
  • Felugró ablak (Pop-up)
  • Flip box (Lapozgató)
  • Fülek (Tabs)
  • Gombok
  • Harmonika (Accordion)
  • Hozzászólások
  • Ikonok
  • Kategória
  • Képgaléria
  • Kép szalag (Carousel)
  • Kérdőív
  • Kereső
  • Kiemelt kép
  • Közösségi média gombok
  • Megrendelő űrlap
  • Számláló
  • Térkép
  • Űrlap (Egyéb)
  • Toggle (Pecek)
  • Visszaszámláló
  • Videó

Bizonytalan vagy, melyik pontosan mire való? Töltsd le a Honlap tartalom A-tól Z-ig listát, amelyben leírásokkal, képekkel megmutatom mit mire tudsz használni. (A cikk a feliratkozási panel alatt folytatódik!)

honlaptartalomaz-min

honlap tartalom
a-tól z-ig

Töltsd le a listát és közérthető módon megmutatom, mi az a Toggle, CTA, flip box és társai. Ezekkel nemcsak látványossá, de ha jól használod őket felhasználó-baráttá teheted a honlapod. 

Kattints a gombra, kérd a listát!

Oldalsáv

Sokáig kötelező elemnek számított, egy időben szinte nem is készült olyan honlap, ahol ne lett volna legalább egy oldalsáv. 

Az oldalsávnak több funkciója lehet. Bal oldalon általában menüt szokás helyezni – ez esetben a fejlécedben vagy a fejléc fölött nem érdemes menüt alkalmazni. Szintén bal oldalon gyakori a webshopoknál a keresési opció, a szűrési lehetőségek, naptár stb.

A jobb oldali oldalsávba szintén változatos tartalmak kerülhetnek. Tehetsz ide bemutatkozást, képet, reklámot, hírlevél feliratkozási lehetőséget, letölthető dokumentumot.

Ha van blogod, szintén általában a jobb oldali oldalsávot szoktuk alkalmazni az arhívum, kereső, címkefelhő és kategória megjelenítésére. Célszerű ide helyezni fotóval egy rövid bemutatkozást, ha a látogatóid többnyire a blogodra érkeznek elsőként és csak utána navigálnak el a többi oldaladra.

Bal oldali oldalsáv keresővel, szűrővel
Jobb oldali oldalsávon blog kategória, címke
Jobb oldali oldalsáv képpel, adatokkal

Lábléc

Sablonfüggő, hogy egy vagy két lábléced is van. Ha kettő van, a legalsóba csak minimális információkat szokás helyezni, úgy mint kié a honlap, esetleg ki készítette a honlapon megjelenített képeket, aktuális év és „Minden jog fenntartva”.

Szintén a láblécbe szerencsés elhelyezni olyan adatokat, melyek hasznos információkat tartalmaznak. Megismételheted itt az elérhetőségeidet, kitehetsz oldaltérképet, közösségi média csatlakozást, másodlagos menüt (pl ÁSZF, Adatkezelési nyilvántartás, Jogi nyilatkozat stb), bannert, de akár letölthető anyagodhoz a felhívást is.

Az alapszabály itt is az, hogy a kevesebb néha több, ha túl sok infot teszel ki egymás-hegyén hátán, az elriasztja az olvasóidat.

Két footer, a felsőben honlap adatok, az alsóban menü és tulajdonos feltüntetése

Van olyan elem, ami kimaradt volna? Írd meg kommentben, vagy vedd fel velem a kapcsolatot emailben.

Vélemény, hozzászólás?

Ez az oldal az Akismet szolgáltatást használja a spam csökkentésére. Ismerje meg a hozzászólás adatainak feldolgozását .