Potrebno je stvoriti globalno zaglavlje s obrazac veza u DIVI?
Stvaranje a obrazac prijava u zaglavlju može biti odličan poticaj za korisničko iskustvo.
Idealni su za web stranice s pretplatom i internetske trgovine jer omogućuju korisnicima da se prijave u bilo kojem trenutku na bilo kojoj stranici web stranica.
U ovom vodiču pokazat ćemo vam kako dizajnirati a obrazac online prijava za korisnike na prilagođenom zaglavlju. Započnimo!
pregled
Ovdje je brzi pregled prilagođenog zaglavlja s obrascem za prijavu koji ćemo izraditi u ovom vodiču.
Ovdje je poruka "odjava" i poveznica koja će se prikazati kada su korisnici prijavljeni.
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", zatim kliknite "Izradi globalno zaglavlje".
Divi globalni dizajn zaglavlja s vodoravnim obrascem za prijavu
Prilagodite odjeljak
Iz uređivača Global Header Layout možete stvoriti personalizirano zaglavlje vašeg web stranica Početi ni od čega. Za početak otvorite postavke u normalnom odjeljku i ažurirajte sljedeće:
- Boja gradijenta lijeve pozadine:
- Boja gradijenta desne pozadine:
- Smjer gradijenta: 48 stupnjeva
- Unutarnja margina: 10px gore, 10px dno, 20px lijevo, 20px desno
Kako bi naše zaglavlje bilo osjetljivije, dodat ćemo sljedeći prilagođeni CSS elementu glavnog 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.
Dodaj liniju
Dodajte redak stupcu u odjeljku.
Dodajte modul slike sa slikom logotipa
U retku s jednim stupcem dodajte modul slike. Ovo će biti mjesto gdje ćemo dodati logotip zaglavlja.
Ažuriranje slike i margine slikovnog modula
Ažurirajte postavke slike na sljedeći način:
- Slika: [dodaj logotip (približno 64 x 64 px)]
- Margina: 20px desno
Ažurirajte parametre retka
Prije nego što krenete dalje, otvorite postavke linije i ažurirajte sljedeće:
- Koristi prilagođenu širinu oluka: DA
- Razmak između stupaca: 1
- Maksimalna širina: 25%
- Poravnanje: lijevo
- Unutarnja margina: 0px gore, 0px dno
Dodan vodoravni obrazac za prijavu u drugi red
Dodaj liniju
Sada kada je prvi red spreman, primijetit ćete u uređivaču da će prvi red zauzimati 25% lijevog dijela. Ovo će u osnovi biti linija određena za naš logo zaglavlja. Moramo stvoriti red odjeljka za obrazac za prijavu i izbornik s desne strane.
Dodajte drugi redak sa strukturom u stupac u odjeljku.
Dodajte obrazac za prijavu
Unutar retka s jednim stupcem dodajte modul 'Poveži'.
Uklonite zadani sadržaj
U postavkama modula za prijavu uklonite lažni naslov i sadržaj tijela.
Dodajte prilagođenu klasu za obrazac za prijavu i CSS
Prije nego što odemo predaleko u dizajniranju obrasca za prijavu, prvo dodajmo CSS klasu i prilagođeni CSS modulu za prijavu. Ovo će postaviti osnovnu mrežnu strukturu obrasca prije nego što dovršite dizajn obrasca s Divi ugrađenim opcijama.
Pogledajte i naš vodič na Kako stvoriti klizni i responzivni bočni izbornik u DIVI-ju
Na kartici Napredno dodajte sljedeću CSS klasu:
- CSS klasa: zaglavlje-obrazac za prijavu
Dodajte sljedeći prilagođeni CSS u okvir CSS 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 područje CSS polja za prijavu:
padding: 5px 4% !important
Dodajte prilagođeni CSS postavkama izgleda zaglavlja
Budući da smo dodali našu prilagođenu CSS klasu u modul obrasca za prijavu, možemo dodati naš prilagođeni CSS koji će ciljati samo na taj određeni obrazac za prijavu.
Pročitajte i naš vodič o Kako izraditi blog stranicu s modulom Blog s DIVI
Otvorite postavku izgleda 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 će uzrokovati da se polja za prijavu i gumb prikažu u liniji (vodoravno), poruka "Zaboravili ste lozinku?" bit će skriveno, a dodat će se mala margina između polja.
Postavke linije
Prije nego što završimo obrazac za prijavu, ažurirajmo parametre retka na sljedeći način:
- Koristi prilagođenu širinu žlijeba: DA
- Razmak između stupaca: 1
- Poravnanje: desno
- Unutarnja margina: 0px gore, 0px dno
Dizajn postavki za obrazac za prijavu
Sada smo spremni ažurirati postavke obrasca za prijavu. Otvorite postavke modula Connect i ažurirajte sljedeće:
- Koristite boju pozadine: NE
Tekst polja i veze
- Polja boje pozadine: rgba(255,255,255,0.2)
- Polja boja teksta: #ffffff
- Font polja: Lato
- Polja veličine teksta: 14 px
- Poravnanje teksta: desno
Dizajn gumba
- Koristite prilagođene stilove za gumb: NE
- Veličina teksta gumba: 15 px
- Pozadinski gumb: #ff3190
- Gumb širine obruba: 0 piksela
- Font gumba: Lato
- Gumb margine: 2 px na vrhu, 2 px na dnu
- Gumb za podstavu: 15 px dno
- Unutarnja margina: 0px gore, 0px dno, 0px lijevo, 0px desno
Dodavanje izbornika u drugi redak
Modul izbornika
Uz naš obrazac za prijavu na mjestu, možemo dodati izbornik izravno ispod.
Dodajte modul Izbornik ispod modula Prijava.
Postavke modula izbornika
Ažurirajte postavke izbornika na sljedeći način:
- Pozadina: rgba(0,0,0,0)
- Izbornik fonta: Lato
- Izbornik za meko svjetlo: Podebljano
- Boja teksta izbornika: #ffffff
- Veličina teksta izbornika: 16px
- Poravnanje teksta: desno
- Boja pozadine padajućeg izbornika: #ffffff
- Boja padajućeg retka: rgba(0,0,0,0)
- Boja teksta padajućeg izbornika: #000000
- Boja pozadine mobilnog izbornika: #ffffff
- Boja teksta mobilnog izbornika: #000000
- Boja ikone košarice: #ffffff
- Boja ikone pretraživanja: #ffffff
- Boja ikone jelovnika hamburgera: #ffffff
Spremanje zaglavlja obrasca za prijavu
Svakako spremite izgled prije izlaska iz uređivača zaglavlja.
Zatim spremite i postavke Theme Buildera.
Konačni rezultati
Učinjeno je !
Sada da vidimo konačni rezultat. Da biste vidjeli krajnji rezultat, sve što trebate učiniti je posjetiti stranicu na vašoj web stranici.
I to je ono što će korisnik vidjeti kada se prijavi.
Preuzmite DIVI odmah!!!
Zaključak
Ovo prilagođeno globalno zaglavlje s obrascem za prijavu svakako će dobro doći za bilo koje web mjesto s pretplatom ili online trgovinu.
Uz samo malo prilagođenog CSS-a, uspjeli smo pretvoriti Divijev modul za prijavu u elegantan obrazac za prijavu koji će se savršeno uklopiti u zaglavlje bilo koje web stranice.
Nadam se da će ovo biti korisno za vaš sljedeći projekt. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara raspravljati o tome.
Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu 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.
...
