Stvaranje a obrazac Inline prijava za vaše zaglavlje može biti ogroman poticaj korisničkom iskustvu. Savršeni su za stranice sa članstvom i online trgovine jer omogućavaju korisnicima da se prijave u bilo koje vrijeme i na bilo kojoj stranici stranice.
U ovom vodiču ćemo vam pokazati kako dizajnirati a obrazac online koristeći prilagođeno zaglavlje na Divi Theme Builderu. Da bismo to uradili, kreiraćemo jednostavno responzivno globalno zaglavlje, a zatim dizajnirati a obrazac kompaktna onlajn prijava u gornjem desnom uglu zaglavlja pomoću Divi-ovog modula za prijavu. Izrada zahteva malo prilagođenog CSS koda, ali kada sve bude na svom mestu, biće lako prilagoditi formular za prijavu na mreži tako da se lako podudara sa bilo kojim dizajnom zaglavlja koristeći opcije dizajna Divi integrisane usluge.
Pregled rezultata
Evo kratkog pregleda prilagođenog zaglavlja sa mrežnim obrascem za prijavu koji ćemo stvoriti u ovom vodiču.
I ovdje je mrežni obrazac za prijavu na ekranu tableta i telefona.
Ovdje je poruka o odjavi i veza koja će se prikazati kada su korisnici prijavljeni.
Šta vam je potrebno za početak
Ako već niste, instalirajte i aktivirajte temu Divi . To je gotovo sve što vam treba za početak. Stvorićemo novi izgled predloška zaglavlja od nule pomoću Divi Theme Builder-a.
Dodavanje novog globalnog zaglavlja
Da bi stvari krenule, moramo kreirati novo globalno zaglavlje za naše site Web. Da biste to učinili, idite na WordPress kontrolnu ploču i idite na Divi > Theme Builder.
Na predložak web stranice po defaultu, kliknite na "Dodaj globalno zaglavlje", a zatim "Kreiraj globalno zaglavlje".
Zatim odaberite opciju Izrada od nule.
Dizajnirajte globalno zaglavlje Divi pomoću mrežnog obrasca za prijavu
Prilagođavanje odjeljaka
Iz Globalnog uređivača rasporeda zaglavlja moći ćete u potpunosti stvoriti prilagođeno zaglavlje vaše web lokacije. Za početak otvorite postavke redovnog odjeljka i ažurirajte sljedeće:
- Lijevi gradijent pozadine boje:
- Desni gradijent pozadine:
- Smjer gradijenta: 48 stepeni
- Padding: 10 piksela na vrhu, 10 piksela na dnu, 20 piksela na lijevoj strani, 20 piksela s desne strane
Da bismo učinili naše prilagođeno zaglavlje prilagodljivijim, dodaćemo sljedeći prilagođeni CSS glavnom elementu odjeljka.
display:flex;justify-content:center;align-items:center;
U prvi red dodajte logotip zaglavlja
Sada kada je odjeljak spreman, možemo dodati prvi red.
Dodajte red
Dodajte redak u stupac u odjeljak.
Dodajte modul slike sa slikom logotipa
U red s jednim stupcem dodajte modul slike. Tu ćemo dodati logotip za zaglavlje.
Ažurirajte sliku i marginu modula slike
Ažurirajte postavke slike na sljedeći način:
- Slika: [dodajte logotip (približno 64 piksela sa 64 piksela)]
- Marža: 20 piksela desno
Ažuriranje parametara linije
Prije nego što nastavite dalje, otvorite postavke reda i ažurirajte sljedeće:
- Koristite prilagođenu širinu oluka: DA
- Širina oluka: 1
- Širina: 25%
- Poravnanje reda: lijevo
- Padding: 0px visoko, 0px low
Dodavanje mrežnog obrasca za prijavu u drugi red
Dodajte red
Sad kad je prvi red spreman, primijetit ćete u uređivaču da će prvi red zauzimati 25% lijevog odjeljka. Ovo će u osnovi biti označena linija za naš logotip zaglavlja. Moramo stvoriti liniju odjeljka za obrazac i meni za online prijavu s desne strane.
Odjeljku dodajte drugi red sa strukturom od jednog stupca.
Dodajte obrazac za prijavu
U red stupca dodajte modul za prijavu.
Uklonite zadani sadržaj
U postavkama veze uklonite lažni naslov i sadržaj tijela.
Dodajte obrazac za prijavu i prilagođenu CSS klasu
Prije nego što krenemo predaleko u dizajniranje mrežnog obrasca za prijavu, dodajmo prvo prilagođene CSS i CSS klase u modul za prijavu. To će nam omogućiti da postavimo osnovnu mrežnu strukturu obrasca prije stavljanja konačnog dizajna na obrazac s ugrađenim opcijama Divi.
Na kartici Advanced dodajte sljedeću CSS klasu:
- CSS klasa: header-login-form
Dodajte sljedeći prilagođeni CSS u CSS područje opisa veze:
margin-bottom: 0px !important
Zatim dodajte sljedeći prilagođeni CSS u CSS područje obrasca za prijavu:
width: 100%;
Dodajte sljedeći prilagođeni CSS u CSS polje polja za prijavu:
padding: 5px 4% !important
Dodajte prilagođeni CSS u postavke rasporeda zaglavlja
Budući da smo u modul obrasca za prijavu dodali svoju prilagođenu CSS klasu, možemo dodati svoj prilagođeni CSS koji će ciljati samo taj određeni obrazac za prijavu.
Otvorite postavku rasporeda zaglavlja i dodajte sljedeći prilagođeni CSS:
.header-login-form .et_pb_login_form form {display: flex;justify-content: flex-end;align-items: center;}.header-login-form .et_pb_login_form .et_pb_contact_form_field {padding-bottom: 0px;margin-right: 5px;}.header-login-form .et_pb_forgot_password {display:none;}
Ovim CSS-om učinit će se polja za prijavu i dugme pojaviti u liniji (vodoravno), sakriti vezu "Zaboravili ste lozinku?". »I dodajte malu marginu između polja.
Postavke linije
Prije nego što završimo s obrascem za prijavu na mreži, ažurirajmo postavke reda kako slijedi:
- Koristite prilagođenu širinu oluka: DA
- Širina oluka: 1
- Poravnanje linija: ravno
- Padding: 0px visoko, 0px low
Postavke dizajna obrasca za prijavu
Sada smo spremni za ažuriranje postavki obrasca za prijavu. Otvorite postavke modula za obrazac za prijavu i ažurirajte sljedeće:
- Koristite boju pozadine: NE
Tekst polja i veze
- Pozadina polja: Boja: rgba (255,255,255,0.2)
- Boja teksta polja: #ffffff
- Policijska policija: Lato
- Veličina teksta polja: 14px
- Poravnanje teksta: desno
- Font veze: Lato
- Stil fonta veze: podvučeno
- Boja teksta veze: # ff3190
Dizajn dugmeta
- Veličina teksta dugmeta: 15px
- Boja pozadine dugmeta: # ff3190
- Širina granice gumba: 0px
- Gumb fonta: Lato
- Podloga za dugmad: 2 piksela gore, 2 piksela dolje
- Margina: 15px niska
- Podstava: 0px gore, 0px dolje, 0px lijevo, 0px desno
Dodavanje izbornika u drugi red
Modul izbornika
Ako postavimo obrazac za prijavu na mreži, možemo dodati meni direktno ispod.
Dodajte modul izbornika ispod modula obrasca za prijavu.
Parametri modula izbornika
Ažurirajte postavke menija na sljedeći način:
- Boja pozadine: rgba (0,0,0,0)
- Font menija: Lato
- Težina fonta menija: podebljano
- Boja teksta u meniju: #ffffff
- Veličina teksta u meniju: 16px
- Poravnanje teksta: desno
- Boja pozadine padajućeg izbornika: #ffffff
- Boja linije padajućeg izbornika: rgba (0,0,0,0)
- Boja teksta padajućeg izbornika: # 000000
- Boja pozadine izbornika za mobilne uređaje: #ffffff
- Boja teksta mobilnog menija: # 000000
- Boja ikone košarice: #ffffff
- Boja ikone pretraživanja: #ffffff
- Boja ikone menija za hamburger: #ffffff
Spremanje zaglavlja obrasca za prijavu
Obavezno spremite izgled prije izlaska iz uređivača rasporeda zaglavlja.
Zatim također spremite postavke graditelja tema.
Konačni rezultati
To je to!
Sada da vidimo konačan rezultat. Da biste vidjeli konačni rezultat, jednostavno posjetite svoju stranicu site Web.
Evo zaglavlja na ekranu radne površine.
Evo zaglavlja mrežnog obrasca za prijavu na ekranu tableta.
I ovdje je mrežni obrazac za prijavu na ekranu telefona. Obratite pažnju i na meni za mobilne uređaje.
I ovo je ono što će korisnik vidjeti kada se prijavi.
Final misli
Ovo prilagođeno globalno zaglavlje s obrascem za prijavu na mreži će svakako biti od koristi za bilo koju stranicu za članstvo ili online trgovinu. Sa samo malo prilagođenog CSS-a, uspjeli smo pretvoriti Divi-ov modul za prijavu u elegantan online obrazac za prijavu koji bi izgledao dobro u zaglavlju bilo kojeg site Web. Nadam se da će ovo biti od pomoći za vaš sljedeći projekat.
Jedva čekam da se čujemo u komentarima.
Na vaše zdravlje!
