Modul Divi Person je najlepším spôsobom, ako vytvoriť blok osobného profilu. Toto je vynikajúci doplnok, ktorý sa dá použiť na stránkach O mne alebo tých, ktoré obsahujú členov tímu, kde chcete vytvoriť životopis jednotlivých ľudí. Tento modul kombinoval odkazy na text, obrázky a sociálne médiá do jedného súdržného modulu.

Ako nakonfigurovať modul Divi Person

Pred pridaním modulu Divi Person na svoju stránku musíte najskôr prejsť do Divi Builder. Raz Divi téma nainštalovaný na vašom webové stránky, všimnete si tlačidlo Použite nástroj Divi Builder nad editorom príspevkov vždy, keď vytvoríte novú stránku. Kliknutím na toto tlačidlo aktivujete program Divi Builder a získate prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime. Môžete tiež kliknúť na tlačidlo Použite Visual Builder keď si prezeráte svoje webové stránky v popredí, ak ste prihlásení do svojho hlavného panela WordPress.

Po zadaní nástroja Visual Builder môžete kliknutím na sivé tlačidlo plus pridať na svoju stránku nový modul. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite najskôr na svoju stránku pridať riadok. Máme skvelé návody na používanie prvkov lignes a sekcie od Divi.

Vyhľadajte modul osoby v zozname modulov a kliknutím naň ho pridajte na svoju stránku. V zozname modulov je možné vyhľadávať, čo znamená, že môžete tiež napísať slovo „osoba“ a potom kliknúť na tlačidlo Enter, čím automaticky vyhľadáte a pridáte modul Person! Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .

Príklad prípadu použitia: Pridanie sekcie „Náš tím“ na stránku O nás

Stránka o nás je dobrým miestom na predstavenie členov vášho tímu pomocou modulu Osoba. Dodáva osobný kontakt a môže pomôcť budovať dôveru u nových zákazníkov.

V tomto príklade vám ukážem, ako pomocou modulu Osoby pridať sekciu „Náš tím“ na stránku o malom podnikaní. Použijem rozloženie pre tri osoby a tri stĺpce, vďaka čomu bude sekcia kompaktnejšia a bude zodpovedať celkovému dizajnu stránky.

Pomocou programu Visual Builder vložte novú štandardnú časť s radom troch stĺpcov (1/3 1/3 1/3). Potom do prvého stĺpca pridajte modul Osoba.

Aktualizujte nastavenia modulu Person takto:

Možnosti obsahu

Meno: [Zadajte meno osoby]
Pozícia: [Zadajte príponu osoby]
Zadajte adresy URL profilov sociálnych médií
Popis: [Zadajte krátky životopis]
Obrázok: [Nasnímať obrázok 600 x 600]

Možnosti návrhu

Farebná ikona: # fcbf00
Farba ikony ukazovateľa myši: # e0a831
Písmo hlavičky: Roboto, tučné písmo, pákový efekt
Veľkosť písma hlavičky: 30px
Farba textu hlavičky: # 505050
Medzery v záhlaví listov: 1px
Výška riadku hlavičky: 1.5em
Veľkosť písma tela: 18 pixelov
Veľkosť tela: 1.4em
Vlastné čalúnenie: 15px hore, 15px vpravo, 15px dole, 15px vľavo

Rozšírené možnosti (vlastné CSS)

Hlavný prvok:
-webkit-box-tieň: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-box-tieň: 0 1px 5px rgba (0, 0, 0, 0,2);
box-tieň: 0 1px 5px rgba (0, 0, 0, 0,2);

Uložte nastavenia

Teraz dvakrát duplikujte modul Osoba, ktorý ste práve vytvorili, a presuňte duplikované moduly do druhého a tretieho stĺpca v rade. Keďže dizajn bol prenesený do každého z duplikovaných modulov „Osoba“, stačí aktualizovať obsah pomocou obrázka, názvu, polohy, adries URL sociálnych médií a popisu. osoby.

A je to!

Možnosti obsahu osoby

Na karte Obsah nájdete všetky obsahové prvky modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda čo vo vašom module sa vždy nájde na tejto karte.

Meno

Toto je meno osoby, ktorú predstavujete. Názov sa zobrazuje v hornej časti modulu väčším textom.

poloha

Pozícia sa zobrazuje pod menom menším textom. Často sa to používa na označenie profesionálnej pozície osoby v podnikovom tíme. Napríklad Nick Roach, grafický dizajnér.

