Como criar pop-ups no WordPress usando Gutenberg

Você já estava navegando na internet e de repente foi recebido por um pop-up? Uma janela pop-up que aparece com sobreposição enquanto você visita uma página da web. 

Às vezes, esses pop-ups podem ser super úteis, oferecendo informações úteis ou ótimas ofertas. Ou podem parecer um pouco irritantes e intrusivos.

Mas, do ponto de vista do proprietário de um site, os pop-ups se tornaram uma maneira poderosa de capturar atenção, promover ofertas e gerar leads.

Portanto, é crucial criar os pop-ups certos que envolvam o usuário sem incomodá-lo ao mesmo tempo.

Para ajudar você com isso, nós o guiaremos por cada etapa da configuração de pop-ups eficazes adaptados aos objetivos do seu site. Ao final deste guia, você terá a maneira mais fácil de criar pop-ups que não apenas atraem atenção, mas também melhoram a experiência do usuário.

O que é um pop-up no site?

Pop-ups são pequenas janelas que aparecem em uma página da web, normalmente como uma sobreposição, para chamar a atenção do usuário. Essas janelas podem incluir várias formas de conteúdo, como anúncios promocionais, ofertas de assinatura, notificações ou chamadas para ações. 

Pop-ups geralmente exigem interação, como entrar ou sair de uma página, clicar em um botão para fechá-los ou preencher um formulário. Eles são projetados para se destacar do resto da página para estimular o engajamento imediato.

Quando as pessoas costumam usar pop-ups em seus sites?

Os pop-ups são mais comumente usados para atingir objetivos específicos relacionados ao engajamento e conversão do usuário. Aqui estão alguns cenários comuns quando as pessoas usam pop-ups em seus sites:

• Para capturar leads ou construir uma lista de e-mail com uma assinatura.
• Promova ofertas exclusivas, descontos ou ofertas por tempo limitado.
• Anunciar novos produtos, recursos ou atualizações importantes.
• Para fornecer Avisos importantes para alertar os visitantes. 
• Peça aos visitantes para crie uma conta no site.
• Para coletar feedback ou realizar pesquisas entre o público.
• Mostrar consentimento de cookies ou política de Privacidade notificação.
• Levar os usuários a registrar-se para eventos, webinars ou workshops.

Esses usos estratégicos de pop-ups ajudam a melhorar o engajamento e a conversão do usuário, mas é essencial implementá-los cuidadosamente para evitar interromper a experiência do usuário.

Como criar pop-ups do WordPress no Gutenberg

Vamos pular para a parte principal deste tutorial sobre como adicionar um pop-up no WordPress usando o editor de blocos Gutenberg.

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.

Aqui está o processo passo a passo para criar um pop-up do Gutenberg no editor do WordPress.

Instalar e ativar um plugin pop-up do WordPress para Gutenberg

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

☑️Required Plugins:

• Kit pop-up: Download free WordPress popup plugin

☑️ Tema: Tema Olá Blocos 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 Campanha, get through the Assinante information, see the campaign Analytics, get advanced Integração, 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

Enquanto 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. Vá para PopupKit > Templates
2. Clique no "Choose From the Template" botão.
3. Set the campaign type to: Aparecer
4. Então 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:

☑️ Tipo:

• Todos: Browse both free and pro templates.
• Livre: Show only the free ones.
• Pró: 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. Navegar para PopupKit > Campaigns from your WordPress dashboard. Here you will see the popups you have created for your website.
2. Em seguida, clique no 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 design popups with a more varsatile collection of blocks.

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

Use condições inteligentes para exibir pop-ups do Gutenberg em seu site

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

A partir daí, basta clicar no  + Adicionar Condição botão e defina as regras para onde você quer que seu pop-up seja exibido. É muito fácil!

Com o construtor de pop-ups GutenKit, você pode definir as condições de inclusão e exclusão.

• Incluir condição: Com as condições Incluir, você pode adicionar pop-ups ao site inteiro, a páginas específicas ou a páginas de arquivo.
• Condição de exclusão: Você pode decidir onde não mostrar os pop-ups no seu site com as condições de exclusão.

Veja como você pode exibir pop-ups em seu site usando condições inteligentes:

Mostrar pop-ups do Gutenberg em todo o site

Para mostrar o pop-up em todas as páginas do seu site, 

👉 Passo 1: Adicione uma nova condição para pop-ups.

👉 Passo 2: Selecione a condição “Incluir”.

