Sådan tilføjes modal popup til WordPress-webstedet nemt: 3-trins vejledning

Vidste du, at en nylig undersøgelse vedr 2 milliarder modale popups havde en 9.28% konverteringsrate blandt top 10%?(1)

Ja. Popups gør webstedsbesøg brugervenlige og hjælper dig med at få flere nyhedsbrevstilmeldinger hurtigt. Popups har ændret sig drastisk i, hvordan de ser ud og fungerer. Som et resultat bliver de mere populære på moderne hjemmesider nu end nogensinde før.

Vil du også tilføje WP-modaler til din hjemmeside og udnytte de fordele, den har at tilbyde?

Så er denne blog lige hvad du har brug for. Dette er den eneste guide, du skal bruge for at lære om popup-modaler og hvordan du nemt tilføjer dem til din WordPress hjemmeside. 

Kilde: (1) Pop-up-statistikker: Resultater fra analyse af 2 milliarder pop-up-eksempler

Hvad er en modal popup?

Modale popups er meget almindelige, og det er højst usandsynligt, at du ikke er stødt på en. Men kender du definitionerne af den modale popup? Lad os kigge på det.

En modal (også kaldet et modalt vindue eller lysboks) er et websideelement, der vises foran og deaktiverer alt andet sideindhold. For at vende tilbage til hovedindholdet skal brugeren engagere sig i modalen ved at fuldføre en handling eller ved at lukke den.

– Hubspot

Modale vinduer adskiller sig fra gamle modeldialogbokse. I pop op-vinduer uden model har brugere adgang til hele vinduet, selv når pop op-vinduet er tændt. Så de kan ignorere pop op-vinduet og fortsætte med at udføre deres arbejde.

På den anden side opretter den nye modale popup en ny "tilstand" i form af et underordnet vindue og deaktiverer det overordnede vindue. Som et resultat kan brugeren ikke arbejde på det originale vindue, før han foretager en handling eller lukker den modale popup. 

Hvad er fordelen? Fordelen er, at du har din hjemmesides besøgendes opmærksomhed, selvom det er et sekund eller to. Og at få brugerens fokus på dit budskab er det, du har brug for, ikke? 

For hvis de ser, hvad du har at tilbyde, vil de blive ved i mere end et sekund, hvilket vil sikre dig et lead.

Hvorfor bruge Popup Modal på dit WordPress-websted

De fleste mennesker synes, popups er irriterende. Jeg bebrejder dem selvfølgelig ikke. Du går til et websted for at udføre dit arbejde, og pludselig opstår der en popup og afbryder, det er sikkert irriterende. 

Men som virksomhedsejer skal du se anderledes på en popup. Fordi tro det eller ej, virker disse irriterende popups som vidundere. Popup-modaler har vist sig at være ekstremt succesrige, især i leadsamlingen.

Ifølge Sumo, indsamlede de omkring 23.645.948 e-mail-adresser på mindre end to år ved hjælp af en popup-modal. I mange tilfælde gik konverteringsraten op til så højt som 50.2%! 

Så hvis du ønsker at booste din e-mail-liste og accelerere din konverteringsrate, er modal pop din ting, da disse er gennemprøvede blymagneter.

Desuden er modalerne enkle og fleksible, og du behøver ikke at sende brugere til en anden side for at gennemføre en handling. Flere kundeemner med bedre brugeroplevelse. Så tro aldrig, at modals er ubrugelige eller døde, og begynd at bruge dem i dag.

Almindelige anvendelser af et modalt vindue i moderne webdesign

Modaler er yderst effektive, når du har brug for, at besøgende på webstedet foretager sig noget eller bemærker et vigtigt budskab. Nogle af de almindelige anvendelser af et modalt vindue i webdesign inkluderer:

