Tartalom függőleges elhelyezkedése a Diviben
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
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.
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.