Opprettelsen av en skjema Innebygd pålogging for headeren din kan være et enormt løft for brukeropplevelsen. De er perfekte for medlemssider og nettbutikker fordi de lar brukere logge inn når som helst og på hvilken som helst side på nettstedet.
I denne opplæringen vil vi vise deg hvordan du designer en skjema online ved å bruke en egendefinert overskrift på Divi Theme Builder. For å gjøre dette lager vi en enkel responsiv global header og designer deretter en skjema kompakt online pålogging øverst til høyre i overskriften ved hjelp av Divis påloggingsmodul. Byggingen krever litt tilpasset CSS-kode, men når alt er på plass, vil det være enkelt å tilpasse online påloggingsskjemaet slik at det enkelt matcher et hvilket som helst headerdesign ved å bruke designalternativene Divis integrerte tjenester.
Resultatoversikt
Her er en rask oversikt over den tilpassede overskriften med det online påloggingsskjemaet som vi skal lage i denne opplæringen.
Og her er det elektroniske påloggingsskjemaet på skjermen på nettbrettet og telefonen.
Her er avloggingsmeldingen og lenken som vises når brukerne er pålogget.
Hva du trenger for å komme i gang
Hvis du ikke allerede har gjort det, installer og aktiver Divi-temaet . Det er stort sett alt du trenger for å komme i gang. Vi skal lage et nytt toppmalmalayout fra bunnen av med Divi Theme Builder.
Legger til en ny global overskrift
For å få ting til å gå, må vi lage en ny global header for vår nettstedet Web. For å gjøre dette, naviger til WordPress-dashbordet og naviger til Divi > Theme Builder.
På nettstedsmal som standard klikker du på "Legg til global overskrift" og deretter "Opprett global overskrift".
Velg deretter alternativet Bygg fra bunnen av.
Design Divi globale overskrift med et online påloggingsskjema
Tilpasning av seksjoner
Fra Global Header Layout Editor vil du kunne opprette nettstedets tilpassede topptekst fullstendig. For å komme i gang, åpne de vanlige seksjonsinnstillingene og oppdater følgende:
- Venstre bakgrunnsgradient i farge:
- Høyre bakgrunnsgradient:
- Gradientretning: 48 grader
- Polstring: 10 piksler øverst, 10 piksler nederst, 20 piksler til venstre, 20 piksler til høyre
For å gjøre den tilpassede overskriften vår mer responsiv, vil vi legge til følgende tilpassede CSS i hovedseksjonselementet.
display:flex;justify-content:center;align-items:center;
Legg til topptekstlogo på første linje
Nå som delen er klar, kan vi legge til den første linjen.
Legg til en rad
Legg til en rad i en kolonne i seksjonen.
Legg til en bildemodul med et logobilde
Legg til en bildemodul i raden med en kolonne. Dette vil være der vi vil legge til logoen for overskriften.
Oppdater Margin for bilde og bildemodul
Oppdater bildeinnstillingene som følger:
- Bilde: [legg til logo (ca. 64 piksler med 64 piksler)]
- Marginen: 20px riktig
Oppdater linjeparametere
Før du går videre, åpner du radinnstillingene og oppdaterer følgende:
- Bruk en tilpasset rennebredde: JA
- Rennesteinsbredde: 1
- Bredde: 25%
- Radjustering: venstre
- Polstring: 0px høy, 0px lav
Legger online påloggingsskjema til den andre linjen
Legg til en rad
Nå som den første raden er klar, vil du merke i redaktøren at den første raden vil oppta 25% av venstre seksjon. Dette vil i utgangspunktet være den angitte linjen for topptekstlogoen vår. Vi må lage en snittlinje for skjemaet og online påloggingsmenyen på høyre side.
Legg til en andre rad med struktur i en kolonne i delen.
Legg til et påloggingsskjema
Legg til en påloggingsmodul på raden i en kolonne.
Fjern standardinnhold
Under innloggingsinnstillinger, slett den falske tittelen og innholdet på kroppen.
Legg til et påloggingsskjema og en tilpasset CSS-klasse
Før vi går for langt inn i utformingen av det online påloggingsskjemaet, la oss først legge til de tilpassede CSS- og CSS-klassene i påloggingsmodulen. Dette vil tillate oss å sette opp den grunnleggende online strukturen til skjemaet før vi setter det endelige designet på skjemaet med Divis innebygde alternativer.
I kategorien Avansert legger du til følgende CSS-klasse:
- CSS-klasse: header-login-form
Legg til følgende tilpassede CSS i tilkoblingsbeskrivelsen CSS-området:
margin-bottom: 0px !important
Legg deretter til følgende tilpassede CSS i CSS-området på påloggingsskjemaet:
width: 100%;
Legg til følgende tilpassede CSS i Connection Fields CSS-boksen:
padding: 5px 4% !important
Legg til tilpasset CSS i innstillinger for topptekstoppsett
Siden vi har vår tilpassede CSS-klasse lagt til påloggingsformularmodulen, kan vi legge til vår tilpassede CSS som bare vil målrette mot dette spesifikke påloggingsskjemaet.
Åpne innstillingen for topptekstoppsett og legg til følgende tilpassede 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;}
Denne CSS vil føre til at påloggingsfeltene og knappen vises innebygd (horisontalt), skjul lenken "Har du glemt passordet ditt?". »Og legg til en liten margin mellom feltene.
Linjeinnstillinger
Før du legger siste hånd på online påloggingsskjema, la oss oppdatere linjeparametrene som følger:
- Bruk en tilpasset rennebredde: JA
- Rennesteinsbredde: 1
- Linjejustering: rett
- Polstring: 0px høy, 0px lav
Designinnstillinger for påloggingsskjemaet
Vi er nå klare til å oppdatere innstillingene for påloggingsskjemaet. Åpne innstillingene for påloggingsskjema modulen og oppdater følgende:
- Bruk bakgrunnsfarge: NEI
Felt og lenketekst
- Feltbakgrunn: Farge: rgba (255,255,255,0.2)
- Felttekstfarge: #ffffff
- Feltpoliti: Lato
- Felttekststørrelse: 14px
- Tekstjustering: høyre
- Link font: Lato
- Link Font Style: Understreket
- Tekstfarge på lenken: # ff3190
Knappdesign
- Knapptekststørrelse: 15px
- Knapp Bakgrunnsfarge: # ff3190
- Bredde på knappens kantlinje: 0px
- Knapp skrifttype: Lato
- Knappepolstring: 2px øverst, 2px i bunnen
- Margin: 15px lav
- Polstring: 0px øverst, 0px nederst, 0px til venstre, 0px til høyre
Legger til menyen på den andre linjen
Menymodul
Med vårt online påloggingsskjema på plass, kan vi legge til menyen rett nedenfor.
Legg til en menymodul under påloggingsformularmodulen.
Innstillinger for menymodulen
Oppdater menyinnstillingene som følger:
- Bakgrunnsfarge: rgba (0,0,0,0)
- Menytype: Lato
- Meny skriftvekt: fet
- Menytekstfarge: #ffffff
- Menytekststørrelse: 16px
- Tekstjustering: høyre
- Rullegardinmenyens bakgrunnsfarge: #ffffff
- Farge på linjen i rullegardinmenyen: rgba (0,0,0,0)
- Tekstfarge på rullegardinmenyen: # 000000
- Bakgrunnsfarge på mobilmeny: #ffffff
- Tekstfarge på mobilmeny: # 000000
- Handlekurv Ikon Farge: #ffffff
- Søkeikonfarge: #ffffff
- Hamburger-menyikonfarge: #ffffff
Lagrer overskriften på påloggingsskjemaet
Husk å lagre oppsettet før du avslutter Editor for topptekstoppsett.
Lagre også temageneratorinnstillingene.
Endelige resultater
Det er det!
La oss nå se det endelige resultatet. For å se det endelige resultatet, gå ganske enkelt til en side av din nettstedet Web.
Her er overskriften på skrivebordet.
Her er overskriften på det online påloggingsskjemaet på nettbrettskjermen.
Og her er det elektroniske påloggingsskjemaet på telefonskjermen. Legg også merke til mobilmenyen.
Og dette er hva brukeren vil se når han er logget inn.
avslutt~~POS=TRUNC tanker
Denne tilpassede globale overskriften med et online påloggingsskjema vil definitivt være nyttig for alle medlemssider eller nettbutikker. Med bare litt tilpasset CSS klarte vi å konvertere Divis påloggingsmodul til et elegant online påloggingsskjema som ville se bra ut i overskriften på alle nettstedet Web. Jeg håper dette er nyttig for ditt neste prosjekt.
Jeg gleder meg til å høre fra deg i kommentarene.
Til helsen din!