Adresa profilu Facebook

Zadajte adresu URL na svojej stránke na Facebooku alebo nechajte pole nevyplnené, aby ste deaktivovali ikonu Facebooku.

Adresa URL profilu služby Twitter

Ak chcete vypnúť ikonu Twitter, zadajte adresu URL na svojej stránke Twitter alebo ju nechajte prázdnu.

Adresa URL profilu Google+

Ak chcete vypnúť ikonu Google+, zadajte adresu URL na svojej stránke Google+ alebo ju nechajte prázdnu.

Adresa URL profilu LinkedIn

Zadajte adresu URL na svojej stránke LinkedIn alebo ju nechajte prázdnu, aby ste vypli ikonu LinkedIn.

Popis

Tu zadajte obsah hlavného textu modulu.

Adresa URL obrázka

Tu si môžete stiahnuť fotografiu na použitie v životopise.

Farba pozadia

Definujte pre svoj modul vlastnú farbu pozadia alebo nechajte predvolenú farbu prázdnu.

Obrázok pozadia

Ak je nastavený, tento obrázok sa použije ako pozadie pre tento modul. Ak chcete odstrániť obrázok na pozadí, stačí odstrániť adresu URL z poľa nastavení. Na pozadí farieb pozadia sa zobrazia obrázky pozadia, čo znamená, že pri použití obrázka pozadia nebude farba pozadia viditeľná.

Správcovská značka

Toto zmení štítok modulu v konštruktore na ľahšiu identifikáciu. Keď použijete zobrazenie WireFrame v programe Visual Builder, tieto štítky sa zobrazia v bloku modulu rozhrania Divi Builder.

Možnosti návrhu pre modul Osoba

Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Toto je karta, ktorú použijete na zmenu vzhľadu vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete čokoľvek meniť.

Farba ikony

Táto možnosť ovláda farbu ikon sociálnych médií, ktoré sa zobrazujú v profile každej osoby. V predvolenom nastavení sú tieto ikony šedé, pomocou tohto nastavenia môžete zmeniť túto farbu.

Farba ikony pri umiestnení kurzora myši

Môžete tiež zmeniť farbu kurzora pre ikony sociálnych médií. Vyberte požadovanú farbu pomocou výberu farieb v tomto nastavení.

Farba textu

Tu môžete zvoliť hodnotu svojho textu. Ak pracujete na tmavom pozadí, váš text by mal byť zapnutý. Ak pracujete na svetlom pozadí, text by mal byť tmavý.

Písmo hlavičky

Písmo textu záhlavia môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Veľkosť písma hlavičky

Tu môžete upraviť veľkosť textu hlavičky. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Farba textu hlavičky

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu hlavičky, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Medzery medzi hlavičkami

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte hlavičky, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška riadku hlavičky

Výška riadku ovplyvňuje medzeru medzi každým riadkom textu hlavičky. Ak chcete zväčšiť medzeru medzi každým riadkom, upravte medzeru pomocou jazdca rozsahu alebo zadajte požadovanú veľkosť medzery do vstupné pole napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Font písma

Písmo tela môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Veľkosť písma v tele

Tu môžete upraviť veľkosť textu. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Farba textu tela

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu, vyberte túto farbu vo výbere farieb pomocou tejto možnosti.

Rozmiestnenie písmen

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška línie tela

Výška riadku ovplyvňuje medzery medzi jednotlivými riadkami textu v tele. Ak chcete zväčšiť medzery medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Použite okraj

Povolenie tejto možnosti umiestni orámovanie okolo vášho modulu. Túto hranicu je možné prispôsobiť pomocou nasledujúcich podmienených parametrov.

Farba hranice

Táto možnosť ovplyvňuje farbu vášho orámovania. Vyberte vlastnú farbu z výberu farieb a použite ju na svoje orámovanie.

Šírka hranice

V predvolenom nastavení sú okraje široké 1 pixel. Túto hodnotu môžete zvýšiť presunutím jazdca rozsahu alebo zadaním vlastnej hodnoty do vstupného poľa vpravo od jazdca. Podporované vlastné merné jednotky, čo znamená, že môžete zmeniť predvolenú jednotku z „px“ na inú, napríklad em, vh, vw atď.

Štýl hraníc

