Hur man skapar popup-fönster i WordPress med Gutenberg

Har du någon gång surfat på internet och plötsligt blivit hälsad av en popup? Ett popparande fönster som visas med överlagring när du besöker en webbsida. 

Ibland kan dessa popup-fönster vara väldigt användbara och erbjuda dig användbar information eller bra erbjudanden. Eller så kan de kännas lite irriterande och påträngande.

Men från en webbplatsägares synvinkel har popup-fönster visat sig vara ett kraftfullt sätt att fånga uppmärksamhet, marknadsföra erbjudanden och generera potentiella kunder.

Så att bygga rätt popup-fönster som engagerar användaren utan att irritera dem samtidigt är avgörande.

För att hjälpa dig med detta kommer vi att gå igenom varje steg för att skapa effektiva popup-fönster som är skräddarsydda för din webbplats mål. I slutet av den här guiden har du det enklaste sättet att skapa popup-fönster som inte bara drar till sig uppmärksamhet utan också förbättrar användarupplevelsen.

Vad är en popup på webbplatsen?

Popup-fönster är små fönster som visas på en webbsida, vanligtvis som en överlagring, för att fånga användarens uppmärksamhet. Dessa fönster kan innehålla olika former av innehåll som reklamannonser, prenumerationserbjudanden, aviseringar eller uppmaningar. 

Popup-fönster kräver ofta interaktion, som att gå in i eller lämna en sida, klicka på en knapp för att stänga dem eller fylla i ett formulär. De är utformade för att sticka ut från resten av sidan för att uppmana till omedelbart engagemang.

När brukar folk använda popup-fönster på sina webbplatser?

Popup-fönster används oftast för att uppnå specifika mål relaterade till användarengagemang och konvertering. Här är några vanliga scenarier när människor använder popup-fönster på sina webbplatser:

• Till fånga ledningar eller skapa en e-postlista med ett abonnemang.
• Marknadsför exklusiva erbjudanden, rabatter eller tidsbegränsade erbjudanden.
• Tillkännage nya produkter, funktioner eller större uppdateringar.
• Att ge viktiga meddelanden för att varna besökare. 
• Be besökarna att registrera dig för ett konto på webbplatsen.
• Till samla in feedback eller genomföra undersökningar bland publiken.
• Show samtycke till kakor eller integritetspolicy underrättelse.
• Drive användarna till anmäl dig till evenemang, webbseminarier eller workshops.

Dessa strategiska användningar av popup-fönster hjälper till att förbättra användarnas engagemang och konvertering, men det är viktigt att implementera dem med eftertänksamhet för att undvika att störa användarupplevelsen.

Hur man skapar WordPress-popups i Gutenberg

Låt oss hoppa in i kärndelen av den här självstudieguiden om hur man lägger till en popup på WordPress med hjälp av Gutenberg-blockredigeraren.

Standard Gutenberg-redigeraren kommer inte med en popup-byggare. Så du måste välja ett WordPress-popup-plugin för blockredigeraren. För den här handledningen har vi använt plugin-programmet GutenKit.

GutenKit är ett plugin för blockredigerare som kommer med en popup-byggare designad speciellt för Gutenberg. Med denna popup-byggare är det nu enklare än någonsin att skapa popup-fönster i Gutenberg.

Här är steg-för-steg-processen för att skapa en Gutenberg-popup i WordPress-redigeraren.

Installera och aktivera ett WordPress-popup-plugin för Gutenberg

För att installera GutenKit Popup Builder måste du ha GutenKit block editor plugin installerat på din webbplats. Här är de plugins och teman som krävs för att använda popup-byggaren sömlöst på din webbplats.

☑️Förutsättningsplugin(ar):

• GutenKit gratis version
• eller, GutenKit Pro version

☑️ Tema: Hej block-tema eller något WordPress-blocktema.

