Amikor webhelyet hoz létre a Divi használatával, a tartalom függőleges igazítása értékes kiegészítője lehet a tervezési eszköztárnak. Az elrendezéstől függően előfordulhat, hogy a tartalmat különböző módokon (középen, alul, felül) függőlegesen igazítani kell. A leggyakoribb igény az, hogy az anyag függőlegesen legyen igazítva. Szép szimmetrikus térközt kölcsönöz a tartalomnak, ami nagyon hasznos több oszlopelrendezés használatakor. Ezen túlmenően a függőlegesen középre helyezett tartalom a böngésző szélességének közepén marad, így nincs szükség egyéni kitöltésre vagy margókra a hasonló reakcióképesség eléréséhez.
Ebben a leckében megtanítom, hogyan lehet függőlegesen igazítani a tartalmat bármely oszlopban néhány egyszerű CSS-sor segítségével. Bemutató céljára a Divi több előre gyártott elrendezését fogom használni. Nem kell aggódnia, ha nem ismeri a CSS-t. Pillanatok alatt alkalmazhatja ezt a tervében.
A Flex (vagy Flexbox) CSS attribútum csak egy eszköz az elemek vízszintes és függőleges halmokba rendezésére (olyan, mint egy táblázat). A tipikus táblázatokkal ellentétben azonban a flex funkció lehetővé teszi olyan dobozok létrehozását, amelyek a bennük lévő tartalom méretéhez igazodnak.
A Divi a flex attribútumot használja, amikor az „Oszlopmagasságok kiegyenlítése” lehetőséget választja sorbeállításként. Egyszerűen fogalmazva, ez biztosítja, hogy az összes oszlop mérete a legtöbb információt tartalmazó oszlop méretéhez igazodik. Mivel az „Oszlopmagasságok kiegyenlítése” kiváltja a sortároló rugalmasságát, használhatja ezt úgy, hogy CSS-t ad az oszlopokhoz, hogy módosítsa az egyes oszlopok (vagy dobozok) tartalmát.
Ha egy sor bármely oszlopához hozzáadja a „margin: auto” szót, amp az oszlop tartalma (akár egy, akár több modulról van szó) függőlegesen középre kerül.
Az összes oszlop (és azok tartalma) függőlegesen középre kerül, ha hozzáadja az „align-items: center;” kifejezést. a te sorodhoz.
Természetesen a flex tulajdonság sokkal több webdesign-alkalmazást és fejlettebb CSS-t tartalmaz, amelyeket felhasználhat a témában. Ennek az oktatóanyagnak az egyszerűségét azonban szerettem volna megőrizni.
Technikai értelemben nem Használhat egyéni térközt a tartalom/modulok függőleges elhelyezésére egy oszlopon belül (kitöltés és margó). Használhatja amp a Divi térközbeállításait, hogy a modul(oka)t függőlegesen középre állítsa a sorban, hogy egy oszlopot egyenlő legyen a felső és az alsó kitöltés. A tartalmat alulra igazíthatja, ha felső kitöltést ad egy oszlophoz. Ha további tartalmat ad hozzá az oldalához, előfordulhat, hogy módosítania kell a térközt. Ezen túlmenően, ennek az igazításnak a fenntartása több böngészőméret között problémás lehet.
Tehát, ha az információk függőleges igazításának módját keresi anélkül, hogy aggódnia kellene a konkrét térközök miatt, akkor azt hiszem, hogy ezt hasznosnak találja.
Kezdődjön a buli!
Kezdem a belsőépítész cég portfólió oldalelrendezésével. Hozzon létre egy új oldalt, hogy ez az elrendezés megjelenjen az oldalon. Ezután adjon nevet az oldalának. A legördülő menüből válassza a „Divi Builder használata”, majd a „Visual Builder használata” lehetőséget. Ezután válassza a „Válasszon előre elkészített elrendezést” lehetőséget a legördülő menüből. Ezután válassza ki az Interior Design Company Layout Packet a Betöltés a könyvtárból ablakban. Végül az elrendezések kiválasztásánál válassza ki a Portfólió oldalt, és kattintson az „Az elrendezés használata” gombra.
Az elrendezés betöltése után készen áll a kezdésre.
Nyissa meg a második sor sorbeállításait (a közvetlenül az oldal címét tartalmazó sor alatti sor beállításait). Nyissa meg a Méretezés opciócsoportot a tervezési beállításoknál, és vegye figyelembe, hogy az „Oszlopmagasságok kiegyenlítése” már aktív; Ez azt jelenti, hogy a flex tulajdonság („display: flex;”) hozzáadásra került a sorhoz.
A 2. oszlop fő eleme beviteli mezőben lépjen a Speciális lap beállításaihoz ugyanahhoz a sorhoz, és adja hozzá a következő CSS-kódrészletet.
A második oszlop tartalma most át lett helyezve függőlegesen középre.
| 01 | margó: auto; |
A margó értékét az alábbiak szerint módosíthatja, hogy a tartalom alulra igazodjon, és így az összes modul az oszlop alján kerüljön egymásra:
| 01 | margó: auto 0; |
A sor összes oszlopának tartalmát függőlegesen középre állíthatja, ha a következő kódrészletet hozzáadja a sorbeállítások fő eleméhez, ahelyett, hogy minden oszlophoz külön-külön hozzáadná a „margó: auto” szót.
| 01 | align-ites: center; |
Ezt a kódrészletet akkor is használhatja, ha azt szeretné, hogy az oszlopaiban lévő összes információ alul legyen igazítva:
| 01 | align-ites: flex-end; |
Ne feledje, hogy használhatja a Divi Stílusok kiterjesztése funkcióját, ha a jobb gombbal a CSS-kódrészlet fő elemére kattint, és kiválasztja a „Fő elem kiterjesztése” lehetőséget.
Ezután az oldal minden oszlopának teljes tartalmának függőleges középre helyezéséhez alkalmazza a CSS fő elemet az oldal (vagy szakasz) összes sorára.
Most már minden függőlegesen kiegyensúlyozott.
Azonban előfordulhat, hogy észrevette, hogy a fehér oszlop háttérszíne már nem fedi le a teljes sort, mivel az oszlophoz hozzáadta a „margó: auto”. Ezt úgy orvosolhatja, hogy a sor háttérszínét fehérre változtatja, és eltávolítja a sor kitöltését. Ehelyett megtanítom, hogyan állítsa középre az oszlop tartalmát anélkül, hogy módosítani kellene a margót.
A sorhoz először hozzáadott flex tulajdonságot használtuk. Ennek eredményeként minden oszlopunk egy „flex box” lett, amelyet a margó változtatásával függőlegesen lehetett igazítani.
Használhatjuk azonban a rugalmas irányt az oszlopunk szövegének igazítására anélkül, hogy feláldoznánk az „Oszlopmagasság kiegyenlítése” hatást, amely az oszlopainkat (és az oszlopháttereinket) azonos méretben tartja. Ennek elérése érdekében néhány sor CSS-t adunk a sorunkhoz, így a benne lévő összes modul függőlegesen, majd középre kerül.
Térjünk vissza az előző amp . Ha jobb gombbal kattint az Egyéni CSS-re, és kiválasztja az „Egyéni CSS-stílusok visszaállítása” lehetőséget, eltávolíthat minden egyéni CSS-t a sorbeállításokból.
Ezután a 2. oszlop fő elemében alkalmazza a következő CSS-t:
| 010203 | kijelző: flex;hajlítási irány: oszlop;justify-content: center; |
Módosítsa a „justify-content: center”-et „justify-content: flex-end”-re a tartalom alsó igazításához.
Szeretem ezt a konfigurációt, mert ha függőlegesen helyezem el a tartalmat, és a sort teljes szélességűvé teszem, a tartalom középen marad.
Függőlegesen igazított összemosások készítése különböző mennyiségű szöveggel
Ha az oszlopok tartalmát függőlegesen középre állítja, az is segíthet a homályosításban. Amint azt Ön is tudja, nem minden kivonatban lesz ugyanannyi szöveg egy funkció vagy szolgáltatás leírásához. Ha ezeket az elmosódásokat függőlegesen középre állítja, az elrendezése gyönyörűvé válhat.
A Digitális fizetések kezdőlapjának elrendezése esetén ebben amp függőlegesen igazítom az elmosódásokat.
A webhely megjelenésének valósághűbb ábrázolása érdekében először különböző mennyiségű törzstartalommal egészítem ki a homályos elemeket.
Most ki kell egyenlítenem az oszlopmagasságokat a sorbeállításokban.
Most már CSS-részletek segítségével igazíthatom a szöveget, és módosíthatom a dizájnt.
Oszlopaink tartalmát függőlegesen középre állíthatjuk, ha a következőket adjuk a Sorbeállítások Speciális lapjának Fő elem részéhez:
| 01 | align-ites: center; |
Kérjük, módosítsa a következőre, hogy alul igazítsa őket.
| 01 | align-ites: flex-end; |
Az első oszlopot alulra, a harmadikat felülre igazíthatja az egyéni CSS-stílusok alaphelyzetbe állításával és a következő egyéni margók hozzáadásával.
1. oszlop CSS fő elem:
| 01 | margó: auto auto 0; |
3. oszlop fő eleme CSS:
| 01 | margó: 0 auto auto; |
Nincs szüksége CSS-kódrészletre vagy hajlításra ahhoz, hogy az egyoszlopos tartalmat függőlegesen középre állítsa. Mindössze annyit kell tennie, hogy a szövegben egyenlő távolság legyen fent és alatt (vagy modulok között). A legtöbb fogyasztó függőlegesen középre helyezett tartalmat igényel sok oszlopos elrendezésen, mert azt akarja, hogy a szomszédos anyagok megfelelően illeszkedjenek egymáshoz.
Annak ellenére, hogy ez a megoldás az egyéni CSS néhány apró töredékére támaszkodik, úgy érzem, hogy hasznos lehet azoknak, akik gyors gyógymódot keresnek egy időigényes eljárásra. Nyugodtan ossza meg véleményét erről a megközelítésről, valamint amp meg velünk, hogyan takarított meg időt és erőfeszítést a múltban.
A webhely fejlécei és láblécei alapvető elemek. A legtöbb esetben a fejléc navigációt biztosít…
A két legnépszerűbb WordPress téma a piacon az Astra és az OceanWP. Szakmai…
Egy kiváló hírwebhely létrehozásához nem szükséges webtervezővé válni. Mi…
A Newspaper téma az egyik legjelentősebb WordPress téma, amelyet a tagDiv, egy…
Amikor egy online áruház létrehozásáról van szó, a WooCommerce a legjobb beépülő plugin . Azt…
A fejléc általában az első dolog, amit az ember meglát, amikor felkeresi a webhelyét,…
Megjegyzések megtekintése
Köszönöm a világos magyarázatot. Ez azonban nem működik Blog modullal. Ekkor csak 1 oszlop van a sorban. Az egymás melletti blogok számát a modul határozza meg (alapértelmezett 3). Az itt található oszlopok is azonosak lehetnek?
Szia! Nem, sajnálom, hogy csak a klasszikus DIVI oszlopokhoz készült, a DIVI blog modulnak teljesen más kódja van az oszlopok igazításához.
Mi a teendő, ha azt szeretné, hogy a modul 2/3-ban legyen lefelé vagy 1/3-ban felülről – és ne legyen tökéletesen középen, felül vagy alul?
Szia! Attól tartok, hogy egyéni CSS-t kell csinálni, alapértelmezés szerint nincs ilyen lehetőség.
Megpróbálhatja a tartalmat középen igazítani, és néhány kitöltést hozzáadni a tartalomhoz, de kérjük, alaposan ellenőrizze a megjelenítést minden eszközön.