Stvaranje a obrazac Inline prijava za vaše zaglavlje može biti ogroman poticaj korisničkom iskustvu. Savršene su za stranice za članstvo i internetske trgovine jer omogućuju korisnicima da se prijave bilo kada i na bilo kojoj stranici stranice.
U ovom vodiču pokazat ćemo vam kako dizajnirati a obrazac online pomoću prilagođenog zaglavlja na Divi Theme Builderu. Da bismo to učinili, stvorit ćemo jednostavno responzivno globalno zaglavlje, a zatim dizajnirati a obrazac kompaktnu online prijavu u gornjem desnom kutu zaglavlja pomoću Divi modula za prijavu. Izrada zahtijeva malo prilagođenog CSS koda, ali kada sve bude postavljeno, bit će lako prilagoditi online obrazac za prijavu kako bi se lako uklopio s bilo kojim dizajnom zaglavlja korištenjem opcija dizajna Divi integriranih usluga.
Pregled rezultata
Evo kratkog pregleda prilagođenog zaglavlja s 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 pojaviti kad se korisnici prijave.
Što trebate za početak
Ako već niste, instalirati i aktivirati temu Divi . To je gotovo sve što vam treba za početak. Stvorit ćemo novi izgled predloška zaglavlja ispočetka s Divi Theme Builder.
Dodavanje novog globalnog zaglavlja
Da bismo pokrenuli stvari, moramo stvoriti novo globalno zaglavlje za naš web stranica. Da biste to učinili, idite na WordPress nadzornu ploču i idite na Divi > Theme Builder.
Na predložak web stranice prema zadanim postavkama kliknite "Dodaj globalno zaglavlje", a zatim "Stvori globalno zaglavlje".
Zatim odaberite opciju Izgradi od nule.
Dizajnirajte globalno zaglavlje Divi s mrežnim obrascem za prijavu
Prilagodba odjeljka
Iz Globalnog uređivača rasporeda zaglavlja moći ćete u potpunosti stvoriti prilagođeno zaglavlje vaše web stranice. Za početak otvorite redovite postavke odjeljka i ažurirajte sljedeće:
- Lijevi gradijent pozadine boje:
- Desni gradijent pozadine:
- Smjer gradijenta: 48 stupnjeva
- Padding: 10 piksela na vrhu, 10 piksela na dnu, 20 piksela na lijevoj strani, 20 piksela s desne strane
Kako bismo učinili naše prilagođeno zaglavlje prilagodljivijim, dodat ćemo sljedeći prilagođeni CSS glavnom elementu odjeljka.
display:flex;justify-content:center;align-items:center;
U prvi redak dodajte logotip zaglavlja
Sada kada je odjeljak spreman, možemo dodati prvi redak.
Dodajte red
Dodajte redak stupcu u odjeljku.
Dodajte modul slike sa slikom logotipa
U redak s jednim stupcem dodajte modul slike. Tu ćemo dodati logotip za zaglavlje.
Ažuriranje slike i margine slikovnog modula
Ažurirajte postavke slike na sljedeći način:
- Slika: [dodajte logotip (približno 64 piksela na 64 piksela)]
- Margina: 20px 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%
- Poravnavanje reda: lijevo
- Padding: 0px visoko, 0px low
Dodavanje internetskog obrasca za prijavu u drugi redak
Dodajte red
Sad kad je prvi redak spreman, u uređivaču ćete primijetiti da će prvi red zauzimati 25% lijevog odjeljka. To će u osnovi biti označena linija za naš logotip zaglavlja. Moramo stvoriti redak odjeljka za obrazac i izbornik mrežne prijave s desne strane.
Dodajte drugi redak sa strukturom u stupac u odjeljku.
Dodajte obrazac za prijavu
U redak stupca dodajte modul za prijavu.
Uklonite zadani sadržaj
U postavkama prijave izbrišite 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 najprije 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 Napredno dodajte sljedeću CSS klasu:
- CSS klasa: oblik zaglavlja-prijava
Dodajte sljedeći prilagođeni CSS u CSS područje opisa opisa:
margin-bottom: 0px !important
Zatim dodajte sljedeći prilagođeni CSS u CSS područje obrasca za prijavu:
width: 100%;
U okvir CSS polja polja za povezivanje dodajte sljedeći prilagođeni CSS:
padding: 5px 4% !important
Dodajte prilagođeni CSS u postavke rasporeda zaglavlja
Budući da je u modul forme za prijavu dodana naša prilagođena klasa CSS, možemo dodati naš prilagođeni CSS koji će ciljati samo na ovaj 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;}
Ovaj CSS uzrokovat će da se polja za prijavu i gumb prikazuju u liniji (vodoravno), sakrivajući vezu "Zaboravili ste lozinku?". »I dodajte malu marginu između polja.
Postavke linije
Prije stavljanja završnih dodira na obrazac za prijavu na mreži, ažurirajmo parametre linije na sljedeći način:
- Koristite prilagođenu širinu oluka: DA
- Širina oluka: 1
- Poravnavanje linija: ravna
- Padding: 0px visoko, 0px low
Dizajn postavki za obrazac za prijavu
Sada smo spremni za ažuriranje postavki obrasca za prijavu. Otvorite postavke modula obrasca 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
- Terenska policija: Lato
- Veličina teksta polja: 14px
- Poravnavanje teksta: desno
- Font veze: Lato
- Stil fonta veze: podvučeno
- Boja teksta veze: # ff3190
Dizajn gumba
- Veličina teksta gumba: 15px
- Boja pozadine gumba: # ff3190
- Širina obruba gumba: 0px
- Font gumba: Lato
- Umetanje gumba: 2 px na vrhu, 2px na dnu
- Margina: 15px niska
- Padding: 0px na vrhu, 0px na dnu, 0px na lijevoj strani, 0px na desnoj strani
Dodavanje izbornika u drugi redak
Modul izbornika
S postavljenim mrežnim obrascem za prijavu, izbornik možemo dodati izravno ispod.
Dodajte modul izbornika pod modul obrasca za prijavu.
Postavke modula izbornika
Ažurirajte postavke izbornika na sljedeći način:
- Boja pozadine: rgba (0,0,0,0)
- Font menija: Lato
- Težina slova u izborniku: podebljano
- Boja teksta izbornika: #ffffff
- Veličina teksta izbornika: 16px
- Poravnavanje teksta: desno
- Boja pozadine padajućeg izbornika: #ffffff
- Boja linija na padajućem izborniku: rgba (0,0,0,0)
- Boja teksta padajućeg izbornika: # 000000
- Boja pozadine izbornika za mobilne uređaje: #ffffff
- Boja teksta mobilnog izbornika: # 000000
- Boja ikone košarice: #ffffff
- Boja ikone pretraživanja: #ffffff
- Boja ikone izbornika hamburgera: #ffffff
Spremanje zaglavlja obrasca za prijavu
Svakako spremite izgled prije izlaska iz uređivača izgleda zaglavlja.
Zatim također spremite postavke generatora tema.
Konačni rezultati
To je to!
Sada da vidimo konačni rezultat. Da biste vidjeli konačni rezultat, jednostavno posjetite svoju stranicu web stranica.
Evo zaglavlja na zaslonu radne površine.
Ovdje je zaglavlje mrežnog obrasca za prijavu na zaslonu tableta.
I ovdje je mrežni obrazac za prijavu na zaslonu telefona. Također imajte na umu izbornik za mobilne uređaje.
I to je ono što će korisnik vidjeti kada se prijavi.
Završne misli
Ovo prilagođeno globalno zaglavlje s mrežnim obrascem za prijavu svakako će dobro doći bilo kojoj stranici za članstvo ili internetskoj trgovini. Uz samo malo prilagođenog CSS-a, uspjeli smo pretvoriti Divijev modul za prijavu u elegantan online obrazac za prijavu koji bi dobro izgledao u zaglavlju bilo kojeg web stranica. Nadam se da će ovo biti od pomoći za vaš sljedeći projekt.
Jedva čekam da se čujemo u komentarima.
Na vaše zdravlje!
