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

Divi: najjednoduchšia téma pre WordPress

[/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"] STIAHNUŤ [/vcex_button][/ vc_column][/vc_row]

Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Praktickým doplnkom vášho návrhového nástroja môže byť možnosť vertikálneho zarovnania obsahu pri vytváraní webových stránok s Divi. Niekedy určité rozloženie vyžaduje, aby bol obsah zarovnaný zvisle rôznymi spôsobmi (na stred, dole, hore). Najbežnejšou potrebou je vycentrovať obsah zvisle.

Poskytuje lahodný nádych symetrických rozstupov, ktorý sa hodí pri použití rozloženia viacerých stĺpcov pre váš obsah. Vertikálne vycentrovaný obsah navyše zostáva vycentrovaný na rôzne šírky prehľadávača, čo eliminuje problém s používaním vlastných výplní alebo okrajov na dosiahnutie podobnej odozvy.

V tomto návode vám ukážem, ako pridať nejaké malé úryvky CSS do ľubovoľného stĺpca, aby ste obsah vertikálne zarovnali. Na ukážku toho, ako to urobiť, použijem niektoré z vopred pripravených usporiadaní Divi. Ak toho o CSS veľa neviete, nemusíte sa obávať. Aplikácia na vaše vlastné rozloženia bude celkom jednoduchá za pár sekúnd.

Pochopenie Flex a Divi

Vlastnosť css Flex (alebo Flexbox) je jednoduchý spôsob umiestnenia položiek do vodorovných a / alebo zvislých stohov (podobne ako tabuľka). Okrem na rozdiel od tradičných tabuliek vám vlastnosť flex umožňuje vytvárať polia, ktoré sa prispôsobia veľkosti obsahu, ktorý obsahuje.

Divi používa vlastnosť flex vždy, keď ako parameter riadku vyberiete možnosť „Equalize Column Heights“. Iba zaisťuje, že veľkosť vašich stĺpcov sa prispôsobí veľkosti stĺpca s najväčším obsahom. A keďže funkcia „Equalize Column Heights“ umožňuje flexibilné prispôsobenie kontajnera riadkov, môžete to ľahko využiť tak, že do svojich stĺpcov pridáte css a upravíte tak obsah každého stĺpca (alebo oblasti).

Napríklad ak do stĺpca v rade pridáte výraz „margin: auto“, obsah tohto stĺpca (či už je to jeden alebo viac modulov) bude zvisle vycentrovaný.

Okrem toho, ak do svojho riadku pridáte zarovnávacie položky: stred, všetky stĺpce (a ich obsah) budú vertikálne centrované.

Samozrejme, pre vlastnosť Flex vo webovom dizajne existuje mnoho ďalších použití, ako aj pokročilejšie CSS, ktoré môžete použiť na svoju tému. Ale pre tento tutoriál som chcel, aby bol jednoduchý.

Je to skutočne nevyhnutné?

Technicky nie. Svoj obsah / moduly môžete v stĺpci vertikálne zarovnať pomocou vlastných medzier (polstrovanie a okraj). Môžete napríklad použiť možnosti Diviho medzery a dať tak stĺpiku, ktorý sa rovná hornej a dolnej výplni, a vycentrovať tak moduly (moduly) vertikálne v stĺpci. Do stĺpca môžete tiež pridať iba hornú výplň, aby ste zarovnali spodný obsah. Pri aktualizácii stránky s väčším obsahom však možno budete musieť upraviť medzery. Okrem toho môže byť ťažké zachovať toto zarovnanie naprieč rôznymi šírkami prehľadávača.

Takže ak hľadáte riešenie na zvislé zarovnanie obsahu bez toho, aby ste museli myslieť na vlastné medzery, myslím, že vám to bude užitočné.

Začnime!

Načítať vopred definované rozloženie na svoju stránku

Na začiatok použijem rozloženie z rozsahu portfólia spoločnosti Interior Design Company. Ak chcete získať toto rozloženie na svojej stránke, vytvorte novú stránku. Potom zadajte názov svojej stránky. Kliknite na „Použiť Divi Builder“ a potom na „Použiť Visual Builder“. Potom vyberte možnosť „Vybrať základné rozloženie“. Potom z rozbaľovacieho okna Načítať z knižnice vyberte súpravu rozloženia spoločnosti Interior Design Company. Nakoniec vyberte stránku Portfólio zo zoznamu rozložení a kliknite na tlačidlo „Použiť toto rozloženie“.

šablóna divi téma wordpress.png

Po načítaní rozloženia na svoju stránku ste pripravení ísť.

Metóda 1: Ako vertikálne zarovnať obsah pomocou nástrojov Flex a Auto Margin

Otvorte nastavenia riadkov pre druhý riadok stránky (priamo pod riadkom s nadpisom stránky). V rámci nastavení návrhu otvorte skupinu možností dimenzovania a všimnite si, že funkcia „Vyrovnať výšky stĺpca“ je už aktívna. To znamená, že na riadok je teraz pridaná vlastnosť flex („display: flex;“).

harmonizovať výšky stĺpcov

Teraz prejdite do nastavení karty Rozšírené pre ten istý riadok a do vstupného poľa hlavného prvku stĺpca 2 pridajte nasledujúci úryvok css.

marginauto;

automatické rozpätie divi.png

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

Teraz sa obsah druhého stĺpca presunul tak, aby bol vertikálne centrovaný.

Zarovnajte nižší obsah

Ak chcete svoj obsah zarovnať na spodnej časti tak, aby sa všetky moduly ukladali do spodnej časti stĺpca, môžete upraviť hodnotu okraja nasledujúcim spôsobom:

marginauto 0;

marža divi line.png

Vertikálne zarovnanie obsahu pre všetky stĺpce vo vašom riadku

Namiesto pridania výrazu „margin: auto“ do každého stĺpca osobitne môžete tiež vertikálne vycentrovať obsah všetkých stĺpcov v riadku pridaním nasledujúceho úryvku k hlavnému prvku nastavenia riadkov.

align-items: center;

zarovnajte prvky divi.png

Alebo ak chcete, aby bol celý obsah stĺpcov zarovnaný v dolnej časti, môžete pridať tento výňatok:

align-items: flex-end;

A nezabudnite, že funkciu Divi's Extend Styles môžete využiť kliknutím pravým tlačidlom myši na hlavný prvok pomocou úryvku CSS a kliknutím na položku „Extend main element“.

rozšíri hlavný prvok.png

Potom rozšírte tento hlavný prvok css na všetky riadky stránky (alebo sekcie) tak, aby vertikálne centroval celý obsah každého stĺpca na stránke.

rozšíriť štýly na divi.png

Teraz je všetko vertikálne centrované.

výskyt zmien

Možno ste si všimli, že farba pozadia bieleho stĺpca už nepokrýva celú výšku riadku. Je to tak preto, lebo sme do stĺpca pridali výraz „margin: auto“. Ak chcete vyriešiť tento problém, môžete zmeniť farbu pozadia čiary na bielu a odstrániť z nej výplň. Namiesto toho vám však ukážem spôsob, ako vycentrovať obsah stĺpca bez zmeny okraja.

Metóda 2: Zarovnajte obsah vertikálne pomocou smeru ohybu stĺpca

Chcete predávať svoje produkty na internete?

Stiahnite si zadarmo WooCommerce, najlepšie doplnky elektronického obchodu na predaj vašich fyzických a digitálnych produktov na WordPress a jednoduché vytvorenie vášho online obchodu. Ideálne pre začiatočníkov.

V prvej metóde sme využili výhodu vlastnosti flex pridanej do riadku. Toto urobilo z každého nášho stĺpca „flexibilné pole“, ktoré bolo možné vertikálne zarovnať jednoduchým nastavením okraja.

Existuje však aj spôsob flexibilného smeru na zosúladenie obsahu stĺpcov bez straty efektu „Vyrovnať výšku stĺpca“, ktorý udržuje naše stĺpce (a pozadia stĺpcov) rovnakej veľkosti. Za týmto účelom do nášho stĺpca pridáme niekoľko riadkov CSS, aby boli všetky moduly v stĺpci naskladané zvisle a potom vycentrované.

Vráťme sa k nášmu riadku v predchádzajúcom príklade. Otvorte nastavenia riadkov a odstráňte všetky vlastné CSS, ktoré tam môžete mať, kliknutím pravým tlačidlom myši na vlastné CSS a kliknutím na „Obnoviť vlastné štýly CSS“.

Potom do stĺpca 2, hlavný prvok, pridajte nasledujúci CSS:

displej: flex; smer ohybu: stĺp; justify-content: center;

Riadenie flex-column.png

Alebo, ak by som chcel zarovnať obsah na spodku, nahraďte text „Zarovnať obsah: stred“ za „zarovnajte obsah: flex-end“.

flex alignment end.png

Na tomto nastavení je skvelé to, že ak je môj obsah vycentrovaný vertikálne a je dosiahnutá šírka riadku, obsah zostane vycentrovaný.

vzhľad boxov.png

Vytvorte chyby (zhrnutie) s rôznymi množstvami vertikálne zarovnaného textu

Vertikálne vycentrovanie obsahu stĺpca môže byť užitočné aj pri rozmazaní. Ako viete, nie všetky rozmazania budú obsahovať presné množstvo textu použitého na popis funkcie alebo služby. Vycentrovaním týchto rozmazaní vertikálne môžete vytvoriť nádherný dizajn svojho rozloženia.

V tomto príklade vertikálne zarovnám rozmazania podľa rozloženia domovskej stránky Digitálnych platieb.

Najskôr pridám do rozmazaní rôzne množstvá základného textu, aby som realistickejšie predstavil, ako by stránka mohla vyzerať.

zarovnanie blorbds.png

Teraz musím ísť na nastavenie linky a „Zosúladiť výšky stĺpcov“.

harmonizovať columns.png

Teraz môžem pridať útržky CSS, aby som zosúladil svoj obsah a upravil dizajn.

Na karte Pokročilé v nastaveniach riadkov môžeme vertikálne vycentrovať obsah našich stĺpcov pridaním nasledujúcich prvkov do časti Hlavný prvok:

align-items: center;

Upraviť zarovnanie obsahu divi.png

Alebo ho zmeňte tak, že ich zoradíte.

align-items: flex-end;

zarovnanie v spodnej časti divi.png

Môžete tiež resetovať svoje vlastné štýly CSS a pridať nasledujúce vlastné okraje, aby ste zarovnali dno prvého stĺpca a tretí zarovnaný vrchol stĺpca.

Hlavný prvok stĺpca CSN 1:

marginauto auto 0;

Hlavný prvok stĺpca CSN 3:

margin0 auto auto;

prispôsobiť zarovnanie abstraktov divi.png

A čo rozloženia jedného stĺpca?

Z technického hľadiska na vertikálne vycentrovanie obsahu stĺpca nepotrebujete žiadny CSS ani flex snippet. Všetko, čo musíte urobiť, je ubezpečiť sa, že máte rovnaké medzery nad a pod obsahom (alebo modulmi). Používatelia väčšinou potrebujú vertikálny obsah, ktorý je zameraný na rozloženia s viacerými stĺpcami, pretože chcú, aby sa susedný obsah dokonale zoradil.

To je všetko pre tento návod, ktorý vám ukáže, ako zarovnať prvky na rovnakom riadku v Divi.

4 akcie
podiel2
tweet
Registrovať2