[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi: nejjednodušší téma WordPress k použití

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

Možnost svislého zarovnání obsahu při vytváření webu pomocí Divi může být praktickým doplňkem vašeho návrhového nástroje. Někdy určité rozvržení vyžaduje, aby byl obsah vertikálně zarovnán různými způsoby (na střed, dole, nahoře). Nejběžnější potřebou je vycentrovat obsah vertikálně.

Poskytuje příjemný nádech symetrických mezer, který se hodí při použití více rozvržení sloupců pro váš obsah. Vertikálně vycentrovaný obsah navíc zůstává vycentrován na různé šířky prohlížeče, což eliminuje potíže s používáním vlastních výplní nebo okrajů pro dosažení podobné odezvy.

V tomto tutoriálu vám ukážu, jak přidat několik malých úryvků CSS do libovolného sloupce, abyste svisle zarovnali obsah. Pro příklady toho, jak to udělat, použiji některá z předem připravených rozvržení Divi. Pokud toho o CSS moc nevíte, nemusíte se bát. Bude to docela snadné použít na vaše vlastní rozložení během několika sekund.

Pochopení Flex a Divi

Vlastnost css Flex (nebo Flexbox) je jednoduše způsob, jak umístit položky do vodorovných a / nebo svislých stohů (podobně jako tabulka). S výjimkou, na rozdíl od tradičních tabulek, vám vlastnost flex umožňuje vytvářet pole, která se přizpůsobí velikosti obsahu, který obsahuje.

Divi používá vlastnost flex, kdykoli jako parametr řádku vyberete „Vyrovnat výšky sloupců“. Zajišťuje pouze to, že velikost vašich sloupců se přizpůsobí velikosti sloupce s největším obsahem. A protože „Vyrovnat výšky sloupců“ umožňuje flex pro kontejner řádků, můžete to snadno využít přidáním css do svých sloupců a upravit obsah každého sloupce (nebo oblasti).

Například pokud do sloupce v řádku přidáte „margin: auto“, obsah tohoto sloupce (ať už je to jeden nebo více modulů) se stane svisle na střed.

Kromě toho, pokud do řádku přidáte „zarovnat položky: střed“, budou všechny sloupce (a jejich obsah) vycentrovány svisle na střed.

Samozřejmě existuje mnoho dalších použití vlastnosti Flex ve webovém designu, stejně jako pokročilejší CSS, které můžete na své téma použít. Ale pro tento tutoriál jsem chtěl, aby to bylo jednoduché.

Je to opravdu nutné?

Technicky ne. Svůj obsah / moduly můžete ve sloupci vertikálně zarovnat pomocí vlastních mezer (odsazení a okraj). Můžete například použít možnosti rozložení Divi a dát sloupci rovnou horní a dolní výplň pro vycentrování modulů ve sloupci vertikálně. Do sloupce můžete také přidat pouze horní výplň, abyste zarovnali spodní obsah. Při aktualizaci stránky o více obsahu však možná budete muset upravit mezery. Navíc může být obtížné udržovat toto zarovnání napříč různými šířkami prohlížeče.

Takže pokud hledáte řešení pro svislé zarovnání obsahu, aniž byste museli přemýšlet o vlastních mezerách, myslím, že vám to bude užitečné.

Začněme!

Načtěte předdefinované rozvržení na stránku

Nejprve použiji rozvržení z portfolia společnosti Interior Design Company. Chcete-li toto rozvržení získat na své stránce, vytvořte novou stránku. Poté pojmenujte svou stránku. Klikněte na „Use Divi Builder“ a poté na „Use Visual Builder“. Poté vyberte možnost „Zvolit základní rozložení“. Poté v rozbalovacím okně Načíst z knihovny vyberte sadu rozvržení společnosti Interior Design Company. Nakonec vyberte stránku Portfolio ze seznamu rozvržení a klikněte na „Použít toto rozvržení“.

šablony divi téma wordpress.png

Jakmile je rozvržení načteno na vaši stránku, můžete začít.

Metoda 1: Jak svisle zarovnat obsah pomocí Flex a Auto Margin

Otevřete nastavení řádku pro druhý řádek stránky (ten přímo pod řádkem s nadpisem stránky). V části Nastavení návrhu otevřete skupinu možností dimenzování a všimněte si, že "Vyrovnat výšky sloupců" je již aktivní. To znamená, že na řádku je nyní přidána vlastnost flex („display: flex;“).

harmonizovat výšky sloupů

Nyní přejděte do nastavení karty Upřesnit pro stejný řádek a přidejte následující úryvek css pod vstupní pole hlavního prvku ve sloupci 2.

marginauto;

automatická marže divi.png

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

Nyní byl obsah druhého sloupce přesunut, aby byl vertikálně vystředěn.

Zarovnejte nižší obsah

Pokud chcete svůj obsah zarovnat na spodní část tak, aby se všechny moduly skládaly ve spodní části sloupce, můžete upravit hodnotu okraje následujícím způsobem:

marginauto 0;

marže divi line.png

Vertikální zarovnání obsahu pro všechny sloupce ve vašem řádku

Místo přidání „margin: auto“ do každého sloupce samostatně můžete také vertikálně vycentrovat obsah všech sloupců v řádku přidáním následujícího fragmentu k hlavnímu prvku nastavení řádku.

align-items: center;

zarovnat prvky divi.png

Nebo pokud chcete, aby byl veškerý obsah vašich sloupců zarovnán dole, můžete přidat tento výňatek:

align-items: flex-end;

A nezapomeňte, že můžete využít funkce Divi's Extend Styles kliknutím pravým tlačítkem myši na hlavní prvek pomocí úryvku CSS a kliknutím na „Rozšířit hlavní prvek“.

rozšířit hlavní prvek.png

Poté rozbalte tento hlavní prvek css na všechny řádky stránky (nebo sekce) a svisle vycentrujte veškerý obsah každého sloupce na stránce.

rozšiřte styly na divi.png

Nyní je vše soustředěno svisle.

vzhled změn divi.png

Možná jste si však všimli, že barva pozadí bílého sloupce již nepokrývá celou výšku řádku. Je to proto, že jsme do sloupce přidali „margin: auto“. Chcete-li tento problém vyřešit, můžete změnit barvu pozadí čáry na bílou a odebrat výplň z čáry. Ale místo toho vám ukážu způsob, jak vycentrovat obsah sloupce beze změny okraje.

Metoda 2: Zarovnejte obsah svisle pomocí směru ohnutí sloupce

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

V první metodě jsme využili výhody vlastnosti flex přidané do řádku. Díky tomu byl každý z našich sloupů „flexibilní rámeček“, který bylo možné vertikálně zarovnat jednoduchým nastavením okraje.

Existuje ale také způsob flex-direction, jak sladit obsah sloupců, aniž bychom ztratili efekt „Vyrovnat výšku sloupce“, který udržuje naše sloupce (a pozadí sloupců) stejné velikosti. K tomu přidáme do našeho sloupce několik řádků CSS, aby byly všechny moduly ve sloupci naskládány svisle a poté vycentrovány.

Vraťme se k naší linii v předchozím příkladu. Otevřete nastavení řádků a odeberte všechny vlastní css, které tam můžete mít, kliknutím pravým tlačítkem na vlastní CSS a kliknutím na „Obnovit vlastní styly CSS“.

Poté do sloupce 2, hlavní prvek, přidejte následující CSS:

displej: flex; směr flexu: sloupec; justify-content: center;

Řízení flex-column.png

Nebo, pokud bych chtěl zarovnat obsah dole, stačí nahradit „Zarovnat obsah: střed“ za „zarovnat obsah: flex-end“.

flex alignment end.png

Skvělé na tomto nastavení je, že pokud je můj obsah vycentrován svisle a je dosažena šířka řádku, obsah zůstane vycentrován.

vzhled boxů.png

Vytvářejte chyby (shrnutí) s různými množstvími svisle zarovnaného textu

Udělat obsah sloupce svisle na střed může být také užitečné pro rozostření. Jak víte, ne všechny rozmazání budou obsahovat přesné množství textu použitého k popisu funkce nebo služby. Vycentrováním těchto rozostření vertikálně můžete vytvořit krásný design pro vaše rozložení.

V tomto příkladu svisle zarovnám rozostření podle rozložení domovské stránky Digital Payments.

Nejprve přidám do rozmazání různá množství hlavního textu, abych poskytl realističtější představu o tom, jak by web mohl vypadat.

blorbds.png alignment

Teď musím jít do nastavení linky a "Harmonizovat výšky sloupců".

harmonize columns.png

Nyní mohu přidat úryvky CSS, abych přizpůsobil svůj obsah a upravil návrh.

Na kartě Upřesnit v nastavení řádku můžeme vertikálně vycentrovat obsah našich sloupců přidáním následujícího v části Hlavní prvek:

align-items: center;

Upravit zarovnání obsahu divi.png

Nebo je můžete změnit tak, že je provedete podle řádku.

align-items: flex-end;

zarovnání v dolní části divi.png

Můžete také resetovat své vlastní styly CSS a přidat následující vlastní okraje pro zarovnání prvního a třetího zarovnaného sloupce nahoru.

1 sloupec hlavní prvek CSS:

marginauto auto 0;

3 sloupec hlavní prvek CSS:

margin0 auto auto;

přizpůsobte zarovnání abstraktů divi.png

A co rozvržení jednoho sloupce?

Technicky vzato nepotřebujete úryvek CSS ani flex, abyste svisle vycentrovali obsah sloupce. Vše, co musíte udělat, je ujistit se, že máte stejné mezery nad a pod vaším obsahem (nebo moduly). Uživatelé většinou potřebují vertikální obsah soustředěný na rozvržení s více sloupci, protože chtějí, aby se sousední obsah dokonale seřadil.

To je vše pro tento tutoriál, který vám ukáže, jak zarovnat prvky na stejném řádku v Divi.

4 akcie
podíl2
tweet
Zadat2