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.

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 botão. Com o Popup Builder ativado, você está pronto para começar a criar pop-ups do WordPress no Gutenberg para seu site WordPress.

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

Por outro lado, em vez de começar do zero, você pode economizar tempo e esforço usando os designs prontos. Com mais de 500 padrões e modelos disponíveis na Biblioteca de Modelos do GutenKit, você pode criar pop-ups de aparência profissional rapidamente em apenas alguns minutos.

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.

Depois disso, você pode alterar o conteúdo e personalizar estilos para alinhar com sua campanha. É uma maneira rápida e sem complicações de colocar pop-ups impressionantes em funcionamento!

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

Você tem a flexibilidade de escolher em quais páginas você gostaria que seus pop-ups aparecessem. Basta ir até o editor de blocos de pop-ups e, na aba “Conteúdo”, você verá uma opção chamada “Condições”. 

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.

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