Hoe maak je een WordPress Login Popup Modal aan (stap voor stap)

Wilt u een WordPress login popup modal toevoegen aan uw site? Met een modale login-pop-up kunnen uw gebruikers snel inloggen op uw website zonder de pagina te verlaten die ze bekijken. Dit verbetert de gebruikerservaring en betrokkenheid op uw website. In dit artikel laten we u zien hoe u eenvoudig een WordPress login pop-up modaal maakt - stap voor stap.

Waarom een ​​WordPress Login Popup Modal maken?

Als u een online winkel, lidmaatschapswebsite of online cursussen aanbiedt, staat u gebruikers waarschijnlijk toe zich te registreren en in te loggen op uw website.

Normaal gesproken, wanneer gebruikers op de login-link klikken, worden ze naar de standaard WordPress-inlogpagina of een andere aangepaste inlogpagina op uw website geleid. Zodra gebruikers zijn ingelogd, worden ze opnieuw doorgestuurd naar een andere pagina.

Met een modale inlogpop-up kunt u het aanmeldingsformulier weergeven zonder gebruikers naar een andere pagina te sturen. Nadat u bent ingelogd, kunt u gebruikers omleiden naar elke gewenste pagina.

Een modale login-pop-up is sneller en verbetert de gebruikerservaring op uw website. Een snellere en meer gepolijste gebruikerservaring kan uw verkopen en conversies stimuleren.

Dat gezegd hebbende, laten we eens kijken naar hoe je eenvoudig een modale login-popup kunt maken in WordPress. We zullen u twee methoden laten zien om dat te doen, en u kunt degene kiezen die het beste bij u past.

Methode 1. Maak een Modal Login Popup met behulp van CSH Login

Deze methode is voor de meeste gebruikers eenvoudiger en aanbevolen.

Het eerste wat u hoeft te doen is de CSH Login-plugin installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Na activering moet je naar Modale login pagina in uw WordPress-beheerdersgebied en selecteer een type voor modaal inlogformulier.

Nadat u het modale type inlogbox hebt geselecteerd, kunt u naar beneden scrollen en inlog- / logout-omleidingen voor het formulier beheren. U kunt gebruikers ook toestaan ​​hun eigen wachtwoorden te genereren.

Vervolgens moet je naar beneden scrollen naar de stijlen sectie en lay-out selecteren, labels weergeven, achtergrondkleur, knopkleur, koppelingskleur en meer.

Verder kunt u registratie-e-mail, onderwerp van e-mail toevoegen, Google reCaptcha gebruiken en meer. Met deze plug-in kunt u ook sociale login toevoegen zoals Facebook, Twitter en Google.

Zorg ervoor dat u de wijzigingen opslaat en kopieer de shortcode bovenaan deze pagina. U moet een nieuwe pagina maken in WordPress of een bestaande pagina bewerken om de shortcode in de inhoudeditor toe te voegen.

U kunt ook de modal-login toevoegen in uw WordPress zijbalk. Ga gewoon naar Uiterlijk »Widgets slepen en neerzetten CSH login widget in zijbalk van uw site.

CSH-modal login kan ook worden toegevoegd aan de sjabloonbestanden van uw website. Zodra u het op uw site hebt toegevoegd, bezoekt u eenvoudigweg uw WordPress-site om de modal login-link in actie te zien.

Methode 2. Maak een Modal Login Popup met WPForms en OptinMonster

Voor deze methode hebt u de plug-in WPForms en OptinMontser nodig. Als u al over deze twee plug-ins beschikt, is deze methode de betere oplossing voor u.

WPForms is de beste invoegtoepassing voor WordPress-contactpersonen. Je hebt ten minste hun Pro-plan nodig om toegang te krijgen tot de add-on voor gebruikersregistratie.

OptinMonster is de beste lead generation-software op de markt. Het helpt u websitebezoekers om te zetten in abonnees en klanten. U hebt ten minste het Pro-plan nodig om toegang te krijgen tot de MonsterLinks-functie die in dit artikel wordt gebruikt.

Klaar? Laten we beginnen.

WPForms gebruiken om een ​​gebruikersaanmeldingsformulier te maken

Eerst moet u de plug-in WPForms installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Na activering moet je naar WPForms »Add-ons pagina om het te installeren en te activeren User Registration Addon.

Nadat je de add-on hebt geactiveerd, moet je naar WPForms »Nieuw toevoegen pagina om het gebruikersaanmeldingsformulier te maken.

