Divi: Kako stvoriti skočni obrazac za prijavu

Želite li stvoriti a obrazac skočna prijava u Diviju s gumbima za prijavu/odjavu?

Stvaranje a obrazac skočni prozor za prijavu Divi može biti učinkovit način za poboljšanje dizajna vaše stranice i korisničkog iskustva prilikom prijave/odjave. 

Ideja je stvoriti a obrazac prijava koja se prikazuje u skočnom prozoru svaki put kada korisnik klikne gumb za prijavu u zaglavlju stranice. 

Ovo je praktičnije od preusmjeravanja korisnika na prilagođenu stranicu za prijavu.

U ovom ćemo vodiču stvoriti skočni obrazac za prijavu s prilagođenim gumbima za prijavu i odjavu u Diviju. 

Koristeći modul Divi Login i nekoliko modula gumba, stvorit ćemo besprijekorno iskustvo prijave u skočnim prozorima na prednjem dijelu dopuštajući korisnicima da se prijave i odjave bez preusmjeravanja na drugu stranicu.

Krenimo!

pregled

Evo kratkog pregleda dizajna koji ćemo izraditi u ovom vodiču.

Primijetite kako se mijenjaju gumb za prijavu i gumb za odjavu. I kada se korisnik prijavi, ostaje na trenutnoj stranici. 

Dodatno, skočni obrazac za prijavu prikazuje drugačiji sadržaj "upozorenja" svaki put kada se korisnik pokuša odjaviti.

Što trebate za početak

Iako možete dodati ovaj skočni obrazac za prijavu i prilagođene gumbe za prijavu/odjavu u bilo koje prilagođeno zaglavlje, mi ćemo koristiti unaprijed napravljeno zaglavlje kako bismo ubrzali proces i brzo započeli dizajn.

Uvezite predložak zaglavlja "Crowdfunding Layout Pack" u Divi builder

Za početak preuzmite Zaglavlje i podnožje Divi Crowdfunding Layout Pack besplatno . Da biste to učinili, idite na post na blogu .

Zatim unesite svoju e-poštu za preuzimanje zip datoteke.

Nakon toga raspakirajte datoteku tako da bude spremna za uvoz.

Za uvoz datoteke u uređivač tema, slijedite ove korake:

1. Idite na Divi > Theme Builder.
2. Kliknite na ikonu prenosivosti.
3. U skočnom prozoru Prenosivost odaberite karticu za uvoz.
4. Odaberite prethodno preuzetu raspakovanu datoteku za uvoz.
5. Cliquer sur Uvezi Divi Theme Builder Predlošci.
6. Pritisnite ikonu za uređivanje da biste uredili uvezeno zaglavlje.

Stvaranje skočnog obrasca za prijavu u Diviju

1. dio: Stvaranje gumba za prijavu i odjavu

Kada ste u uređivaču izgleda globalnog zaglavlja, otvorite prikaz slojeva tako da možete lako vidjeti sve elemente.

U gornjem redu odjeljka zaglavlja izbrišite modul Slijede društveni mediji pored gumba Prijava u stupcu 3.

Pročitajte također: Divi: Usporedba različitih vrsta gradijenata

Izrada gumba za prijavu

Da biste kreirali naš gumb za prijavu, otvorite postavke modula gumba u stupcu 3 u gornjem redu.

Ažurirajte sljedeće na kartici dizajna:

• Ikona gumba: ikona lokota (pogledajte snimak zaslona)
• Položaj ikone gumba: desno
• Prikaži samo ikonu pri lebdenju za gumb: NE
• Ispuna: 0,5 em (gore i dolje), 2 em (lijevo), 0,7 em (desno)

Ispod kartice napredan, dodijelite gumbu dvije prilagođene CSS klase na sljedeći način:

• CSS klasa: et-toggle-popup et-popup-gumb za prijavu

Izrada gumba za odjavu

Da biste kreirali naš gumb za odjavu, duplicirajte postojeći gumb za prijavu u stupcu 3.

Kako biste lakše razlikovali dva gumba, možete ažurirati oznaku svakog pojedinačno. Zatim otvorite postavke modula Duplicate Button u stupcu 3.

Promijenite tekst gumba u "Odjava".

Ažurirajte sljedeće na kartici dizajna:

• Ikona gumba: ikona za otključavanje (pogledajte snimak zaslona)

Ispod kartice napredanažurirajte gumb CSS klase na sljedeći način:

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

Prva klasa će ostati ista, ali će druga klasa biti drugačija.

2. dio: Stvaranje skočnog odjeljka

Nakon što su gumbi gotovi, spremni smo za stvaranje skočnog odjeljka koji će služiti kao naš skočni prozor koji sadrži obrasci vezu.

Ispod odjeljka zaglavlja dodajte novi obični odjeljak.

Zatim umetnite redak s jednim stupcem unutar odjeljka.

Postavke odjeljka

Prije ažuriranja retka otvorite postavke odjeljka.

Ispod kartice Sadržaj, dajte odjeljku bijelu boju pozadine:

• Pozadina: #ffffff

Ispod kartice dizajnažurirajte sljedeće:

• Širina: 100%
• Maksimalna širina: 800 piksela (stolno računalo), 80% (tablet), 100% (telefon)
• Poravnanje odjeljka: središte
• Visina: automatski (stolno računalo i tablet), 100% (telefon)
• Maksimalna visina: 100%
• Ispod: 0px (gornji i donji dio)

• Zaobljeni uglovi: 10 px
• Box Shadow: pogledajte snimak zaslona
• Okomiti položaj sjene okvira: 0 px
• Snaga zamućenja: 100 piksela
• Snaga širenja: 50 px

Ispod kartice napredanažurirajte sljedeće:

Dodajte prilagođenu CSS klasu.

• CSS klasa: et-popup-login

Dodajte prilagođeni CSS isječak u glavni element:

overscroll-behavior: contain;

Ažurirajte opcije Vidljivost i Položaj.

• Horizontalni preljev: skriven
• Vertikalni preljev: automatski
• Položaj: Fiksno
• Lokacija: Centar Centar
• Z indeks: 999999

Postavke linije

S postavljenim postavkama odjeljka otvorite postavke linije i ažurirajte sljedeće postavke dizajna:

• Koristi prilagođenu širinu oluka: DA
• Širina oluka: 1
• Širina: 100%
• Maksimalna širina: 100%
• Ispuna: 0px (gornje), 5vh (dno)

3. dio: Stvaranje skočne ikone za zatvaranje

Za izradu ikone za zatvaranje skočnog prozora koja će zatvoriti/sakriti skočni prozor nakon klika, koristit ćemo modul Blurb.

Dodajte novi Blurb modul u red.

Otvorite postavke modula i izbrišite naslov i tijelo teksta.

Zatim dodajte ikonu na sljedeći način:

• Koristi ikonu: DA
• Ikona: ikona "x" (pogledajte snimak zaslona)

Ispod kartice dizajnažurirajte sljedeće:

• Boja ikone: #004e43
• Poravnanje slike/ikone: centrirano
• Koristi veličinu fonta ikone: DA
• Veličina fonta ikone: 50 px
• Širina: 50 px
• Modul poravnanja: desno
• Visina: 50 px

Ispod kartice napredan, dodajte CSS klasu modulu Blurb na sljedeći način:

• CSS klasa: et-toggle-popup

Dio 4: Stvaranje obrazaca za prijavu "Prijavljeni" i "Odjavljeni".

Kako bismo imali različit sadržaj i dizajn obrasca za prijavu pri prijavi i odjavi, izradit ćemo dva različita modula obrasca za prijavu. 

Prvi će biti obrazac za prijavu koji će se prikazati svaki put kada se korisnik "odjavi". Drugi će biti obrazac za prijavu koji će se prikazati svaki put kada je korisnik "prijavljen".

Izrada obrasca “Odjavljeni”.

Da biste stvorili obrazac za prijavu "Odjavljeni", dodajte novi modul za prijavu ispod ikone modula Blurb unutar retka.

Otvorite postavke modula i promijenite sljedeće postavke:

Kartica sadržaja

• Preusmjeri na trenutnu stranicu: DA
• Koristite boju pozadine: NE

Kartica Dizajn

• Boja pozadine polja: rgba(0,78,67,0.05)
• Boja pozadine fokusa polja: rgba (0,78,67,0,15)
• Poravnanje teksta: centrirano
• Boja teksta: tamna

• Font naslova: Poppins
• Težina fonta naslova: polu-podebljano
• Boja teksta: #000000
• Visina retka naslova: 1,3 em
• Font tijela: Work Sans

Da biste ažurirali stilove gumba, kopirajte stilove gumba s gumba za prijavu koji smo stvorili u treći stupac u retku odjeljka zaglavlja.

Zatim zalijepite stilove gumba u grupu opcija gumba u postavkama veze na kartici Dizajn.

Zatim ažurirajte stilove gumba za obrazac za prijavu na sljedeći način:

• Button
  • Boja teksta: #ffffff
  • Pozadina: #004e43
  • Pozadina (prelazak): #00683c
  • Širina obruba: 0 piksela
  • Razmak: 15 px (gornji i donji dio)

Zatim ažurirajte opcije veličine na sljedeći način:

• Širina: 100%
• Maksimalna širina: 80% (stolno računalo), 90% (tablet), 95% (telefon)
• Modul poravnanja: centar

Kartica Napredno

Ispod kartice napredanažurirajte CSS klasu i prilagođeni CSS na sljedeći način:

• CSS klasa: et-logged-out-form

Prilagođeni CSS za opis veze:

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

Prilagođeni CSS za obrazac za prijavu:

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

Ovo će osigurati da modul za prijavu obuhvaća cijelu širinu retka/stupca, čak i na radnoj površini.

Izrada forme “Prijavljeni”.

Sada kada je "Odjavljena" verzija obrasca dovršena, moramo stvoriti "Prijavljenu" verziju koja će imati drugačiji sadržaj i stil kako bi se maksimalno povećalo korisničko iskustvo.

Za izradu obrasca za prijavu "Odjavljeni", duplicirajte postojeći obrazac za prijavu.

Zatim ažurirajte oznaku za svaki od obrasci veza odnosno.

Otvorite duplicirane postavke (obrazac “Prijavljeni”) i dodajte naslov stranice kao dinamički sadržaj naslovu modula obrasca za prijavu.

Zatim otvorite postavke dinamičkog sadržaja naslova stranice i ažurirajte sadržaj prije i poslije na sljedeći način:

• Prije: "Pokušavate se odjaviti iz Elegantnih tema"
• Nakon: “. " 

Ovo će stvoriti zgodnu dinamičku obavijest za korisnike koji se pokušavaju odjaviti sa stranice.

Zatim dodajte sljedeće H3 zaglavlje u tijelo:

<h3>Are you sure?</h3>

Ako ste ikada vidjeli sadržaj modula za prijavu kada ste prijavljeni, znate da postoji personalizirana poruka koja uključuje personaliziranu poveznicu "odjava". Kako bi ova veza izgledala kao gumb, moramo prilagoditi postavke fonta/teksta veze tijela na sljedeći način:

• Odaberite karticu Veza pod opcijom Tekst tijela.
• Font veze: Work Sans
• Težina fonta veze: polu podebljano
• Stil fonta: TT
• Poravnanje teksta veze: centrirano
• Boja teksta veze: #ffffff

NAPOMENA: Nećete moći pregledati ove rezultate dok ne pogledate obrazac na stranici uživo.

Ispod kartice napredanažurirajte CSS klasu i prilagođeni CSS na sljedeći način:

• CSS klasa: et-logged-in-form

Prilagođeni CSS za obrazac za prijavu:

display:none;

Dio 5: Dodajte prilagođeni kod

Da biste dodali prilagođeni CSS i JQuery koji su potrebni za funkcionalnost skočnog obrasca za prijavu, stvorite novi modul koda ispod zadnjeg modula za prijavu.

CSS

Otvorite postavke modula koda i zalijepite sljedeći CSS u okvir koda, pazeći da CSS omotate u potrebne oznake stila.

/* 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;
}

Imajte na umu da CSS koristi klasu "connected" koja je ugrađena u WordPress kako bi sakrila/prikazala odgovarajuće gumbe za prijavu/odjavu i obrasci Poruka za prijavu "Prijavljen"/"Odjavljen" svaki put kada je korisnik prijavljen ili odjavljen.

JQuery

Ispod završne oznake stila zalijepite sljedeći JQuery pazeći da umotate kod u potrebne oznake skripte.

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

Ovaj isječak jednostavno uključuje/isključuje skočni odjeljak kad god korisnik klikne na jednu od tri stavke s klasom " and-toggle-popup (gumbi za prijavu i odjavu plus ikona prezentacije "x").

Vidi također: Divi: Kako koristiti postavke pozadinske maske i opcije transformacije uzorka

Učinjeno je !

Ne zaboravite spremiti promjene koje ste napravili na predlošku u alatu za izradu tema. Nakon spremanja, rezultate možete vidjeti na stranici uživo.

Konačni rezultat

Evo konačnih rezultata na računalu, tabletu i telefonu.

Primijetite kako se mijenjaju gumb za prijavu i gumb za odjavu. I kada se korisnik prijavi, ostaje na trenutnoj stranici. 

Dodatno, skočni obrazac za prijavu prikazuje drugačiji sadržaj "upozorenja" svaki put kada se korisnik pokuša odjaviti.

Preuzmite DIVI sada!!!

Zaključak.

Nadamo se da će vam izrada ovog skočnog obrasca za prijavu i prilagođenih gumba za prijavu/odjavu dati uvid u kreativno korištenje Divi obrasca za prijavu. 

Slobodno prilagodite dizajn i sadržaj svakog obrasca za prijavu (ili gumba) kako biste stvorili jedinstveno iskustvo prijave na vlastitoj web stranici.

Također se nadamo da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.

Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.

Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...