A weboldalak felépítése: fix és variálható elrendezések

A legtöbb tartalomtípushoz a fix oldalelrendezés a legpraktikusabb, de bizonyos esetekben hasznos, ha tudjuk variálni az oldal elrendezését.

Fix oldalelrendezés

Ez a legkényelmesebb, legészszerűbb és legpraktikusabb megoldás, amikor olyan oldalakról van szó, ahol kifejezetten fontos a következetes elrendezés (pl. blogposztoldalak, hírbeloldalak), illetve ha nem akarunk bajlódni az új oldalak elrendezésének megtervezésével. 

A fix oldalelrendezés azt jelenti, hogy amikor új tartalmat viszünk fel, előre meghatározott mezőkbe írjuk be, töltjük fel a tartalmat, és minden újonnan felvitt oldal elrendezése pontosan ugyanúgy fog kinézni. 

Ilyenkor az oldalelrendezést nem kell külön megtervezni az új tartalomhoz, hiszen a fix elrendezésű tartalomtípusokban nincsenek „mozgó” elemek, így az újonnan hozzáadott oldal dizájnja ugyanolyan lesz, mint az adott tartalomtípus többi oldala.

Variálható oldalelrendezés

Bizonyos esetekben azonban praktikus lehet, ha tudjuk variálni az oldal elrendezését – tipikusan ilyen például egy honlap főoldala, ahol időnként szükség lehet bizonyos szekciók eltüntetésére, más szekciókra cserélésére, az elrendezés módosítására.

Ilyenkor hasznos a variálható oldalelrendezéses megoldás.

Az ilyen oldalak nem fix oldalsablonon (oldalelrendezésen) alapulnak, hanem előre beállított stílusú oldalelemeken, amelyeket különféleképpen lehet kombinálni és elrendezni az oldalon belül.

Az egyes oldalelemek előre beállított stílusának köszönhetően biztosan minden egyedi elrendezésű oldalon is szép lesz a dizájn, nem sérül az egységesség, és mobilon is automatikusan jól fog mutatni, anélkül, hogy ehhez bármiféle beállítást külön végre kellene hajtani.

Ez a blokk például két darab szöveg oldalelemből áll, amit kétoszlopos elrendezésben helyeztünk el. Nagyobb képernyőn a két szöveg oldalelem egymás mellett van, kis képernyőn (mobilon) pedig egymás alá kerülnek.

Néhány példa az oldalelemekre a Prompt.hu-ról:

  • ikon 
  • ikon linkkel
  • kép
  • kép szöveggel és linkkel
  • térkép
  • csúszkás összehasonlító képpár
  • szöveg
  • videó
  • idővonal
  • gomb

Ezeket az alábbi elemelrendezésekbe helyezzük el attól függően, hogy az adott tartalom hogyan kívánja meg:

  • teljes szélességű tartalom
  • 2 oszlop (½-½ elosztásban)
  • 2 oszlop (⅔-⅓ vagy ⅓-⅔ elosztásban)
  • 3 oszlop (⅓-⅓-⅓ elosztásban)
  • slideshow (carousel).
Néhány további példa az oldalelrendezésekre:

Ez például két, 50-50%-os arányú oszlopos elemelrendezés, ahol az egyik oszlopban szöveg oldalelem van, a másik oszlopban pedig csúszkás kép-összehasonlító oldalelem – nagyobb képernyőn a két oldalelem egymás mellett van, kis képernyőn (mobilon) pedig egymás alá kerülnek.

Ez pedig háromoszlopos elemelrendezés, ahol az első és a harmadik oszlopban szöveg oldalelem van, a középső oszlopban pedig csúszkás kép-összehasonlító oldalelem.

Nagyobb képernyőn a három oldalelem egymás mellett van, kis képernyőn (mobilon) pedig egymás alá rendeződnek.

Kérjen árajánlatot!