Sådan opretter du WordPress Popups i 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.

Men fra en hjemmesideejers synspunkt har popup-vinduer vist sig som en effektiv måde at fange opmærksomhed, promovere tilbud og generere kundeemner.

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

For at hjælpe dig med dette, vil vi lede dig gennem hvert trin i opsætning af effektive popups, der er skræddersyet til dit websteds mål. I slutningen af denne vejledning har du den nemmeste måde at oprette popup-vinduer, der ikke kun tiltrækker opmærksomhed, men også forbedrer brugeroplevelsen.

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.

Disse strategiske anvendelser af popups hjælper med at øge brugerengagementet og konverteringen, men det er vigtigt at implementere dem med omtanke for at undgå at forstyrre brugeroplevelsen.

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 knap. Med Popup Builder aktiveret er du klar til at begynde at bygge WordPress popups i Gutenberg til dit WordPress-websted.

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

På den anden side kan du i stedet for at starte fra bunden spare tid og kræfter ved at bruge de færdige designs. Med over 500+ mønstre og skabeloner tilgængelige i GutenKit's skabelonbibliotek, kan du hurtigt oprette professionelt udseende popups på få minutter.

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.

Derefter kan du ændre indholdet og tilpasse stilene, så de passer til din kampagne. Det er en hurtig og problemfri måde at få fantastiske popups op at køre på!

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

Du har fleksibiliteten til at vælge, hvilke sider du ønsker, at dine popups skal vises på. Bare gå over til popup-blokeditoren, og under fanen "Indhold" vil du se en mulighed med navnet "Betingelser." 

Derfra skal du blot klikke på  + Tilføj tilstand knappen og indstil reglerne for, hvor du vil have din popup vist. Så nemt er det!

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

Der kan være tidspunkter, hvor du ikke ønsker, at pop op-vinduer skal vises på bestemte sider. Du kan gøre det med 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

Hvis du sigter efter mere fokuserede kampagner, vil du måske vise pop op-vinduer på bestemte sider på dit websted.

👉 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 er bygget specifikt til Gutenberg, hvilket betyder, at du kan designe og administrere popups ved hjælp af den samme blokbaserede grænseflade, som du allerede er bekendt med. Dette eliminerer behovet for eksterne popup-buildere eller kodning, strømliner hele processen og giver mulighed for en sammenhængende oplevelse.

✅ 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.