A szakaszok, sorok, oszlopok és modulok függőleges és vízszintes igazítása a DIVI Builderben

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

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.

Ez kötelező?

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!

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á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 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:

01margó: 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.

01align-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:

01align-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:

010203kijelző: 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:

01align-ites: center;

Kérjük, módosítsa a következőre, hogy alul igazítsa őket.

01align-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:

01margó: auto auto 0;

 3. oszlop fő eleme CSS:

01margó: 0 auto auto;

Mi a helyzet az egyetlen oszlopot tartalmazó elrendezésekkel?

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.

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. 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.

tristan

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.

Legutóbbi hozzászólások

A fejlécek és láblécek használata az Elementorral

A webhely fejlécei és láblécei alapvető elemek. A legtöbb esetben a fejléc navigációt biztosít…

2022. január 6

WordPress téma összehasonlítás: Astra vs OceanWP

A két legnépszerűbb WordPress téma a piacon az Astra és az OceanWP. Szakmai…

2022. január 2

A WordPress hírtéma összehasonlítása: Újság vs. Astra

Egy kiváló hírwebhely létrehozásához nem szükséges webtervezővé válni. Mi…

2021. október 25

Hozzon létre egy hírekkel kapcsolatos webhelyet Újság témával

A Newspaper téma az egyik legjelentősebb WordPress téma, amelyet a tagDiv, egy…

2021. október 18

Hogyan építsünk fel e-kereskedelmet az Avada WooCommerce builder segítségével

Amikor egy online áruház létrehozásáról van szó, a WooCommerce a legjobb beépülő plugin . Azt…

2021. október 4

A ragadós fejléc és a görgetőeffektusok használata az Elementorral

A fejléc általában az első dolog, amit az ember meglát, amikor felkeresi a webhelyét,…

2021. szeptember 21