Oprettelsen af en formular Inline login til din header kan være et enormt løft til brugeroplevelsen. De er perfekte til medlemssider og onlinebutikker, fordi de tillader brugere at logge ind når som helst og på enhver side på webstedet.
I denne tutorial viser vi dig, hvordan du designer en formular online ved hjælp af en tilpasset header på Divi Theme Builder. For at gøre dette opretter vi en simpel responsiv global header og designer derefter en formular kompakt online login øverst til højre i overskriften ved hjælp af Divis login-modul. Opbygningen kræver en smule tilpasset CSS-kode, men når alt er på plads, vil det være nemt at tilpasse online login-formularen, så den nemt matcher ethvert header-design ved hjælp af designmulighederne Divi's integrerede tjenester.
Resultatoversigt
Her er et hurtigt overblik over den brugerdefinerede overskrift med den online loginformular, som vi opretter i denne vejledning.
Og her er online loginformularen på skærmen på tabletten og telefonen.
Her er afmeldingsmeddelelsen og linket, der vises, når brugerne er logget ind.
Hvad du behøver for at komme i gang
Hvis du ikke allerede har gjort det, installer og aktiver Divi-temaet . Det er stort set alt hvad du behøver for at komme i gang. Vi opretter et nyt sidehovedskabelonlayout fra bunden med Divi Theme Builder.
Tilføjer et nyt globalt overskrift
For at få tingene til at gå, er vi nødt til at skabe en ny global header til vores Websted. For at gøre dette skal du gå til WordPress-dashboardet og navigere til Divi > Theme Builder.
På hjemmeside skabelon som standard skal du klikke på "Tilføj global overskrift" og derefter "Opret global overskrift".
Vælg derefter indstillingen Byg fra bunden.
Design det globale Divi-header med en online loginformular
Sektionstilpasning
Fra den globale headerlayouteditor vil du være i stand til fuldstændigt at oprette dit websteds tilpassede header. For at komme i gang skal du åbne de almindelige sektionsindstillinger og opdatere følgende:
- Venstre farve baggrundsgradient:
- Højre baggrundshældning:
- Gradientretning: 48 grader
- Polstring: 10 pixels øverst, 10 pixels i bunden, 20 pixels til venstre, 20 pixels til højre
For at gøre vores brugerdefinerede header mere lydhør, tilføjer vi følgende tilpassede CSS til hovedelementet i sektionen.
display:flex;justify-content:center;align-items:center;
Føj headerlogo til første linje
Nu hvor sektionen er klar, kan vi tilføje den første linje.
Tilføj en række
Føj en række til en kolonne i sektionen.
Tilføj et billedmodul med et logo-billede
I rækken med en enkelt kolonne skal du tilføje et billedmodul. Det er her, vi tilføjer logoet til overskriften.
Opdater billed- og billedmodulmargen
Opdater billedindstillingerne som følger:
- Billede: [tilføj logo (ca. 64 pixels med 64 pixels)]
- Margen: 20px højre
Opdater linjeparametre
Inden du går videre, skal du åbne rækkeindstillingerne og opdatere følgende:
- Brug en brugerdefineret tagrendebredde: YES
- Tagrendebredde: 1
- Bredde: 25%
- Rækkejustering: venstre
- Polstring: 0px høj, 0px lav
Tilføjelse af online login-formularen på anden linje
Tilføj en række
Nu hvor den første række er klar, vil du bemærke i redaktøren, at den første række optager 25% af den venstre sektion. Dette vil grundlæggende være den udpegede linje til vores headerlogo. Vi skal oprette en sektionslinje til formularen og online login-menuen på højre side.
Føj en anden række med struktur til en kolonne i sektionen.
Tilføj en login-formular
I rækken af en kolonne skal du tilføje et login-modul.
Fjern standardindhold
Slet den falske titel og kropsindhold under loginindstillinger.
Tilføj en loginformular og en brugerdefineret CSS-klasse
Før vi går for langt i at designe online-loginformularen, lad os først tilføje de tilpassede CSS- og CSS-klasser til login-modulet. Dette giver os mulighed for at oprette den grundlæggende online struktur i formularen, inden vi lægger det endelige design præg på formularen med Divis indbyggede muligheder.
På fanen Avanceret skal du tilføje følgende CSS-klasse:
- CSS-klasse: header-login-form
Tilføj følgende brugerdefinerede CSS i forbindelsesbeskrivelsen CSS-område:
margin-bottom: 0px !important
Tilføj derefter følgende tilpassede CSS i CSS-området på loginformularen:
width: 100%;
Føj følgende brugerdefinerede CSS til feltet Connection Fields CSS:
padding: 5px 4% !important
Føj tilpasset CSS til indstillinger for headerlayout
Da vi har tilføjet vores brugerdefinerede CSS-klasse til loginformularmodulet, kan vi tilføje vores brugerdefinerede CSS, som kun er målrettet mod denne særlige loginformular.
Åbn indstillingen for headerlayout, og tilføj 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 får loginfelterne, og knappen vises inline (vandret), skjul linket "Glemt din adgangskode?". »Og tilføj en lille margen mellem felterne.
Linieindstillinger
Inden vi lægger sidste hånd på online login-formularen, lad os opdatere linjeparametrene som følger:
- Brug en brugerdefineret tagrendebredde: YES
- Tagrendebredde: 1
- Liniejustering: lige
- Polstring: 0px høj, 0px lav
Designindstillinger til loginformularen
Vi er nu klar til at opdatere indstillingerne for loginformularen. Åbn indstillingerne for loginformularmodulet, og opdater følgende:
- Brug baggrundsfarve: NEJ
Felt og link tekst
- Feltbaggrund: Farve: rgba (255,255,255,0.2)
- Felttekstfarve: #ffffff
- Markpoliti: Lato
- Felttekststørrelse: 14px
- Tekstjustering: højre
- Link font: Lato
- Link fontstil: Understreget
- Link tekstfarve: # ff3190
Knapdesign
- Knappen tekststørrelse: 15px
- Knappens baggrundsfarve: # ff3190
- Bredde på knapgrænsen: 0px
- Knappen skrifttype: Lato
- Knapepolstring: 2px øverst, 2px i bunden
- Marginal: 15px lav
- Polstring: 0px øverst, 0px i bunden, 0px til venstre, 0px til højre
Føjelse af menuen til den anden linje
Menu-modul
Med vores online login-formular på plads kan vi tilføje menuen direkte nedenfor.
Tilføj et menumodul under loginformularmodulet.
Menu modulindstillinger
Opdater menuindstillingerne som følger:
- Baggrundsfarve: rgba (0,0,0,0)
- Menu font: Lato
- Menu font vægt: fed
- Menutekstfarve: #ffffff
- Menustekststørrelse: 16px
- Tekstjustering: højre
- Rullemenuens baggrundsfarve: #ffffff
- Farve på linjen i rullemenuen: rgba (0,0,0,0)
- Tekstfarve i rullemenuen: # 000000
- Mobilmenuens baggrundsfarve: #ffffff
- Tekstfarve på mobilmenu: # 000000
- Vogn ikon Ikon Farve: #ffffff
- Søgeikonets farve: #ffffff
- Hamburger menu ikon farve: #ffffff
Gemme overskriften på loginformularen
Sørg for at gemme layoutet, før du afslutter Editoren for headerlayout.
Gem derefter også temageneratorindstillingerne.
Endelige resultater
Det er det!
Lad os nu se det endelige resultat. For at se det endelige resultat skal du blot besøge en side af din Websted.
Her er overskriften på skrivebordsskærmen.
Her er overskriften på den online loginformular på tabletskærmen.
Og her er online loginformularen på telefonskærmen. Bemærk også mobilmenuen.
Og dette er hvad brugeren vil se, når han er logget ind.
endelige tanker
Denne tilpassede globale header med en online loginformular vil helt sikkert være nyttig for ethvert medlemskabswebsted eller onlinebutik. Med blot en smule tilpasset CSS var vi i stand til at konvertere Divi's login-modul til en elegant online login-formular, der ville se godt ud i overskriften på enhver Websted. Jeg håber, at dette er nyttigt for dit næste projekt.
Jeg kan ikke vente med at høre fra dig i kommentarerne.
Til dit helbred!
