Vill du skapa en formen popup-inloggning i Divi med inloggnings-/utloggningsknappar?
Skapandet av en formen inloggning popup in Divi kan vara ett effektivt sätt att förbättra din webbplats design och användarupplevelse för inloggning/utloggning.
Tanken är att skapa en formen inloggning som visas i ett popup-fönster varje gång användaren klickar på en inloggningsknapp i sidhuvudet.
Detta är bekvämare än att omdirigera användaren till en anpassad inloggningssida.
I den här handledningen kommer vi att skapa ett popup-inloggningsformulär med anpassade inloggnings- och utloggningsknappar i Divi.
Med hjälp av Divi Login-modulen och några knappmoduler kommer vi att skapa en sömlös popup-inloggningsupplevelse i front-end genom att tillåta användare att logga in och logga ut utan att omdirigeras till en annan sida.
Låt oss börja!
undersökningen
Här är en snabb titt på designen vi kommer att skapa i den här handledningen.
Lägg märke till hur inloggningsknappen och utloggningsknapparna ändras respektive. Och när användaren väl har loggat in stannar de kvar på den aktuella sidan.
Dessutom visar popup-inloggningsformuläret olika "varningsinnehåll" varje gång användaren försöker logga ut.
Vad du behöver för att komma igång
Även om du kan lägga till det här popup-inloggningsformuläret och anpassade inloggnings-/utloggningsknappar till valfri anpassad rubrik, använder vi en förgjord rubrik för att påskynda processen och få igång designen snabbt.
Importera rubrikmallen "Crowdfunding Layout Pack" till Divi-byggaren
Ladda ner för att komma igång Divi Crowdfunding Layout Pack Sidhuvud och sidfot gratis . För att göra detta, gå till blogginlägget .
Ange sedan din e-postadress för att ladda ner zip-filen.
Efter det packar du upp filen så att den är redo att importeras.
För att importera filen till temaredigeraren, följ dessa steg:
- Gå till Divi > Theme Builder.
- Klicka på portabilitetsikonen.
- I popup-fönstret Portabilitet väljer du fliken import.
- Välj den tidigare nedladdade uppackade filen att importera.
- Klicka på Importera Divi Theme Builder Mallar.
- Klicka på redigeringsikonen för att redigera den importerade rubriken.
Skapa popup-inloggningsformuläret i Divi
Del 1: Skapa inloggnings- och utloggningsknappar
Väl i Global Header Layout Editor, öppna lagervy så att du enkelt kan se alla element.
Ta bort modulen i den översta raden i rubriksektionen Sociala medier Följ bredvid knappen Logga in i kolumn 3.
Läs också: Divi: Jämförelse av de olika typerna av gradienter
Skapar inloggningsknappen
För att skapa vår inloggningsknapp, öppna knappmodulinställningarna i kolumn 3 på den översta raden.
Uppdatera följande objekt under designfliken:
- Knappikon: låsikon (se skärmdump)
- Knappikon Placering: Höger
- Visa endast ikon vid svävning för knapp: NEJ
- Vaddering: 0,5 em (topp och botten), 2 em (vänster), 0,7 em (höger)
Under fliken Advanced Open water, tilldela knappen två anpassade CSS-klasser enligt följande:
- CSS-klass: et-toggle-popup et-popup-login-knapp
Skapande av utloggningsknappen
För att skapa vår utloggningsknapp, duplicera den befintliga inloggningsknappen i kolumn 3.
För att hjälpa till att skilja de två knapparna åt kan du uppdatera etiketten för respektive knapp. Öppna sedan modulinställningarna för Duplicera knapp i kolumn 3.
Ändra knapptexten till "Logga ut".
Uppdatera följande objekt under designfliken:
- Knappikon: upplåsningsikon (se skärmdump)
Under fliken Advanced Open water, uppdatera knappen CSS-klasser enligt följande:
- CSS-klass: et-toggle-popup et-popup-logout-knapp
Den första klassen kommer att förbli densamma men den andra klassen kommer att vara annorlunda.
Del 2: Skapa popup-sektionen
När knapparna är klara är vi redo att skapa popup-sektionen som kommer att fungera som vår popup som innehåller former förbindelse.
Lägg till en ny vanlig sektion under rubriksektionen.
Infoga sedan en rad med en kolumn inuti sektionen.
Avsnitt inställningar
Innan du uppdaterar raden, öppna avsnittsinställningarna.
Under fliken Innehåll, ge avsnittet en vit bakgrundsfärg:
- Bakgrund: #ffffff
Under fliken Designa, uppdatera följande:
- Bredd: 100 %
- Max bredd: 800 pixlar (dator), 80 % (surfplatta), 100 % (telefon)
- Sektionsinriktning: Center
- Höjd: auto (dator och surfplatta), 100 % (telefon)
- Max höjd: 100 %
- Utfyllnad: 0px (topp och botten)
- Rundade hörn: 10px
- Box Shadow: se skärmdump
- Box Shadow Vertikal Position: 0px
- Oskärpa styrka: 100 pixlar
- Spridningsstyrka: 50px
Under fliken Advanced Open water, uppdatera följande:
Lägg till en anpassad CSS-klass.
- CSS-klass: et-popup-login
Lägg till ett anpassat CSS-kodavsnitt till huvudelementet:
overscroll-behavior: contain;Uppdatera alternativen Synlighet och Position.
- Horisontellt överflöde: Dold
- Vertikalt spill: auto
- Position: Fast
- Plats: Center Center
- Z-index: 999999
Linjeinställningar
Med sektionsinställningarna på plats öppnar du linjeinställningarna och uppdaterar följande designinställningar:
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
- Bredd: 100 %
- Max bredd: 100 %
- Utfyllnad: 0px (överst), 5vh (botten)
Del 3: Skapa en stäng popup-ikon
För att skapa popup-stängikonen som kommer att stänga/dölja popup-fönstret vid klick, kommer vi att använda en Blurb-modul.
Lägg till en ny Blurb-modul i raden.
Öppna modulinställningen och ta bort rubriken och brödtexten.
Lägg sedan till ikonen enligt följande:
- Använd ikonen: JA
- Ikon: "x"-ikon (se skärmdump)
Under fliken Designa, uppdatera följande:
- Ikonfärg: #004e43
- Bild/ikonjustering: centrerad
- Använd ikonens teckensnittsstorlek: JA
- Ikon teckensnittsstorlek: 50px
- Bredd: 50px
- Justeringsmodul: höger
- Höjd: 50px
Under fliken Advanced Open water, lägg till en CSS-klass till Blurb-modulen enligt följande:
- CSS-klass: et-toggle-popup
Del 4: Skapa inloggningsformulären "Inloggad" och "Utloggad".
För att ha olika innehåll och design för inloggningsformuläret vid inloggning och utloggning kommer vi att skapa två olika inloggningsformulärmoduler.
Den första kommer att vara inloggningsformuläret som kommer att visas varje gång användaren "loggas ut". Det andra kommer att vara inloggningsformuläret som kommer att visas varje gång användaren är "inloggad".
Skapande av formuläret "Utloggad".
För att skapa inloggningsformuläret "Utloggad", lägg till en ny inloggningsmodul under Blurb-modulikonen på raden.
Öppna modulinställningarna och ändra följande inställningar:
Fliken Innehåll
- Omdirigera till den aktuella sidan: JA
- Använd bakgrundsfärg: NEJ
Fliken Design
- Fältets bakgrundsfärg: rgba(0,78,67,0.05)
- Fältfokus Bakgrundsfärg: rgba (0,78,67,0,15)
- Textjustering: Centrerad
- Textfärg: Mörk
- Title Font: Poppins
- Titel Teckensnittsvikt: halvfet
- Textfärg: #000000
- Titelradshöjd: 1,3 em
- Body Font: Work Sans
För att uppdatera knappstilarna kopierar du knappstilarna från inloggningsknappen vi skapade till den tredje kolumnen i raden i rubriksektionen.
Klistra sedan in knappstilarna i knappalternativgruppen i anslutningsinställningarna under fliken Design.
Uppdatera sedan knappstilarna för inloggningsformuläret enligt följande:
- Knappen
- Textfärg: #ffffff
- Bakgrund: #004e43
- Bakgrund (hovra): #00683c
- Kantbredd: 0 pixlar
- Utfyllnad: 15px (topp och botten)
Uppdatera sedan storleksalternativen enligt följande:
- Bredd: 100 %
- Max bredd: 80 % (skrivbord), 90 % (surfplatta), 95 % (telefon)
- Justeringsmodul: Center
Fliken Avancerat
Under fliken Advanced Open water, uppdatera CSS-klassen och anpassad CSS enligt följande:
- CSS-klass: et-utloggad-formulär
Anpassad CSS för anslutningsbeskrivning:
width: 100% !important;
float: none !important;Anpassad CSS för inloggningsformuläret:
width: 100% !important;
padding: 0px !important;Detta kommer att säkerställa att inloggningsmodulen spänner över hela rad-/kolumnbredden, även på skrivbordet.
Skapande av formuläret "Inloggad".
Nu när "Utloggad"-versionen av formuläret är klar måste vi skapa "Inloggad"-versionen som kommer att ha annat innehåll och stil för att maximera användarupplevelsen.
För att skapa inloggningsformuläret "Utloggad", duplicera det befintliga inloggningsformuläret.
Uppdatera sedan etiketten för var och en av former anslutning respektive.
Öppna dubblettinställningarna (formuläret "Inloggad") och lägg till webbplatsens titel som dynamiskt innehåll till rubriken på inloggningsformulärmodulen.
Öppna sedan webbplatstitelns dynamiska innehållsinställningar och uppdatera före- och efterinnehållet enligt följande:
- Före: "Du försöker logga ut från Elegant Themes"
- Efter: ". "
Detta kommer att skapa ett trevligt dynamiskt meddelande för användare som försöker logga ut från webbplatsen.
Lägg sedan till följande H3-rubrik till brödtexten:
<h3>Are you sure?</h3>
Om du någonsin har sett innehållet i inloggningsmodulen när du är inloggad vet du att det finns ett personligt meddelande som innehåller en personlig "logga ut"-länk. För att få den här länken att se ut som en knapp måste vi anpassa teckensnitts-/textinställningarna för brödtexten enligt följande:
- Välj fliken Länk under alternativ Kropp text.
- Länkteckensnitt: Work Sans
- Länkteckensnittsvikt: Halvfet
- Typsnittsstil: TT
- Länktextjustering: centrerad
- Länktextfärg: #ffffff
OBS: Du kommer inte att kunna förhandsgranska dessa resultat förrän du visar formuläret på en livesida.
Under fliken Advanced Open water, uppdatera CSS-klassen och anpassad CSS enligt följande:
- CSS-klass: et-inloggad-i-formulär
Anpassad CSS för inloggningsformuläret:
display:none;
Del 5: Lägg till anpassad kod
För att lägga till den anpassade CSS och JQuery som behövs för popup-inloggningsformulärfunktionen, skapa en ny kodmodul under den sista inloggningsmodulen.
CSS
Öppna kodmodulens inställningar och klistra in följande CSS i kodrutan, se till att linda in CSS i de nödvändiga stiltaggarna.
/* hide popup section */
.et-popup-login {
display: none;
}
/* hide login button when logged in */
.logged-in .et-popup-login-button {
display: none !important;
}
/* hide logout button when logged out */
.et-popup-logout-button {
display: none !important;
}
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
display: inline-block !important;
}
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
display: none !important;
}
/* hide logged in form when logged out */
.et-logged-in-form {
display: none !important;
}
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
display: block !important;
}
/* style logout link within logged in form */
.et-logged-in-form a {
display: block;
padding: 15px 1em;
border-radius: 8px;
background: #004e43;
max-width: 400px;
margin: 20px auto 0px;
}
.et-toggle-popup {
cursor: pointer;
}
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
display: block !important;
}
body.et-fb .et-popup-login-button {
display: inline-block !important;
}Observera att CSS använder klassen "ansluten" som är inbyggd i WordPress för att dölja/visa motsvarande inloggnings-/utloggningsknappar och former Inloggad/Utloggad varje gång användaren är inloggad eller utloggad.
JQuery
Under slutstiltaggen, klistra in följande JQuery och se till att linda in koden i de nödvändiga skripttaggarna.
(function ($) {
$(document).ready(function () {
$(".et-toggle-popup").click(function (e) {
e.preventDefault();
$(".et-popup-login").fadeToggle(500);
});
});
})(jQuery);Det här utdraget växlar helt enkelt popup-sektionen när användaren klickar på ett av de tre objekten med klassen " och-växla-popup (inloggnings- och utloggningsknapparna plus presentationsikonen "x").
Se även: Divi: Hur man använder inställningar för bakgrundsmask och alternativ för mönsteromvandling
Det är klart !
Glöm inte att spara ändringarna du gjort i mallen i temabyggaren. När du har sparat kan du se resultaten på en livesida.
Slutresultat
Här är slutresultaten på dator, surfplatta och telefon.
Lägg märke till hur inloggningsknappen och utloggningsknappen ändras. Och när användaren väl har loggat in stannar användaren kvar på den aktuella sidan.
Dessutom visar popup-inloggningsformuläret olika "varningsinnehåll" varje gång användaren försöker logga ut.
Ladda ner DIVI nu!!!
Slutsats.
Förhoppningsvis kommer att skapa detta popup-inloggningsformulär och anpassade inloggnings-/utloggningsknappar ge dig lite insikt i hur du använder Divis inloggningsformulär kreativt.
Justera gärna designen och innehållet på varje inloggningsformulär (eller knappar) för att skapa en unik inloggningsupplevelse på din egen webbplats.
Vi hoppas också att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också 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.
.
