Sådan opretter du popups i WordPress ved hjælp af Gutenberg

Har du nogensinde surfet på internettet og pludselig blevet mødt af en popup? Et springende vindue, der vises med overlejring, mens du besøger en webside. 

Nogle gange kan disse popup-vinduer være super nyttige og tilbyde dig nyttig information eller gode tilbud. Eller de kan føle sig lidt irriterende og påtrængende.

But from a website owner’s point of view, popups have turned out as a powerful way to capture attention, promote offers, and generate leads.

Så opbygningen af de rigtige popups, der engagerer brugeren uden at irritere dem på samme tid, er afgørende.

To help you with this, we will walk you through each step of setting up effective popups tailored to your website’s goals. By the end of this guide, you’ll have the easiest way to create popups that not only attract attention but also enhance user experience.

Hvad er en popup på hjemmesiden?

Popups er små vinduer, der vises på en webside, typisk som en overlejring, for at fange brugerens opmærksomhed. Disse vinduer kan omfatte forskellige former for indhold såsom salgsfremmende annoncer, abonnementstilbud, notifikationer eller opfordringer til handlinger. 

Popup-vinduer kræver ofte interaktion, såsom at gå ind eller forlade en side, klikke på en knap for at lukke dem eller udfylde en formular. De er designet til at skille sig ud fra resten af siden for at bede om øjeblikkelig engagement.

Hvornår bruger folk normalt popups på deres hjemmesider?

Popups bruges oftest til at opnå specifikke mål relateret til brugerengagement og konvertering. Her er nogle almindelige scenarier, når folk bruger popups på deres websteder:

• Til fange ledninger eller opbygge en e-mail-liste med et abonnement.
• Fremme eksklusive tilbud, rabatter eller tidsbegrænsede tilbud.
• Annoncer nye produkter, funktioner eller større opdateringer.
• At yde vigtige meddelelser for at advare besøgende. 
• Spørg besøgende til tilmelde dig en konto på hjemmesiden.
• Til indsamle feedback eller gennemføre undersøgelser blandt publikum.
• At vise cookie-samtykke eller Fortrolighedspolitik notifikation.
• Drive brugerne til tilmelding til arrangementer, webinarer eller workshops.

These strategic uses of popups help enhance user engagement and conversion, but it’s essential to implement them thoughtfully to avoid disrupting the user experience.

Sådan opretter du WordPress popups i Gutenberg

Lad os springe ind i kernedelen af denne vejledning om, hvordan du tilføjer en popup på WordPress ved hjælp af Gutenberg-blokeditoren.

Standard Gutenberg-editoren kommer ikke med en popup-bygger. Så du skal vælge et WordPress popup-plugin til blokeditoren. Til denne tutorial har vi brugt GutenKit plugin.

GutenKit er et blokredigeringsplugin der kommer med en Popup Builder designet specielt til Gutenberg. Med denne popup-bygger er det nu nemmere end nogensinde at oprette popups i Gutenberg.

Her er den trinvise proces til at oprette en Gutenberg popup i WordPress editor.

Installer og aktiver et WordPress popup-plugin til Gutenberg

For at installere GutenKit Popup Builder skal du have GutenKit block editor plugin installeret på dit websted. Her er de nødvendige plugins og temaer for at bruge popup builder problemfrit på din hjemmeside.

☑️Forudsætningsplugin(s):

• GutenKit gratis version
• eller, GutenKit Pro version

☑️ Tema: Hej blokke-tema eller et hvilket som helst WordPress-bloktema.

Når du har installeret GutenKit-pluginnet, skal du gå til GutenKit > Moduler. Find Popup Builder og klik på Installere button. With the Popup Builder activated you’re all set to start building WordPress popups in Gutenberg for your WordPress site.

Design popups til WordPress ved hjælp af enhver Gutenberg-blok

Naviger nu til GutenKit > Popup og klik Opret ny popup for at åbne editoren, hvor du vil oprette pop op-vinduet.

Så kan du bruge blokken til at bygge popup'en i editoren.

Med GutenKit Popup Builder kan du bruge alle Gutenberg-blokke til at designe din popup. 

Du kan bruge 65+ GutenKit-blokke og 18+ moduler til at designe en moderne og sofistikeret popup til dit websted.

Dette inkluderer blokke som, overskrift, afsnit, knapper, billeder og endda videoer til din popup, hvilket gør den meget tilpasselig. 

Opret Gutenberg-popups med foruddesignede skabeloner

On the other hand, instead of starting from scratch, you can save time and effort by using the ready designs.  With over 500+ patterns and templates available in GutenKit’s Template Library, you can quickly create professional-looking popups in just minutes.

For at importere de færdiglavede designs

1. Popup Builder editor for Gutenberg.
2. Klik på skabelonbibliotek knap.
3. Vælg et mønster fra biblioteket.

After that, you can change the content and customize styles to align with your campaign. It’s a fast and hassle-free way to get stunning popups up and running!

Brug smarte betingelser til at vise Gutenberg-popups på din hjemmeside

