Skal oprette global header med formular forbindelse i DIVI?
Oprettelsen af en formular login på din header kan være et godt løft for brugeroplevelsen.
De er ideelle til abonnementswebsteder og onlinebutikker, da de tillader brugere at logge ind når som helst på enhver side i websted.
I denne tutorial viser vi dig, hvordan du designer en formular online login for brugere på en brugerdefineret header. Lad os komme igang!
undersøgelse
Her er den hurtige forhåndsvisning af den brugerdefinerede header med loginformularen, som vi vil oprette i denne tutorial.
Her er "log ud" beskeden og linket, der vises, når brugere er logget ind.
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, klik på "Tilføj global overskrift", og klik derefter på "Byg global overskrift".
Divi globalt header-design med en vandret login-formular
Tilpas sektionen
Fra Global Header Layout-editoren kan du oprette den personlige sidehoved for din websted Starter fra ingenting. For at komme i gang skal du åbne indstillingerne i den normale sektion og opdatere følgende:
- Venstre baggrundsgradientfarve:
- Højre baggrundsgradientfarve:
- Gradientretning: 48 grader
- Indre margen: 10px Top, 10px Nederst, 20px Venstre, 20px Højre
For at gøre vores header mere lydhør, vil vi tilføje følgende tilpassede CSS til hovedsektionselementet.
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 linje
Føj en række til en kolonne i sektionen.
Tilføj et billedmodul med et logobillede
Tilføj et billedmodul i rækken med én kolonne. Det er her vi tilføjer header-logoet.
Opdater billed- og billedmodulmargen
Opdater billedindstillingerne som følger:
- Billede: [tilføj logo (ca. 64 x 64 px)]
- Margin: 20px højre
Opdater linjens parametre
Inden du går videre, skal du åbne linjeindstillingerne og opdatere følgende:
- Brug tilpasset tagrendebredde: JA
- Kolonneafstand: 1
- Maksimal bredde: 25%
- Justering: venstre
- Intern margen: 0px øverst, 0px bund
Tilføjet vandret login-formular til anden linje
Tilføj linje
Nu hvor den første række er klar, vil du bemærke i editoren, at den første række fylder 25 % af den venstre sektion. Dette vil grundlæggende være den linje, der er udpeget til vores header-logo. Vi skal oprette en sektionsrække til loginformularen og menuen i højre side.
Føj en anden række med struktur til en kolonne i sektionen.
Tilføj en login-formular
Tilføj et 'Forbind'-modul inde i rækken med én kolonne.
Fjern standardindhold
Fjern den falske titel og kropsindhold under Login-modulets indstillinger.
Tilføj tilpasset klasse til loginformular og CSS
Før vi går for langt med at designe login-formularen, lad os først tilføje CSS-klassen og tilpasset CSS til Login-modulet. Dette vil sætte den grundlæggende online struktur af formularen op, før du lægger sidste hånd på formulardesignet med Divis indbyggede muligheder.
Se også vores vejledning om Sådan opretter du en glidende og responsiv sidemenu i DIVI
Tilføj følgende CSS-klasse under fanen Avanceret:
- CSS-klasse: header-login-formular
Tilføj følgende tilpassede CSS til CSS-boksen til forbindelsesbeskrivelsen:
margin-bottom: 0px !important
Tilføj derefter følgende tilpassede CSS i CSS-området i loginformularen:
width: 100%;Tilføj følgende tilpassede CSS til CSS-området for loginfelter:
padding: 5px 4% !important
Tilføj tilpasset CSS til indstillinger for headerlayout
Da vi føjede vores tilpassede CSS-klasse til loginformularmodulet, kan vi tilføje vores tilpassede CSS, der kun vil målrette mod den pågældende loginformular.
Læs også vores tutorial om Sådan opretter du blogsiden med Blog modulet med DIVI
Å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 vil få login-felterne og knappen til at vise inline (vandret), meddelelsen "Glemt din adgangskode?" vil blive skjult, og der tilføjes en lille margen mellem felterne.
Linieindstillinger
Inden vi lægger sidste hånd på login-formularen, lad os opdatere linjeparametrene som følger:
- Brug tilpasset tagrendebredde: JA
- Kolonneafstand: 1
- Justering: Højre
- Intern margen: 0px øverst, 0px bund
Designindstillinger til loginformularen
Vi er nu klar til at opdatere indstillingerne for loginformularen. Åbn Connect-modulets indstillinger, og opdater følgende:
- Brug baggrundsfarve: NEJ
Felt og link tekst
- Baggrundsfarvefelter: rgba(255,255,255,0.2)
- Tekstfarvefelter: #ffffff
- Fields Font: Lato
- Tekststørrelsesfelter: 14px
- Tekstjustering: højre
Knapdesign
- Brug brugerdefinerede stilarter til knap: NEJ
- Knaptekststørrelse: 15px
- Baggrundsknap: #ff3190
- Knap til kantbredde: 0 pixels
- Knapskrifttype: Lato
- Margenknap: 2px øverst, 2px bund
- Polstringsknap: 15px bund
- Indre margen: 0px Top, 0px Nederst, 0px Venstre, 0px Højre
Føjelse af menuen til den anden linje
Menu modul
Med vores login-formular på plads, kan vi tilføje menuen direkte nedenfor.
Tilføj et menumodul under login-modulet.
Menu modulindstillinger
Opdater menuindstillingerne som følger:
- Baggrund: rgba(0,0,0,0)
- Skriftmenu: Lato
- Soft Light Menu: Fed
- Menutekstfarve: #ffffff
- Menutekststørrelse: 16px
- Tekstjustering: højre
- Baggrundsfarve på rullemenuen: #ffffff
- Farve på rullemenuen: rgba(0,0,0,0)
- Tekstfarve på rullemenuen: #000000
- Mobilmenuens baggrundsfarve: #ffffff
- Tekstfarve på mobilmenu: #000000
- Farve på kurvens ikon: #ffffff
- Søg ikon farve: #ffffff
- Hamburger Menu Ikon Farve: #ffffff
Gemme overskriften på loginformularen
Sørg for at gemme layoutet, før du afslutter header-editoren.
Gem derefter indstillingerne for Theme Builder også.
Endelige resultater
Det er gjort !
Lad os nu se det endelige resultat. For at se slutresultatet skal du blot besøge en side på din hjemmeside.
Og dette er hvad brugeren vil se, når han er logget ind.
Download DIVI nu!!!
Konklusion
Denne brugerdefinerede globale header med en login-formular vil helt sikkert være praktisk til enhver abonnementshjemmeside eller onlinebutik.
Med blot en smule tilpasset CSS var vi i stand til at konvertere Divi's Login-modul til en elegant login-formular, der passer perfekt ind i headeren på ethvert websted.
Håber dette vil være nyttigt til dit næste projekt. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