Zodra de WPForms-builder is gelanceerd, moet u de pre-build kiezen Gebruikersaanmeldingsformulier sjabloon.

Deze inlogsjabloon heeft de velden voor e-mail en wachtwoord die vergelijkbaar zijn met het standaard WordPress-aanmeldingsformulier. U kunt indien nodig extra velden aan de linkerkant van het scherm slepen en neerzetten.

Klik vervolgens op de Wachtwoord veld in de voorbeeldsectie en toont de veldopties aan de linkerkant. U kunt de onderstaande code toevoegen in het vak Beschrijving van Wachtwoord veld om opties weer te geven, zoals wachtwoord vergeten en gebruikersregistratie.

 Weet je je wachtwoord niet meer? Klik hier. Heb je geen account? Registreer hier. 

Hierna moet u klikken op de Opslaan knop en klik vervolgens op de insluiten knop.

Er verschijnt een pop-upvenster met de insluitcode. U moet deze code kopiëren en opslaan om later te gebruiken.

Uw inlogformulier is klaar. Nu kunt u doorgaan en de modale pop-up maken.

OptinMonster gebruiken om een ​​modale pop-up te maken

Eerst moet u de OptinMonster-plug-in installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Na activering moet je naar OptinMonster in WordPress admin gebied en klik op Maak een nieuwe campagne knop.

Uw OptinMonster-dashboard wordt geopend op een nieuwe webpagina.

Eenmaal binnen moet je selecteren Lightbox Popup als campagnetype, dus u kunt uw aanmeldingsformulier toevoegen in de pop-up.

Vervolgens moet u de selecteren Canvas campagnesjabloon die een lege sjabloon is en waarmee u aangepaste code en shortcodes kunt toevoegen.

Het zal je vragen om een ​​naam toe te voegen aan je lightbox en de website te selecteren waar je deze popup wilt laden.

Zodra u op klikt Begin met bouwen knop, wordt u doorgestuurd naar de instellingenpagina van de OptinMonster-campagne.

Vanaf hier moet je naar toe gaan Optin tab en stel de breedte en hoogte van het canvas in, voeg inlogcode inlogformulier toe Aangepaste canvas-HTML veld, beheer display en geluidseffecten voor modale pop-up, en meer.

Notitie: De insluitcode van het inlogformulier moet de code zijn die u hebt gekopieerd nadat u in de vorige stap uw aanmeldingsformulier hebt gemaakt.

Omdat u een modale login-pop-up maakt, moet u naar het tabblad Setup gaan en de waarde '0' instellen voor Duur van de cookie en Succes Cookie Duur. Het zal het formulier weergeven aan alle bezoekers wanneer ze op uw link klikken.

Vervolgens moet je de Displayregels tab en vergroot MonsterLink om de status in actief te veranderen.

Zorg ervoor dat u op klikt Opslaan knop in de rechterbovenhoek en ga naar Publiceren sectie om de status actief te maken.

Nu kunt u deze modale login-popup toevoegen aan uw WordPress-pagina's of berichten.

Modal Login toevoegen in WordPress

Je moet teruggaan naar OptinMonster in uw WordPress admin-gebied, en het zal u de lijst met campagnes tonen. Als u uw onlangs gemaakte campagne voor modale aanmelding niet ziet, klikt u gewoon op de Campagnes vernieuwen knop.

Vervolgens moet u de campagne-uitvoerinstellingen bewerken om optin op uw site in te schakelen en te selecteren wie de modale login-pop-up moet zien. Zorg ervoor dat u op klikt Instellingen opslaan knop.

Daarna moet je teruggaan naar de overzichtspagina voor campagnes en de slug kopiëren die zichtbaar is onder de live optie van de campagne. Deze unieke slug kan worden gebruikt in shortcodes en code om de modale login in WordPress weer te geven.

Vervolgens kunt u een nieuwe WordPress-pagina maken of een bestaande bewerken en deze code toevoegen aan uw unieke campagnestok.

 Inloggen / registreren 

U kunt ook de bovenstaande code toevoegen in uw WordPress-menu's, zijbalk of een ander gedeelte van uw site.

Zorg ervoor dat u de wijzigingen op de WordPress-pagina opslaat en uw site bezoekt om de modal login in actie te zien.

We hopen dat dit artikel je heeft geholpen om te leren hoe je een modale login kunt maken in WordPress. Wellicht wilt u ook onze complete lijst met beste plug-ins voor WordPress-aanmeldingspagina's bekijken en uw eigen inlogpagina gemakkelijk ontwerpen.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.