• Vis velkomstbesked
• Saml e-mail og lead til nyhedsbrevsabonnement
• Login formular
• Vis en advarselsmeddelelse før handling
• Vis cookiepolitik
• Vis medier som billedgalleri (produkt) eller video osv.  
• Til formularer med flere trin for en bedre brugeroplevelse.

Jeg har kun listet nogle få af de mange måder at bruge modal på i webdesign. Når du ved, hvordan du opretter brugerdefinerede popups i WordPress, vil du finde forskellige måder at bruge dem på din hjemmeside for at opnå optimale resultater. 

Så lad os komme i gang.

Opsætning du skal bruge for at komme i gang

Jeg går ud fra, at du har WordPress installeret på din hjemmeside. Udover det skal du bruge en sidebygger og et WordPress popup-plugin for at gøre modal på din hjemmeside:

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

Elementor er en gratis sidebygger, og ElementsKit er et af de bedste WordPress modale popup-plugins.

Færdig med at installere? nu er du klar til at oprette en tilpasset WordPress popup ved klik i WordPress! Lad os starte hovedprocessen nu.

Sådan tilføjes modal popup i WordPress i 3 trin i Elementor ved hjælp af ElementsKit

Hvis du synes, det er svært at tilføje en popup til dit WordPress-websted, er du klar til at blive overrasket. Følg trinene nedenfor og lav nemt en Elementor modal popup i wp. Dette er den nemmeste vejledning om, hvordan du tilføjer popup i WordPress.

Trin 1: Aktiver Modal Popup Widget

Når du har installeret ElementsKit-plugins, kan du aktivere Elementor Modal Popup-widget fra WordPress-dashboardet

• Gå til  ElementsKit  > Widgets > Tænd Popup Modal > Klik Gem ændringer

Trin 2: Tilføj WP Modal Popup Widget 

• Søg efter en popup-modal, Træk og slip widgetten på den sektion, du ønsker, at din Modal skal vises.

Trin 3: Konfigurer indstillinger for at fuldføre

Klik på ikonet Rediger i pop op-sektionen for at gå til redigeringsmulighederne.

• Gå til for at ændre knapteksten Indhold > Vippeknap > Etiket og redigere

• For at ændre titel og undertekst gå til Indhold > Header og ændre indstillingerne med din brugerdefinerede tekst.

• For at ændre indhold af kroppen, udvid indholdsafsnittet og redigere teksten til at oprette WordPress popup-besked.

• Gå til Indhold > Sidefod > Knap > CTA og ændre CTA-etiketten og URL-adressen med ElementsKit, en brugerdefineret popup-bygger.

• Klik til sidst videre Opdatering at gemme.

Færdig. Klik nu på forhåndsvisningsknappen for at se resultaterne og se, hvordan dit WordPress popup-vindue ser ud:

Godt klaret! Du har oprettet din Elementor modal popup.

Yderligere indstillinger for Modal

Lad os nu se på de yderligere modale indstillinger, du kan tilpasse:

Layout:

Udvid layoutindstillingen for at ændre skiftetype, popup-position og popup-visning.

Skiftetype:

Du behøver ikke nødvendigvis at have en modal, der udløses, når nogen klikker på en knap. ElementsKit tilbyder dig 2 flere muligheder at vælge imellem udover knappen

Billede: Du kan vælge et hvilket som helst brugerdefineret billede af enhver størrelse i stedet for en knap som skifte til din modal. For at vælge et brugerdefineret billede 

• Gå til Indhold > Toggler type > Vælg Billede
• Gå til Toggler Image > Vælg en billede, billedstørrelse og justering

Tid: Du kan også indstille modalen til at udløse efter en bestemt tid uden nogen handling fra brugeren. For eksempel at indstille din modal til at blive vist efter 3 sek

• Gå til Indhold > Toggler type > Tid
• Tilføj tid Skift efter (i sekunder)

Popup-showtype:

Du har to muligheder for popup-showtype: Modal og Slide.

Pop op-position: 

