Divi: Kako kreirati iskačući obrazac za prijavu

Želite li kreirati a obrazac popup prijava u Divi sa dugmadima za prijavu/odjavu?

Stvaranje a obrazac iskačući prozor za prijavu divi može biti efikasan način da poboljšate dizajn vaše stranice i korisničko iskustvo prijavljivanja/odjavljivanja. 

Ideja je da se stvori a obrazac prijava koja se prikazuje u iskačućem prozoru svaki put kada korisnik klikne dugme za prijavu u zaglavlju stranice. 

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

U ovom vodiču ćemo kreirati iskačući obrazac za prijavu s prilagođenim gumbima za prijavu i odjavu u Diviju. 

Koristeći Divi Login modul i nekoliko Button modula, kreirat ćemo besprijekorno iskačuće iskustvo prijave na front-endu omogućavajući korisnicima da se prijave i odjave bez preusmjeravanja na drugu stranicu.

Počnimo!

pregled

Evo kratkog pogleda na dizajn koji ćemo kreirati u ovom vodiču.

Obratite pažnju na to kako se menjaju dugme za prijavu i dugme za odjavu. I, kada se korisnik prijavi, ostaje na trenutnoj stranici. 

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

Šta vam je potrebno za početak

Iako možete dodati ovaj iskačući obrazac za prijavu i prilagođena dugmad za prijavu/odjavu u bilo koje prilagođeno zaglavlje, mi ćemo koristiti unaprijed napravljeno zaglavlje da ubrzamo proces i brzo započnemo dizajn.

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

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

Zatim unesite svoju e-poštu da preuzmete zip datoteku.

Nakon toga, raspakirajte datoteku tako da bude spremna za uvoz.

Da biste uvezli datoteku u uređivač tema, slijedite ove korake:

1. Idite na Divi > Theme Builder.
2. Kliknite na ikonu prenosivosti.
3. U iskačućem prozoru Portability izaberite karticu uvoz.
4. Odaberite prethodno preuzetu raspakiranu datoteku za uvoz.
5. Kliknite na Uvezite Divi Theme Builder Obrasci.
6. Kliknite na ikonu za uređivanje da uredite uvezeno zaglavlje.

Kreiranje iskačućeg obrasca za prijavu u Divi

Dio 1: Kreiranje dugmadi za prijavu i odjavu

Jednom u Global Header Layout Editoru, otvorite pogled sloja tako da možete lako vidjeti sve elemente.

U gornjem redu sekcije zaglavlja izbrišite modul Pratite društvene mreže pored dugmeta Prijava u koloni 3.

Pročitajte takođe: Divi: Poređenje različitih tipova nagiba

Kreiranje dugmeta za prijavu

Da kreirate naše dugme za prijavu, otvorite postavke modula dugmeta u koloni 3 gornjeg reda.

Ažurirajte sljedeće stavke na kartici dizajna:

• Ikona dugmeta: ikona zaključavanja (pogledajte snimak ekrana)
• Položaj ikone dugmeta: desno
• Prikaži samo ikonu pri prelasku za dugme : NE
• Padding: 0,5em (gornji i donji), 2em (lijevo), 0,7em (desno)

Ispod kartice Napredan, dodijelite gumbu dvije prilagođene CSS klase kako slijedi:

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

Kreiranje dugmeta za odjavu

Da kreirate naše dugme za odjavu, duplirajte postojeće dugme za prijavu u kolonu 3.

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

Promijenite tekst gumba tako da glasi "Odjava".

Ažurirajte sljedeće stavke na kartici dizajna:

• Ikona dugmeta: ikona za otključavanje (pogledajte snimak ekrana)

Ispod kartice Napredan, ažurirajte dugme CSS Classes na sledeći način:

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

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

Dio 2: Kreiranje iskačuće sekcije

Kada su dugmad gotova, spremni smo da kreiramo iskačući odeljak koji će služiti kao naš skočni prozor koji sadrži forme veza.

Ispod odjeljka zaglavlja dodajte novi redovni odjeljak.

Zatim umetnite red sa jednom kolonom unutar sekcije.

Postavke odjeljka

Prije ažuriranja reda, otvorite postavke odjeljka.

Ispod kartice sadržaj, dajte odeljku bijelu boju pozadine:

• Pozadina: #ffffff

Ispod kartice dizajn, ažurirajte sljedeće:

• Širina: 100%
• Maksimalna širina: 800px (Desktop), 80% (tablet), 100% (telefon)
• Poravnanje preseka: centar
• Visina: automatski (stolni i tablet), 100% (telefon)
• Maksimalna visina: 100%
• Padding: 0px (vrh i dno)

• Zaobljeni uglovi: 10px
• Box Shadow: pogledajte snimak ekrana
• Box Shadow Vertikalna pozicija: 0px
• Jačina zamućenja: 100 piksela
• Snaga širenja: 50px

