Jak zarovnat svisle a vodorovně řezy, řádky, sloupce a moduly v DIVI Builderu

Při vytváření webu pomocí Divi může být možnost svislého zarovnání obsahu cenným doplňkem vaší sady nástrojů pro návrh. V závislosti na rozvržení může být nutné obsah různými způsoby svisle zarovnat (na střed, dole, nahoře). Nejběžnější potřeba je, aby byl váš materiál svisle zarovnaný. Dodává vašemu obsahu krásný nádech symetrického rozestupu, což je velmi užitečné při použití více sloupcových rozložení. Navíc vertikálně centrovaný obsah zůstává vycentrován napříč šířkami prohlížeče, což eliminuje potřebu vlastního odsazení nebo okrajů pro dosažení podobné odezvy.

V této lekci vás naučím, jak svisle zarovnat obsah v libovolném sloupci pomocí několika jednoduchých řádků CSS. Pro demonstrační účely použiji několik prefabrikovaných layoutů Divi. Pokud neznáte CSS, nemusíte se obávat. Během několika sekund to budete moci použít na svůj design.

• Pochopení rozdílu mezi Flex a Divi
• Je to nutné?
• Přidejte na svou stránku předkonfigurované rozvržení.
• Metoda 1: Vertikální zarovnání obsahu pomocí Flex a Auto Margin
• Zarovnání obsahu dole
• Vertikální zarovnání obsahu pro sloupce vašeho řádku
• Metoda 2: Vertikální zarovnání obsahu pomocí sloupce Flex Direction
• A co rozvržení s pouze jedním sloupcem?
• Závěrečné myšlenky na vertikální a horizontální zarovnání DIVI

Pochopení rozdílu mezi Flex a Divi

Atribut CSS Flex (nebo Flexbox) je pouze prostředkem k uspořádání položek do horizontálních a vertikálních zásobníků (něco jako tabulka). Na rozdíl od typických tabulek vám však funkce flex umožňuje vytvářet krabice, které se „flexují“ podle velikosti obsahu, který obsahují.

Divi používá atribut flex, když jako nastavení řádku zvolíte „Equalize Column Heights“. Jednoduše řečeno, to zajistí, že se velikost všech vašich sloupců přizpůsobí velikosti sloupce s nejvíce informacemi. Protože „Equalize Column Heights“ spouští flexibilitu pro kontejner řádků, můžete ji využít přidáním CSS do svých sloupců, abyste změnili obsah každého sloupce (nebo rámečku).

Přidáte-li „margin: auto“ do libovolného sloupce v řadě, pro ex amp le, obsah tohoto sloupce (ať už jde o jeden nebo několik modulů) budou svisle na střed.

Všechny vaše sloupce (a jejich obsah) budou svisle vycentrovány, pokud přidáte „align-items: center;“ do vaší řady.

Vlastnost flex má samozřejmě mnohem více aplikací ve webovém designu a pokročilejší CSS, které můžete použít ve svém tématu. V tomto tutoriálu jsem však chtěl věci zjednodušit.

Je to nutné?

V technickém smyslu ne. Vlastní mezery můžete použít k vertikálnímu umístění obsahu/modulů ve sloupci (odsazení a okraj). Pro ex amp le, můžete použít volby rozestupu divi, aby střed modul (-y) ve svislém směru ve frontě, aby se vytvořila kolona rovné horní a dolní výplň. Obsah můžete také zarovnat dolů přidáním horního odsazení do sloupce. Při přidávání dalšího obsahu na stránku může být nutné upravit mezery. Kromě toho může být problematické udržovat toto zarovnání napříč různými velikostmi prohlížečů.

Pokud tedy hledáte způsob, jak zarovnat informace vertikálně, aniž byste se museli starat o konkrétní mezery, myslím, že to bude pro vás výhodné.

Pojďme tuhle párty odstartovat!

Přidejte na svou stránku předkonfigurované rozvržení.

Začnu s rozložením stránky Portfolio společnosti Interior Design. Vytvořte novou stránku, aby bylo toto rozvržení na vaší stránce. Poté svou stránku pojmenujte. Vyberte „Použít Divi Builder“ a poté „Použít Visual Builder“ z rozevírací nabídky. Poté z rozbalovací nabídky vyberte možnost „Vybrat předpřipravené rozvržení“. Poté vyberte Interior Design Company Layout Pack z okna Načíst z knihovny. Nakonec z výběru rozvržení vyberte stránku Portfolio a klikněte na „Použít toto rozvržení“.

Po načtení rozvržení na stránku jste připraveni začít.

Metoda 1: Vertikální zarovnání obsahu pomocí Flex a Auto Margin

Otevřete nastavení řádku pro druhý řádek (ten přímo pod řádkem s názvem stránky). Přepnutím otevřete skupinu voleb Velikost v možnostech návrhu a všimněte si, že „Vyrovnat výšky sloupců“ je již aktivní; To znamená, že do řádku byla přidána vlastnost flex („display: flex;“).

