Behöver skapa global header med formen anslutning i DIVI?
Skapandet av en formen logga in på din header kan vara ett bra lyft för användarupplevelsen.
De är idealiska för prenumerationswebbplatser och onlinebutiker eftersom de tillåter användare att logga in när som helst på vilken sida som helst i webbplats.
I den här handledningen kommer vi att visa dig hur du designar en formen onlineinloggning för användare på en anpassad rubrik. Låt oss börja!
undersökningen
Här är den snabba förhandsgranskningen av den anpassade rubriken med inloggningsformuläret som vi kommer att skapa i den här handledningen.
Här är "logga ut"-meddelandet och länken som visas när användare är inloggade.
Lägga till en ny global rubrik
För att få igång saker och ting måste vi skapa en ny global header för vår webbplats. För att göra detta, gå till WordPress-instrumentpanelen och navigera till Divi > Theme Builder.
På webbplats mall som standard klickar du på "Lägg till global rubrik" och sedan på "Bygg global rubrik".
Divi global headerdesign med horisontell inloggningsformulär
Anpassa avsnittet
Från Global Header Layout Editor kan du skapa den personliga rubriken för din webbplats Börjar från ingenting. För att komma igång, öppna inställningarna i det normala avsnittet och uppdatera följande:
- Vänster bakgrundsgradientfärg:
- Höger bakgrundsgradientfärg:
- Lutningsriktning: 48 grader
- Inre marginal: 10px upptill, 10px botten, 20px vänster, 20px höger
För att göra vår header mer responsiv kommer vi att lägga till följande anpassade CSS till huvudsektionselementet.
display:flex;
justify-content:center;
align-items:center;
Lägg till huvudlogotyp på första raden
Nu när avsnittet är klart kan vi lägga till den första raden.
Lägg till rad
Lägg till en rad i en kolumn i avsnittet.
Lägg till en bildmodul med en logotypbild
Lägg till en bildmodul på raden med en kolumn. Det är här vi lägger till rubriklogotypen.
Uppdatera bild- och bildmodulmarginal
Uppdatera bildinställningarna enligt följande:
- Bild: [lägg till logotyp (ca 64 x 64 px)]
- Marginal: 20px höger
Uppdatera parametrarna för linjen
Innan du går vidare, öppna linjeinställningarna och uppdatera följande:
- Använd anpassad rännans bredd: JA
- Kolumnavstånd: 1
- Maximal bredd: 25%
- Inriktning: vänster
- Intern marginal: 0px upptill, 0px botten
Lade till horisontellt inloggningsformulär på andra raden
Lägg till rad
Nu när den första raden är klar kommer du att märka i editorn att den första raden kommer att ta upp 25 % av den vänstra sektionen. Detta kommer i princip att vara den linje som är avsedd för vår header-logotyp. Vi behöver skapa en sektionsrad för inloggningsformuläret och menyn på höger sida.
Lägg till en andra rad med struktur i en kolumn i avsnittet.
Lägg till ett inloggningsformulär
Inuti raden med en kolumn lägger du till en "Anslut"-modul.
Ta bort standardinnehåll
Ta bort den falska titeln och innehållet under inloggningsmodulens inställningar.
Lägg till anpassad klass för inloggningsformulär och CSS
Innan vi går för långt med att utforma inloggningsformuläret, låt oss först lägga till CSS-klassen och anpassad CSS till inloggningsmodulen. Detta kommer att sätta upp den grundläggande onlinestrukturen för formuläret innan du lägger sista handen på formulärets design med Divis inbyggda alternativ.
Se även vår guide om Hur man skapar en glidande och responsiv sidomeny i DIVI
Lägg till följande CSS-klass under fliken Avancerat:
- CSS-klass: header-login-form
Lägg till följande anpassade CSS i CSS-rutan för anslutningsbeskrivning:
margin-bottom: 0px !important
Lägg sedan till följande anpassade CSS i CSS-området i inloggningsformuläret:
width: 100%;Lägg till följande anpassade CSS i CSS-området Inloggningsfält:
padding: 5px 4% !important
Lägg till anpassad CSS till layoutinställningar för rubriker
Eftersom vi lade till vår anpassade CSS-klass till modulen för inloggningsformulär, kan vi lägga till vår anpassade CSS som bara riktar sig till just det inloggningsformuläret.
Läs även vår handledning om Hur man skapar bloggsidan med Bloggmodulen med DIVI
Öppna inställningen för rubriklayout och lägg till följande anpassade 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;
}Denna CSS kommer att göra att inloggningsfälten och knappen visas inline (horisontellt), meddelandet "Har du glömt ditt lösenord?" kommer att döljas och en liten marginal mellan fälten kommer att läggas till.
Linjeinställningar
Innan vi lägger sista handen på inloggningsformuläret, låt oss uppdatera linjeparametrarna enligt följande:
- Använd anpassad rännbredd: JA
- Kolumnavstånd: 1
- Inriktning: Höger
- Intern marginal: 0px upptill, 0px botten
Designinställningar för inloggningsformuläret
Vi är nu redo att uppdatera inloggningsformulärets inställningar. Öppna Connect-modulens inställningar och uppdatera följande:
- Använd bakgrundsfärg: NEJ
Fält och länktext
- Bakgrundsfärgfält: rgba(255,255,255,0.2)
- Textfärgfält: #ffffff
- Fields Font: Lato
- Textstorleksfält: 14px
- Textjustering: höger
Knappdesign
- Använd anpassade stilar för Knapp: NEJ
- Knapptextstorlek: 15px
- Bakgrundsknapp: #ff3190
- Kantbreddsknapp: 0 pixlar
- Knapptypsnitt: Lato
- Marginalknapp: 2px upptill, 2px botten
- Utfyllnadsknapp: 15px Botten
- Inre marginal: 0px upptill, 0px botten, 0px vänster, 0px höger
Lägga till menyn i den andra raden
Menymodul
Med vårt inloggningsformulär på plats kan vi lägga till menyn direkt nedan.
Lägg till en menymodul under inloggningsmodulen.
Inställningar för menymodulen
Uppdatera menyinställningarna enligt följande:
- Bakgrund: rgba(0,0,0,0)
- Teckensnittsmeny: Lato
- Meny för mjukt ljus: Fet
- Menytextfärg: #ffffff
- Menytextstorlek: 16px
- Textjustering: höger
- Bakgrundsfärg på rullgardinsmenyn: #ffffff
- Färg på rullgardinsmenyn: rgba(0,0,0,0)
- Textfärg på rullgardinsmenyn: #000000
- Mobilmenybakgrundsfärg: #ffffff
- Mobilmenytextfärg: #000000
- Korgikonens färg: #ffffff
- Sökikonens färg: #ffffff
- Hamburgermenyikon Färg: #ffffff
Sparar rubriken för inloggningsformuläret
Se till att spara layouten innan du avslutar rubrikredigeraren.
Spara sedan inställningarna för Theme Builder också.
Slutresultat
Det är klart !
Låt oss nu se det slutliga resultatet. För att se slutresultatet behöver du bara besöka en sida på din webbplats.
Och detta kommer användaren att se när han är inloggad.
Ladda ner DIVI nu!!!
Slutsats
Denna anpassade globala rubrik med ett inloggningsformulär kommer definitivt att vara praktiskt för alla prenumerationswebbplatser eller onlinebutiker.
Med bara lite anpassad CSS kunde vi konvertera Divis inloggningsmodul till ett elegant inloggningsformulär som passar perfekt i huvudet på vilken webbplats som helst.
Hoppas detta kommer att vara användbart för ditt nästa projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