Du kan vælge at placere din popup hvor som helst i vinduet. De tilgængelige positionsmuligheder at vælge imellem er:

• Øverst til venstre
• Top Center
• Øverst til højre
• Midt til venstre
• Centrum
• Center højre
• Nederst til venstre
• Nederst i midten
• Nederst til højre

Pop op: 

Udvid popup-indstillingen for at vælge bredde og minimumshøjde. Her får du også mulighed for vise eller skjule det luk ikon, sidehoved og sidefod. Du kan også justere den vandrette og lodrette position og tilføje animation efter dit ønske.

Overlejring: 

Hvis du ikke vil tvinge brugeren til at klikke på din modal for at lukke den, skal du tænde for Luk Popup OnClick Overlay mulighed. På denne måde kan brugeren klikke hvor som helst på vinduet for at afvise modalen.

Luk ikon: 

Her kan du ændre placeringen af lukkeikonet. Du kan indstille popup øverst til højre, popup øverst til venstre, vindue øverst til højre, vindue øverst til venstre. Du kan også ændre de lodrette og vandrette positioner. Desuden kan du vælge et hvilket som helst ikon fra biblioteket eller bruge et SVG-billede som et ikon.

Header:

Udover at ændre titlen og underteksten, kan du også vise eller skjule skillelinjen herfra.

Sidefod:

Udvid sidefodsindstillingen for at ændre etiketten, varianten og justeringen af sidefodsknapperne. Du kan også vælge at skjule dem, hvis du vil herfra. 

Der har du det! Du kan nu bruge de moderne udseende engagerende popups på dit websted.

For flere detaljer, læs dokumentationen af ElementsKit Popup Modal widget til Elementor.

Sådan tilføjes brugerdefineret design i Elementor Modal med ElementsKit Popup Builder

Nu ved du, hvordan du ændrer tekst, position, animerer og gør meget mere for at tilpasse dit modale vindue i WordPress. Men det ser stadig lidt kedeligt ud, ikke? Ligesom enhver anden WordPress Elementor modal popup.

Hvis du kan tilføje et brugerdefineret billede eller en video eller en hvilken som helst anden widget i dit modale vindue ligesom en side, ville det være så fantastisk. Du kan tilføje ethvert tilpasset design til din model med ElementsKit.

Følg trinene for nemt at skabe dit ønskede brugerdefinerede design på modal:

• Gå til Indhold > Indhold > Tænde for Aktiver skabelon
• Klik på modal-knappen, og når modalen åbner, klik på redigeringsmulighed at åbne widget område

• Når widgetområdet er åbent, kan du Søg for enhver widget > Træk og slip > opdatering til Gemme.

For eksempel, hvis du vil tilføje en video, så søg efter videoen i widgetområdet og træk og slip for at tilføje din model og opdatere. Nu skulle videoen vises i det modale vindue.

Brug Premade ElementsKit sektioner til smuk modal

Har du ikke tid til at skabe et modalt popup-design fra bunden? Ingen bekymringer. ElementsKit popup builder giver mange indbyggede sektioner, som du kan vælge for at skabe engagerende modals for at fremhæve dit budskab til seeren.

Følg nedenstående trin for at bruge indbyggede widgets fra ElementsKit:

• Klik på redigeringsmulighed på modalen  at åbne widget område
• Klik på EK-knappen for at åbne et andet widget-vindue med de forudlavede sektioner.

• Gå til > Sektioner > Vælge den sektion du kan lide > Indsæt

• Efter indsættelsen kan du lave om billedet, teksten eller baggrundsfarven i henhold til dine præferencer og opdatering.

Og her er det endelige resultat!

ElementsKit tilbyder 60+ widgets og 500+ klar-sektioner. Lær mere om ElementsKit og hvordan du bruger dem til at forbedre din hjemmeside.

Tilføj kontaktformular 7 i Modal med ElementsKit

