Gå till innehållet

Hur man utformar ett online-inloggningsformulär för en anpassad global rubrik i Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Att skapa ett online-inloggningsformulär för din rubrik kan vara en enorm boost för användarupplevelsen. De är bra för medlemswebbplatser och onlinebutiker eftersom de tillåter användare att logga in när som helst och på vilken sida som helst på webbplatsen. 

I den här handledningen visar vi dig hur du utformar ett online-inloggningsformulär med hjälp av en anpassad rubrik på Divi Theme Builder. För att göra detta skapar vi en enkel responsiv global rubrik och designar sedan ett kompakt onlineinloggningsformulär längst upp till höger i rubriken med Divi-inloggningsmodulen. Bygget kräver lite anpassad CSS-kod, men när allt är på plats är det enkelt att anpassa online-inloggningsformuläret för att enkelt matcha alla rubrikdesigner med hjälp av designalternativen. integrerad Divi.

Resultatöversikt

Här är en snabb översikt över den anpassade rubriken med online-inloggningsformuläret som vi kommer att skapa i denna handledning.

Divi-anslutningsformulär

Och här är online-inloggningsformuläret på skärmen på surfplattan och telefonen.

Här är utloggningsmeddelandet och länken som visas när användare är inloggade.

online-inloggningsformulär

Vad du behöver för att komma igång

Om du inte redan har gjort det installera och aktivera Divi-temat . Det är i stort sett allt du behöver för att komma igång. Vi kommer att skapa en ny layout för huvudmall från grunden med Divi Theme Builder.

Lägga till en ny global rubrik

För att få saker att gå måste vi skapa en ny global rubrik för vår webbplats. För att göra detta, gå till WordPress-instrumentpanelen och gå till Divi> Theme Builder.

Klicka på "Lägg till en global rubrik" på standardwebbmallen och klicka sedan på "Skapa en global rubrik".

Skapande av huvud globala divi

Välj sedan alternativet Bygg från grunden.

Bygga från grunden

Designa Divi globala rubrik med ett inloggningsformulär online

Avsnitt anpassning

Från Global Header Layout Editor kommer du att kunna skapa din webbplats anpassade rubrik helt. För att komma igång, öppna de vanliga sektionsinställningarna och uppdatera följande:

  • Bakgrundsgradient till vänster:
  • Höger bakgrundsgradient:
  • Lutningsriktning: 48 grader
  • Polstring: 10 pixlar längst upp, 10 pixlar längst ner, 20 pixlar till vänster, 20 pixlar till höger
Anpassa i huvuddel

För att göra vår anpassade rubrik mer responsiv lägger vi till följande anpassade CSS till huvudelementet i avsnittet.

display:flex;justify-content:center;align-items:center;

Lägg till css divi-kod

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 en rad

Lägg till en rad i en kolumn i avsnittet.

Lägg till en divi-rubrikkolumn

Lägg till en bildmodul med en logotypbild

Lägg till en bildmodul i raden med en kolumn. Det är här vi kommer att lägga till logotypen för rubriken.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Lägg till en divi-modulbild

Uppdatera bild- och bildmodulmarginal

Uppdatera bildinställningarna enligt följande:

  • Bild: [lägg till logotyp (cirka 64 pixlar med 64 pixlar)]
Anpassa bilden och dess delningsmarginal
  • Marginal: 20px rätt
Ändra höger marginal divi

Uppdatera radparametrar

Innan du går vidare, öppna radinställningarna och uppdatera följande:

  • Använd en anpassad rännbredd: JA
  • Rännbredd: 1
  • Bredd: 25%
  • Radinriktning: vänster
  • Polstring: 0px hög, 0px låg
Ändra parametrar för delningslinje

Lägga till online-inloggningsformuläret på den andra raden

Lägg till en rad

Nu när den första raden är klar kommer du att märka i redaktören att den första raden kommer att uppta 25% av den vänstra sektionen. Detta kommer i princip att vara den angivna raden för vår huvudlogotyp. Vi måste skapa en sektionsrad för formuläret och online-inloggningsmenyn på höger sida.

Lägg till en andra rad med struktur i en kolumn i avsnittet.

Lägg till en ny divikolumn i huvudet

Lägg till ett inloggningsformulär

Lägg till en inloggningsmodul i raden i en kolumn.

Lägg till ett divi-inloggningsformulär

Ta bort standardinnehåll

Ta bort den falska titeln och kroppsinnehållet under inloggningsinställningar.

Ta bort standardinnehåll

Lägg till ett inloggningsformulär och en anpassad CSS-klass

Innan vi går för långt i utformningen av online-inloggningsformuläret, låt oss först lägga till anpassade CSS- och CSS-klasser i inloggningsmodulen. Detta gör det möjligt för oss att ställa in den grundläggande onlinestrukturen i formuläret innan vi sätter den sista designen på formuläret med Divis inbyggda alternativ.

