Så här skapar du en välkomstmatta för din site i WordPress (+ exempel)

En välkomstmatta är en dynamisk overlay i helskärm som kan hjälpa dig att få fler prenumeranter på nyhetsbrev, nedladdningar av e-böcker, produktförsäljning och mycket mer.

På WPBeginner och andra varumärken använder vi konsekvent välkomstmattor för att bygga vår e-postlista och marknadsföra olika produkter. Det här är ett utmärkt sätt att öka konverteringen på din webbplats och uppmuntra människor att återvända.

I den här artikeln kommer vi att dela med oss av hur du skapar en välkomstmatta för din site i WordPress, tillsammans med några bra exempel på välkomstmattor att lära av.

Varför en välkomstmatta kan öka din konvertering

Mer än 70% av de besökare som lämnar din WordPress-webbplats kommer aldrig tillbaka om du inte konverterar dem till e-postprenumeranter eller kunder.

En välkomstmatta är en stor interstitial i fullskärm som blockerar vyn av resten av din websites content för att genomföra användarens uppmärksamhet.

Det kanske låter som en dålig idé, men det är ett bra sätt att få ditt message framför besökarna direkt.

Om besökarna inte vill ha det du erbjuder kan de helt enkelt close välkomstmattan.

Naturligtvis vill du ge människor en bra anledning att registrera sig om du visar en välkomstmatta istället för en exit-intent popup, till exempel en rabattkod eller till och med en freebie.

Du kanske till exempel har sett populära stora ecommerce-butiker erbjuda en specialrabatt med hjälp av en välkomstmatta i helskärm med gamification.

I andra fall kanske du har sett populära bloggare använda en välkomstmatta i full vy för att utöka sitt nyhetsbrev.

Du kan t.ex. erbjuda en gratis guide eller PDF-fil i utbyte mot användarens e-postadress.

Med det sagt, låt oss ta en titt på hur du enkelt kan add to en välkomstmatta till din website.

Så här skapar du en välkomstmatta för din website

Det enklaste sättet att skapa en välkomstmatta i WordPress är att använda OptinMonster. Det är den bästa programvaran för generering av leads i världen och tillåter dig att enkelt skapa optin-formulär, inklusive välkomstmattor.

Du kan läsa vår kompletta OptinMonster-recension för mer detaljer.

Först måste du besöka OptinMonster-webbplatsen och registrera dig för ett konto. Du behöver åtminstone Basic-planen för att skapa överlägg i helskärm.

Därefter måste du installera och aktivera OptinMonster WordPress plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Pluginet ansluter OptinMonster-appen till din website. När du har aktiverat pluginet ser du installationsguiden i din WordPress dashboard. Gå vidare och klicka på knappen ”Anslut ditt befintliga konto”.

Därefter öppnas ett new fönster.

Klicka bara på knappen ”Anslut till WordPress”.

Nu är du redo att skapa din välkomstmatta.

Skapa en välkomstmatta för din website

Du kan head till OptinMonster ” Kampanjer för att skapa en new kampanj.

Gå vidare och klicka på knappen ”Skapa din första kampanj” för att börja skapa din välkomstmatta.

Ett nytt fönster kommer nu att dyka upp där du kan välja pre-built templates eller välja färdiga kampanjer och lead magnets, inspirerade av framgångsrika varumärken. OptinMonster ger dig också alternativet att anställa en specialist för att customize dina kampanjer.

I denna tutorial kommer vi att använda alternativet ”Templates”.

Detta kommer att ta dig till OptinMonster kampanjbyggare.

Välj sedan ”Fullscreen” som din kampanjtyp.

Du måste välja en template för din kampanj. Vi kommer att använda templaten ”Entrance”, men du kan välja en annan template om du vill.

När du har valt en template, gå vidare och enter ett namn för din kampanj och click the ”Start Building” button.

Därefter kan du customize din kampanj med hjälp av drag and drop-byggaren. Du kan ändra allt du gillar här.

Det finns olika block som kan addas till kampanjen, som gillar images, text, knappar, med mera. Du kommer också att vilja edit texten så att den motsvarar your erbjudande.

Klicka bara på ett element så ser du att du kan editera det i den vänstra rutan.

Till instance, we will change the headline of the full-screen welcome mat for our demo campaign.

Nästa steg är att låta din välkomstmatta glida in. Det gör du genom att clicka på Settings icon längst ner på vänster sida.

Härifrån måste du toggle alternativet ”Display a Page Slide?” för att aktivera det.

Det innebär att din välkomstmatta glider ner från högst upp på vyn istället för att försvinna in i viewen.

Därefter måste du byta till ”Success” view på din välkomstmatta. Det här är vad dina användare kommer att se när de har utfört önskad action. Om du vill kan du customize framgångsvyn eller använda standard templates.

När du är nöjd med din välkomstmatta kan du ställa in hur den ska visas på din site.

Display av välkomstmattan på din site i WordPress

Du kan ställa in hur din popup för välkomstmatta ska visas genom att byta till tabben ”Display Rules” i OptinMonster.

Det finns många alternativ för personalisering och inriktning som gillar användarnas location, vilka objekt de har i sin ecommerce cart, vad de har gjort tidigare på din site, exit intent, och mer.

