Använder du Elementor för din webbplats och vill lägga till en knapp som utlöser en popup?
Elementor har blivit en av de mest populära sidbyggarna i WordPress. Det är lätt att använda och kräver inga tekniska kunskaper eller kodningsförmåga för att komma igång.
Men ibland kanske du vill lägga till vissa funktioner på din webbplats som Elementor inte stöder inbyggt. En av dessa funktioner inkluderar att lägga till en popup som visas när användare klickar på en knapp eller länk.
Det är därför vi idag lär dig hur du skapar en Elementor-popup som utlöses av en klickbar länk.
Men först, låt oss prata om varför klickbara popup-fönster är så viktiga i första hand.
Varför utlöses en Elementor-popup vid ett klick?
Du är förmodligen bekant med traditionella popup-fönster från din egen webbupplevelse: Du besöker en webbplats och efter att du har loggat in visas ett popup-fönster med ett meddelande eller ett formulär att fylla i.
Beroende på hur personliga dessa popup-fönster är kan de vara ett effektivt sätt att utöka din e-postlista, distribuera feedbackformulär, öka försäljningen och mer.
Men det finns en annan strategi som är ännu effektivare för att attrahera användare och som ofta har höga konverteringsfrekvenser: klickbara länkar eller knappar som utlöser popup-kampanjen.
I det här scenariot navigerar din användare på din webbplats. Sedan ser de en knapp med en stark uppmaning (CTA). När de klickar på knappen visas ett popup-fönster. Det ser ut så här:
Men vad gör att den här klickbara triggern fungerar så bra? Allt handlar om något som kallas Zeignarik-effekten.
Zeignarik-effekten är en psykologisk princip som tyder på att människor (inklusive onlinekonsumenter) är mer benägna att avsluta en process när de väl har påbörjat den.
Och det är detta som gör klickbara popup-fönster så kraftfulla.
Eftersom i de flesta prenumerationskampanjer du kommer att se online dyker popupen oväntat upp på skärmen. Men med en klickbar popup-utlösare är det faktiskt användaren som startar processen. Som ett resultat kommer de att vara mer benägna att avsluta det om de registrerar sig.
En annan stor fördel med dessa popup-fönster är att de är mer benägna att ses av varmare potentiella kunder. Detta beror på att personer som klickar på knappen redan visar intresse för all information eller erbjudanden som finns i Elementors popup-fönster.
Det betyder att du utökar din lista eller visar dina kampanjerbjudanden för personer som är redo att delta.
Men nu kommer den verkliga frågan in i bilden: hur skapar du en popup som visas när du klickar på en knapp om du använder Elementor som din sidbyggare?
För det finns det inget enklare verktyg än OptinMonster:
OptinMonster är den bästa lösningen för att skapa en klickbar popup med Elementor. Av de många kraftfulla triggers vi erbjuder är MonsterLinks™ de som driver klickbara popup-fönster.
Med MonsterLinks™ har du omedelbart en inbäddningsbar kod för din popup-kampanj som kan infogas i vilken länk eller knapp som helst. Det betyder att du kan skapa fantastiska popup-kampanjer på några minuter med vår dra och släpp-byggare.
Du kan sedan bädda in dessa popup-fönster på din webbplats på bara några sekunder.
Detta inkluderar att lägga till en popup-knapp eller klickbar länk med Elementor. Faktum är att här är Elementor-popupen som vi skapade för dagens demo:
Detta tog mindre än 5 minuter. att skapa, stil och bädda in på Elementor-sidan på vår webbplats.
Men om du har arbetat med Elementor tidigare är du förmodligen bekant med dess inbyggda popup-byggare. Vilket väcker frågan: varför skulle du använda OptinMonster för Elementor istället för Elementor popup-byggaren?
Det är lätt.
Medan Elementors popup-byggare är ett bra verktyg för grundläggande kampanjer, har OptinMonster många fler regler och avancerade inriktningsfunktioner som inte kan ignoreras.
I slutet av dagen erbjuder vi fler sätt att anpassa din webbplats popup-fönster till din användarupplevelse (UX). Denna nivå av anpassning leder till högre konverteringsfrekvens på dina webbplatser och mer försäljning för ditt företag.
Av de många avancerade funktionerna som OptinMonster erbjuder är dessa bara några som inte ingår i Elementors popup-byggare:
- Cookie-retargeting som hjälper dig att rikta om dina popup-kampanjer för att öka konverteringarna
- OnSite Follow Up Campaigns® som spårar hur användare interagerar med andra kampanjer på din webbplats för att avgöra om din popup kommer att visas
- AdBlock Detection, som hjälper dig att visa din kampanj för användare med adblockerare aktiverade i deras webbläsare.
Och många fler. Summan av kardemumman är att Elementor i första hand är en sidbyggare för WordPress som har en popup-byggare på sidan.
OptinMonster, å andra sidan, fokuserar uteslutande på att ge dig högsta möjliga konverteringar genom prenumerationskampanjer. Det är det enda vi gör och det är därför vi gör det bättre.
Är du redo att se den i aktion? Klicka bara nedan för att komma igång med ditt riskfria OptinMonster-konto.
Nu, låt oss dyka in i handledningen!
Hur man skapar en klickbar Elementor-popup
Innan du börjar måste du ansluta ditt OptinMonster-konto till din WordPress-webbplats. Lyckligtvis kunde det inte vara enklare med OptinMonster WordPress-plugin.
Kolla in det här inlägget för att lära dig hur du laddar ner och aktiverar OptinMonster-plugin för att ansluta ditt konto.
Därifrån kan alla dina kampanjer styras från din OptinMonster-instrumentpanel eller din WordPress-adminpanel.
När du har anslutit din webbplats är du redo att börja.
Steg 1: Välj din kampanjtyp och mall
När du är klar med registreringen, gå till din OptinMonster-instrumentpanel. Klicka på i det övre högra hörnet av skärmen Skapa ny kampanj:
Därefter måste du välja din kampanjtyp. För dagens handledning kommer vi att välja en Framträda Klocka:
Nu är det dags att välja din mall:
OptinMonster har över 50 fördesignade mallar att välja mellan. Detta innebär att du kan skapa fantastiska popup-fönster på några minuter utan att du behöver kodkunskap.
Och om du vill ha något 100 % unikt för ditt varumärke kan du alltid välja vårt Duk mall:
Detta är en tom mall som låter dig skapa din Elementor-popup från grunden. Men, precis som alla våra kampanjer, behöver du fortfarande inga tekniska kunskaper för att komma igång.
Det beror på, som du kommer att se om ett ögonblick, gör vår dra-och-släpp-byggare att designa din popup till en lek.
Idag ska vi gå med Grundläggande mall:
När du har valt den mall som fungerar bäst för din webbplats måste du namnge kampanjen, tilldela den till din webbplats och klicka på börja bygga:
Då är det dags att börja designa din Elementor-popup.
Steg 2: Designa din popup
Du är nu i din OptinMonster-redigerare. Som du kommer att se är det enkelt att utforma din kampanj.
Vi kommer inte att titta på alla sätt du kan ändra din kampanj på. Uppriktigt sagt finns det för många anpassningsalternativ för att täcka i ett inlägg.
Om du är ny på att använda OptinMonster eller behöver en snabb uppdatering rekommenderar vi att du kollar in den här användbara resursen om hur du skapar din första kampanj.
För idag behöver du bara känna till grunderna.
Alla våra kampanjer består av block av element eller förkortat “block”. Dessa inkluderar saker som:
- Textblock
- Bildblock
- Alternativfältsblock (där du ber om namn och e-postadress)
- Knäppar
- Och mycket mer
Du kan ändra textblocket i din Elementor-popup med vår onlinetextredigerare. Det betyder att du kan klicka på texten du vill ändra och ändra den direkt i redigeraren:
Och om du vill ändra andra aspekter av din popup, behöver du bara klicka på den i din OptinMonster-redigerare. Då visas redigeringsverktygen på vänster sida:
Och om du tycker att något saknas i din kampanj kan du enkelt lägga till ett nytt block. Klicka bara + Lägg till block högst upp i redigeringsmenyn:
Välj sedan blocket du vill lägga till från den vänstra menyn för att dra och släppa det på plats i din kampanj:
Återigen är det väldigt enkelt att designa din OptinMonster-kampanj, även om du inte har några tekniska färdigheter.
Här är popup-fönstret som vi skapade för dagens handledning:
Detta tog oss mindre än 5 minuter att designa och kan bäddas in i vilken elementlänk eller knapp som helst på bara några minuter.
Och på den noten, låt oss titta på hur du skapar din MonsterLink™.
Steg 3: Skapa och sätt in din MonsterLink™
Klicka på högst upp i redigeringsmenyn Visa regler:
Som standard har alla våra kampanjer två visningsregler:
- Tiden på sidan är 5 sekunder
- Kampanjen kommer att visas på alla sidor på din webbplats.
För att ändra detta, klicka på den första regeln för att öppna menyn för visningsregler:
Skriv i sökfältet MonsterLink™. När alternativet visas klickar du på det i menyn för visningsregler:
Och det är! Din MonsterLink™ kommer att genereras automatiskt. Allt du behöver göra är att klicka Kopiera MonsterLink™-kod:
Detta ger dig den inbäddningsbara HTML-länken som ser ut så här:
Prenumerera nu!
Men om du bygger din webbplats med Elementor behöver du inte hela HTML-koden. Istället behöver du helt enkelt webbadressen till din klickbara popup.
Du kan ta webbadressen från HTML-koden (det står inom citattecken, som börjar med “https://“):
https://app.monstercampaigns.com/c/y7snphtfpicxdcx3zpc2/
Gå nu till din WordPress-webbplats och öppna sidan du skapar med Elementor. Du kan sedan lägga till den här webbadressen till din text eller knapp på samma sätt som vilken webbadress som helst:
Och precis som det kommer din Elementor-sida att ha en klickbar popup när din OptinMonster-kampanj har publicerats.
Men först kanske du vill lägga till din e-postleverantör om du använder den här kampanjen för att utöka din e-postlista.
Steg 4: Integrera med din ESP (valfritt)
I många fall kan du använda din Elementor-popup för att utöka din kontaktlista och förbättra din e-postmarknadsföringsstrategi.
Gå i så fall till Integrationer högst upp på redigeringsmenyn för OptinMonster:
Klicka sedan på vänster sida Lägg till ny integration:
Och välj din e-postleverantör från rullgardinsmenyn:
Sedan är det bara att lägga till din API-nyckel och ansluta din ESP. De exakta stegen kommer att variera beroende på vilken plattform du använder, men de kan alla anslutas på bara en minut eller två.
Ser du inte din ESP listad? Det är inget problem. Kolla in den här användbara artikeln om hur du ansluter OptinMonster med vilken ESP som helst.
Allt som återstår är att publicera din kampanj.
Steg 5: Publicera din kampanj
När du är nöjd med designen av din Elementor popup och har integrerat den med din ESP, klicka Posta högst upp i redigeringsmenyn:
Ändra nu statusen för din kampanj Förslag för Publicerad:
Och det är! Din Elementor-popup är nu redo att användas.
Så här ser vår Elementor-popup ut i aktion:
Återigen tog hela processen mindre än 5 minuter att skapa, designa och integrera kampanjen.
Om du publicerade din kampanj men får ett meddelande om att din webbplats ännu inte är ansluten, inga problem. Gå tillbaka till början av denna handledning för att lära dig hur du ansluter OptinMonster till din WordPress-webbplats.
Vi hoppas att du tyckte att den här handledningen var användbar. Om du använder din Elementor-popup för att utöka din e-postlista, kan du hitta följande resurser till hjälp:
Dessa artiklar kommer att ha allt du behöver för att lära dig de bästa strategierna för att växa och tjäna pengar på din e-postlista.
Redo att börja? Klicka här för att starta ditt riskfria OptinMonster-konto idag!
