Hosszmértékek a Diviben

Weboldal szerkesztése közben, sok méretetekkel kapcsolatos döntést kell meghoznunk. Milyen széles legyen a sor, mekkora legyen a margó, kitöltés, milyen betűméreteket használjunk… Ráadásul a tervünknek reszponzívnak kell lennie, hogy weblapunk minden kijelző méreten jól mutasson, ezt elősegítve alakult ki több mértékegység alternatíva is.

A *CSS-ben egy elem méretét vagy hosszát, hosszegységekkel fejezzük ki. A hosszegységeket kisbetűk vagy szimbólumok alkotják, előttük pedig a meghatározandó számérték helyezkedik el. (10px, 2em, 100% stb.)

*A CSS (Cascading Style Sheets, magyarul: lépcsőzetes stíluslapok) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.

Tehát míg a HTML nyelv/kódolás, a weboldal tartalmáért felel, addig a CSS-el tudjuk megformázni kód formájában a weboldalunk megjelenését. Például: szövegszín, szövegméret, háttérkép beállítása, tartalmak keretezése…

Szerencsére a Divi szerkesztőnk nagyban megkönnyíti az életünket, így akár nulla kódolással is létre tudunk hozni honlapokat. Viszont nem árt ha tisztában vagyunk a kódolás alapjaival, mert weboldalunkat kibővíthetjük, formázhatjuk a Diviben a CSS segítségével is.

A hosszmértékegységeknek van egy alap beállítása a Divin belül, tehát a betűméretekhez például px-t használ, a méretezéshez %-ot, így maradhatunk ezeknél a beállításoknál, de el is térhetünk tőlük. Itt nem kell bonyolult kódsorokat írnunk, csak egyszerűen beírjuk a használni kívánt mértékegységet a helyére. A következőkben ezeket a lehetőségeket fogjuk megvizsgálni.

A leckében ezeknek az elemeknek a mértékegységeiről lesz szó:

• szélesség
• margó
• kitöltés
• szegély
• szöveg (betűméret, betűköz, sormagasság)

Hosszegységek

A hosszegységeket 2 fő kategóriába soroljuk: abszolút és relatív.

Abszolút hosszmértékegységek:

Nem viszonyulnak semmilyen más elemhez, tehát ezek az egységek nem méreteződnek a böngésző méretére, így mindig fix/azonos méretűek maradnak, attól függően, hogy mit állítottunk be nekik.

Például:
px – pixel
cm – centiméter
mm – milliméter

A Diviben csak a px-t használjuk! A többit inkább az offline anyagok gyártásához, a nyomtatásban.

Relatív hosszmértékegységek:

Az abszolúttal ellentétben a relatív hosszmértékek igazodnak más elemek méretéhez, változnak velük együtt. Például a százalékos érték a szülő elem hosszától függ.

Például:
em – az elem betűméretéhez igazodik
rem –  a HTML gyökér betűmérethez van viszonyítva
vw – a böngésző képernyő szélességének 1 %-hoz igazodik
vh – a látható képernyő magasság 1 %-hoz igazodik
% – a befoglaló elem szélességének 1 %-hoz igazodik

Ezek mindegyike használható a Diviben.

A Divi blokkszerkezete

A Divi weboldalak blokkokból vagy más néven dobozokból épülnek fel. Ilyen dobozok a szakaszok, sorok, oszlopok, modulok.

Ugye amit már vettünk:

Szakaszok: kék keretes a szerkeszési színük a Divin belül. Általában a háttereket szoktuk beállítani benne és a különböző témák elválasztására szolgál az oldalakon belül.

Sorok: Minden szakaszon belül tudunk sorokat létrehozni. Ezek tetszőleges számú oszlopokból állhatnak. Zöld színű a kerete.

Modulok: Minden sorba tudunk modulokat beszúrni. Ide kerülnek a konkrét tartalmak. Pl.: szöveg, kép…

A doboz mérete = tartalom (szöveg, kép, stb.) + kitöltés + szegély.

Például létrehozunk egy sort (A zöld keretes a Divi szerkesztőben), aminek a szélességére beállítunk 1200 képpontot. Ha tartalmat adunk hozzá (pl.: egy szöveg modult), nem fog megváltozni a sorunk szélessége. A kitöltés és a szegély hozzáadása se változtatja meg a sor szélességét, mert a dobozon belül kerülnek alkalmazásra. Tehát, ha 50px jobb és bal oldali kitöltést adunk, akkor nem lesz 1300 képpontos a sorunk, ahogyan a 10px-es szegély hozzáadásával sem kapunk 1220px széles sort. Ami változhat ilyenkor az a sor magassága, ha pl.: hosszú szöveges tartalmat helyezünk bele! A margónak nincs befolyása a dobozok méretére, mert azokon kívül helyezkedik el. A szakaszok, sorok és modulok szellős térköz elválasztására szolgál az oldalon.

Szélesség

Használható mértékegységek: %, vw és px a max szélesség megadásához.

px és %:
A reszponzív weboldal tervezés miatt, nem ajánlott a px használata a szélességnél. Két kivétel viszont van:

1. ha a mobil eszközökre való váltás töréspontjait állítjuk be,

2. ha a Maximális szélesség értéket %-ban adjuk meg és emellett használunk egy Max.Szélesség értéket is px-ben.

