Oldal kiválasztása

Tartalom függőleges elhelyezkedése a Diviben

2019.09.12.

Rendezett design a tartalmak függőleges igazításával

Egy weboldal esetében a szimmetriának (vagy az átgondolt aszimmetriának) nagy jelentősége van a design rendezettsége, az oldal esztétikus megjelenése szempontjából.
Ha egy gyönyörűen elrendezett minta oldalt nézel, ott az egy sorban lévő oszlopok és az oszlopokban a modulok általában egy vonalban “érnek véget”. Ez nem véletlen, mert ugyanaz és ugyanannyi Lorem ipsum szöveg van mindegyikben, a szövegek mennyiségét szépen a képek méretéhez igazítják, stb.

Az élet azonban nem erről szól. Az egyik szöveged hosszabb, a másik rövidebb lesz, így a modulok záró vonala is hol följebb, hol lejjebb kerül. Máris igen slamposan néz ki minden.

Mint arról már a Divi blokkszerkezetének bemutatásakor szó volt, a szövegek kitöltik a korlátozottan rendelkezésre álló vízszintes helyet, majd terjeszkednek tovább függőlegesen.
Ezért fontos, hogy a tartalom (kép, szöveg, stb.) függőleges elrendezésével teremts esztétikus megjelenést az oldaladnak.

A különböző magasságú tartalmakat elrendezheted úgy, hogy a kezdő/felső vonaluk vagy pedig a záró/alsó vonaluk legyen egy vonalban. De a saját tartalmazó elemükben középre helyezve is jól mutathatnak.

A Divi-ben természetesen arra is van lehetőség, hogy az eltérő magasságú oszlopokat egyforma magasságúra változtasd.

Nézzünk néhány példát!

Tartalom középre helyezése egyoszlopos Sorban

A lenti példában egy képet – a Divi logót – helyeztem el egy egyoszlopos Sorban. A logónak maximális méretet határoztam meg, a sornak pedig minimálisat. Vízszintesen középre tudtam helyezni a Tervezés / Összehangolás alatt középre igazítva. De függőlegesen szemmel láthatóan nincs középen.

Ilyen esetekben kis számolással és egyenlő alsó és felső Kitöltés kézi beállításával is középre helyezhető a tartalom.

De van egy ennél sokkal elegánsabb és egyben univerzális megoldás. Amit több oszlop, illetve az azokban lévő eltérő magasságú tartalmak összehangolására is tudunk használni.

Ez egy rövid CSS kód, amit mindig a tartalmazó elem Haladó füle alatt az Egyéni CSS lehetőség Fő elem dobozába írunk.
Mivel most a képet (logót) akarjuk függőlegesen középre igazítani az azt tartalmazó Sorban, ezért a Sor Haladó füle alá tesszük a CSS-t. Így néz ki:

display: flex;
align-items: center;

Tartalom elrendezése kétoszlopos Sorban

A lenti példában egy kétoszlopos Sornak adtam egy halványkék hátteret, hogy az elhelyezkedések jobban érzékelhetőek legyenek.
Az első oszlopba tettem egy a sormagasságnál kisebb képet. Így itt is “kilóg” a háttér.
A második oszlopba pedig egy Fülszöveg modult tettem, és alá egy Gombot.

Ez itt a cím

Ez pedig egy tetszőleges tartalom, hogy be tudjam mutatni a tartalmak függőleges elhelyezésének módjait a Diviben.

A jobb oldali tartalmat meg lehet oldani egy Cselekvésre felhívás gomb modullal is. Itt figyelj arra, hogy a gomb csak akkor válik láthatóvá, ha a Tartalom / Gomb link URL -be legalább egy # -et beírsz.
Lásd lenti kép:

De térjünk vissza az eredeti virágos elrendezésünkhöz!

Eltérő magasságú oszlopok elrendezése egy Sorban

A jobb oldali tartalom alacsonyabb oszlopban / dobozban is elfér, mint a kép. Ilyenkor a Divi alapbeállításként a két oszlop felső peremét helyezi egy vonalba.

Ha azt szeretnéd, hogy a jobb oldali tartalom az azt tartalmazó Oszlop közepére kerüljön – és ezzel egyben a bal oldali Oszlop közepéhez is igazodjon -, akkor a Sor beállítások / Haladó / Egyéni CSS / Fő elem dobozba írd be a következő CSS kódot:

display: flex;
align-items: center;

Ha pedig azt szeretnéd, hogy a jobb oldali tartalom alulra igazodjon, alsó vonala a kép alsó szélével legyen egy vonalban, akkor a következő kódra lesz szükséged:

display: flex;
align-items: flex-end;

Végigvettük tehát azt, hogy eltérő magasságú oszlopokat / dobozokat hogyan tudunk elhelyezni egymás mellett.

A Divi-ben lehetőség van arra is, hogy a nagyobb Oszlop magasságához igazítsd a kisebbét.

 

Kiegyenlített oszlopmagasság és tartalom függőleges igazítása

Ehhez a Sor beállítások / Haladó fül alatt beírt CSS-ből CSAK az első sort tartsd meg. A display: flex; -et.

Utána a Sor beállítások / Tartalom fül alatt az Oszlopok felsorolásánál kattints a második Oszlop előtti fogaskerékre. Ezzel a második Oszlop beállításait tudod szerkeszteni.
A felugró Oszlop beállítások ablakban a Haladó / Egyéni CSS / Fő elem dobozba írd be a következő CSS-t:

display: flex;
flex-direction: column;
justify-content: flex-start;

Hogy értsd is, mit és miért csináltunk:

A Sor beállítás / Haladó fül alatt beírt display: flex; lehetővé tette, hogy a Sorban rugalmasan, flexibilisen mozoghasson a tartalom, vagyis az oszlopok.

A Második Oszlop alá beírt display: flex; flexibilissé tette a második Oszlop tartalmát. A flex-direction: column; miatt az Oszlop tartalma (nálam két modul) egymás alatt, tehát oszlopban jelenik meg. E nélkül egymás mellett lennének.

A justify-content: flex-start; pedig a flexibilitás kezdetéhez, vagyis az Oszlop tetejére igazítja a tartalmat.

Ha az Oszlop közepére szeretnéd tenni, akkor a CSS kód:

display: flex;
flex-direction: column;
justify-content: center;

Ha pedig a tartalmat alulra tennéd, akkor:

display: flex;
flex-direction: column;
justify-content: flex-end;

A fenti hat elrendezési lehetőség egyedi design megoldásokat kínál a weboldaladon.

A 4. elrendezést egyébként úgy is elérheted, ha a Sor beállításoknál a Tervezés fül alatt Kiválasztod az Oszlopmagasságok kiegyenlítését.

Az Egyéni margó szélesség használatával pedig meghatározhatod, hogy az Oszlopok között mekkora távolság legyen. 1-esre állítva 0 lesz a távolság, az Oszlopok összeérnek, mint nálam.

A kétoszlopos Sorhoz hasonlóan elrendezhetsz három vagy még több Oszlopot tartalmazó Sorokat is.

Kitűnő például az általában nem egyforma magasságú Fülszöveg modulok egymáshoz igazításához, esztétikus elrendezéséhez.