När du har installerat plugin-programmet GutenKit, gå till GutenKit > Moduler. Hitta Popup Builder och klicka på Installera knapp. Med Popup Builder aktiverat är du redo att börja bygga WordPress-popups i Gutenberg för din WordPress-webbplats.

Designa popup-fönster för WordPress med vilket Gutenberg-block som helst

Navigera nu till GutenKit > Popup och klicka Skapa ny popup för att öppna redigeraren där du kommer att skapa popup-fönstret.

Sedan kan du använda blocket för att bygga popupen i editorn.

Med GutenKit Popup Builder kan du använda alla Gutenberg-block för att designa din popup. 

Du kan använda 65+ GutenKit-block och 18+ moduler för att designa en modern och sofistikerad popup för din webbplats.

Detta inkluderar block som rubrik, stycken, knappar, bilder och till och med videor till din popup, vilket gör den mycket anpassningsbar. 

Skapa Gutenberg-popups med fördesignade mallar

Å andra sidan, istället för att börja från början, kan du spara tid och ansträngning genom att använda de färdiga designerna. Med över 500+ mönster och mallar tillgängliga i GutenKit:s mallbibliotek kan du snabbt skapa professionella popup-fönster på bara några minuter.

För att importera färdiga mönster

1. Popupbyggare för Gutenberg.
2. Klicka på mallbibliotek knapp.
3. Välj ett mönster från biblioteket.

Efter det kan du ändra innehållet och anpassa stilar för att passa din kampanj. Det är ett snabbt och problemfritt sätt att få fantastiska popup-fönster igång!

Använd smarta villkor för att visa Gutenberg-popups på din webbplats

Du har flexibiliteten att välja vilka sidor du vill att dina popup-fönster ska visas på. Gå bara över till popup-blockredigeraren och under fliken "Innehåll" ser du ett alternativ som heter "Villkor." 

Därifrån klickar du bara på  + Lägg till skick knappen och ställ in reglerna för var du vill att din popup ska visas. Så enkelt är det!

Med popup-byggaren GutenKit kan du ställa in villkoren Inkludera och Exkludera.

• Inkludera villkor: Med villkoren Inkludera kan du lägga till popup-fönster till hela webbplatsen, specifika sidor eller arkivsidor.
• Uteslut villkor: Du kan bestämma var du inte vill visa popup-fönster på din webbplats med exkluderingsvillkoren.

Så här kan du visa popup-fönster på din webbplats med smarta villkor:

Visa Gutenberg-popups på hela webbplatsen

För att visa popup-fönstret på alla sidor på din webbplats, 

👉 Steg 1: Lägg till ett nytt villkor för popup-fönster.

👉 Steg 2: Välj villkoret "Inkludera".

👉 Steg 3: Välj "Hela webbplatsen" för att visa popup på varje sida.

Välj bort specifika sidor från att visa popup-fönster

Det kan finnas tillfällen då du inte vill att popup-fönster ska visas på vissa sidor. Du kan göra det med Utesluta villkor. 

👉 Steg 1: Lägg till ett nytt villkor för popup-fönster.

👉 Steg 2: Välj villkoret "Uteslut".

👉 Steg 3: Välj "Singular".

👉 Steg 4: Välj en sida för att utesluta popup-fönster från att visas.

Visa popup-fönster endast på specifika sidor

Om du siktar på mer fokuserade kampanjer kanske du vill visa popup-fönster på vissa sidor på din webbplats.

👉 Steg 1: Lägg till ett nytt villkor för popup-fönster.

👉 Steg 2: Välj villkoret "Inkludera".

👉 Steg 3: Välj "Singular".

👉 Steg 4: Välj en sida för att visa en popup.

Dessutom, för att vara säker på att popup-fönstret inte dyker upp på andra sidor, kan du lägga till en utesluta villkor, och välj hela webbplatsen för att begränsa popup-fönstret från att visas på hela webbplatsen.

WordPress popup-fönster på arkivsidorna

