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 (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.
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!
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.
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 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; |
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.
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; |
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.
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.
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…
Az Újság téma az egyik legjelentősebb WordPress téma, amelyet a tagDiv tervezett…
Amikor egy online áruház felállításáról van szó, a WooCommerce a plugin . Azt…
A fejléc általában az első dolog, amit az ember lát, amikor meglátogatja webhelyét,…
Megjegyzések megtekintése
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 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.
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.