👉 Passo 3: Selecione “Site inteiro” para mostrar o pop-up em todas as páginas.

Optar por não exibir pop-ups em páginas específicas

Pode haver momentos em que você não quer que pop-ups apareçam em certas páginas. Você pode fazer isso com Excluir condições. 

👉 Passo 1: Adicione uma nova condição para pop-ups.

👉 Passo 2: Selecione a condição “Excluir”.

👉 Passo 3: Escolha “Singular”.

👉 Passo 4: Selecione uma página para excluir a exibição dos pop-ups.

Exibir pop-ups somente em páginas específicas

Se você deseja campanhas mais focadas, talvez queira exibir pop-ups em determinadas páginas do seu site.

👉 Passo 1: Adicione uma nova condição para pop-ups.

👉 Passo 2: Selecione a condição “Incluir”.

👉 Passo 3: Escolha “Singular”.

👉 Passo 4: Selecione uma página para exibir um pop-up.

Além disso, para ter certeza de que o pop-up não apareça em outras páginas, você pode adicionar um condição de exclusãoe selecione o site inteiro para restringir a exibição do pop-up em todo o site.

Pop-ups do WordPress nas páginas de arquivo

Você também pode exibir pop-ups em qualquer página de arquivo do WordPress definindo uma condição. Para isso, Adicionar Condição > Incluir > Arquivar > Selecionar Arquivo página.

Por outro lado, se você quiser evitar que pop-ups sejam exibidos em uma página de arquivo específica, você pode configurar uma condição de exclusão. Basta seguir os mesmos passos: Para isso, Adicionar Condição > Excluir > Arquivar > Selecionar Arquivo página.

Decide how and when to trigger the WordPress popups

Você tem controle total sobre como os pop-ups aparecem nas páginas do seu site. Você pode decidir se os pop-ups aparecerão no carregamento da página, na intenção de saída ou após uma interação.

With this popup maker for WordPress, you can select how the popups will trigger on your website from Conteúdo > Eventos Abertos no editor de blocos.

Isso ajuda você a desenvolver diferentes tipos de pop-ups no Gutenberg. Aqui estão os tipos de pop-ups do WordPress on Gutenberg you can design with Popup Builder.

1. Pop-ups de entrada

• Acionar: Acionado instantaneamente quando a página é carregada no navegador do usuário.
• Propósito: Envolve os usuários assim que eles acessam o site.
• Caso de uso: Recebe os usuários com um desconto, anúncio de evento ou solicita uma assinatura imediatamente.

💡 Como acionar? Selecione o Evento Aberto como “No carregamento da página”

2. Pop-ups de intenção de saída

• Acionar: Ativado quando o usuário pretende fechar a aba ou o navegador.
• Propósito: Captura usuários antes que eles saiam do site.
• Caso de uso: Oferece desconto, assinatura de newsletter ou oferta especial.

💡 Como acionar? Selecione o Evento Aberto como “Intenção de saída na página”

3. Pop-ups de gatilho de rolagem

• Acionar: Acionado quando o usuário rola a página para baixo.
• Propósito: Oferece uma oferta promocional ou pede feedback depois que o usuário explora uma determinada parte da página.
• Caso de uso: Promove conteúdo adicional, um formulário de inscrição ou uma oferta por tempo limitado.

💡 Como acionar? Selecione o Evento Aberto como “Página rolada”.

Depois disso, defina o “Progresso da rolagem da página para decidir em que ponto o pop-up aparecerá quando o usuário rolar a página para baixo.

4. Pop-ups de inatividade do usuário

• Acionar: Quando o usuário fica inativo por um determinado período de tempo.
• Propósito: Reconquiste usuários que ficaram inativos no site por um determinado período.
• Caso de uso: Lembra os usuários sobre ofertas especiais, solicita que eles tomem medidas ou sugere itens que eles podem ter deixado no carrinho.

💡 Como acionar? Selecione o Evento Aberto como “Após a inatividade”.

Agora defina o Tempo de inatividade do usuário em segundos para decidir quando o pop-up aparecerá depois que o usuário ficar inativo.

5. Pop-ups com clique

• Acionar: Ativado pela interação do usuário com uma seção na página.
• Propósito: Exibe conteúdo quando o usuário clica em um elemento específico da página (por exemplo, um botão ou imagem).
• Caso de uso: Geralmente usado para detalhes de produtos, envios de formulários adicionais ou reproduções de vídeo.