Du kan också visa popup-fönster på valfri WordPress-arkivsida genom att ställa in ett villkor. För det, Lägg till villkor > Inkludera > Arkiv > Välj arkiv sida.

Å andra sidan, om du vill förhindra att popup-fönster visas på en viss arkivsida, kan du ställa in ett exkluderingsvillkor. Följ bara samma steg: För det, Lägg till villkor > Exkludera > Arkiv > Välj arkiv sida.

Bestäm hur och när Gutenbergs popup-fönster ska visas

Du har fullständig kontroll över hur popup-fönster visas på dina webbsidor. Du kan bestämma om popup-fönster ska visas vid sidladdning, utgångsavsikt eller efter en interaktion.

På GutenKit Popup Builder kan du välja hur popup-fönster ska utlösas på din webbplats från Innehåll > Öppna händelser på blockredigeraren..

Detta hjälper dig att utveckla olika typer av popup-fönster på Gutenberg. Här är typer av WordPress-popups på Gutenberg kan du designa med GutenKit Popup Builder.

1. Entry Popups

• Utlösare: Utlöses omedelbart när sidan laddas i användarens webbläsare.
• Ändamål: Engagerar användare så snart de landar på webbplatsen.
• Användningsfall: Välkomnar användare med rabatt, evenemangsmeddelande eller ber om en prenumeration direkt.

💡 Hur triggar man? Välj det öppna evenemanget som "Vid sidladdning”

2. Exit-Intent Popups

• Utlösare: Aktiveras när användaren avser att stänga fliken eller webbläsaren.
• Ändamål: Fångar användare innan de lämnar webbplatsen.
• Användningsfall: Erbjuder rabatt, prenumeration på nyhetsbrev eller specialerbjudande.

💡 Hur triggar man? Välj det öppna evenemanget som "Avsluta på sidan”

3. Rulla utlösa popup-fönster

• Utlösare: Utlöses av att användaren rullar ner en sida.
• Ändamål: Erbjuder ett kampanjerbjudande eller ber om feedback efter att användaren har utforskat en viss del av sidan.
• Användningsfall: Marknadsför ytterligare innehåll, ett registreringsformulär eller ett tidsbegränsat erbjudande.

💡 Hur triggar man? Välj det öppna evenemanget som "Sidan rullad”.

Efter det ställer du in "Sidrullningsförlopp för att bestämma vid vilken tidpunkt popup-fönstret ska visas när användaren rullar ner på sidan.

4. Popup-fönster för användarinaktivitet

• Utlösare: När användaren är inaktiv under en viss tid.
• Ändamål: Återengagera användare som har varit inaktiva under en viss tid på sajten.
• Användningsfall: Påminner användare om specialerbjudanden, uppmanar dem att vidta åtgärder eller föreslår föremål som de kan ha kvar i sin kundvagn.

💡 Hur triggar man? Välj det öppna evenemanget som "Efter inaktivitet”.

Ställ nu in Användarens inaktivitetstid på sekunder för att bestämma när popup-fönstret ska visas efter att användaren har blivit inaktiv.

5. På-klicka popup-fönster

• Utlösare: Aktiveras av användarinteraktion med ett avsnitt på sidan.
• Ändamål: Visar innehåll när användaren klickar på ett specifikt sidelement (t.ex. en knapp eller bild).
• Användningsfall: Används ofta för produktinformation, ytterligare formulärinlämningar eller videouppspelningar.

💡 Hur triggar man? Välj det öppna evenemanget som "Anpassad väljare Klicka”.

Lägg nu till Väljarklass för avsnittet. 

Med dessa olika typer av WordPress-popups tillgängliga i Gutenberg har du flexibiliteten att välja det bästa formatet som passar dina mål och förbättrar användarupplevelsen, vilket gör din webbplats mer engagerande och effektiv när det gäller att fånga uppmärksamhet och driva konverteringar.

Schemalägg popup-aktivering för din kampanj