You have the flexibility to choose which pages you’d like your popups to appear on. Just head over to the popup block editor, and under the “Content” tab, you’ll see an option named “Conditions.” 

Derfra skal du blot klikke på  + Tilføj tilstand button and set the rules for where you want your popup to be displayed. It’s that easy!

Med GutenKit popup-byggeren kan du indstille betingelserne Inkluder og Ekskluder.

• Inkluder tilstand: Med Inkluder-betingelserne kan du tilføje pop op-vinduer til hele webstedet, specifikke sider eller arkivsider.
• Ekskluder betingelse: Du kan bestemme, hvor du ikke vil vise popup-vinduerne på dit websted med ekskluderingsbetingelserne.

Sådan kan du vise popups på din hjemmeside ved hjælp af smarte betingelser:

Vis Gutenberg popups på hele hjemmesiden

For at vise pop op-vinduet på alle siderne på dit websted, 

👉 Trin 1: Tilføj en ny betingelse for popups.

👉 Trin 2: Vælg betingelsen "Inkluder".

👉 Trin 3: Vælg "Hele webstedet" for at vise popup på hver side.

Fravælg specifikke sider fra at vise pop op-vinduer

There might be times when you don’t want popups to appear on certain pages. You can do it with Udelukke forhold. 

👉 Trin 1: Tilføj en ny betingelse for popups.

👉 Trin 2: Vælg betingelsen "Ekskluder".

👉 Trin 3: Vælg "Ental".

👉 Trin 4: Vælg en side for at udelukke pop op-vinduerne fra at blive vist.

Vis kun pop op-vinduer på bestemte sider

If you’re aiming for more focused campaigns, you might want to display popups on certain pages of your website.

👉 Trin 1: Tilføj en ny betingelse for popups.

👉 Trin 2: Vælg betingelsen "Inkluder".

👉 Trin 3: Vælg "Ental".

👉 Trin 4: Vælg en side for at vise en pop op.

For at være sikker på, at pop op-vinduet ikke vises på andre sider, kan du desuden tilføje en udelukke betingelse, og vælg hele webstedet for at begrænse pop op-vinduet fra at blive vist på hele webstedet.

WordPress popups på arkivsiderne

Du kan også vise pop op-vinduer på enhver WordPress-arkivside ved at indstille en betingelse. For det, Tilføj betingelse > Inkluder > Arkiv > Vælg arkiv side.

På den anden side, hvis du vil forhindre popups i at blive vist på en bestemt arkivside, kan du opsætte en ekskluderingsbetingelse. Bare følg de samme trin: Til det, Tilføj betingelse > Ekskluder > Arkiv > Vælg arkiv side.

Beslut hvordan og hvornår du vil udløse Gutenberg-popups

Du har fuldstændig kontrol over, hvordan popups vises på dine hjemmesider. Du kan beslutte, om pop op-vinduerne skal vises ved sideindlæsning, afslutningshensigt eller efter en interaktion.

På GutenKit Popup Builder kan du vælge, hvordan pop op-vinduerne skal udløses på dit websted fra Indhold > Åbn begivenheder på blok-editoren..

Dette hjælper dig med at udvikle forskellige typer popups på Gutenberg. Her er typer af WordPress popups på Gutenberg kan du designe med GutenKit Popup Builder.

1. Entry Popups

• Udløser: Udløses øjeblikkeligt, når siden indlæses i brugerens browser.
• Formål: Engagerer brugere, så snart de lander på hjemmesiden.
• Use Case: Byder brugere velkommen med en rabat, begivenhedsannoncering eller beder om et abonnement med det samme.

💡 Hvordan trigger man? Vælg den åbne begivenhed som "Ved sideindlæsning”

2. Exit-Intent Popups

• Udløser: Aktiveret, når brugeren har til hensigt at lukke fanen eller browseren.
• Formål: Fanger brugere, før de forlader webstedet.
• Use Case: Tilbyder rabat, nyhedsbrevsabonnement eller særtilbud.

💡 Hvordan trigger man? Vælg den åbne begivenhed som "På side exit hensigt”

3. Rul trigger popups

• Udløser: Udløst af, at brugeren ruller ned ad en side.
• Formål: Tilbyder en salgsfremmende aftale eller beder om feedback, efter at brugeren har udforsket en bestemt del af siden.
• Use Case: Promoverer yderligere indhold, en tilmeldingsformular eller et tidsbegrænset tilbud.

💡 Hvordan trigger man? Vælg den åbne begivenhed som "Side rullet”.

Indstil derefter "Siderullefremskridt for at beslutte, hvornår pop op-vinduet vises, når brugeren ruller ned på siden.

4. Brugerinaktivitet Popups

• Udløser: Når brugeren er inaktiv i et vist tidsrum.
• Formål: Genengagér brugere, der har været inaktive i en vis periode på webstedet.
• Use Case: Minder brugere om særlige tilbud, beder dem om at handle eller foreslår varer, de måske har efterladt i deres indkøbskurv.

💡 Hvordan trigger man? Vælg den åbne begivenhed som "Efter inaktivitet”.