Som standard visas OptinMonster-kampanjer på alla sidor på din site efter att besökaren har varit där i 5 sekunder.

Eftersom det här är en välkomstmatta vill du förmodligen att den ska displayed omedelbart. Ändra bara detta värde till 0 sekunder.

Som standard kommer välkomstmattan att visas på varje page på din site. Du kan enkelt inkludera eller utesluta specifika pages genom att använda OptinMonsters personaliseringsregler.

Du kan klicka på knappen ”Done? Gå till action”-knappen när du är klar.

Därefter ser du fler alternativ för att displayed your kampanj. Instance, you can add to an effect or play a sound when the campaign appears on a user’s screen.

I den här tutorialen använder vi standardinställningarna.

Om du rullar ner ser du Cookie Settings för din kampanj.

You kan till exempel visa your kampanj igen om en användare redan har konverterat efter ett visst antal dagar. På samma sätt finns det också alternativ för att visa kampanjen igen för personer som closeade popupen eller såg den men inte konverterade.

På nästa vy ser du en summary av your settings för displayregler.

You can edit the settings before publishing the campaign.

När du är redo att göra din välkomstmatta live går du bara till tabben ”Publicera” högst upp på vyn.

Gå vidare och ändra statusen för Publicera från ”Draft” till ”Publicera”.

Glöm inte att clicka på ”Save” för att store your changes och close campaign builder.

Därefter kommer du att se WordPress Output Settings för din kampanj. Se till att din kampanj är publicerad.

Om den inte är det klickar du bara på dropdown-menyn Status och väljer alternativet ”Publicerad”. Glöm inte att clicka på knappen ”Save Changes” när du är klar.

För att kontrollera din kampanj kan du besöka din website i ett new inkognito-fönster i webbläsaren.

You should see your welcome mat slide in seamlessly from the top of your vy.

Exempel på bra välkomstmattor

Låt oss ta en titt på några exempel på välkomstmattor från olika branscher. För varje exempel går vi igenom vad de gör bra, plus eventuella mindre förändringar som vi kan föreslå.

1. Singularitet

Denna välkomstmatta från Singularity uppmanade användare att registrera sig och titta på livestreamen av Singularity University Global Summit. Det var enormt framgångsrikt och genomförde över 2 000 nya email-registreringar på mindre än 9 dagar.

Vi gillar särskilt den fina användningen av logotypen, de klara fonten och den ljusa knappen ”Påminn mig!”.

2. Goins, författare

Den här välkomstmattan från Goins, Writer erbjuder en gratis guide. Det är ett clear, enkelt erbjudande och den minimalistiska designen går i linje med resten av webben.

Vi tycker att knapparna ”Yes” och ”No Thanks” är clear och användarvänliga, och användningen av siffror i headlinen ger ett övertygande erbjudande.

3. AVweb

Denna välkomstmatta har en stor, clear image av ett litet flygplan. Den är omedelbart iögonfallande.

Vi gillar den snygga bilden och den tydliga uppmaningen ”Registrera mig!”. En liten möjlig justering skulle vara att förkorta taglinen för att undvika att den täcker toppen av bilden.

4. Hämtade landskap

Den här välkomstmattan från Hämtade Landskap skiljer sig lite från andra exempel. Bakgrunden är något transparent.

Vi gillar det klara erbjudandet och entusiasmen hos den röda call-to-action-knappen. Bakgrunden till webbplatsen under välkomstmattan kan vara lite distraherande, så det kan vara värt att ändra den så att den blir helt ogenomskinlig.

5. OptimeraMittBnb

Denna välkomstmatta användes på en specifik page, som ingick som en klickbar länk i en bok som ägaren till website sålde via tredjeparts återförsäljare. Dessa återförsäljare vidarebefordrade dock inte kundernas detaljer. Genom att använda en välkomstmatta på detta sätt kunde kundernas email addresses genomföras.

Vi tycker att den mycket tydliga rubriken, underrubriken och uppmaningen till handling fungerade bra och att ”nej tack”-knappen används väl för att ge användaren en känsla av FOMO.

Det finns dussintals fler exempel på välkomstmattor i helskärm som du kan se, men vi har inte add to dem all i den här guiden.

Om du vill ha mer inspiration kan du läsa om några saker du kan göra med en välkomstmatta i fullskärm:

• Presentera ett riktat erbjudande eller en coupon
• Galleri/Presentation/Showcase av nya produkter och tjänster
• Låt besökarna veta vad de kan förvänta sig av webbplatsen
• Vinn nya prenumeranter genom att lyfta fram deras bästa content
• Hänvisa visitorerna till deras profiler på social media
• Samla in prenumeranter på email som en del av en prelanseringsfas

Om du menar allvar med att förbättra konverteringen på din website, så är välkomstmattor och interstitialer i fullskärm några av de mest konverterande elementen du kan add to your website.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en välkomstmatta för din webbplats och att du tyckte att exemplen var inspirerande. Du kanske också vill ta en titt på vår guide om hur du skapar en kupong-popup i WordPress och de bästa plugins för meddelandefält i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.