Divi: Ako vytvoriť vyskakovací prihlasovací formulár

Chceli by ste vytvoriť a formulár vyskakovacie prihlásenie v Divi pomocou tlačidiel prihlásenia / odhlásenia?

Vytvorenie a formulár prihlasovacie vyskakovacie okno divi môže byť efektívnym spôsobom, ako zlepšiť dizajn vašej stránky a používateľskú skúsenosť s prihlásením/odhlásením. 

Cieľom je vytvoriť a formulár prihlásenie, ktoré sa zobrazí v kontextovom okne vždy, keď používateľ klikne na tlačidlo prihlásenia v hlavičke stránky. 

Je to pohodlnejšie ako presmerovanie používateľa na vlastnú prihlasovaciu stránku.

V tomto návode vytvoríme vyskakovací prihlasovací formulár s vlastnými tlačidlami na prihlásenie a odhlásenie v Divi. 

Pomocou modulu Divi Login a niekoľkých modulov Button vytvoríme bezproblémové vyskakovacie prihlásenie na front-end tým, že používateľom umožníme prihlásiť sa a odhlásiť sa bez toho, aby boli presmerovaní na inú stránku.

Začnime!

prehľad

Tu je rýchly pohľad na dizajn, ktorý vytvoríme v tomto návode.

Všimnite si, ako sa mení tlačidlo prihlásenia a tlačidlo odhlásenia. A keď sa používateľ prihlási, zostane na aktuálnej stránke. 

Okrem toho kontextový prihlasovací formulár zobrazuje iný „varovný“ obsah zakaždým, keď sa používateľ pokúsi odhlásiť.

Čo potrebujete, aby ste začali

Aj keď môžete tento vyskakovací prihlasovací formulár a vlastné prihlasovacie/odhlasovacie tlačidlá pridať do ľubovoľnej vlastnej hlavičky, na urýchlenie procesu a rýchle spustenie návrhu použijeme predpripravenú hlavičku.

Importujte šablónu hlavičky „Crowdfunding Layout Pack“ do nástroja Divi Builder

Ak chcete začať, stiahnite si Divi Crowdfunding Layout Pack Header and Footer zadarmo . Ak to chcete urobiť, prejdite na stránku blogový príspevok .

Potom zadajte svoj e-mail na stiahnutie súboru zip.

Potom súbor rozbaľte, aby bol pripravený na import.

Ak chcete importovať súbor do editora tém, postupujte takto:

1. Prejdite do Divi > Tvorca tém.
2. Kliknite na ikonu prenosnosti.
3. Vo vyskakovacom okne Prenosnosť vyberte kartu importu.
4. Vyberte predtým stiahnutý rozbalený súbor, ktorý chcete importovať.
5. Cliquer sur Importujte Divi Theme Builder šablóny.
6. Kliknutím na ikonu úprav upravíte importovanú hlavičku.

Vytvorenie kontextového prihlasovacieho formulára v Divi

Časť 1: Vytvorenie prihlasovacích a odhlasovacích tlačidiel

V editore rozloženia globálnej hlavičky otvorte súbor zobrazenie vrstvy aby ste mohli ľahko vidieť všetky prvky.

V hornom riadku sekcie hlavičky odstráňte modul Sledujte sociálne médiá vedľa tlačidla Prihlásiť v stĺpci 3.

Čítajte tiež: Divi: Porovnanie rôznych typov gradientov

Vytvorenie prihlasovacieho tlačidla

Pre vytvorenie nášho prihlasovacieho tlačidla otvorte nastavenia modulu Button v stĺpci 3 v hornom riadku.

Aktualizujte nasledujúce položky na karte návrh:

• Ikona tlačidla: ikona zámku (pozri snímku obrazovky)
• Umiestnenie ikony tlačidla: Vpravo
• Zobraziť ikonu iba pri umiestnení kurzora myši na tlačidlo: NIE
• Polstrovanie: 0,5 em (hore a dole), 2 em (vľavo), 0,7 em (vpravo)

Pod záložkou pokročilý, priraďte tlačidlu dve vlastné triedy CSS takto:

• CSS Trieda: et-toggle-popup et-popup-login-button

Vytvorenie tlačidla na odhlásenie

Ak chcete vytvoriť naše tlačidlo na odhlásenie, duplikujte existujúce tlačidlo prihlásenia v stĺpci 3.

Aby ste pomohli rozlíšiť tieto dve tlačidlá, môžete aktualizovať štítok každého z nich. Potom otvorte nastavenia modulu Duplicate Button v stĺpci 3.

Zmeňte text tlačidla na „Odhlásiť“.

Aktualizujte nasledujúce položky na karte návrh:

• Ikona tlačidla: ikona odomknutia (pozri snímku obrazovky)

Pod záložkou pokročilý, aktualizujte tlačidlo CSS Classes takto:

• CSS Trieda: et-toggle-popup et-popup-logout-button

Prvá trieda zostane rovnaká, ale druhá trieda bude iná.

Časť 2: Vytvorenie vyskakovacej sekcie

