Prihlasovací modul (prihlásenie) zobrazuje a formulár Prihlásenie WordPress, v štýle Divi, kdekoľvek na vašej stránke. Ak používate WordPress s členskou oblasťou, pridajte a formulár pripojenie priamo na stránku môže byť veľmi užitočné (namiesto presmerovania ľudí na formulár Prihlásenie do WordPress, ktoré používa iný štýl ako vaša téma).

prihlasovacia stránka divi wordpress.png tutorial

Ako pridať prihlasovací modul na svoju stránku

Pred pridaním prihlasovacieho modulu na svoju stránku musíte najskôr prejsť do Divi Buildera. Raz Divi téma nainštalovaný na vašom webe, 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 pri prehliadaní webových stránok v popredí, ak ste pripojení k dashboardu WordPress.

divi builder

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.

pripojiť modul divi.png

Vyhľadajte prihlasovací modul 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 „Pripojiť“ a potom kliknúť na tlačidlo „Zadať“, aby sa automaticky našiel a pridať modul pripojenia! 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 použitia: Pridajte vlastný prihlasovací formulár na prihlasovaciu stránku členskej oblasti

Pretože členské stránky vyžadujú, aby sa užívateľ prihlásil k časti alebo k celému obsahu, prihlasovací modul uľahčuje pridanie prihlasovacieho formulára na vašu vlastnú prihlasovaciu stránku. Môžete si tiež zvoliť presmerovanie používateľov na tento formulár namiesto predvolenej prihlasovacej stránky WordPress.

Tu je jednoduchá prihlasovacia stránka s prihlasovacím modulom, ktorý vám ukážem, ako vytvoriť:

pripojiť sa na blogpascher.png

Pomocou programu Visual Builder pridajte na prihlasovaciu stránku členstva novú štandardnú sekciu s riadkom s plnou šírkou (1 stĺpec). Potom vložte spojovací modul do linky.

pripojiť modul divi.png

Aktualizujte nastavenia pripojenia nasledovne:

Možnosti obsahu

Názov: Pripojenie
Obsah: [uveďte stručný popis kurzu alebo pokyny na prihlásenie]
Presmerovanie na aktuálnu stránku: ÁNO

Možnosti návrhu

Farba pozadia poľa: # f0f0f0 Farba textu: Tmavé písmo hlavičky: 35px Farba hlavičky: # 888888 Veľkosť písma tela: 16px Orámovanie: Áno Farba orámovania: # 0c71c3 Šírka okraja: 1px Vlastné polstrovanie: 50px hore, 50px vpravo, 50px dole, 50px vľavo Použiť vlastné štýly pre tlačidlo: ÁNO Veľkosť textu tlačidla: 26px Farba textu tlačidla: #ffffff Farba tlačidla: # 0c71c3 tlačidlo: 0px Tlačidlo písma: predvolené, veľké písmeno Pridať ikonu tlačidla: ÁNO Ikona tlačidla: Zobraziť iba ikonu, keď je kurzor myši umiestnený: NIE

príklad prihlasovacej stránky divi.jpg

To je všetko. Stránka člena má teraz prispôsobený prihlasovací formulár, na ktorý budú používatelia presmerovaní, keď sa budú musieť prihlásiť do kurzu. Nie je potrebné uspokojiť sa s predvoleným prihlasovacím formulárom WordPress.

blogpascher login page.png

Možnosti obsahu modulu pripojenia

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.

obsah voľby modul connection.png

Názov

Názov sa objaví v prihlasovacom poli nad prihlasovacím formulárom.

Obsah

Obsah sa zobrazí v prihlasovacom poli pod nadpisom. Ak chcete pridať ďalší popis, môžete použiť pole. V opačnom prípade nechajte pole prázdne.

Presmerovanie na aktuálnu stránku

Tu môžete zvoliť, či má byť používateľ presmerovaný na aktuálnu stránku.

Použite farbu pozadia

Ak chcete dať svojmu prihlasovaciemu formuláru plnú farbu pozadia, vyberte pre túto možnosť „áno“ a použije sa farba pozadia, ktorú vyberiete v ďalšej možnosti.

Farba pozadia

Vyberte farbu pozadia, ktorá sa zobrazí ako pozadie vášho prihlasovacieho poľa. Ak ste sa v predchádzajúcej možnosti rozhodli vypnúť farby pozadia, nebude mať táto farba žiadny efekt.

Štítok správcu

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 štýlu pre modul prihlasovania

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ť.

voliteľný modul modul connection.png

Farba pozadia formulára formulára

Prihlasovací formulár obsahuje dve vstupné polia pre používateľské meno a heslo. Toto nastavenie môžete použiť na úpravu farby pozadia týchto polí.

Farba textu poľa formulára

Prihlasovací formulár obsahuje dve vstupné polia pre používateľské meno a heslo. Toto nastavenie môžete použiť na úpravu farby textu týchto polí. Ak ste upravili farbu pozadia poľa formulára, môžete tiež upraviť farbu textu, aby ste zaistili harmonický farebný vzťah.

Farba pozadia

Keď je vstupné pole zaostrené pomocou myši návštevníka, farby sa zmenia, aby bolo zrejmé, ktoré pole je aktívne. Tu môžete definovať farbu pozadia zaostrených polí.

Farba textu zaostrenia

Keď je vstupné pole zaostrené pomocou myši návštevníka, farby sa zmenia, aby bolo zrejmé, ktoré pole je aktívne. Tu môžete definovať farbu textu zameraných polí.

Použite farebné okraje zaostrenia

Ak chcete pridať orámovanie do vstupných polí, keď sú zaostrené, môžete povoliť túto možnosť.

