Hur man enkelt lägger till modal popup på WordPress-webbplatsen: 3-stegs handledning

Visste du att en nyligen genomförd studie om 2 miljarder modala popup-fönster hade en 9.28% omvandlingsfrekvens bland de 10% bästa?(1)

Ja. Popup-fönster gör webbplatsbesök användarvänliga och hjälper dig att snabbt få fler nyhetsbrevsregistreringar. Popup-fönster har förändrats drastiskt i hur de ser ut och fungerar. Som ett resultat blir de mer populära på moderna webbplatser nu än någonsin.

Vill du också lägga till WP-modaler på din webbplats och utnyttja fördelarna den har att erbjuda?

Då är den här bloggen precis vad du behöver. Detta är den enda guiden du behöver för att lära dig om popup-modaler och hur du enkelt lägger till dem på din WordPress-webbplats. 

Källa: (1) Popup-statistik: Resultat från analys av 2 miljarder popup-exempel

Vad är en Modal Popup?

Modala popup-fönster är mycket vanliga och det är högst osannolikt att du inte har stött på någon. Men vet du definitionerna av modal popup? Låt oss ta en titt.

En modal (även kallad ett modalt fönster eller ljuslåda) är ett webbsideselement som visas framför och inaktiverar allt annat sidinnehåll. För att återgå till huvudinnehållet måste användaren engagera sig i modalen genom att slutföra en åtgärd eller genom att stänga den.

– Hubspot

Modala fönster skiljer sig från dialogrutor för gamla modeller. I popup-fönster utan modell har användare tillgång till hela fönstret även när popup-fönstret är på. Så de kan ignorera popup-fönstret och fortsätta att göra sitt arbete.

Å andra sidan skapar den nya modala popupen ett nytt "läge" i form av ett underordnat fönster och inaktiverar det överordnade fönstret. Som ett resultat kan användaren inte arbeta på det ursprungliga fönstret förrän han vidtar någon åtgärd eller stänger modal popup. 

Vad är fördelen? Fördelen är att du har din webbplats besökares uppmärksamhet även om det är för en sekund eller två. Och att få användarens fokus på ditt budskap är vad du behöver, eller hur? 

För om de ser vad du har att erbjuda, kommer de att stanna kvar i mer än en sekund, vilket säkerställer dig en ledning.

Varför använda Popup Modal på din WordPress-webbplats

De flesta tycker att popup-fönster är irriterande. Jag skyller naturligtvis inte på dem. Du går till en sida för att göra ditt arbete och plötsligt dyker en popup upp och avbryter, det är säkert irriterande. 

Men som företagare måste du se på en popup på ett annat sätt. För tro det eller ej dessa irriterande popup-fönster fungerar som förundran. Popup-modaler har visat sig vara extremt framgångsrika, särskilt i blyinsamlingen.

Enligt Sumo, samlade de in cirka 23 645 948 e-postadresser på mindre än två år med en popup-modal. I många fall gick konverteringsfrekvensen upp till så högt som 50.2%! 

Så om du vill öka din e-postlista och öka din omvandlingsfrekvens är modal pop din grej eftersom dessa är beprövade blymagneter.

Dessutom är modalerna enkla och flexibla och du behöver inte skicka användare till en annan sida för att slutföra en åtgärd. Fler potentiella kunder med bättre användarupplevelse. Så tänk aldrig att modals är värdelösa eller döda och börja använda dem idag.

Vanliga användningar av ett modalt fönster i modern webbdesign

Modaler är mycket effektiva närhelst du behöver webbplatsbesökare för att vidta åtgärder eller lägga märke till något viktigt meddelande. Några av de vanligaste användningsområdena för ett modalt fönster i webbdesign inkluderar:

• Visa välkomstmeddelande
• Samla e-post och bly för prenumeration på nyhetsbrev
• Inloggningsformulär
• Visa ett varningsmeddelande innan du vidtar åtgärder
• Visa cookiepolicy
• Visa media som bildgalleri (produkt) eller video etc.  
• För flerstegsformulär för en bättre användarupplevelse.

Jag har bara listat några av de många sätten att använda modal i webbdesign. När du väl vet hur du skapar anpassade popup-fönster i WordPress kommer du att hitta olika sätt att använda dem på din webbplats för optimala resultat. 

Så, låt oss börja.

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

Jag antar att du har WordPress installerat på din webbplats. Förutom det behöver du en sidbyggare och ett WordPress-popup-plugin för att göra modal på din webbplats:

1. Elementor (gratisversion)
2. ElementsKit (både gratis och pro version)

Elementor är en gratis sidbyggare och ElementsKit är en av de bästa WordPress modala popup-plugins.

Klar med installationen? nu är du redo att skapa en anpassad WordPress popup vid klick i WordPress! Låt oss börja huvudprocessen nu.

Hur man lägger till modal popup i WordPress i 3 steg i Elementor med hjälp av ElementsKit

Om du tycker att det är svårt att lägga till en popup på din WordPress-webbplats, redo att bli överraskad. Följ stegen nedan och skapa enkelt en Elementor modal popup i wp enkelt. Detta är den enklaste handledningen om hur man lägger till popup-fönster i WordPress.

