Jak svisle a vodorovně zarovnat sekce, řá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řebou je, aby byl váš materiál svisle zarovnaný. Dodává vašemu obsahu krásný dotek symetrických mezer, 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í směru sloupce Flex
• 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, toto 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 sloupců, abyste změnili obsah každého sloupce (nebo rámečku).

Pokud amp do libovolného sloupce v řádku přidáte „margin: auto“, obsah tohoto sloupce (ať už se jedná o jeden nebo několik modulů) bude svisle vycentrován.

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. Pro tento tutoriál jsem však chtěl věci zjednodušit.

Je to nutné?

V technickém smyslu ne. Můžete použít vlastní mezery k umístění obsahu/modulů svisle ve sloupci (odsazení a okraj). Můžete amp použít možnosti mezer Divi k vystředění modulu (modulů) svisle ve frontě, aby sloupec měl stejnou horní a spodní 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é v okně Načíst z knihovny vyberte Sadu rozvržení Interior Design Company. 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 svisle 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 jednotlivě.

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

Nezapomeňte, ž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“. Můžete to 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í směru sloupce Flex

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 museli obětovat 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 svisle a poté vycentrovány.

Vraťme se k předchozímu řádku amp . 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ě.

U rozvržení domovské stránky digitálních plateb svisle zarovnám reklamy pro tento amp .

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

Nyní potřebuji „Equalize Column Heights“ v nastavení řádků.

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í řádků:

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

Můžete také zarovnat první sloupec dolů a třetí sloupec 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, aby byl obsah s jedním sloupcem vertikálně vycentrován, 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 drobný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, stejně jako o amp lekce, jak vám v minulosti ušetřil čas a úsilí.