Hur man skapar en WordPress-inloggning Popup-modal (steg för steg)

Vill du lägga till en WordPress inloggning popup modal på din webbplats? En modal inloggnings popup tillåter dina användare att snabbt logga in på din webbplats utan att lämna sidan som de tittar på. Detta förbättrar användarupplevelse och engagemang på din webbplats. I den här artikeln visar vi hur du enkelt skapar en WordPress inloggnings popup-modell - steg för steg.

Varför skapa en WordPress-inloggning Popup Modal?

Om du kör en webbutik, medlemskapswebbplats eller säljer onlinekurser, tillåter du troligtvis att användare registrerar och loggar in på din webbplats.

Normalt, när användarna klickar på inloggningslänken, tas de till standard WordPress inloggningssidan eller en annan anpassad inloggningssida på din webbplats. När användarna är inloggade, omdirigeras de igen till en annan sida.

En modal inloggnings popup kan du visa inloggningsformuläret utan att skicka användare till en annan sida. När du är inloggad kan du omdirigera användare till vilken sida du vill ha.

En modal inloggnings popup är snabbare och förbättrar användarupplevelse på din webbplats. En snabbare och mer polerad användarupplevelse kan öka din försäljning och omvandlingar.

Med det sagt, låt oss ta en titt på hur man enkelt skapar en modal inloggnings popup i WordPress. Vi visar dig två metoder för att göra det, och du kan välja den som bäst passar dina behov.

Metod 1. Skapa en modal inloggnings popup med hjälp av CSH-inloggning

Denna metod är enklare och rekommenderad för de flesta användare.

Det första du behöver göra är att installera och aktivera CSH-inloggningsprogrammet. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering måste du gå till Modal Login sida i ditt WordPress-administratörsområde och välj en typ för modalt inloggningsformulär.

Efter att ha valt den typiska inloggningsrutan, kan du bläddra ner och hantera inloggning / utloggningsomdirigeringar för formuläret. Du kan också tillåta användare att skapa egna lösenord.

Därefter måste du rulla ner till Styles avsnitt och välj layout, visa etiketter, bakgrundsfärg, knappfärg, länkfärg och mer.

Dessutom kan du lägga till registreringsmeddelande, e-postmeddelande, använda Google reCaptcha och mer. Det här pluginet tillåter dig också att lägga till sociala inloggningar som Facebook, Twitter och Google.

Se till att spara ändringarna och kopiera kortnummeret längst upp på den här sidan. Du måste skapa en ny sida i WordPress eller redigera en befintlig för att lägga till kortkoden i innehållsredigeraren.

Du kan också lägga till modal inloggning i ditt WordPress sidobalk. Helt enkelt gå till Utseende »Widgets att dra och släppa CSH-inloggning widget i sidofältet på din webbplats.

CSH modal inloggning kan också läggas till i dina webbsidor mallfiler. När du har lagt till den på din webbplats, besök bara din WordPress-sida för att se modal inloggningslänk i åtgärd.

Metod 2. Skapa en modal inloggnings popup med WPForms och OptinMonster

För den här metoden behöver du WPForms plugin och OptinMontser. Om du redan har dessa två plugins, så är den här metoden den bättre lösningen för dig.

WPForms är det bästa pluginformuläret för WordPress-kontaktformulär. Du behöver åtminstone deras Pro-plan för att få åtkomst till användarregistreringsaddonet.

OptinMonster är den bästa ledande generationsprogramvaran på marknaden. Det hjälper dig att konvertera besökare till abonnenter och kunder. Du behöver åtminstone Pro-planen för att komma åt MonsterLinks-funktionen som används i den här artikeln.

Redo? Låt oss börja.

Använda WPForms för att skapa en användar-inloggningsformulär

Först måste du installera och aktivera WPForms plugin. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering måste du gå till WPForms »Addons sida för att installera och aktivera User Registration Addon.

När du har aktiverat tillägget måste du gå till WPForms »Lägg till nytt sida för att skapa användar-inloggningsformuläret.