Steg 1: Aktivera Modal Popup Widget

När du har installerat ElementsKit-plugins kan du aktivera Elementor Modal Popup-widget från WordPress-instrumentpanelen

• Gå till  ElementsKit  > Widgets > Slå på Popup Modal > Klicka Spara ändringar

Steg 2: Lägg till WP Modal Popup Widget 

• Sök efter en popup-modal, dra och släpp widgeten på den sektion du vill att din Modal ska visas.

Steg 3: Konfigurera inställningar för att slutföra

Klicka på ikonen Redigera i popup-sektionen för att gå till redigeringsalternativen.

• För att ändra knapptexten gå till Innehåll > Växlingsknapp > Märka och redigera

• För att ändra titel och texta gå till Innehåll > Rubrik och ändra alternativen med din egen text.

• För att ändra innehåll av kroppen, expandera innehållssektionen och redigera texten för att skapa ett WordPress popup-meddelande.

• Gå till Innehåll > Sidfot > Knapp > CTA och ändra CTA-etiketten och URL:en med ElementsKit, en anpassad popup-byggare.

• Slutligen, klicka på Uppdatering att spara.

Gjort. Klicka nu på förhandsgranskningsknappen för att se resultaten och kolla hur ditt WordPress-popup-fönster ser ut:

Bra gjort! Du har skapat din Elementor modal popup.

Ytterligare inställningar för Modal

Låt oss nu ta en titt på de ytterligare modala inställningarna du kan anpassa:

Layout:

Expandera layoutalternativet för att ändra växlartyp, popup-position och popup-visningsalternativ.

Växlingstyp:

Du behöver inte nödvändigtvis ha en modal som triggar när någon klickar på en knapp. ElementsKit erbjuder dig 2 fler alternativ att välja mellan förutom knappen

Bild: Du kan välja vilken anpassad bild som helst i valfri storlek istället för en knapp som växlare för din modal. För att välja en anpassad bild 

• Gå till Innehåll > Växlingstyp > Välj Bild
• Gå till Toggler Image > Välj en bild, bildstorlek och justering

Tid: Du kan också ställa in modalen så att den utlöses efter en viss tid utan någon åtgärd från användaren. Till exempel för att ställa in din modal att visas efter 3 sek

• Gå till Innehåll > Växlingstyp > Tid
• Lägg till tid Växla efter (inom sekunder)

Popup-showtyp:

Du har två alternativ för popup-showtyp: Modal och Slide.

Popup-position: 

Du kan välja att placera din popup var som helst i fönstret. De tillgängliga positionsalternativen att välja mellan är:

• Övre vänstra
• Top Center
• Överst till höger
• Mitten vänster
• Centrum
• Mitten höger
• Nedre vänstra
• Nedre mitten
• Nere till höger

Dyka upp: 

Expandera popup-alternativet för att välja bredd och minsta höjd. Här får du även möjlighet att visa eller dölja de stäng ikon, sidhuvud och sidfot. Du kan också justera den horisontella och vertikala positionen och lägg till animation enligt din önskan.

Täcka över: 

Om du inte vill tvinga användaren att klicka på din modal för att stänga den, slå på Stäng Popup OnClick Overlay alternativ. På så sätt kan användaren klicka var som helst i fönstret för att stänga av modalen.

Stäng ikon: 

Här kan du ändra positionen för stängningsikonen. Du kan ställa in popup uppe till höger, popup uppe till vänster, fönster uppe till höger, fönster uppe till vänster. Du kan också ändra de vertikala och horisontella positionerna. Dessutom kan du välja vilken ikon som helst från biblioteket eller använda en SVG-bild som ikon.

Rubrik:

Förutom att ändra titel och undertext kan du också visa eller dölja avdelaren härifrån.

Sidfot:

Expandera sidfotsalternativet för att ändra etikett, variant och justering av sidfotsknapparna. Du kan också välja att dölja dem om du vill härifrån. 

Där har du det! Du kan nu använda de moderna, engagerande popup-fönsterna på din webbplats.

För mer information, läs dokumentationen för ElementsKit Popup Modal widget för Elementor.

Hur man lägger till anpassad design i Elementor Modal med ElementsKit Popup Builder

Nu vet du hur du ändrar text, position, animerar och gör mycket mer för att anpassa ditt modala fönster i WordPress. Men det ser ändå lite tråkigt ut, eller hur? Precis som alla andra modal popup-fönster i WordPress Elementor.

Om du kan lägga till en anpassad bild eller en video eller någon annan widget i ditt modala fönster precis som en sida, skulle det vara så fantastiskt. Du kan lägga till valfri anpassad design till din modell med ElementsKit.

Följ stegen för att enkelt skapa din önskade anpassade design på modal:

• Gå till Innehåll > Innehåll > Sätta på Aktivera mall
• Klicka på modal-knappen och när modalen öppnas, klicka på redigeringsalternativ att öppna widgetområde

• När widgetområdet är öppet kan du Sök för alla widgetar > dra och släpp > uppdatering till spara.

