WEBSHOP FŐOLDAL ELKÉSZÍTÉSE

Egy jól működő főoldal célja, hogy megragadja a célközönsége figyelmét (azáltal, hogy a szövegezésben megemlíted azokat a témákat, amik a számukra érdekesek, a kiemelt termékek pedig az ő igényeiket elégítik ki). 

Ebben a részben tehát elkezdjük az első oldalunk designolását, így nagyon gyorsan, gyakorlati példákon keresztül tudjátok elsajátítani az Elementor működését. 

A feladat most az, hogy elkészítsétek a webshopotok főoldalának első (nem végleges) verzióját, és ezen keresztül gyakoroljátok a webdesign-t és az Elementor használatát!

Tartalomjegyzék

WEBDESIGN MEGOLDÁSOK

Hogy miket érdemes alkalmazni a főoldalon arra mutatok pár design megoldást. Ha ilyen elemekből építkeztek, akkor könnyebben összeáll fejben, hogy hogyan kell felépíteni az oldalt.

Javasoljuk, hogy érdemes használni és ilyen elemekből felépíteni a szekciókat az oldaladon (például a termékkategóriákat, vagy a kiemelt termékeket, akár a “Rólunk” részt).

 

KÉPNAVIGÁCIÓ

A képnavigáció látványos is, könnyen használható, mobilon is jól néz ki, be is mutatja a termékeket a kategórián belül,  tehát sok indok van a használata mellett.

Továbbá rendkívül egyszerű létrehozni, hiszen csak megfelelő képeket kell találni, azokat beilleszteni, és linkké alakítani. Így az oldalunk egy meghatározó része könnyen felépíthető.

SZÖVEG KIEMELÉSE A HÁTTÉRTŐL

Nagyon fontos, hogy a képek a háttérben SOHA nem fontosabbak, mint az oldal szövegezése. Tehát még ha az oldal hátterébe képet is teszel, akkor is meg kell oldanod, hogy a szöveg egyértelműen elüssön tőle, a látogató értse, hogy mi a fontos az oldalon.

Az Elementorban a szakaszok vagy az oszlopok hátterének a színét tudod állítani vagy be tudsz egy képet szúrni háttérnek. Ezek után a háttér áttetszőségnél az átlátszóságot 0.8-0.9-re beállítva még valamennyire át is látszik a háttér, egy füstüvegszerű hatást eredményezve.

BULLET POINTOK

Senki nem fog hosszú, összefüggő szövegeket elolvasni online, ezért nagyon fontos a megfelelő tagolás, amire a legjobb megoldás, ha kis, célzott bekezdésekben, felsorolást írsz (bullet pointok) a lent látható módon.

Ez lehet csak egy pár szavas mondat is (mint a lenti képen a címe a bekezdésnek), de ki is tudod fejteni a főcím alatti kis szövegben 2-3 mondatban a témát.

KIEMELT TERMÉK

Fontos lenne, hogy a kiemelt termékeket ne csak kilistázzátok katalógusszerűen, hanem a főoldalon remek lehetőség adódik arra, hogy látványosan bemutasd a front-end termékeid, amikre a legvalószínűbb, hogy kapnak az emberek.

Tehát nyugodtan szentelj nekik egy külön szekciót (ami mondjuk az oldal magasságának a felét tölti ki, lásd a letölthető sablonban), és írj egy kis szöveget hozzá.

EGY WEBSHOP FŐOLDAL ÁLTALÁNOS OLDALSZERKEZETE

Van egy általános séma egy webshop főoldalának a szerkezetére, ha piackutatáskor figyeltetek, akkor látjátok, hogy sokszor valami hasonló oldalszerkezettel találkoztatok.

Egy webshop esetén 3 fő célunk van a főoldalon:

  1. megmutatni a fő termékkategóriákat, amiket árulunk,
  2. bemutatni a pozicionálásunkat (miért jobb a terméked?/ kinek jobb a terméked?),
  3. és a kiemelt termékeinket akarjuk felkínálni további megtekintésre.
 

Webshop esetén nem javaslom, hogy rendszeresen vezessetek blogot (mert rengeteg energiát visz el egy heti bejegyzés), de 1-2 olyan szöveges anyagot, ami támogatja az eladást, kifejezetten célszerű elkészíteni.

 