När WPForms byggare har startats måste du välja den förbyggda Användar inloggningsformulär mall.

Den här inloggningsformulärmallen innehåller fältet för e-post och lösenord som fungerar som standardformuläret för WordPress. Du kan dra och släppa några ytterligare fält från vänster på skärmen efter behov.

Klicka sedan på Lösenord fält i förhandsgranskningsavsnitt, och det kommer att visa fältalternativen på vänster sida. Du kan lägga till koden nedan i beskrivningsrutan för Lösenord fält för att visa alternativ som glömt lösenord och användarregistrering.

 Kan du inte komma ihåg ditt lösenord? Klicka här. Har du inget konto? Registrera här. 

Därefter måste du klicka på Spara knappen och klicka sedan på Bädda in knapp.

Ett popup-fönster öppnas med inbäddningskoden. Du måste kopiera den här koden och spara den för att kunna användas senare.

Ditt inloggningsformulär är klart. Nu kan du gå vidare och skapa den modala popupen.

Använda OptinMonster för att skapa en modal popup

Först måste du installera och aktivera OptinMonster-plugin. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering måste du gå till OptinMonster i WordPress admin area och klicka på Skapa ny kampanj knapp.

Din OptinMonster dashboard öppnas på en ny webbsida.

En gång inuti måste du välja Lightbox Popup som kampanjtyp, så du kan lägga till ditt inloggningsformulär i popup-fönstret.

Därefter måste du välja Duk kampanjmall som är en tom mall och låter dig lägga till anpassad kod och kortnummer.

Det kommer att be dig att lägga till ett namn i din ljuskälla och välj den webbplats där du vill ladda den här popupen.

När du klickar på Börja bygga knappen, kommer du att omdirigeras till OptinMonster-kampanjens installationssida.

Härifrån måste du gå till optin flik och sätt bredd och höjd på duken, lägg till inloggningsformuläret inbäddningskod i Custom Canvas HTML fält, hantera visning och ljudeffekter för modal popup och mer.

Notera: Inloggningsformulärets inbäddningskod ska vara koden som du kopierade efter att du skapat ditt inloggningsformulär i föregående steg.

Eftersom du skapar en modal inloggnings popup måste du gå till installationsfliken och ange "0" -värdet för Cookie-varaktighet och Succes Cookie Varaktighet. Det kommer att visa formuläret för alla besökare när de klickar på din länk.

Därefter måste du besöka Displayregler fliken och expandera MonsterLink för att ändra statusen till aktiv.

Se till att klicka på Spara knappen längst upp till höger och gå till Publicera avsnittet för att aktivera statusen.

Nu kan du lägga till denna modala inloggnings popup i dina WordPress-sidor eller inlägg.

Lägga till modal inloggning i WordPress

Du måste gå tillbaka till OptinMonster i ditt WordPress-administrativa område, och det kommer visa dig listan över kampanjer. Om du inte ser din nyligen skapade kampanj för modal inloggning, klicka helt enkelt på Uppdatera kampanjer knapp.

Därefter måste du redigera inställningarna för kampanjutmatning för att aktivera optin på din webbplats och välj vem som ska se modal inloggnings popup. Se till att klicka på Spara inställningar knapp.

Därefter måste du gå tillbaka till kampanjöversiktssidan och kopiera sluggen som syns under kampanjens levande alternativ. Denna unika slug kan användas i kortnummer och kod för att visa modal inloggning i WordPress.

Därefter kan du skapa en ny WordPress-sida eller redigera en befintlig och lägga till den här koden med din unika kampanjsluga.

 Logga in / Registrera 

Du kan också lägga till koden ovan i dina WordPress-menyer, sidofält eller något annat område på din webbplats.

Se till att spara ändringarna på WordPress-sidan och besök din webbplats för att se modal inloggning i åtgärd.

Vi hoppas att den här artikeln hjälper dig att lära dig hur du skapar en modal inloggning i WordPress. Du kan också vilja se vår kompletta lista över de bästa WordPress-inloggningssida-pluggarna och enkelt skapa din egen inloggningssida.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.