Indstil nu Brugerinaktivitetstid på sekunder for at bestemme, hvornår pop op-vinduet vises, efter at brugeren er blevet inaktiv.

5. On-Click Popups

• Udløser: Aktiveret ved brugerinteraktion med en sektion på siden.
• Formål: Viser indhold, når brugeren klikker på et bestemt sideelement (f.eks. en knap eller et billede).
• Use Case: Bruges ofte til produktdetaljer, yderligere formularindsendelser eller videoafspilning.

💡 Hvordan trigger man? Vælg den åbne begivenhed som "Custom Selector Klik”.

Tilføj nu Vælgerklasse for afsnittet. 

Med disse forskellige typer WordPress-popups, der er tilgængelige i Gutenberg, har du fleksibiliteten til at vælge det bedste format, der stemmer overens med dine mål og forbedrer brugeroplevelsen, hvilket gør din hjemmeside mere engagerende og effektiv til at fange opmærksomhed og generere konverteringer.

Planlæg popup-aktivering for din kampagne

Nogle gange vil du bruge pop op-vinduerne til at promovere kampagner på dit websted. Nu har disse kampagner en bestemt dato og tidspunkt for lancering. Så du skal matche den nøjagtige timing for at aktivere pop op-vinduet.

Det kan du gøre med Avancerede regler. 

➡️ Trin 1: Slå knappen til for "Planlæg dato og tid”.

➡️ Trin 2: Indstil Tid når du vil aktivere pop op-vinduet.

➡️ Trin 3: Vælg Dato af popup-kampagnens lancering.

Hvorfor vælge GutenKit Popup Builder til WordPress?

Det GutenKit Popup Builder skiller sig ud som et topvalg til at oprette popups i WordPress på grund af dens sømløse integration med Gutenberg blok-editoren, der tilbyder en intuitiv og meget tilpasselig oplevelse for brugerne. Her er grunden til, at det er en fremragende løsning til WordPress-websteder:

✅ Sømløs Gutenberg-integration:

GutenKit is built specifically for Gutenberg, meaning you can design and manage popups using the same block-based interface you’re already familiar with. This eliminates the need for external popup builders or coding, streamlining the entire process and allowing for a cohesive experience.

✅ Foruddesignede skabeloner til hurtig opsætning:  

   GutenKit kommer med en række professionelt designede popup-skabeloner, der nemt kan tilpasses, så de passer til dit brands stil. Disse skabeloner sparer tid og kræfter og giver et udgangspunkt for dem, der ikke ønsker at bygge popups fra bunden, men stadig ønsker et poleret, moderne design.

✅ Avancerede visningsregler: 

Med GutenKit har du fuld kontrol over, hvornår og hvor dine popups vises. Du kan indstille præcise visningsbetingelser baseret på, hvilke sider du ønsker at vise pop op-vinduet. 

Dette sikrer, at dine popups vises på de mest optimale tidspunkter, hvilket forbedrer engagementet uden at være påtrængende.

✅ Flere triggermuligheder:

GutenKit tilbyder flere triggermuligheder til visning af pop op-vinduer, såsom ved sideindlæsning, efter en tidsindstillet forsinkelse, ved rulning, eller når brugeren er ved at forlade siden. 

Du kan også udløse popups, når brugere interagerer med bestemte elementer, hvilket giver dig fuld kontrol over brugerrejsen.

✅ Fleksibel tilpasning

GutenKit Popup Builder giver mulighed for omfattende tilpasning af dine popups, fra animationer og stilarter til typografi og farver. 

Du kan endda tilføje brugerdefineret CSS for mere avanceret styling, hvilket sikrer, at dine popups matcher dit websteds unikke design og branding.

✅ Responsiv og mobiloptimeret 

Popups oprettet med GutenKit er fuldt lydhøre og mobilvenlige, hvilket sikrer, at dine popups ser godt ud på enhver enhed. Du kan tilpasse udseendet med indgangs- og udgangsanimationer, baggrundsstile, overlejringsfarver og mere.

✅ Letvægts og præstationsorienteret 

I modsætning til mange andre popup-plugins er GutenKit designet til at være let og ydeevneoptimeret. 

Det betyder, at du ikke behøver at bekymre dig om popups, der bremser dit websted, hvilket er afgørende for både brugeroplevelse og SEO.

Afslutter

Ved at følge disse trin vil du nemt være i stand til at bygge og vise popups på dine WordPress-websteder. Med GutenKit Popup Builder kan du nemt integrere dynamiske popups i dit WordPress-websted, så du kan kommunikere effektivt med dit publikum. 

Tag indsigten fra denne guide og begynd at eksperimentere med forskellige popup-strategier for at maksimere dit websteds potentiale!

Ligesom Popup Builder kommer GutenKit med 65+ blokke, 18+ moduler og 500+ klardesigns for at give dig en avanceret sidebyggeroplevelse i Gutenberg-blokeditoren. Så installer GutenKit i dag, og begynd at bygge din drømmehjemmeside i WordPress.