A Diviben a szélesség alapbeállítása %-ban van. Van lehetőség px-ben is megadni a szélességet. A dobozaim (szakasz, sor, oszlop, modul) konkrét Tartalma + Kitöltése + Szegélye mindig kiadja, kitölti a tartalmazó elem által megszabott rendelkezésre álló szélességet, de több nem lehet. Tehát a szélesség tulajdonképpen maximális szélesség! Így a tartalmak szépen elrendeződnek a saját dobozukban.

Vw:
A vw (= Viewport Width) nagyon hasonlít a % -hoz. A % a szülő/tartalmazó/befoglaló elem méretének arányában adja meg az értéket, a vw pedig a teljes látható képernyő szélesség arányában. Mindkettő megfelelő a reszponzív weboldal design szempontjából.

A szélesség és magasság beállításokkal egy következő leckében részletesen meg fogunk ismerkedni és belemegyünk a miértekbe!

Margó

Használható hosszegységek: px, % és vw

A margó a dobozon kívül található. Az elemeken, dobozokon kívüli térközt tudjuk vele szabályozni és pozícionálni tudjuk, hogy hol helyezkedjenek el. Pozitív és negatív értékeket is megadhatunk, így például egymás fölé is helyezhetünk két elemet.

A Diviben minden szakasznak, sornak és modulnak megadhatunk margó értéket. A beállítás ablakban tervezés fülre kattintva a kiterjedést választva.

px:
Ha a kinézet miatt pixelben állítjuk be a margót, akkor az értékeket külön meg kell adni asztali gép, tablet és mobil méretben is, mert ezek nem alakulnak át a képernyőméret változásával. A felső és alsó margóknál nyugodtan használhatjuk a px-t, mert a % -os értékeknél túlzottan mozognak az elemek a képernyő változásakor. A bal és jobb oldali margók esetében viszont már ajánlott mást választani, de maradhatunk a px-nél is.

%:
A % -ban megadott bal és jobb oldali margók reszponzívak (jól mutatnak minden kijelzőn), így felválthatják a px-t. A felső és alsó margót is beállíthatjuk %- ban, akkor ezek is reszponzívak lesznek, de tudd, hogy a % mindig a befoglaló elem szélességéhez fog idomulni ebben az esetben is, nem pedig a magasságához.

vw és vh:
Hasonlóan a %-ban megadott értékekhez, a vw-ben és vh-ban megadott értékek is reszponzívak, ezért bátran kísérletezz és használd őket a margók beállításainál. A különbség az, hogy mindig a nézetablak méretéhez vannak viszonyítva van, nem pedig a szülőelemhez.

Kitöltés

Használható mértékegységek: px, %, em, vw, vh

A Divi-ben be tudjuk állítani, hogy a dobozokban (Szakasz, Sor, Modul) mekkora legyen a kitöltés, azaz jobbra, balra, fent, lent mekkora legyen a tér.

Px, %, vw és vh használata kitöltés meghatározásához
Alkalmazásukról körülbelül ugyanaz mondható el, mint a Margónál.

Általában px-t és %-ot használunk.

Szöveges tartalom esetén hasznos lehet az em mértékegység használata, mert ez a betűnagysághoz igazodik.

Szegély

Javasolt mértékegységek: px, em, vw

Px:
Szegély (angolul Border) méreteinek megadásakor a leggyakrabban használt mértékegység a px. Mivel általában viszonylag kis méretről van szó, nem zavaró, hogy nem reszponzív.

Em és vw:
Ha reszponzív szegélyt akarsz, alakíthatod azt a betűméret arányában vagy pedig a képernyőmérethez igazítva. A betűmérethez igazított szegély jó lehet a vastag szegélyű Gombok esetében.

%-os érték itt nincs a Diviben.

Szöveg

Javasolt mértékegységek: px, em, rem

Szövegek esetében a betűméret, a betűköz és a sormagasság megadásához használunk mértékegységeket.

Betűmérethez:

A px-t használjuk a leggyakrabban. A képernyőmérethez igazított betűméret ugyanis túlságosan megváltozik és vagy a kisebb eszközökön lesz túl kicsi vagy a nagyobbakon túl nagy.
A reszponzivitás azonban tökéletesen megvalósítható, mert a Diviben külön meg tudjuk adni az optimális betűméretet asztalra, tabletre és telefonra.

A Divi a betűméretet megadhatjuk em-ben és rem-ben is.

Em esetében a betűméret, a Téma testreszabásban megadott, az egész oldalra alapértelmezett betűmérethez fog igazodni.

Rem-mel pedig az oldalt olvasó látogató böngészőjében alapértelmezettként beállított betűmérethez.

Betűköz:

Itt is a px-t használjuk a leggyakrabban. Ha azonban a betűméret a különböző eszközökön az átlagos változáshoz képest jobban változik, átállíthatjuk például em-re is.

Sormagasság:

A leggyakrabban ehhez az em egységet használjuk. Ez nagyon praktikus, mert akár egy oldalon belül, akár a különböző eszközökön többféle betűméretet használunk. A sormagasság szépen fog igazodni a betűnagyságához.

Az összes felsorolt példából jól látható, hogy sokféleképpen beállíthatjuk a Diviben a hosszmértékeket. Egyik sem rossz választás, viszont mást lehet elérni velük. Tehát van amikor az egyik megoldás például egyértelműen megfelelőbb a reszponzivitás miatt, valamikor pedig, a design tervet kell figyelembe vennünk és másik mértékegységet kell választanunk.

A gyakorlati feladatoknál majd szépen ki fognak tisztázódni, a most tanultak!