Přejít k hlavnímu obsahu

Divi výuka: Jak používat modul osobního modulu Divi Builder

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

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. [Doporučeno]

Modul Divi Person je nejlepší způsob, jak vytvořit blok osobního profilu. To je skvělý doplněk, který lze použít na stránkách O mně nebo těch, které obsahují členy týmu, kde chcete vytvořit životopis jednotlivých lidí. Tento modul kombinoval odkazy na text, snímky a sociální média do jednoho soudržného modulu.

Jak konfigurovat modul Divi Osob

Před přidáním modulu Divi Person na svou stránku musíte nejprve skočit do Divi Builderu. Jakmile je motiv Divi nainstalován na vašem webu, všimnete si tlačítka Použijte nástroj Divi Builder nad editorem příspěvků, kdykoli vytvoříte novou stránku. Kliknutím na toto tlačítko aktivujete Divi Builder a získáte přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru ve vizuálním režimu. Můžete také kliknout na tlačítko Použijte Visual Builder při procházení webu v popředí, pokud jste připojeni k hlavnímu panelu WordPress.

divi stavitel

Jakmile zadáte Visual Builder, můžete kliknutím na šedé tlačítko plus přidat nový modul na svou stránku. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek. Máme skvělé návody k používání prvků lignes a sekce podle Divi.

osoba modul divi.png

Vyhledejte modul osoby v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů je prohledávatelný, což znamená, že můžete také napsat slovo „osoba“ a poté kliknout na Enter pro automatické vyhledání a přidání modulu Person! Jakmile je modul přidán, budete uvítáni seznamem možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .

Příklad případu použití: Přidání sekce „Náš tým“ na stránku O nás

Stránka o nás je dobrým místem pro představení členů vašeho týmu pomocí modulu Osoba. Přidává osobní kontakt a může pomoci budovat důvěru u nových zákazníků.

V tomto příkladu vám ukážu, jak pomocí modulu Osoba přidat sekci „Náš tým“ na stránku o malé firmě. Budu používat rozložení pro tři osoby a tři sloupce, které udržuje sekci kompaktnější a odpovídá celkovému designu stránky.

stránka o nás.jpg

Pomocí Visual Builderu vložte novou standardní sekci s řadou tří sloupců (1/3 1/3 1/3). Poté do prvního sloupce přidejte modul Osoba.

modul člověk wordpress divi.png

Aktualizujte nastavení modulu Person takto:

Možnosti obsahu

Jméno: [Zadejte jméno osoby] Pozice: [Zadejte rozšíření osoby] Zadejte URL pro profily sociálních médií
Popis: [Zadejte krátkou biografii] Obrázek: [Zadejte obrázek 600 x 600]

Možnosti návrhu

Barevná ikona: # fcbf00
Barva ikony ukazatele myši: # e0a831
Písmo záhlaví: Roboto, tučné písmo, pákový
Velikost písma záhlaví: 30px
Barva textu záhlaví: # 505050
Rozteč záhlaví dopisu: 1px
Výška řádku záhlaví: 1.5em
Velikost písma těla: 18px
Velikost čáry těla: 1.4em
Vlastní výplň: 15px nahoru, 15px vpravo, 15px dolů, 15px vlevo

Pokročilé možnosti (vlastní CSS)

Hlavní prvek:
-webkit-box-stín: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-box-stín: 0 1px 5px rgba (0, 0, 0, 0,2);
box-stín: 0 1px 5px rgba (0, 0, 0, 0,2);

změnit profil osoby divi.png

Uložte nastavení

Nyní duplikujte modul osoby, který jste právě vytvořili, a přetáhněte duplikované moduly do druhého a třetího sloupce v řádku. Vzhledem k tomu, že design byl přenesen pro každý z duplicitních modulů „Osoba“, vše, co musíte udělat, je aktualizovat obsah o obrázek, název, pozici, adresy URL sociálních médií a popis. osoby.

A je to!

výsledek modulu person divi.jpg

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

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

Možnosti obsahu osoby

Na kartě obsah najdete všechny prvky obsahu modulu, například text, obrázky a ikony. Vše, co ovládá co ve vašem modulu se vždy najde na této kartě.

obsahová volba divi.png

Křestní jméno

Toto je jméno osoby, kterou představujete. Název je zobrazen v horní části modulu větším textem.

Pozice

Pozice je zobrazena pod jménem v menším textu. To se často používá k označení profesní pozice člověka v korporátním týmu. Například Nick Roach, „grafický designér“.

Adresa URL profilu Facebook

Zadejte adresu URL na své stránce na Facebooku nebo ji nechte prázdnou, abyste deaktivovali ikonu Facebooku.

Adresa URL profilu Twitter

Chcete-li vypnout ikonu Twitter, zadejte adresu URL na své stránce Twitter nebo ji nechte prázdnou.

Adresa URL profilu Google+

Chcete-li vypnout ikonu Google+, zadejte adresu URL na své stránce Google+ nebo ji nechte prázdnou.

Linková adresa profilu LinkedIn

Chcete-li vypnout ikonu LinkedIn, zadejte adresu URL na své stránce LinkedIn nebo ji nechte prázdnou.

Popis

Zde zadejte obsah hlavního textu modulu.

URL obrázku

Zde si můžete stáhnout fotografii pro použití v bio.

Barva pozadí

Definujte vlastní barvu pozadí pro svůj modul nebo ponechte prázdné, chcete-li použít výchozí barvu.

Obrázek na pozadí

Pokud je nastaven, bude tento obrázek použit jako pozadí pro tento modul. Chcete-li odebrat obrázek na pozadí, jednoduše odeberte adresu URL z pole nastavení. Obrázky pozadí se objeví nad barvami pozadí, což znamená, že při použití obrázku pozadí nebude barva pozadí viditelná.

Správce štítku

Tím se změní štítek modulu v konstruktoru pro snadnou identifikaci. Když použijete pohled WireFrame ve Visual Builderu, tyto popisky se zobrazí v bloku modulu rozhraní Divi Builder.

Možnosti návrhu pro modul Osoba

Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Toto je karta, kterou použijete ke změně vzhledu vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete cokoli změnit.

parametr design modul osoba divi.png

Barva ikony

Tato možnost určuje barvu ikon sociálních médií, které se zobrazují v profilu každé osoby. Ve výchozím nastavení jsou tyto ikony šedé, můžete pomocí tohoto nastavení změnit tuto barvu.

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

Barva ikony při najetí myší

Můžete také změnit barvu vznášení ikon sociálních médií. Vyberte požadovanou barvu pomocí nástroje pro výběr barev v tomto nastavení.

Barva textu

Zde si můžete vybrat hodnotu svého textu. Pokud pracujete na tmavém pozadí, měl by být váš text zapnutý. Pokud pracujete na světlém pozadí, měl by být váš text tmavý.

Písmo záhlaví

Písmo textu záhlaví můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma záhlaví

Zde můžete upravit velikost textu záhlaví. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu záhlaví

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu záhlaví, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Mezery v záhlaví

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu záhlaví, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška řádku záhlaví

Výška řádku ovlivňuje mezeru mezi každým řádkem textu záhlaví. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupní pole napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Body font

Písmo těla můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma těla

Zde můžete upravit velikost textu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu těla

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup tělových písmen

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi jednotlivými písmeny v textu, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška linie těla

Výška řádku ovlivňuje mezeru mezi každým řádkem textu v těle Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Použijte okraj

Povolením této možnosti umístíte ohraničení kolem vašeho modulu. Toto ohraničení lze přizpůsobit pomocí následujících podmíněných parametrů.

Barva hranice

Tato možnost ovlivňuje barvu ohraničení. Vyberte vlastní barvu z výběru barev a použijte ji na svůj okraj.

Šířka hranice

Ve výchozím nastavení jsou ohraničení široká 1 pixel. Tuto hodnotu můžete zvýšit přetažením posuvníku rozsahu nebo zadáním vlastní hodnoty do vstupního pole vpravo od posuvníku. Podporovány jsou vlastní měrné jednotky, což znamená, že můžete změnit výchozí jednotku z „px“ na něco jiného, ​​jako em, vh, vw atd.

Styl okraje

Okraje podporují osm různých stylů: plný, tečkovaný, tečkovaný, dvojitý, drážka, hřeben, překrytí a začátek. Vyberte požadovaný styl z rozevírací nabídky a použijte jej na svůj okraj.

Vlastní marže

Okraj je prostor přidaný na vnější stranu modulu, mezi modul a další prvek nahoře, dole nebo nalevo a napravo od něj. Na kteroukoli ze čtyř stran modulu můžete přidat vlastní hodnoty okrajů. Chcete-li odstranit vlastní okraj, odeberte přidanou hodnotu ze vstupního pole. Ve výchozím nastavení se tyto hodnoty měří v pixelech, ale do vstupních polí můžete zadat vlastní měrné jednotky.

Vlastní polstrování

Výplň je prostor přidaný uvnitř vašeho modulu mezi okraj modulu a jeho vnitřní prvky. Na kteroukoli ze čtyř stran modulu můžete přidat vlastní hodnoty výplně. Chcete-li odstranit vlastní okraj, odeberte přidanou hodnotu ze vstupního pole. Ve výchozím nastavení se tyto hodnoty měří v pixelech, ale do vstupních polí můžete zadat vlastní měrné jednotky.

Rozšířené možnosti modulu Person

Na kartě Upřesnit najdete možnosti, které by zkušenější weboví designéři mohli považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

volitelný modul designu divi.png

CSS ID

Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.

CSS třídy

Zadejte volitelné třídy CSS pro tento modul. Třídu CSS lze použít k vytvoření vlastního stylu CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo na svůj web pomocí možností motivu Divi nebo nastavení na stránce Divi Builder.

Vlastní CSS

Vlastní CSS lze také použít na modul a na libovolné interní součásti modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat vlastní šablony stylů CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již zabaleny do značek stylů. Stačí tedy zadat pravidla CSS oddělená středníky.

Animace

Ve výchozím nastavení jsou obrázky při posouvání stránky animovány. Zde můžete zvolit směr animace nebo ji deaktivovat.

viditelnost

Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé mody na různých zařízeních, nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

Ostatní výukové programy Divi

Tento článek obsahuje komentáře 3

  1. Dobrý den,
    Děkujeme za tyto velmi užitečné články.
    Stejně jako adresy URL na Facebook, Twitter, Google+ nebo LinkedIn víte, zda je možné přidat adresu URL do svého profilu Instagram, prosím? Děkuji 🙂

  2. Salut!
    Když vytvořím projekt nebo příspěvek a použiji podložka Osoba, proč pole Pozice zmizí, když zobrazím projekty nebo příspěvky pomocí blogu nebo filtrovatelného podu blogu?

    Jak zviditelnit pole Pozice osoby v zobrazení mřížky blogu?

    Merci!

    1. Dobrý večer a děkuji za čekání.
      Vyhledávací moduly obvykle neprovádějí krátké kódy. Proto modul Person (jako jakýkoli jiný modul) generuje krátký kód, který lze vykreslit pouze zobrazením náhledu článku nebo stránky, a nikoli z modulu, který nabízí náhled uvedeného článku nebo stránky.

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Zpět na začátek