Po dokončení tlačidiel sme pripravení vytvoriť vyskakovaciu sekciu, ktorá bude slúžiť ako vyskakovacie okno obsahujúce formuláre de pripojenie.

Pod sekciu hlavičky pridajte novú pravidelnú sekciu.

Potom do sekcie vložte riadok s jedným stĺpcom.

Nastavenia sekcií

Pred aktualizáciou riadka otvorte nastavenia sekcie.

Pod záložkou obsah, dajte sekcii bielu farbu pozadia:

• Pozadie: #ffffff

Pod záložkou dizajn, aktualizujte nasledovné:

• Šírka: 100 %
• Maximálna šírka: 800 pixelov (stolný počítač), 80 % (tablet), 100 % (telefón)
• Zarovnanie sekcie: Stred
• Výška: automatická (stolný počítač a tablet), 100 % (telefón)
• Maximálna výška: 100 %
• Výplň: 0px (horná a dolná časť)

• Zaoblené rohy: 10px
• Box Shadow: pozri snímku obrazovky
• Vertikálna poloha tieňa rámčeka: 0px
• Sila rozmazania: 100 pixelov
• Sila rozloženia: 50px

Pod záložkou pokročilý, aktualizujte nasledovné:

Pridajte vlastnú triedu CSS.

• CSS Trieda: et-popup-login

Pridajte vlastný útržok CSS do hlavného prvku:

overscroll-behavior: contain;

Aktualizujte možnosti Viditeľnosť a Poloha.

• Horizontálne pretečenie: Skryté
• Vertikálne pretečenie: automatické
• Poloha: Pevná
• Miesto: Center Center
• Index Z: 999999

Nastavenie linky

Po nastavení sekcií otvorte nastavenia čiar a aktualizujte nasledujúce nastavenia dizajnu:

• Použiť vlastnú šírku odkvapu: ÁNO
• Šírka odkvapu: 1
• Šírka: 100 %
• Maximálna šírka: 100 %
• Výplň: 0px (hore), 5vh (dole)

Časť 3: Vytvorenie ikony zatvorenia kontextového okna

Na vytvorenie ikony zatvorenia kontextového okna, ktorá zatvorí/skryje kontextové okno po kliknutí, použijeme modul Blurb.

Pridajte do riadku nový modul Blurb.

Otvorte nastavenie modulu a odstráňte nadpis a hlavný text.

Potom pridajte ikonu nasledovne:

• Použite ikonu: ÁNO
• Ikona: ikona „x“ (pozri snímku obrazovky)

Pod záložkou dizajn, aktualizujte nasledovné:

• Farba ikony: #004e43
• Zarovnanie obrázka/ikony: na stred
• Použiť veľkosť písma ikony: ÁNO
• Veľkosť písma ikony: 50px
• Šírka: 50px
• Modul vyrovnávania: vpravo
• Výška: 50px

Pod záložkou pokročilý, pridajte triedu CSS do modulu Blurb takto:

• CSS Trieda: et-toggle-popup

Časť 4: Vytvorenie prihlasovacích formulárov „Prihlásený“ a „Odhlásený“.

Aby sme mali odlišný obsah a dizajn prihlasovacieho formulára pri prihlásení a odhlásení, vytvoríme dva rôzne moduly prihlasovacieho formulára. 

Prvým bude prihlasovací formulár, ktorý sa zobrazí pri každom „odhlásení používateľa“. Druhým bude prihlasovací formulár, ktorý sa zobrazí pri každom „prihlásení“ používateľa.

Vytvorenie formulára „Odhlásený“.

Ak chcete vytvoriť prihlasovací formulár „Odhlásený“, pridajte nový modul prihlásenia pod ikonu modulu Blurb v riadku.

Otvorte nastavenia modulu a zmeňte nasledujúce nastavenia:

Karta Obsah

• Presmerovanie na aktuálnu stránku: ÁNO
• Použiť farbu pozadia: NIE

Karta Dizajn

• Farba pozadia polí: rgba (0,78,67,0.05)
• Farba pozadia zamerania poľa: rgba (0,78,67,0,15)
• Zarovnanie textu: na stred
• Farba textu: Tmavá

• Písmo názvu: Poppins
• Hmotnosť písma nadpisu: polotučné
• Farba textu: #000000
• Výška riadku nadpisu: 1,3 em
• Písmo tela: Work Sans

Ak chcete aktualizovať štýly tlačidiel, skopírujte štýly tlačidiel z prihlasovacieho tlačidla, ktoré sme vytvorili, do tretieho stĺpca v riadku sekcie Hlavička.

Potom prilepte štýly tlačidiel do skupiny možností tlačidiel v nastaveniach pripojenia na karte Návrh.

Ďalej aktualizujte štýly tlačidiel pre prihlasovací formulár takto:

• gombík
  • Farba textu: #ffffff
  • Pozadie: #004e43
  • Pozadie (umiestnenie myši): #00683c
  • Šírka okraja: 0 pixelov
  • Výplň: 15 pixelov (hore a dole)

Ďalej aktualizujte možnosti veľkosti takto:

• Šírka: 100 %
• Maximálna šírka: 80 % (stolný počítač), 90 % (tablet), 95 % (telefón)
• Modul zarovnania: Stred

Karta Rozšírené

Pod záložkou pokročilý, aktualizujte triedu CSS a vlastný CSS takto:

• CSS Trieda: et-logged-out-form

Vlastný CSS pre popis pripojenia:

width: 100% !important;
float: none !important;

Vlastný CSS pre prihlasovací formulár:

width: 100% !important;
padding: 0px !important;

Tým sa zabezpečí, že prihlasovací modul bude pokrývať celú šírku riadku/stĺpca, dokonca aj na pracovnej ploche.

Vytvorenie formulára „Prihlásený“.

Teraz, keď je verzia formulára „Odhlásená“ dokončená, musíme vytvoriť verziu „Prihlásená“, ktorá bude mať odlišný obsah a štýl, aby sa maximalizoval používateľský zážitok.

Ak chcete vytvoriť prihlasovací formulár „Odhlásený“, duplikujte existujúci prihlasovací formulár.

Ďalej aktualizujte štítok pre každý z nich formuláre pripojenie resp.

Otvorte duplicitné nastavenia (formulár „Prihlásený“) a pridajte názov stránky ako dynamický obsah do názvu modulu prihlasovacieho formulára.

Potom otvorte nastavenia dynamického obsahu názvu lokality a aktualizujte obsah pred a po nasledovne:

• Predtým: „Pokúšate sa odhlásiť z Elegant Themes“
• Po: „. " 

Tým sa vytvorí pekné dynamické upozornenie pre používateľov, ktorí sa snažia odhlásiť zo stránky.

Potom do tela pridajte nasledujúcu hlavičku H3:

<h3>Are you sure?</h3>

Ak ste niekedy pri prihlásení videli obsah modulu Prihlásenie, viete, že existuje personalizovaná správa, ktorá obsahuje personalizovaný odkaz „odhlásiť sa“. Aby tento odkaz vyzeral ako tlačidlo, musíme prispôsobiť nastavenia písma/textu odkazu na telo takto:

• Vyberte kartu odkaz pod opciou BodyText.
• Písmo odkazu: Work Sans
• Hmotnosť písma odkazu: polotučné
• Štýl písma: TT
• Zarovnanie textu odkazu: na stred
• Farba textu odkazu: #ffffff

POZNÁMKA: Nebudete môcť zobraziť ukážku týchto výsledkov, kým si formulár neprezriete na aktívnej stránke.

Pod záložkou pokročilý, aktualizujte triedu CSS a vlastný CSS takto:

• CSS Trieda: et-logged-in-form

Vlastný CSS pre prihlasovací formulár:

display:none;

Časť 5: Pridajte vlastný kód

Ak chcete pridať vlastné CSS a JQuery potrebné pre funkciu kontextového prihlasovacieho formulára, vytvorte nový modul Kód pod posledným modulom Prihlásenie.

CSS

Otvorte nastavenia modulu kódu a prilepte nasledujúci kód CSS do poľa kódu, pričom nezabudnite zabaliť kód CSS do potrebných značiek štýlu.

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Všimnite si, že CSS používa triedu „connected“, ktorá je zabudovaná do WordPress, aby skryla/zobrazila príslušné tlačidlá prihlásenia/odhlásenia a formuláre Prihlasovacia správa „Logged In“/“Logged Out“ pri každom prihlásení alebo odhlásení používateľa.

JQuery

Pod značku koncového štýlu prilepte nasledujúci JQuery a uistite sa, že ste kód zabalili do potrebných značiek skriptu.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Tento úryvok jednoducho prepne vyskakovaciu sekciu vždy, keď používateľ klikne na jednu z troch položiek s triedou „ a-toggle-popup (tlačidlá prihlásenia a odhlásenia plus ikona prezentácie „x“).

Pozri tiež: Divi: Ako používať nastavenia masky pozadia a možnosti transformácie vzoru

Je to hotové !

Nezabudnite uložiť zmeny, ktoré ste vykonali v šablóne v nástroji na tvorbu tém. Po uložení môžete výsledky zobraziť na živej stránke.

Konečný výsledok

Tu sú konečné výsledky na počítači, tablete a telefóne.

Všimnite si, ako sa mení tlačidlo prihlásenia a tlačidlo odhlásenia. A keď sa používateľ prihlási, zostane na aktuálnej stránke. 

Okrem toho, kontextový prihlasovací formulár zobrazuje iný „varovný“ obsah zakaždým, keď sa používateľ pokúsi odhlásiť.

Stiahnite si DIVI teraz!!!

Záver.

Dúfame, že vytvorenie tohto vyskakovacieho prihlasovacieho formulára a vlastných tlačidiel prihlásenia/odhlásenia vám poskytne prehľad o tom, ako kreatívne používať prihlasovací formulár Divi. 

Neváhajte a upravte dizajn a obsah každého prihlasovacieho formulára (alebo tlačidiel), aby ste vytvorili jedinečný zážitok z prihlásenia na vašej vlastnej webovej stránke.

Tiež dúfame, že vás tento tutoriál inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.

Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.

Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...