Ibland kommer du att använda popup-fönster för att marknadsföra kampanjer på din webbplats. Nu har dessa kampanjer ett visst datum och tid för lansering. Så du måste matcha den exakta timingen för att aktivera popup-fönstret.

Du kan göra det med Avancerade regler. 

➡️ Steg 1: Slå på knappen för "Schemalägg datum och tid”.

➡️ Steg 2: Ställ in Tid när du vill aktivera popup-fönstret.

➡️ Steg 3: Välj den Datum av popup-kampanjens lansering.

Varför välja GutenKit Popup Builder för WordPress?

De GutenKit Popup Builder sticker ut som ett toppval för att skapa popup-fönster i WordPress på grund av dess sömlösa integration med Gutenberg-blockredigeraren, vilket erbjuder en intuitiv och mycket anpassningsbar upplevelse för användarna. Här är varför det är en utmärkt lösning för WordPress-webbplatser:

✅ Sömlös Gutenberg-integration:

GutenKit är byggt specifikt för Gutenberg, vilket innebär att du kan designa och hantera popup-fönster med samma blockbaserade gränssnitt som du redan är bekant med. Detta eliminerar behovet av externa popup-byggare eller kodning, strömlinjeformar hela processen och möjliggör en sammanhållen upplevelse.

✅ Fördesignade mallar för snabbinstallation:  

   GutenKit kommer med en mängd professionellt designade popup-mallar som enkelt kan anpassas för att passa ditt varumärkes stil. Dessa mallar sparar tid och ansträngning och erbjuder en utgångspunkt för dem som inte vill bygga popups från grunden men ändå vill ha en polerad, modern design.

✅ Avancerade visningsregler: 

Med GutenKit har du full kontroll över när och var dina popup-fönster visas. Du kan ställa in exakta visningsvillkor baserat på vilka sidor du vill visa popupen. 

Detta säkerställer att dina popup-fönster visas vid de mest optimala ögonblicken, vilket förbättrar engagemanget utan att vara påträngande.

✅ Flera triggeralternativ:

GutenKit erbjuder flera triggeralternativ för att visa popup-fönster, till exempel vid sidladdning, efter en tidsinställd fördröjning, vid rullning eller när användaren är på väg att lämna sidan. 

Du kan också utlösa popup-fönster när användare interagerar med specifika element, vilket ger dig fullständig kontroll över användarens resa.

✅ Flexibel anpassning

GutenKit Popup Builder möjliggör omfattande anpassning av dina popup-fönster, från animationer och stilar till typografi och färger. 

Du kan till och med lägga till anpassad CSS för mer avancerad stil, vilket säkerställer att dina popup-fönster matchar din webbplats unika design och varumärke.

✅ Responsiv och mobiloptimerad 

Popup-fönster skapade med GutenKit är fullt lyhörda och mobilvänliga, vilket säkerställer att dina popup-fönster ser bra ut på alla enheter. Du kan anpassa utseendet med ingångs- och utgångsanimationer, bakgrundsstilar, överläggsfärger och mer.

✅ Lätt och prestandaorienterad 

Till skillnad från många andra popup-plugins är GutenKit designad för att vara lätt och prestandaoptimerad. 

Det betyder att du inte behöver oroa dig för att popup-fönster saktar ner din webbplats, vilket är avgörande för både användarupplevelsen och SEO.

Avslutar

Genom att följa dessa steg kommer du enkelt att kunna bygga och visa popup-fönster på dina WordPress-webbplatser. Med GutenKit Popup Builder kan du enkelt integrera dynamiska popup-fönster i din WordPress-webbplats, så att du kan kommunicera effektivt med din publik. 

Ta insikterna från den här guiden och börja experimentera med olika popup-strategier för att maximera din webbplats potential!

Liksom Popup Builder, kommer GutenKit med 65+ block, 18+ moduler och 500+ färdiga designs för att ge dig en avancerad sidbyggarupplevelse i Gutenberg-blockredigeraren. Så installera GutenKit idag och börja bygga din drömwebbplats i WordPress.