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.

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.

The default Gutenberg editor doesn’t come with a popup builder. So when you are using Gutenberg you need to pick a WordPress popup plugin for the block editor. For this tutorial, we have used the PopupKit plugin.

PopupKit is one of the best WordPress popup plugin​ for Gutenberg, designed specifically for the Gutenberg. With this WordPress popup maker​, creating popups in Gutenberg is now easier than ever.

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

Installer og aktiver et WordPress popup-plugin til Gutenberg

To install the PopupKit plugin, you need to have a block installed on your website. Here are the required plugins and themes to use popup builder seamlessly on your website.

☑️Required Plugins:

• PopupKit: Download free WordPress popup plugin

☑️ Tema: Hej blokke-tema or any WordPress block theme like Twenty Twenty-Five.

Once you’ve installed all the plugins, you’re all set to start building WordPress popups in Gutenberg for your WordPress site. Now you can pop up under Kampagne, get through the Abonnent information, see the campaign Analytics, get advanced Integration, explore template, and so on.

How to add a popup on WordPress using Gutenberg blocks

Now, we will start creating WordPress popups in Gutenberg. With PopupKit you can design popups from the scratch with any Gutenberg blocks. Or, you can use the pre-designed templates to quickly build high-converting popups.

In this tutorial, we will demonstrate both of the methods of creating WordPress popups in Gutenberg.

Method 1: Create Gutenberg popups for WordPress with pre-designed templates

Mens creating a professional WordPress website with Gutenberg, you can save time and effort by using the ready designs rather than starting from scratch.  With 55+ templates available in PopupKit’s Template Library, you can quickly create professional-looking popups in just minutes.

First, let’s see how to use the ready templates to build popups. Go through the following steps to create WordPress popup in Gutenberg:

1. Gå til PopupKit > Templates
2. Klik på "Choose From the Template”-knappen.
3. Set the campaign type to: Pop op
4. Derefter browse through the template library and import one.

You can easily narrow down your search in the PopupKit template library by using the built-in filters. Here’s a quick look at what you can sort by:

☑️ Type:

• Alle: Browse both free and pro templates.
• Gratis: Show only the free ones.
• Fordel: See the premium templates.

☑️ Seasonal:

Filter the templates by seasonal events like Black Friday, New Year, summer sales, and more to match your campaign’s vibe.

☑️ Goal:

Find templates that can help you achieve specific campaign goals, such as growing your email list, making time-sensitive offers, reducing bounce rate, etc.

☑️ Industry:

Use templates tailored for your niche, whether you’re Blogger/ Publisher, running an eCommerce, working with a Local Business, Marketing Agency, Non-profit or SaaS brands.

☑️ Feature:

Choose templates with specific built-in features like Countdown Timers, Coupon wheels, Gamification, Multi-step campaigns, Exit intent, and Video support.

Method 2: Design WordPress popups from scratch using any Gutenberg block

Alternatively, if you want a fully custom-designed WordPress popup, you can build one entirely from scratch using any Gutenberg blocks (default ones and third-party add-ons) directly in the block editor. Follow the steps bellow:

1. Naviger til PopupKit > Campaigns from your WordPress dashboard. Here you will see the popups you have created for your website.
2. Klik derefter på Create Black to open the popup editor. In the editor you have a blank canvas to create popup with blocks.

Now in the block editor, use various Gutenberg blocks to deisgn the kind of you popup you want for your WordPress website.

PopupKit initially have a set of essential blocks for creating WordPress popups. Beyond that, you can use block editor plugins like GutenKit to get more flexibility in designing popups with a more varsatile collection of blocks.

Med GutenKit page builder for Gutenberg, you can use 74+ blocks and 18+ modules to design a modern and sophisticated popup for your site. This includes blocks like headings, paragraphs, buttons, images, and even videos to your popup, making it highly customizable.

Here are some basic examples of creating a WordPress popups in Gutenberg.

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

With PopupKit, 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 knappen og indstil reglerne for, hvor du vil have din popup vist. Så nemt er det!

With the PopuKit, you can set the Include and Exclude conditions.

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

Decide how and when to trigger the WordPress 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.

With this popup maker for WordPress, you can select how the popups will trigger on your website from Indhold > Åbn begivenheder på blokeditoren.

Dette hjælper dig med at udvikle forskellige typer popups på Gutenberg. Her er typer af WordPress popups on Gutenberg you can design with 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.

Why Choose the PopupKit for WordPress?

Det PopupKit 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:

PopupKit 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:  

This popup builder pluigin comes with a variety of professionally designed popup templates that can be easily customized to fit your brand’s style. These templates save time and effort, offering a starting point for those who don’t want to build popups from scratch but still want a polished, modern design.

✅ Avancerede visningsregler: 

With PopupKit, you have full control over when and where your popups appear. You can set precise display conditions based on which pages you want to show the popup. 

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

✅ Flere triggermuligheder:

It offers multiple trigger options for displaying popups, such as on page load, after a timed delay, on scroll, or when the user is about to exit the page. 

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

✅ Fleksibel tilpasning

Det PopupKit—Popup Builder allows for extensive customization of your popups, from animations and styles to typography and colors. 

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 created with this popup builder plugin are fully responsive and mobile-friendly, ensuring that your popups look great on any device. You can customize the appearance with entrance and exit animations, background styles, overlay colors, and more.

✅ Letvægts og præstationsorienteret 

Unlike many other popup plugins, PopupKit is designed to be lightweight and performance-optimized. 

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

By following these steps, you will be able to build and show popups on your WordPress sites easily. With the PopupKit—Popup Builder, you can easily integrate dynamic popups into your WordPress site, allowing you to communicate effectively with your audience. 

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