Ispod kartice Napredan, ažurirajte sljedeće:

Dodajte prilagođenu CSS klasu.

• CSS klasa: et-popup-login

Dodajte prilagođeni CSS isječak glavnom elementu:

overscroll-behavior: contain;

Ažurirajte opcije Vidljivost i Položaj.

• Horizontalni preliv: skriven
• Vertikalni preliv: auto
• Položaj: fiksni
• Lokacija: Centar Centar
• Z indeks: 999999

Postavke linije

Sa 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%
• Padding: 0px (vrh), 5vh (dolje)

Dio 3: Kreiranje ikone za zatvaranje

Za kreiranje ikone za zatvaranje iskačućeg prozora koja će zatvoriti/sakriti iskačući prozor na klik, koristićemo modul Blurb.

Dodajte novi Blurb modul u red.

Otvorite postavku modula i izbrišite naslov i osnovni tekst.

Zatim dodajte ikonu na sljedeći način:

• Koristite ikonu : DA
• Ikona: ikona "x" (pogledajte snimak ekrana)

Ispod kartice dizajn, ažurirajte sljedeće:

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

Ispod kartice Napredan, dodajte CSS klasu u Blurb modul na sljedeći način:

• CSS klasa: et-toggle-popup

Dio 4: Kreiranje obrazaca za prijavu „Prijavljeni“ i „Odjavljeni“.

Kako bismo imali različit sadržaj i dizajn obrasca za prijavu prilikom prijave i odjave, kreirat ć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 se korisnik "prijavljuje".

Kreiranje obrasca “Odjavljeni”.

Da biste kreirali obrazac za prijavu „Odjavljeni“, dodajte novi modul za prijavu ispod ikone Blurb modula unutar reda.

Otvorite postavke modula i promijenite sljedeće postavke:

Kartica Sadržaj

• Preusmjeravanje na trenutnu stranicu: DA
• Koristi 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: polupodebljano
• Boja teksta: #000000
• Visina retka naslova: 1,3 em
• Font tijela: Work Sans

Da biste ažurirali stilove dugmadi, kopirajte stilove dugmadi sa dugmeta za prijavu koje smo kreirali u treću kolonu u redu odeljka 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:

• Dugme
  • Boja teksta: #ffffff
  • Pozadina: #004e43
  • Pozadina (lebdenje): #00683c
  • Širina ivice: 0 piksela
  • Padding: 15px (gore i dno)

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

• Širina: 100%
• Maksimalna širina: 80% (stoni računar), 90% (tablet), 95% (telefon)
• Modul za poravnanje: Centar

Napredna kartica

Ispod kartice Napredan, až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 obuhvata punu širinu reda/kolone, čak i na desktopu.

Kreiranje obrasca „Prijavljeni“.

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

Da biste kreirali obrazac za prijavu "Odjavljeni", duplirajte postojeći obrazac za prijavu.

Zatim ažurirajte oznaku za svaku od njih forme vezu.

Otvorite duplirane 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 s Elegantnih tema"
• Nakon: “. " 

Ovo će stvoriti lijepo dinamično obavještenje 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 personalizirani link za "odjavu". Da bi ova veza izgledala kao dugme, moramo prilagoditi postavke fonta/teksta veze tijela na sljedeći način:

• Odaberite karticu link pod opcijom body-text.
• Font veze: Work Sans
• Težina fonta veze: Semi Bold
• 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 Napredan, až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 funkciju iskačućeg obrasca za prijavu, kreirajte novi modul Code ispod zadnjeg modula za prijavu.

CSS

Otvorite postavke modula Code i zalijepite sljedeći CSS u okvir za kod, pazeći da umotate CSS 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 sakrio/prikazao odgovarajuća dugmad za prijavu/odjavu i forme Poruka za prijavu “Prijavljen”/”Odjavljen” svaki put kada je korisnik prijavljen ili odjavljen.

JQuery

Ispod oznake završnog 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 skočni odjeljak kad god korisnik klikne na jednu od tri stavke s klasom " and-toggle-popup (dugmad za prijavu i odjavu plus ikona prezentacije "x").

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

Gotovo je!

Ne zaboravite da sačuvate promene koje ste napravili na šablonu u alatu za pravljenje tema. Kada ih sačuvate, možete pogledati rezultate na stranici uživo.

Konačni rezultat

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

Obratite pažnju kako se menjaju dugme za prijavu i dugme za odjavu. I, kada se korisnik prijavi, korisnik ostaje na trenutnoj stranici. 

Dodatno, iskačući 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 kreiranje ovog iskačućeg obrasca za prijavu i prilagođenih gumba za prijavu/odjavu dati uvid u to kako kreativno koristiti Divi-ov obrazac za prijavu. 

Slobodno prilagodite dizajn i sadržaj svakog obrasca za prijavu (ili dugmadi) 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 bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.

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

Ne ustručavajte se da konsultujete i naš vodič o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.

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

...