Om du till exempel vill lägga till en video, sök efter videon i widgetområdet och dra och släpp för att lägga till i din modell och uppdatera. Nu ska videon visas i modalfönstret.

Använd Premade ElementsKit-sektioner för vackra modal

Har du inte tid att skapa en modal popup-design från grunden? Inga bekymmer. ElementsKit popup Builder tillhandahåller många inbyggda sektioner som du kan välja för att skapa engagerande modaler för att framhäva ditt budskap för tittaren.

För att använda inbyggda widgets från ElementsKit, följ stegen nedan:

• Klicka på redigeringsalternativ på modalen  att öppna widgetområde
• Klicka på EK-knappen för att öppna ett annat widgetfönster med de förgjorda sektionerna.

• Gå till > Avsnitt > Välja avsnittet du gillar > Föra in

• Efter insättningen kan du förändra bilden, texten eller bakgrundsfärgen enligt dina önskemål och uppdatering.

Och här är slutresultatet!

ElementsKit erbjuder 60+ widgets och 500+ färdiga sektioner. Läs mer om ElementsKit och hur du använder dem för att förbättra din webbplats.

Lägg till kontaktformulär 7 i Modal med ElementsKit

Som jag sa tidigare är modaler effektiva för att få fler nyhetsbrevprenumerationer och samla in användardata. Men för det måste du lägga till ett kontaktformulär i din modal, eller hur? 

Få inte panik, du behöver inte ett annat WordPress popup-plugin för att lägga till ett kontaktformulär i ditt popfönster. ElementsKit WordPress-plugin är en allt-i-ett-plugin för popup-tillverkare.

Följ instruktionerna nedan för att lägga till populära kontaktformulär 7 i din modal med ElementsKit popup maker plugin.

Innan du följer dessa steg, se till att du har skapat ett kontaktformulär på din webbplats med kontaktformulär 7, Elementor Page Builder och ElementsKit.

Du kan också ta en titt på videohandledningen nedan för att skapa ett kontaktformulär.

Låt oss börja.

• Gå till Innehåll > Innehåll > Sätta på Aktivera mall
• Klicka på redigeringsalternativ att öppna widgetområde
• Sök Kontaktformulär, dra och släpp på avsnittet du vill lägga till.
• Bygga ut stilalternativet under kontaktformulär 7
• Välj från förhandsgjord form och uppdatering.

Här har du en modal popup med ett kontaktformulär för att öka din e-postlista.

Visste du att du kan skapa en anpassad widget utan att ha någon djup kodningskunskap? Kontrollera hur man bygger en anpassad widget enkelt utan kod med hjälp av ElementsKit.

Effektiva tips för att lägga till WordPress Elementor Modal Popup

WordPress modala popup-fönster kan avsevärt förbättra användarnas engagemang, förmedla viktiga budskap och driva specifika åtgärder från dina besökare. Här är 7 effektiva tips för att implementera effektfulla modala popup-fönster på din WordPress-webbplats.

1️⃣ Välj en pålitlig plugin

Välj en välskött WordPress modal plugin som Elementor” eller “ElementsKit” för att skapa modalfönstret på din webbplats.

2️⃣ Definiera tydliga mål

Beskriv tydligt syftet med din WordPress modala popup, oavsett om det är att samla in e-postmeddelanden, marknadsföra erbjudanden eller förmedla viktig information.

3️⃣ Timing är nyckeln

Använd triggers som tidsfördröjning, rullningsdjup eller utgångsavsikt för att visa popup-fönstret i rätt ögonblick. Det hjälper till att undvika omedelbara sidladdningsavbrott.

4️⃣ Mobil lyhördhet

Se till att din WordPress modal popup är mobilvänlig för att ge en positiv upplevelse på olika enheter.

5️⃣Design för användarupplevelse

Designa kortfattade, visuellt tilltalande WordPress modala popup-fönster med högkvalitativt innehåll. Inkludera ett lättillgängligt alternativ för att stänga popup-fönstret för användare som inte är intresserade av innehållet.

6️⃣ A/B-testning för optimering

Implementera A/B-tester för att förfina din modal i WordPress genom att skapa varianter och identifiera de mest effektiva elementen för din publik.

7️⃣ Efterlevnad av integritetsbestämmelser

Se till att din WordPress modal popup följer integritetsbestämmelserna, inklusive transparent kommunikation av din integritetspolicy och att erhålla uttryckligt samtycke för datainsamling.

Vanliga frågor

Sammanfatta

Grattis! Nu vet du hur du skapar Elementor popup-modaler i WordPress med hjälp av en Elementor Addon. Skapa popup-fönster för kontaktformulär och gör alla anpassningar på WordPress-webbplatsen utan ansträngning med den enkla popup-tillverkaren, ElementsKit Pro och Elementor Page Builder.

Stanna inte bara här. Fortsätt att experimentera med hur många sätt du kan använda WordPress popup-modal på din webbplats. Och om du behöver hjälp med att bygga WordPress popup-fönster med hjälp av ElementsKit, lämna en kommentar nedan.