Amikor webhelyet hoz létre a Divi használatával, a tartalom függőleges igazításának lehetősége é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 ad a tartalomhoz, 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 is felhasználom. Nem kell aggódnia, ha nem ismeri a CSS-t. Pillanatok alatt alkalmazhatja ezt a tervében.
- A Flex és a Divi közötti különbség megértése
- Ez kötelező?
- Adja hozzá az előre konfigurált elrendezést az oldalához.
- 1. módszer: Tartalom függőleges igazítása Flex és Auto Margin funkcióval
- A tartalom igazítása alul
- Függőleges tartalomigazítás a sor oszlopaihoz
- 2. módszer: Tartalom függőleges igazítása az oszlophajlítási irány használatával
- Mi a helyzet az egyetlen oszlopot tartalmazó elrendezésekkel?
- Utolsó gondolatok a DIVI függőleges és vízszintes igazításáról
A Flex és a Divi közötti különbség megértése
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 például egy sor bármely oszlopához hozzáadja a „margó: auto” amp , akkor 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. Mindazonáltal szerettem volna a dolgokat egyszerűvé tenni ehhez az oktatóanyaghoz.
Ez kötelező?
Technikai értelemben nem. Egyéni térközzel a tartalmat/modulokat függőlegesen helyezheti el egy oszlopon belül (kitöltés és margó). Az ex amp le, akkor használja Divi azon térközbeállítások a központtól a modul (ok) belül függőlegesen a sor, hogy egy oszlopra egyenlő felső és alsó padding. 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ó 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, ez hasznos lesz.
Kezdődjön a buli!
Adja hozzá az előre konfigurált elrendezést az oldalához.
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. Válassza a „Divi Builder használata”, majd a „Visual Builder használata” lehetőséget a legördülő menüből. 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 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.
1. módszer: Tartalom függőleges igazítása Flex és Auto Margin funkcióval
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ásokban, é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ő elem beviteli mezőjében lépjen a Speciális lap beállításaihoz ugyanannak a sornak, é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ó: automatikus; |
A tartalom igazítása alul
A margó értékét az alábbiak szerint módosíthatja, hogy a tartalom alulra igazodjon, hogy az összes modul az oszlop alján kerüljön egymásra:
| 01 | margó: auto 0; |
Függőleges tartalomigazítás a sor oszlopaihoz
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-items: 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-items: 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.
Lehetséges azonban, 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.
2. módszer: Tartalom függőleges igazítása az oszlophajlítási irány használatával
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ához anélkül, hogy feláldoznánk az „Oszlopmagasság kiegyenlítése” effektust, amely az oszlopainkat (és az oszlopháttereinket) azonos méretűvé teszi. 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;flex-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 kivonat tartalmaz ugyanannyi szöveget egy funkció vagy szolgáltatás leírásához. Ha ezeket az elmosódásokat függőlegesen középre állítja, akkor az elrendezés gyönyörűvé válik.
A digitális kifizetések kezdőlap Layout, én függőlegesen igazítsa a blurbs erre ex amp le.
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 az „Oszlopmagasságok kiegyenlítését” kell megadnom 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-items: center; |
Kérjük, módosítsa a következőre, hogy alul igazítsa őket.
| 01 | align-items: 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 fő elem CSS:
| 01 | margó: auto auto 0; |
3. oszlop fő elem CSS:
| 01 | margó: 0 auto auto; |
Mi a helyzet az egyetlen oszlopot tartalmazó elrendezésekkel?
Nincs szüksége CSS-kódrészletre vagy rugalmasságra 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 tartalomra van szüksége sok oszlopos elrendezésen, mert azt szeretné, hogy a szomszédos anyag megfelelően illeszkedjen.
Utolsó gondolatok a DIVI függőleges és vízszintes igazításáról
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. Kérjük, bátran ossza meg véleményét erről a megközelítésről, valamint amp példát arra, hogyan takarított meg időt és erőfeszítést a múltban.
Bedankt voor de duidelijke uitleg. Bij een Blog modul werkt dit echter niet. Dan is er in de row maar 1 kolom. Het aantal blogok naast elkaar is bepaald door de module (alapértelmezett 3). Zijn hier de kolommen ook gelijk te maken?
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 ehhez 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.