Ve vstupním poli Hlavní prvek sloupce 2 přejděte na nastavení karty Upřesnit pro stejný řádek a přidejte následující úryvek CSS.

Obsah druhého sloupce byl nyní přemístěn tak, aby byl vertikálně vycentrován.

Zarovnání obsahu dole

Hodnotu okraje můžete změnit následovně, aby byl obsah zarovnán dolů tak, aby se všechny moduly naskládaly na konec sloupce:

Vertikální zarovnání obsahu pro sloupce vašeho řádku

Obsah všech sloupců v řádku můžete svisle vycentrovat přidáním následujícího úryvku do hlavního prvku nastavení řádku namísto přidávání „margin: auto“ do každého sloupce samostatně.

Tento úryvek můžete také použít, pokud chcete, aby byly všechny informace ve vašich sloupcích zarovnány dole:

Pamatujte, že funkci Divi's Extend Styles můžete použít tak, že kliknete pravým tlačítkem na hlavní prvek s vaším úryvkem CSS a vyberete „Rozšířit hlavní prvek“.

Poté, chcete-li svisle vycentrovat veškerý obsah každého sloupce na stránce, použijte hlavní prvek CSS na všechny řádky na stránce (nebo sekci).

Vše je nyní vertikálně vyvážené.

Možná jste si však všimli, že bílá barva pozadí sloupce již nepokrývá celý řádek, protože do sloupce bylo přidáno „margin: auto“. Tento problém můžete napravit změnou barvy pozadí řádku na bílou a odstraněním odsazení řádku. Místo toho vás naučím, jak vycentrovat obsah sloupce, aniž byste museli měnit okraj.

Metoda 2: Vertikální zarovnání obsahu pomocí sloupce Flex Direction

Použili jsme vlastnost flex jako první přidanou do řádku. V důsledku toho se každý z našich sloupců stal „flex boxem“, který lze vertikálně zarovnat změnou okraje.

Můžeme však použít flex-direction k zarovnání textu našeho sloupce, aniž bychom obětovali efekt „Equalize Column Height“, který udržuje naše sloupce (a pozadí sloupců) stejnou velikost. Abychom toho dosáhli, přidáme do naší fronty několik řádků CSS, což způsobí, že všechny moduly v ní budou naskládány vertikálně a poté vycentrovány.

Vraťme se k předchozímu amp řádku. Kliknutím pravým tlačítkem na Custom CSS a výběrem „Reset Custom CSS Styles“ můžete odstranit jakýkoli vlastní CSS, který máte v nastavení řádku.

Poté v hlavním prvku sloupce 2 použijte následující CSS:

Změňte „justify-content: center“ na „justify-content: flex-end“, abyste obsah zarovnali dolů.

Líbí se mi tato konfigurace, protože pokud umístím obsah svisle a řádek nastavím na plnou šířku, obsah zůstane vycentrovaný.

Vytváření svisle zarovnaných reklam s různým množstvím textu

Svisle vycentrovat obsah sloupců může také pomoci s reklamami. Jak možná víte, ne každá reklama bude obsahovat stejné množství textu k popisu funkce nebo služby. Pokud tyto reklamy vycentrujete svisle, může vaše rozvržení vypadat krásně.

Pro digitální payments Rozložení stránky, budu svisle zarovnat nakladatelské reklamy pro toto ex amp le.

Abychom vytvořili realističtější zobrazení vzhledu webu, nejprve do reklam přidám různé množství obsahu těla.

Nyní musím v nastavení řádků provést „Equalize Column Heights“.

Nyní mohu zarovnat svůj text a upravit design pomocí úryvků CSS.

Obsah našich sloupců můžeme svisle vycentrovat přidáním následujícího do sekce Hlavní prvek na kartě Upřesnit v našem Nastavení řádku:

Změňte jej na následující, abyste je zarovnali dole.

První sloupec můžete také zarovnat dolů a třetí sloupec zarovnat nahoru tak, že resetujete své vlastní styly CSS a přidáte následující vlastní okraje.

 Sloupec 1 Hlavní prvek CSS:

 Sloupec 3 Hlavní prvek CSS:

A co rozvržení s pouze jedním sloupcem?

K tomu, abyste obsah s jedním sloupcem umístili vertikálně na střed, nepotřebujete úryvek CSS ani flex. Jediné, co musíte udělat, je zajistit, aby váš text měl stejné mezery nad a pod (nebo moduly). Většina spotřebitelů vyžaduje vertikálně centrovaný obsah na rozvrženích s mnoha sloupci, protože chtějí, aby se sousední materiál správně zarovnal.

Závěrečné myšlenky na vertikální a horizontální zarovnání DIVI

I když toto řešení spoléhá na několik menších úryvků vlastního CSS, mám pocit, že může být užitečné pro lidi, kteří hledají rychlý lék na časově náročný postup. Neváhejte se podělit o své názory na tento přístup a také amp toho, jak vám v minulosti ušetřil čas a úsilí.