E-kereskedelemben az egyik jó csaliajánlat egy kvíz/ termékválasztó elkészítése (pl: manna.hu oldalán a bőrtípusteszt, ami alapján termékeket tudnak ajánlani) – ha ilyet csinálsz a későbbiekben, mindenképp érdemes a főoldalon kiemelni.

  

A lenti képen a „rólunk szöveg” részt nem véletlen készítettem látványosan másra – ennek mindenképp ketté kell osztania a főoldalt, hogy könnyebben átlátható legyen.

Általában a szekciók háttere fehér (vagy valamilyen világosszürke) lesz, de ez “rólunk” rész legyen sötét hátterű, vagy legyen kép a hátterében, hogy élesen elkülönüljön a többitől.

Persze nem kötelező, hogy pont a “Rólunk” rész készüljön sötét háttérrel, de kell valami, ami tagolja az oldalunkat a könnyebb áttekinthetőségért.

 

A láblécbe kerülnek azok a linkek, amiket a vásárlás fontolgatásakor néznek az emberek – kontakt/ szállítási infók, stb.

WEBSHOP FŐOLDAL SABLON LETÖLTÉSE

A Mantrum.hu oldal kifejezetten arra a célra lett létrehozva, hogy a tréningben tárgyalt design-megoldások bemutatásra kerüljenek. Ezen felül pedig képet adjon arról, hogyan néz ki egy jól felépített, egységes webshop főoldal.

A nyitóblokk (menüsor utáni első rész) röviden összefoglalja mire számíthat a látogató a webshopban.

A háttérben elhelyezett kép úgy lett megválasztva, hogy tükrözze azt az életstílust, amit a márka képvisel. Fontos, hogy a szövegek és navigációs gomb jól elkülönüljön a háttértől. Ezért a háttér sötétebb átfedést kapott, a többi elem pedig világos színt, így jól olvashatóak maradtak.
 

Fontos a főoldalon pozicionálni a vállalkozást, hogy könnyű legyen azonosulni vele. A szövegezést viszont itt nem szabad túlzásba vinni, mert elsősorban nem ez érdekli a látogatót.

A legfontosabb dolgokat érdemes kiemelni és egy-egy szöveges blokkban elhelyezni. Ikonokkal kiegészítve vagy keretbe foglalva egyaránt formát lehet adni a szimpla szöveges elemeknek.
 

Nem célszerű egymás mellé behajigálni a termékképeket és árakat, mert könnyen zsúfolttá teszi az oldalt.

Sokan mégis ezt teszik, viszont egyrészt egyáltalán nem segíti a vásárlót a döntésben, másrészt sok termék kell ahhoz, hogy ne tűnjön üresnek az oldal. Helyette néhány igazán jó termékképpel, pár egyszerű design elemmel és lényegretörő leírásokkal letisztultabb és elegánsabb összkép érhető el. Ráadásul kevés termékkel sem fog üresnek tűnni az oldal.
 

A képen jól látszik, hogy mennyire elkülönülnek egymástól a szekciók, és a sablonban is meg tudod nézni, hogy a szekciók nem lógnak egymásba, és kellően nagyok ahhoz, hogy a képernyőn egyszerre csak limitált mennyiségű információ legyen.

Fontos, hogy nem akarod, hogy amikor valaki böngészi az oldalt, egyszerre túl sok részlet és építőelem legyen látható, mert akkor nehéz eldönteni, hogy mi a lényeg a képernyőn.

A linkek és gombok, illetve az azt magyarázó szövegek mindig a legfontosabbak (tehát NEM a képek, azok csak díszítésre vannak, és semmiképp sem szabad, hogy elvonják a figyelmet a lényegről).

 

Több módon is ki tudjuk emelni a fontos részeket, például nagy betűméret használatával (a főcímeknél nyugodtan használjatok 60-80-100-as betűméretet, de a hosszabb szövegeknél is 22-23-as betűméretet érdemes használni.

Hely van bőven, ezek csak bitek meg bájtok, és nem kell mindent egy kis helyre bezsúfolni az oldalon. A másik lehetőség a szövegek hátterének elsötétítése vagy világosítása, hogy jobban elüssön a háttértől.
MANTRUM FŐOLDAL SABLON LETÖLTÉSE