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.

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.

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

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.

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.

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.

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.

O editor Gutenberg padrão não vem com um construtor de pop-up. Então você precisa escolher um plugin de pop-up do WordPress para o editor de blocos. Para este tutorial, usamos o plugin GutenKit.

GutenKit é um plugin de edição de blocos que vem com um Popup Builder projetado especificamente para o Gutenberg. Com este popup builder, criar popups no Gutenberg agora é mais fácil do que nunca.

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

Para instalar o GutenKit Popup Builder, você precisa ter o plugin do editor de blocos GutenKit instalado no seu site. Aqui estão os plugins e temas necessários para usar o popup builder perfeitamente no seu site.

☑️Plugin(s) de pré-requisito:

• GutenKit Versão gratuita
• ou, Versão GutenKit Pro

☑️ Tema: Tema Olá Blocos ou qualquer tema de bloco do WordPress.

Depois de instalar o plugin GutenKit, vá para GutenKit > Módulos. Encontre o Construtor de pop-up e clique no Instalar button. With the Popup Builder activated you’re all set to start building WordPress popups in Gutenberg for your WordPress site.

Crie pop-ups para WordPress usando qualquer bloco Gutenberg

Agora navegue até GutenKit > Pop-up e clique Criar novo pop-up para abrir o editor onde você criará o pop-up.

Então você pode usar o bloco para criar o pop-up no editor.

Com o GutenKit Popup Builder, você pode usar qualquer bloco Gutenberg para criar seu pop-up. 

Você pode usar mais de 65 blocos GutenKit e mais de 18 módulos para criar um pop-up moderno e sofisticado para seu site.

Isso inclui blocos como títulos, parágrafos, botões, imagens e até vídeos no seu pop-up, tornando-o altamente personalizável. 

Crie pop-ups Gutenberg com modelos pré-concebidos

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.

Para importar os designs prontos

1. Editor de criação de pop-ups para Gutenberg.
2. Clique no biblioteca de modelos botão.
3. Escolha um padrão da biblioteca.

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!

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

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 button and set the rules for where you want your popup to be displayed. It’s that easy!

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

There might be times when you don’t want popups to appear on certain pages. You can do it with 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

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

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

Decida como e quando acionar os pop-ups do Gutenberg

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.

No GutenKit Popup Builder, você pode selecionar como os pop-ups serão acionados em seu site 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 no Gutenberg você pode criar com o GutenKit 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 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.

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