På fliken Avancerat lägger du till följande CSS-klass:

  • CSS-klass: header-login-form

Lägg till följande anpassade CSS i anslutningsbeskrivningen CSS-område:

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 rutan Anslutningsfält CSS:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

padding: 5px 4% !important

Anpassa divi css-kod

Lägg till anpassad CSS i inställningarna för rubriklayout

Eftersom vi har vår anpassade CSS-klass läggs till i inloggningsformulärmodulen, kan vi lägga till vår anpassade CSS som endast riktar sig till det här inloggningsformuläret.

Öppna rubriklayoutinställningen 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 gör att inloggningsfälten och knappen visas inline (horisontellt), döljer länken "Glömt ditt lösenord?". »Och lägg till en liten marginal mellan fälten.

Anpassa divi-form

Linjeinställningar

Innan vi sista handen på online-inloggningsformuläret, låt oss uppdatera radparametrarna enligt följande:

  • Använd en anpassad rännbredd: JA
  • Rännbredd: 1
  • Linjeinriktning: rak
  • Polstring: 0px hög, 0px låg
Använd speciella gränser

Designinställningar för inloggningsformuläret

Vi är nu redo att uppdatera inställningarna för inloggningsformuläret. Öppna inställningarna för inloggningsformulärsmodulen och uppdatera följande:

  • Använd bakgrundsfärg: NEJ
Använd divi bakgrundsfärg
Fält och länktext
  • Fältbakgrund: Färg: rgba (255,255,255,0.2)
  • Fälttextfärg: #ffffff
  • Fältpolis: Lato
  • Fälttextstorlek: 14px
  • Textinriktning: höger
  • Länk typsnitt: Lato
  • Länkstilsstil: understruket
  • Länktextfärg: # ff3190
Anpassa inloggningsformulär för färgmodul
Knappdesign
  • Knapptextstorlek: 15px
  • Knappens bakgrundsfärg: # ff3190
  • Bredden på knappgränsen: 0px
  • Knapp typsnitt: Lato
  • Knappstoppning: 2px längst upp, 2px längst ner
  • Marginal: 15px låg
  • Polstring: 0px överst, 0px längst ner, 0px till vänster, 0px till höger
online-inloggningsformulär

Lägga till menyn i den andra raden

Menymodul

Med vårt online inloggningsformulär på plats kan vi lägga till menyn direkt nedan.

Lägg till en menymodul under inloggningsformulärmodulen.

Sätt i en divi-menymodul

Inställningar för menymodulen

Uppdatera menyinställningarna enligt följande:

  • Bakgrundsfärg: rgba (0,0,0,0)
  • Menyteckensnitt: Lato
  • Menyn typsnitt vikt: fetstil
  • Meny textfärg: #ffffff
  • Menytekststorlek: 16px
  • Textinriktning: höger
  • Listrutans bakgrundsfärg: #ffffff
  • Färg på linjen i rullgardinsmenyn: rgba (0,0,0,0)
  • Textfärg på rullgardinsmenyn: # 000000
  • Bakgrundsfärg för mobilmeny: #ffffff
  • Textfärg på mobilmeny: # 000000
  • Kundvagn Ikon Färg: #ffffff
  • Sökikons färg: #ffffff
  • Hamburgare meny ikon färg: #ffffff

Sparar rubriken för inloggningsformuläret

Var noga med att spara layouten innan du lämnar Editor för huvudlayout.

Knapp för stängning av Divi-huvud

Spara sedan också teman generatorinställningarna.

Spara ändringshuvudet för ändringsdelning

Slutresultat

Det är allt!

Låt oss nu se slutresultatet. För att se slutresultatet, besök bara en sida på din webbplats.

Här är rubriken på skrivbordsskärmen.

Slutresultatmeny med divi-anslutningsforum

Här är rubriken för online-inloggningsformuläret på surfplattans skärm.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

online-inloggningsformulär

Och här är online-inloggningsformuläret på telefonskärmen. Observera också mobilmenyn.

Och detta kommer användaren att se när han är inloggad.

Vad är synligt när användaren är inloggad i divi

Avslutande tankar

Denna personliga globala rubrik med ett online-inloggningsformulär kommer definitivt att vara till nytta för alla medlemswebbplatser eller webbutiker. Med bara lite anpassad CSS kunde vi konvertera Divis inloggningsmodul till ett elegant online-inloggningsformulär som kommer att sitta snyggt i rubriken på vilken webbplats som helst. Hoppas att du tycker att det här är användbart för ditt nästa projekt.

Jag kan inte vänta med att höra från dig i kommentarerna.

Till din hälsa!

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer