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 é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 oszlophajlítási irány segítségével
- 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” szót, amp az oszlop tartalma (legyen szó egy vagy több modulról) 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.
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ó). amp használhatja 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. Ezenkívül problémás lehet ennek az igazításnak a fenntartása több böngészőméret között.
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.
Kezdjük el ezt a bulit!
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. 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.
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ő 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 tartalom igazítása alul
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; |
Függőleges tartalomigazítás a sor oszlopaihoz
A sor összes oszlopának tartalmát függőlegesen középre állíthatja úgy, hogy 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.
2. módszer: Tartalom függőleges igazítása oszlophajlítási irány segítségével
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é 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ében ehhez amp függőlegesen igazítom az elmosódásokat.
Egy 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; |
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
Noha 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 egy időigényes eljárás gyors gyógymódját keresik. Kérjük, bátran ossza meg véleményét erről a megközelítésről, valamint amp példákat arra vonatkozóan, 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 maar 1 kolom er in de row maar. Het aantal blogs 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 lefelé vagy 1/3-ban felülről legyen igazítva – és nem 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.
Esetleg 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.