Wil je een formulier popup login in Divi met login/logout knoppen?
De oprichting van een formulier pop-up voor inloggen Divi kan een effectieve manier zijn om het ontwerp van uw site en de gebruikerservaring voor inloggen/uitloggen te verbeteren.
Het idee is om een formulier login die in een pop-up wordt weergegeven telkens wanneer de gebruiker op een login-knop in de paginakop klikt.
Dit is handiger dan de gebruiker om te leiden naar een aangepaste inlogpagina.
In deze zelfstudie maken we een pop-up inlogformulier met aangepaste inlog- en uitlogknoppen in Divi.
Met behulp van de Divi Login-module en een paar Button-modules, zullen we een naadloze pop-upaanmeldingservaring aan de front-end creëren door gebruikers in staat te stellen in en uit te loggen zonder te worden omgeleid naar een andere pagina.
Laten we beginnen!
overzicht
Hier is een korte blik op het ontwerp dat we in deze zelfstudie gaan maken.
Merk op hoe respectievelijk de login-knop en de logout-knoppen veranderen. En zodra de gebruiker inlogt, blijven ze op de huidige pagina.
Bovendien geeft het pop-up-aanmeldingsformulier verschillende "waarschuwings"-inhoud weer telkens wanneer de gebruiker probeert uit te loggen.
Wat je nodig hebt om te beginnen
Hoewel u dit pop-up-aanmeldingsformulier en aangepaste in-/uitlogknoppen aan elke aangepaste koptekst kunt toevoegen, gebruiken we een vooraf gemaakte koptekst om het proces te versnellen en het ontwerp snel op gang te brengen.
Importeer de header-sjabloon "Crowdfunding Layout Pack" in de Divi-builder
Om te beginnen, download Divi Crowdfunding Layout Pack Kop- en voettekst gratis . Ga hiervoor naar de blogpost .
Voer vervolgens uw e-mailadres in om het zipbestand te downloaden.
Pak daarna het bestand uit zodat het klaar is om te importeren.
Volg deze stappen om het bestand in de thema-editor te importeren:
- Ga naar Divi > Themabouwer.
- Klik op het draagbaarheidspictogram.
- Selecteer in het pop-upvenster Overdraagbaarheid het tabblad Importeren.
- Kies het eerder gedownloade uitgepakte bestand om te importeren.
- Cliquer sur Divi Theme Builder importeren Sjablonen.
- Klik op het bewerkingspictogram om de geïmporteerde koptekst te bewerken.
Het pop-up inlogformulier maken in Divi
Deel 1: Aanmeld- en uitlogknoppen maken
Open in de Global Header Layout Editor de laagweergave zodat u alle elementen gemakkelijk kunt zien.
Verwijder de module in de bovenste rij van het kopgedeelte Sociale media volgen naast de Login-knop in kolom 3.
Lees ook: Divi: Vergelijking van de verschillende soorten gradiënten
De inlogknop maken
Om onze inlogknop te maken, opent u de instellingen van de knopmodule in kolom 3 van de bovenste rij.
Werk de volgende items bij op het ontwerptabblad:
- Knoppictogram: slotpictogram (zie screenshot)
- Plaatsing van knoppictogram: Rechts
- Alleen pictogram weergeven bij zweven voor knop: NEE
- Vulling: 0,5 em (boven en onder), 2 em (links), 0,7 em (rechts)
Onder het tabblad Geavanceerd, wijs de knop als volgt twee aangepaste CSS-klassen toe:
- CSS-klasse: et-toggle-popup et-popup-login-knop
Aanmaken van de uitlogknop
Om onze uitlogknop te maken, dupliceert u de bestaande inlogknop in kolom 3.
Om de twee knoppen te onderscheiden, kunt u het label van elk respectievelijk bijwerken. Open vervolgens de instellingen van de module Duplicate Button in kolom 3.
Wijzig de knoptekst om "Uitloggen" te lezen.
Werk de volgende items bij op het ontwerptabblad:
- Knoppictogram: ontgrendelingspictogram (zie screenshot)
Onder het tabblad Geavanceerd, werk de CSS Classes-knop als volgt bij:
- CSS-klasse: et-toggle-popup et-popup-logout-knop
De eerste klasse blijft hetzelfde, maar de tweede klasse zal anders zijn.
Deel 2: De pop-upsectie maken
Zodra de knoppen klaar zijn, zijn we klaar om de pop-upsectie te maken die zal dienen als onze pop-up met de vormen verbinding.
Voeg onder het kopgedeelte een nieuw normaal gedeelte toe.
Voeg vervolgens een rij met één kolom in de sectie in.
Sectie-instellingen
Open de sectie-instellingen voordat u de rij bijwerkt.
Onder het tabblad Content, geef de sectie een witte achtergrondkleur:
- Achtergrond: #ffffff
Onder het tabblad Design, werk het volgende bij:
- Breedte: 100%
- Max. Breedte: 800px (Desktop), 80% (Tablet), 100% (Telefoon)
- Sectie-uitlijning: Midden
- Hoogte: auto (desktop en tablet), 100% (telefoon)
- Maximale hoogte: 100%
- Vulling: 0px (boven en onder)
- Afgeronde hoeken: 10px
- Box Shadow: zie screenshot
- Box Shadow Verticale Positie: 0px
- Vervagingssterkte: 100 pixels
- Verspreidingssterkte: 50px
Onder het tabblad Geavanceerd, werk het volgende bij:
Voeg een aangepaste CSS-klasse toe.
- CSS-klasse: et-popup-login
Voeg een aangepast CSS-fragment toe aan het hoofdelement:
overscroll-behavior: contain;Werk de opties Zichtbaarheid en Positie bij.
- Horizontale overloop: verborgen
- Verticale overloop: automatisch
- Positie: Vast
- Locatie: Centrum Centrum
- Z-index: 999999
Lijn instellingen
Open met de sectie-instellingen de lijninstellingen en werk de volgende ontwerpinstellingen bij:
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Breedte: 100%
- Maximale breedte: 100%
- Vulling: 0px (boven), 5vh (onder)
Deel 3: Het pop-uppictogram voor sluiten maken
Om het pop-uppictogram voor sluiten te maken dat de pop-up bij klikken sluit/verbergt, gaan we een Blurb-module gebruiken.
Voeg een nieuwe Blurb-module toe aan de rij.
Open de module-instelling en verwijder de titel en hoofdtekst.
Voeg vervolgens het pictogram als volgt toe:
- Gebruik Icoon: JA
- Icoon: "x" icoon (zie screenshot)
Onder het tabblad Design, werk het volgende bij:
- Pictogramkleur: #004e43
- Afbeelding/pictogram uitlijning: gecentreerd
- Gebruik pictogram lettergrootte: JA
- Pictogram Lettergrootte: 50px
- Breedte: 50px
- Uitlijningsmodule: rechts
- Hoogte: 50px
Onder het tabblad Geavanceerd, voeg als volgt een CSS-klasse toe aan de Blurb-module:
- CSS-klasse: et-toggle-popup
Deel 4: De aanmeldingsformulieren "Aangemeld" en "Uitgelogd" maken
Om een verschillende inhoud en ontwerp te hebben voor het inlogformulier bij inloggen en uitloggen, zullen we twee verschillende inlogformuliermodules maken.
Het eerste is het aanmeldingsformulier dat elke keer dat de gebruiker wordt "uitgelogd" wordt weergegeven. Het tweede is het aanmeldingsformulier dat elke keer wordt weergegeven als de gebruiker is "ingelogd".
Aanmaken van het formulier “Uitgelogd”
Om het aanmeldingsformulier "Uitgelogd" te maken, voegt u een nieuwe aanmeldingsmodule toe onder het pictogram van de Blurb-module in de rij.
Open de module-instellingen en wijzig de volgende instellingen:
Tabblad Inhoud
- Doorverwijzen naar de huidige pagina: JA
- Gebruik achtergrondkleur: NEE
Tabblad Ontwerp
- Achtergrondkleur van velden: rgba (0,78,67,0.05)
- Achtergrondkleur veldfocus: rgba (0,78,67,0,15)
- Tekstuitlijning: gecentreerd
- Tekstkleur: Donker
- Titel Lettertype: Poppins
- Titel Lettergewicht: halfvet
- Tekstkleur: #000000
- Hoogte titelregel: 1,3 em
- Lettertype: Work Sans
Om de knopstijlen bij te werken, kopieert u de knopstijlen van de inlogknop die we hebben gemaakt naar de derde kolom in de rij van de koptekst.
Plak vervolgens de knopstijlen in de groep knopopties in de verbindingsinstellingen onder het tabblad Ontwerpen.
Werk vervolgens de knopstijlen voor het inlogformulier als volgt bij:
- Knop
- Tekstkleur: #ffffff
- Achtergrond: #004e43
- Achtergrond (zweven): #00683c
- Randbreedte: 0 pixels
- Vulling: 15px (boven en onder)
Werk vervolgens de formaatopties als volgt bij:
- Breedte: 100%
- Maximale breedte: 80% (desktop), 90% (tablet), 95% (telefoon)
- Uitlijningsmodule: Midden
Tabblad Geavanceerd
Onder het tabblad Geavanceerd, werk de CSS-klasse en aangepaste CSS als volgt bij:
- CSS-klasse: et-uitgelogd-formulier
Aangepaste CSS voor verbindingsbeschrijving:
width: 100% !important;
float: none !important;Aangepaste CSS voor het inlogformulier:
width: 100% !important;
padding: 0px !important;Dit zorgt ervoor dat de Login-module de volledige rij-/kolombreedte beslaat, zelfs op desktop.
Aanmaken van het “Aangemeld” formulier
Nu de "Uitgelogde" versie van het formulier compleet is, moeten we de "Ingelogde" versie maken die andere inhoud en stijl zal hebben om de gebruikerservaring te maximaliseren.
Om het inlogformulier "Uitgelogd" te maken, dupliceert u het bestaande inlogformulier.
Werk vervolgens het label bij voor elk van de vormen respectievelijk verbinding.
Open de dubbele instellingen (het formulier "Ingelogd") en voeg de sitetitel als dynamische inhoud toe aan de titel van de inlogformuliermodule.
Open vervolgens de instellingen voor dynamische inhoud van de sitetitel en werk de voor- en na-inhoud als volgt bij:
- Voor: "U probeert uit te loggen bij Elegant Themes"
- Na: ". "
Dit zal een mooie dynamische melding creëren voor gebruikers die proberen uit te loggen van de site.
Voeg vervolgens de volgende H3-header toe aan de body:
<h3>Are you sure?</h3>
Als je ooit de inhoud van de Login-module hebt gezien wanneer je bent ingelogd, weet je dat er een gepersonaliseerd bericht is met een gepersonaliseerde "uitlog"-link. Om deze link op een knop te laten lijken, moeten we de lettertype-/tekstinstellingen van de body-link als volgt aanpassen:
- Selecteer het tabblad Link onder optie Lichaamstaal.
- Koppelingslettertype: Work Sans
- Lettergewicht link: half vet
- Lettertype: TT
- Tekstuitlijning link: gecentreerd
- Kleur linktekst: #ffffff
OPMERKING: U kunt deze resultaten pas bekijken als u het formulier op een live-pagina bekijkt.
Onder het tabblad Geavanceerd, werk de CSS-klasse en aangepaste CSS als volgt bij:
- CSS-klasse: et-logged-in-form
Aangepaste CSS voor het inlogformulier:
display:none;
Deel 5: Aangepaste code toevoegen
Om de aangepaste CSS en JQuery toe te voegen die nodig zijn voor de functionaliteit van het pop-upaanmeldingsformulier, maakt u een nieuwe codemodule onder de laatste aanmeldingsmodule.
CSS
Open de instellingen van de codemodule en plak de volgende CSS in het codevak, zorg ervoor dat u de CSS in de benodigde stijltags plaatst.
/* 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;
}Merk op dat de CSS de “connected” klasse gebruikt die in WordPress is ingebouwd om de corresponderende login/logout-knoppen en de vormen Het aanmeldingsbericht 'Ingelogd'/'Uitgelogd' telkens wanneer de gebruiker is ingelogd of afgemeld.
JQuery
Plak onder de eindstijltag de volgende JQuery en zorg ervoor dat de code in de benodigde scripttags wordt gewikkeld.
(function ($) {
$(document).ready(function () {
$(".et-toggle-popup").click(function (e) {
e.preventDefault();
$(".et-popup-login").fadeToggle(500);
});
});
})(jQuery);Dit fragment schakelt eenvoudig het pop-upgedeelte om wanneer de gebruiker op een van de drie items met de klasse " en-toggle-pop-up (de in- en uitlogknoppen plus het presentatiepictogram "x").
Zie ook: Divi: instellingen voor achtergrondmaskers en opties voor patroontransformatie gebruiken
Het is gebeurd !
Vergeet niet om de wijzigingen die je in de sjabloon hebt aangebracht op te slaan in de themabouwer. Eenmaal opgeslagen, kunt u de resultaten bekijken op een live pagina.
Eindresultaat
Hier zijn de eindresultaten op computer, tablet en telefoon.
Merk op hoe de login-knop en de logout-knop veranderen. En zodra de gebruiker inlogt, blijft de gebruiker op de huidige pagina.
Bovendien geeft het pop-upaanmeldingsformulier verschillende "waarschuwings"-inhoud weer telkens wanneer de gebruiker probeert uit te loggen.
Download DIVI nu!!!
Conclusie.
Hopelijk geeft het maken van dit pop-up-aanmeldingsformulier en aangepaste in-/uitlogknoppen u enig inzicht in hoe u Divi's inlogformulier creatief kunt gebruiken.
Voel je vrij om het ontwerp en de inhoud van elk inlogformulier (of knoppen) aan te passen om een unieke inlogervaring op je eigen website te creëren.
We hopen ook dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