Farba ohraničenia zaostrenia

Pomocou tohto nastavenia môžete zmeniť farbu orámovania, ktoré sa zobrazuje na zaostrených vstupných poliach.

Farba textu

Tu môžete zvoliť, či má byť text svetlý alebo tmavý. Ak pracujete na tmavom pozadí, text by mal byť svetlý. Ak je vaše pozadie svetlé, text by mal byť tmavý.

Textová orientácia

Tu môžete upraviť zarovnanie textu.

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.

hlavička sekcie divi.png

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.

modul hraničnej oblasti divi.png

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.

custom margin.png

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.

Pre tlačidlo použite vlastné štýly

Povolenie tejto možnosti odhalí rôzne nastavenia prispôsobenia tlačidiel, ktoré môžete použiť na zmenu vzhľadu tlačidla vášho modulu.

Veľkosť textu tlačidla

Toto nastavenie je možné použiť na zväčšenie alebo zmenšenie veľkosti textu v tlačidle. Tlačidlo sa prispôsobuje podľa toho, ako sa zväčšuje a zmenšuje veľkosť textu.

Farba textu tlačidla

V predvolenom nastavení majú tlačidlá farbu zvýraznenia témy, ako je definované v nástroji Customizer Theme. Táto voľba umožňuje priradiť tlačidlu tohto modulu vlastnú farbu textu. Vyberte si svoju vlastnú farbu pomocou výberu farieb a zmeňte farbu tlačidla.

Farba pozadia tlačidla

Štandardne majú tlačidlá priehľadnú farbu pozadia. To je možné zmeniť výberom požadovanej farby pozadia vo výbere farieb.

pomocou tlačidiel divi modul connection.png

Tlačidlo Šírka hranice

Všetky tlačidlá Divi majú predvolene okraj 2px. Túto hranicu je možné pomocou tohto nastavenia zväčšiť alebo zmenšiť. Okraje je možné odstrániť zadaním hodnoty 0.

Farba ohraničenia tlačidla

V predvolenom nastavení okraje tlačidiel preberajú farbu zvýraznenia témy, ako je definované v nástroji Customizer Theme. Táto možnosť vám umožňuje priradiť vlastnú farbu orámovania tlačidlu tohto modulu. Vyberte si svoju vlastnú farbu pomocou výberu farieb a zmeňte farbu orámovania tlačidla.

Polomer okraja tlačidla

Polomer orámovania ovplyvňuje zaoblenie rohov vašich tlačidiel. Predvolene majú tlačidlá v aplikácii Divi malý polomer okraja, ktorý zaobľuje rohy o 3 pixely. Túto hodnotu môžete znížiť na 0, ak chcete vytvoriť štvorcové tlačidlo, alebo ho výrazne zvýšiť, ak chcete vytvoriť tlačidlá s kruhovými okrajmi.

Rozostup písmen tlačidiel

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte tlačidla, 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.

Button Font

Písmo textu vášho tlačidla 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.

Pridajte ikonu tlačidla

Zakázané, toto nastavenie odstráni ikony z vášho tlačidla. V predvolenom nastavení sa na všetkých tlačidlách Divi zobrazuje ikona šípky pri umiestnení kurzora myši.

Ikona tlačidla

Ak sú ikony povolené, môžete pomocou tohto nastavenia zvoliť, ktorá ikona sa bude vo vašom tlačidle používať. Divi má na výber rôzne ikony.

Tlačidlo s farebnou ikonou

Úpravou tohto nastavenia zmeníte farbu ikony, ktorá sa zobrazí na vašom tlačidle. V predvolenom nastavení je farba ikony rovnaká ako farba textu vášho tlačidla, ale toto nastavenie vám umožňuje upraviť farbu nezávisle.

Tlačidlo umiestnenia ikony

Môžete zvoliť zobrazenie ikony tlačidla vľavo alebo vpravo od tlačidla.

Zobraziť ikonu iba pri umiestnení kurzora myši na tlačidlo

Ikony tlačidiel sa predvolene zobrazujú iba pri umiestnení kurzora myši. Ak chcete, aby sa ikona vždy zobrazovala, vypnite toto nastavenie.

Tlačítko Presunúť farbu textu

Keď na tlačidlo umiestnite kurzor myši, použije sa táto farba. Farba sa zmení od základnej farby definovanej v predchádzajúcich nastaveniach.

Farba pozadia tlačidla myši

Keď na tlačidlo umiestnite kurzor myši, použije sa táto farba. Farba sa zmení od základnej farby definovanej v predchádzajúcich nastaveniach.

Tlačidlo hraničného presúvania farieb

Keď na tlačidlo umiestnite kurzor myši, použije sa táto farba. Farba sa zmení od základnej farby definovanej v predchádzajúcich nastaveniach.

Presuňte kurzor na políčko

Keď na tlačidlo umiestnite kurzor myši, použije sa táto hodnota. Hodnota sa zmení od základnej hodnoty definovanej v predchádzajúcich nastaveniach.

Tlačidlo na oddelenie poznámok

Keď na tlačidlo umiestnite kurzor myši, použije sa táto hodnota. Hodnota sa zmení od základnej hodnoty definovanej v predchádzajúcich nastaveniach.

Rozšírené možnosti modulu prihlásenia

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.

prihlasovací modul

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 je možné použiť triedu CSS. Môžete pridať viac tried oddelených medzerou. Tieto triedy môžete použiť vo svojej podradenej téme Divi alebo vo vlastnej šablóne štýlov CSS, ktorú pridáte na svoju stránku alebo na svoj web pomocou možností témy Divi alebo nastavení na stránke 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.

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 stolových 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