Okraje podporujú osem rôznych štýlov: plný, bodkovaný, bodkovaný, dvojitý, drážka, hrebeň, prekrytie a štart. Z rozbaľovacej ponuky vyberte požadovaný štýl a aplikujte ho na svoje orámovanie.

Vlastná marža

Okraj je priestor pridaný k vonkajšej strane modulu, medzi modul a nasledujúci prvok nad, pod alebo naľavo a napravo od neho. Na ktorúkoľvek zo štyroch strán modulu môžete pridať vlastné hodnoty okrajov. Ak chcete odstrániť vlastný okraj, odstráňte pridanú hodnotu zo vstupného poľa. Predvolene sa tieto hodnoty merajú v pixeloch, ale do vstupných polí môžete zadať vlastné jednotky merania.

Vlastné čalúnenie

Výplň je priestor pridaný do vášho modulu medzi okrajom modulu a jeho vnútornými prvkami. Na ktorúkoľvek zo štyroch strán modulu môžete pridať vlastné hodnoty výplne. Ak chcete odstrániť vlastný okraj, odstráňte pridanú hodnotu zo vstupného poľa. Predvolene sa tieto hodnoty merajú v pixeloch, ale do vstupných polí môžete zadať vlastné jednotky merania.

Rozšírené možnosti modulu Osoba

Na karte rozšírené nájdete možnosti, ktoré by sa mohli hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a identifikátory CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.

CSS ID

Zadajte voliteľné ID CSS, ktoré sa použije pre tento modul. ID je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.

Triedu CSS

Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS možno použiť triedu CSS. Môžete pridať viacero tried oddelených medzerou. Tieto triedy možno použiť vo vašej podradenej téme Divi alebo vo vlastnej šablóne so štýlmi CSS, ktorú pridáte na svoju stránku alebo web. webové stránky pomocou možností témy Divi alebo nastavení stránky Divi Builder.

Vlastné CSS

Vlastné CSS je možné použiť aj na modul a na ktorékoľvek z jeho vnútorných častí. V sekcii Vlastné CSS nájdete textové pole, kde môžete priamo do každého prvku pridať vlastné šablóny štýlov CSS. Záznamy CSS v týchto nastaveniach sú už zabalené v značkách štýlov. Stačí teda zadať pravidlá CSS oddelené bodkočiarkami.

animácie

V predvolenom nastavení sú obrázky pri posúvaní stránky animované. Tu môžete zvoliť smer animácie alebo ju deaktivovať.

viditeľnosť

Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ďalšie výukové programy spoločnosti Divi

• 5 webové stránky pre použitie v hoteli Divi tému
• Ako pridať text na produktoch Divi WooCommerce
• Ako zmeniť farbu ponuky medzi stránkami Divi
• Ako si prispôsobiť mriežky blogu s Divi
• Ako používať role Divi editor na WordPress
• Ako vytvoriť posuvník Divi na celej obrazovke
• Ako zmeniť farbu ponúk medzi stránkami Divi
• Funkcie, ktoré pravdepodobne neviete o Divi
• Ako používať Divi Builder na WordPress
• Ako používať modul posúvania videa Divi
• Ako používať modul Divi Builder Flip
• Ako pridať modul posudkov na Divi Builder
• Ako používať textový modul Divi
• Ako vytvoriť posúvač na Divi
• Ako upraviť rolu používateľa Divi
• Ako používať modul Divi Social Media
• Ako používať modul obchodu na tému WordPress Divi
• Ako používať modul bočného panela Divi
• Ako používať modul tabuľky cien Divi
• Ako používať titulný modul publikácií Divi
• Ako pridať video modul Divi
• Ako používať navigačný modul článku
• Ako používať vyhľadávací modul Divi
• Ako používať modul peňaľenky Divi
• Ako používať osobný modul na nástroji Divi Builder
• Ako používať modul peňaženky s filtrom Divi
• Ako používať posuvný modul s plnou šírkou
• Ako používať modul obrazu Divi Builder
• Ako používať navigačný modul v celej šírke nástroja Divi Builder
• Ako používať modul galérie obrázkov
• Ako používať modul kariet Divi Builder s plnou šírkou
• Ako používať portálový modul Divi s plnou šírkou
• Ako používať modul záhlavia Divi s plnou šírkou
• Ako používať počítací modul Divi
• Ako používať posúvač článkov v aplikácii Divi Builder
• Ako používať modul Divi Email Optin