De första popup-fönsterna skapades från scenariot som Ethan Zukerman föreställde sig förlogi på sin webbsida på Tripod i början av 90-talet. Hans användare klagade över antalet annonser han placerade på webbplatsen, så han bestämde sig för att placera banners på en separat sida som öppnades när en användare gick in på sidan.
Den här lilla koden var fortfarande inte en riktig popup som du ser på varje webbplats just nu, men det var där allt började. På moderna webbsidor används popup-fönster för olika ändamål, inte bara för annonser. Kontaktformulär, sekretesspolicyvarningar och prenumerationsförslag presenteras också ofta som popup-fönster.
Det finns två saker som irriterar användare när det gäller popup-fönster: när de hoppar på dig när du inte vill ha dem; och när dess utseende skiljer sig helt från webbplatsens stil. Dessa två problem visas när du använder plugins som inte verkar vara av högsta kvalitet.
Det största problemet med de flesta plugins som nybörjare utvecklar använder för skapa pop-ups är bristen på kontroll över det resulterande meddelandet. Du kan dock undvika alla dessa problem om du använder Elementor för att skapa en webbplats.
Två fantastiska plugins, skapade speciellt för Elementor Page Builder, hjälpa dig att skapa popup-fönster av vilken typ, form och stil du behöver – Elementor Popup Builder et JetPopup. Eftersom de båda är gjorda av samma kött som Elementor var, är den enda frågan att ställa vilken av dessa plugins du ska välja. För att hjälpa dig att fatta detta beslut ska jag göra en grundlig granskning av båda och du kan jämföra deras fördelar och nackdelar. Låt oss gå !
Ladda ner och installera
Detta är inte det viktigaste kriteriet när du väljer vilket plugin du vill använda, men för att testa det måste du hämta det först. Det är därför jag kommer att börja från början och beskriva processen för att få det - prissättningen, ansträngningen och den enkla installationsprocessen.
Popup Builder
Detta plugin skapades av Elementor-teamet. Vi skulle därför kunna kalla honom hans riktiga "barn". Detta är den senaste uppdateringen för Elementor som släpptes i januari 2019 för att möta kundernas behov. Det är dock inte tillgängligt för användare av den gratis versionen av Elementor.
Popup Builder ingår i den professionella prenumerationsplanen. Så för att kunna skapa popup-fönster måste du först ha Elementor Pro. Den enklaste prissättningen som låter dig använda alla Elementors olika funktioner för en enda webbplats kostar $ 49 per år. Således, från de första stegen (köp av Elementor Pro), här är algoritmen för att få Popup Builder:
- Köp Pro Elementor Page Builder.
- Gå till ditt personliga konto och ladda ner plugin.
- Gå till din webbplatsinstrumentpanel, Plugins> Lägg till ny, klicka på knappen "Upload plugin" och välj lämplig .zip-fil.
- När installationen är klar aktiverar du plugin-programmet med din licensnyckel.
- Här är Popup Builder som finns i mallar> fliken Popups.
Det är lite av en lång väg, men med Popup Builder får du också en enorm samling av olika element från Elementor, som widgets, mallar och andra ytterligare verktyg.
Popup Builder
JetPopup
Jet-plugins "familj" har redan mer än 10-artiklar och JetPopup är en av dem. Det har skapats noggrant specifikt för Elementor och ökar antalet tillgängliga verktyg. Denna plugin är inte
Fullt kompatibel med gratis och betalda versioner. Så du behöver inte göra några ytterligare inköp. JetPopup kostar $ 15 och när du väl får det kan du använda det för bara en webbplats. Om du behöver det för mer än ett projekt kan du köpa plugin-programmet under utvecklarlicensen (det kostar 45 USD) och använda det för fem webbplatser. Algoritmen för att få plugin är lite enklare:
- Köp plugin på TemplateMonster Marketplace. Det kommer att laddas ner till din dator.
- Gå till din webbplatsinstrumentpanel, Plugins> Lägg till ny, klicka på knappen "Upload plugin" och välj lämplig .zip-fil.
- När installationen är klar aktiverar du plugin-programmet.
- Voila! När du öppnar Elementor-anpassningsmenyn (genom att klicka på "Redigera med Elementor" -knappen) hittar du JetPopup-avsnittet i den vänstra menyn i widgeten.
Popup-skapande
Nu när verktygen är där och redo kan jag försöka skapa en popup med båda plugins och se hur enkel och förståelig funktionen är. Därefter skapar jag en grundläggande pop-up och tittar på anpassningsalternativen för Popup Builder och JetPopup.
Popup Builder
I Pro Elementor popup-fönster görs separat från sidor. För att ändra utseendet på webbplatsen, öppna sidan du vill anpassa, klicka på knappen "Redigera med Elementor" och gör ändringar. Men för att skapa (och sedan redigera) popup-fönster måste du gå till Mallar> Popups och klicka på knappen "Lägg till ny popup".
I det öppnade fönstret måste du välja den mall du skapar (ja, du kan skapa mallar inte bara för popup-fönster, utan också för sidor och andra objekt) och ge det ett namn.
När du har tryckt på knappen "Skapa mall" kommer du att omdirigeras till Elementor-anpassningsmenyn. Det är lättare att anpassa ett befintligt objekt genom att bygga det från grunden. Därför blir du först ombedd att välja en lämplig modell.
Jag valde en av modellerna som visas högst upp i bibliotekslistan. Direkt efter valet landar du på Elementor-arbetsytan du förmodligen är van vid. Anpassningsalternativ placeras i sidofältet till vänster på skärmen. Du har tre flikar här.
Fliken "Inställningar" låter dig ändra popup-layouten, ändra modellnamnet och förhandsgranska. På fliken "Stil" kan du anpassa designen - ändra färger, teckensnitt, bilder och gränser. Fliken "Avancerat" har också en uppsättning ytterligare reglage. till exempel hindrar de popupen från att stängas med ESC-nyckeln.
Som du kan se - inget oväntat, om du har använt Elementor innan kommer du inte att stöta på några problem med detta plugin. Här är en detaljerad video som förklarar hur du skapar ett popup-fönster med hjälp av Popup Builder:
JetPopup
Denna plugin lägger också till en ny flik till din instrumentpanel Wordpress tema och med dess hjälp skapas även popup-fönster separat från sidor. Out-of-the-box popup-fönster lagras också på en flik som heter "Popup-bibliotek." För att skapa en ny popup kan du antingen trycka på knappen "Lägg till" på den fördefinierade mallen eller gå till JetPopup > Lägg till ny popup, ge mallen ett namn och tryck på "Redigera med Elementor."
Arbetsområdet skiljer sig något från normen eftersom du nu skapar ett mindre fönster. I den vänstra menyn kan du lägga till alla typer av objekt i din popup.
JetPopup-pluginet lägger till ett enda objekt i widgetmenyn - kontextuell åtgärdsknapp. Detta låter dig definiera vilken typ av åtgärder som kommer att inträffa när användaren trycker på knappen.
Det är inte uppenbart att öppna inställningarna från popup-fönstret. Du måste klicka på underhållsknappen längst ner i menyn. Inställningsmenyn liknar den i Popup Builder, men det finns bara två anpassningsflikar. Med "Allmänna inställningar" kan du definiera en animeringseffekt, byta namn på modellen eller definiera villkoren. På fliken "Style" kan du ändra layouter, färger, bilder, teckensnitt och ramar.
JetPopup har lite mindre uppenbar funktionalitet men kompenserar med detaljerade och användbara videohandledning.
triggers
För att kunna vara användbara och inte irritera besökarna måste popups visas vid rätt tidpunkt. Förhållandena under vilka popup visas visas "triggers". Ju mer detaljerade villkor som finns, desto mer flexibel är popup-plugin. Precision är mycket viktigt om du inte vill att din användare ska lämna webbplatsen efter att popup-fönstret för prenumerationsformuläret visas.
Popup Builder
Detta plugin hjälper dig att definiera nödvändiga förhållanden precis efter att du anpassat popup-fönstret. När du trycker på knappen "Publicera" ser du fönstret där du kan definiera villkor (på vilka sidor denna popup kommer att visas), utlösare (när popup-fönstret kommer att visas) och avancerade regler.
Popup Builder har sex utlösare, till exempel visning på en bläddring och klick, och sju avancerade regler, till exempel visning efter ett visst antal sessioner eller visning på vissa enheter. Utlösare och avancerade regler har enkla skjutreglage och det går snabbt att ställa in alla parametrar du vill ha.
JetPopup
Alla utlösare, villkor och öppningshändelser grupperas i parametrarna. När du har klickat på underhållsknappen öppnar du inställningsflikarna och kan ställa in utlösare omedelbart. Du kan ställa in procenten på sidan efter rullning, snabbmenyn som ska visas eller hur många sekunder som användaren kommer att se meddelandet.
Fönstret kan bara visas en gång eller varje gång användaren utför vissa åtgärder (jag rekommenderar det inte - det gör inte användarna nöjda). Du kan också välja mycket exakt vilka inlägg eller sidor som denna konkreta popup kommer att visas. I allmänhet är detta plugin ganska flexibelt och låter dig visa popup-fönster med stor precision.
positionering
Användare kommer definitivt inte att kunna undvika fönster som hoppar rakt in i mitten av skärmen, men de distraherar från webbplatsbesökare och kan vara riktigt irriterande. Inte alla popup-fönster ska placeras i mitten, ett smalt band längst upp kommer att vara mindre märkbart, men kan vara mycket mer effektivt. Det betyder att du måste kontrollera fönstrets position och kunna flytta runt på skärmen.
Popup Builder et JetPopup dela upp skärmen i nio sektorer och låta dig placera din popup i någon av dem. Positionering definieras längs vänster-höger- och upp-ner-skalan. Det är inte särskilt flexibelt, men det räcker för en popup.
Animeringseffekter
Hur fönstret glider (eller rullar eller hoppar) på sidan är mycket viktigt. Om fönstret rör sig för snabbt eller för långsamt kommer det inte att vara effektivt. Studsar, kittlar och skakningar bör också användas med stor precision. Animeringseffekter gör webbplatsen mer dynamisk, men de kan också förstöra hela intrycket.
Popup Builder har 36 typer av inmatningsanimationer, inklusive olika typer av glidning, utveckling, zoomning, studsande och roterande i olika riktningar. Allt detta, tillsammans med animationens varaktighet, finns i avsnittet "Layout" på fliken Inställningar.
Det finns 13 typer av animationer i plugin JetPopup, inklusive blekningar, vertikal vändning, olika bilder, studsning och zoomning. Du hittar dem i avsnittet "Inställningar" på fliken Inställningar.
modeller
I vissa fall vill du skapa en popup med en specifik struktur och veta exakt hur den ska se ut. Men detta är ett ganska sällsynt tillfälle; mycket oftare har du ingen aning om vilka element din popup ska innehålla. Det är här mallar kommer till användning. Även om du inte använder något av de förkonfigurerade proverna kan bearbetning av dem ge dig en bra överblick. Och naturligtvis är det mycket snabbare och enklare att skräddarsy ett färdigt föremål än att bygga det från grunden.
Popup Builder lagt till en kategori i Elementors mallbibliotek. Som jag sa tidigare, kan du se detta redan i början av den nya processen att skapa en popup. Sortimentet av popup-mallar är tillräckligt stort; det finns mer än 100 artiklar. I det övre vänstra hörnet kan ett sorteringsverktyg efter rullgardinsmeny påskynda din sökning. Kategorierna är begripliga och det tar inte lång tid att hitta den popup som du behöver.
JetPopup har också ett enormt bibliotek med mallar. Alla lagras på fliken Kontextbibliotek och har praktiska funktioner som förhandsgranskningsknappen och räknaren för användning. Det finns fler sorteringsalternativ, listan kan konfigureras för att visa en viss typ av modeller och placeras sedan i valfri ordning; till exempel beroende på skapande datum. Jag kan inte berätta exakt antal tillgängliga modeller, men det finns definitivt över 100.
Jämförelsetabell
| Elementor Popup Builder | JetPopup | |
| Prix | 45 $ | 15 $ |
| modeller | 100+ | 100+ |
| triggers | 6 triggers, 7 avancerade regler | 5 öppna händelser med ytterligare parametrar |
| Animatio | 36 typer | 13 typer |
| handledning | dokumentation | dokumentation, 9 videohandledning |
Slutsats
Jag kan inte säga vilken av dessa två plugins som är bättre; det är för komplicerat att bedöma dem. Varje fall och varje person har sina egna krav för valet av plugins. Jag antar att du ska definiera det själv - vilken av dessa två passar bäst för dig? Jag önskar er lycka till med att lägga till en fantastisk popup på din webbplats!