💡 Como acionar? Selecione o Evento Aberto como “Clique no seletor personalizado”.

Agora adicione Classe seletora para a seção. 

Com esses vários tipos de pop-ups do WordPress disponíveis no Gutenberg, você tem a flexibilidade de escolher o melhor formato que se alinha com seus objetivos e melhora a experiência do usuário, tornando seu site mais envolvente e eficaz em capturar atenção e gerar conversões.

Agende a ativação do pop-up para sua campanha

Às vezes, você usará os pop-ups para promover campanhas em seu site. Agora, essas campanhas têm uma data e hora específicas para lançamento. Então, você precisa combinar esse tempo exato para ativar o pop-up.

Você pode fazer isso com o Regras avançadas. 

➡️ Passo 1: Alterne o botão para ligado para “Agendar data e hora”.

➡️ Passo 2: Colocou o Tempo quando você quiser ativar o pop-up.

➡️ Passo 3: Escolha o Data do lançamento da campanha pop-up.

Por que escolher o GutenKit Popup Builder para WordPress?

O GutenKit Construtor de Pop-ups se destaca como uma escolha principal para criar pop-ups no WordPress devido à sua integração perfeita com o editor de blocos Gutenberg, oferecendo uma experiência intuitiva e altamente personalizável para os usuários. Veja por que é uma excelente solução para sites WordPress:

✅ Integração perfeita com Gutenberg:

GutenKit é construído especificamente para Gutenberg, o que significa que você pode projetar e gerenciar pop-ups usando a mesma interface baseada em blocos com a qual você já está familiarizado. Isso elimina a necessidade de construtores de pop-ups externos ou codificação, simplificando todo o processo e permitindo uma experiência coesa.

✅ Modelos pré-concebidos para configuração rápida:  

   O GutenKit vem com uma variedade de modelos de pop-up projetados profissionalmente que podem ser facilmente personalizados para se adequar ao estilo da sua marca. Esses modelos economizam tempo e esforço, oferecendo um ponto de partida para aqueles que não querem construir pop-ups do zero, mas ainda querem um design moderno e polido.

✅ Regras de exibição avançadas: 

Com GutenKit, você tem controle total sobre quando e onde seus pop-ups aparecem. Você pode definir condições de exibição precisas com base em quais páginas você quer mostrar o pop-up. 

Isso garante que seus pop-ups sejam exibidos nos melhores momentos, melhorando o engajamento sem ser intrusivo.

✅ Várias opções de gatilho:

O GutenKit oferece várias opções de gatilho para exibir pop-ups, como no carregamento da página, após um atraso temporizado, na rolagem ou quando o usuário está prestes a sair da página. 

Você também pode acionar pop-ups quando os usuários interagem com elementos específicos, dando a você controle total sobre a jornada do usuário.

✅ Personalização flexível

O GutenKit Popup Builder permite ampla personalização de seus pop-ups, desde animações e estilos até tipografia e cores. 

Você pode até adicionar CSS personalizado para um estilo mais avançado, garantindo que seus pop-ups correspondam ao design e à marca exclusivos do seu site.

✅ Responsivo e otimizado para dispositivos móveis 

Os pop-ups criados com GutenKit são totalmente responsivos e amigáveis para dispositivos móveis, garantindo que seus pop-ups tenham uma ótima aparência em qualquer dispositivo. Você pode personalizar a aparência com animações de entrada e saída, estilos de fundo, cores de sobreposição e muito mais.

✅ Leve e orientado para o desempenho 

Ao contrário de muitos outros plugins pop-up, o GutenKit foi projetado para ser leve e com desempenho otimizado. 

Isso significa que você não precisará se preocupar com pop-ups deixando seu site lento, o que é crucial tanto para a experiência do usuário quanto para o SEO.

Empacotando

Seguindo esses passos, você poderá construir e exibir pop-ups em seus sites WordPress facilmente. Com o GutenKit Popup Builder, você pode integrar facilmente pop-ups dinâmicos em seu site WordPress, permitindo que você se comunique efetivamente com seu público. 

Aproveite os insights deste guia e comece a experimentar diferentes estratégias de pop-up para maximizar o potencial do seu site!

Assim como o Popup Builder, o GutenKit vem com mais de 65 blocos, mais de 18 módulos e mais de 500 designs prontos para lhe dar uma experiência avançada de construtor de páginas no editor de blocos Gutenberg. Então instale o GutenKit hoje mesmo e comece a construir o site dos seus sonhos no WordPress.