Som jeg sagde før, er modals effektive til at få flere nyhedsbrevsabonnementer og indsamle brugerdata. Men for det skal du tilføje en kontaktformular i din modal, ikke? 

Gå ikke i panik, du behøver ikke et andet WordPress popup-plugin for at tilføje en kontaktformular i dit pop-vindue. ElementsKit WordPress-plugin er et alt-i-en plugin til popup-fremstiller.

Følg instruktionen nedenfor for at tilføje populær kontaktformular 7 i din modal med ElementsKit popup maker plugin.

Før du følger disse trin, skal du sørge for, at du har oprettet en kontaktformular på dit websted ved hjælp af kontaktformular 7, Elementor Page Builder og ElementsKit.

Du kan også se videovejledningen nedenfor for at oprette en kontaktformular.

Lad os komme igang.

• Gå til Indhold > Indhold > Tænde for Aktiver skabelon
• Klik på redigeringsmulighed at åbne widget område
• Søg Kontaktformular, Træk og slip på det afsnit, du vil tilføje det.
• Udvide stilmuligheden under kontaktformular 7
• Vælg fra færdiglavet form og opdatering.

Her har du en modal popup med en kontaktformular til at booste din e-mailliste.

Vidste du, at du kan oprette en brugerdefineret widget uden at have nogen dyb kodningsviden? Tjek hvordan man bygger en brugerdefineret widget nemt uden nogen kode ved hjælp af ElementsKit.

Effektive tips til at tilføje WordPress Elementor Modal Popup

WordPress modale popups kan forbedre brugerengagementet betydeligt, formidle vigtige budskaber og drive specifikke handlinger fra dine besøgende. Her er 7 effektive tips til implementering af effektive modale popups på dit WordPress-websted.

1️⃣ Vælg et pålideligt plugin

Vælg et velholdt WordPress modal plugin såsom Elementor” eller “ElementsKit” for at oprette det modale vindue på din hjemmeside.

2️⃣ Definer klare mål

Skitsér tydeligt formålet med din WordPress modale popup, uanset om det er at indsamle e-mails, promovere tilbud eller formidle vigtig information.

3️⃣ Timing er nøglen

Brug triggere som tidsforsinkelse, rulledybde eller udgangshensigt til at vise pop op-vinduet på det rigtige tidspunkt. Det vil hjælpe med at undgå øjeblikkelige sideindlæsningsafbrydelser.

4️⃣ Mobil lydhørhed

Sørg for, at din WordPress modal popup er mobilvenlig for at give en positiv oplevelse på tværs af forskellige enheder.

5️⃣Design til brugeroplevelse

Design kortfattede, visuelt tiltalende WordPress modale popups med indhold af høj kvalitet. Medtag en let tilgængelig mulighed for at lukke pop op-vinduet for brugere, der ikke er interesserede i indholdet.

6️⃣ A/B-test til optimering

Implementer A/B-test for at forfine din modal i WordPress ved at skabe variationer og identificere de mest effektive elementer for dit publikum.

7️⃣ Overholdelse af fortrolighedsbestemmelserne

Sørg for, at din WordPress modal popup overholder reglerne om beskyttelse af personlige oplysninger, herunder gennemsigtig kommunikation af din privatlivspolitik og indhentning af eksplicit samtykke til dataindsamling.

Ofte stillede spørgsmål

Afslut

Tillykke! Nu ved du, hvordan du opretter Elementor popup-modaler i WordPress ved hjælp af en Elementor tilføjelse. Opret kontaktformular-popups, og foretag enhver tilpasning på WordPress-webstedet uden besvær ved hjælp af det nemme popup-fremstiller-plugin, ElementsKit Pro og Elementor Page Builder.

Stop ikke bare her. Bliv ved med at eksperimentere med, hvor mange måder du kan bruge WordPress popup modal på dit websted. Og hvis du har brug for hjælp til at bygge WordPress pop-ups ved hjælp af ElementsKit, så efterlad en kommentar nedenfor.