Deseja criar e exibir um pop-up por tag de postagem no WordPress? Então continue lendo este artigo.
Temos certeza de que você já conhece a pequena janela que aparece ao navegar em um site. Bem, é chamado de pop-up ou pop-up. Os pop-ups podem aparecer em diferentes tamanhos e posições na tela de um site.
No WordPress, existem muitos plug-ins para criar pop-ups, como Elementor Pro, JetPopup, Brizy Pro e muito mais.
O importante a lembrar é que os pop-ups não devem incomodar os visitantes do seu site. Portanto, crie um pop-up o mais simples e atraente possível.
conteúdo
Alguns plugins do WordPress para criar pop-ups
Elementor Pro
Elementor Pro é uma extensão Elementor com centenas de recursos premium. Oferece ferramentas profissionais poderosas que aceleram seu fluxo de trabalho e design. Elementor O Pro oferece controle total sobre o layout e o design do seu site. Nesse caso, você pode personalizar livremente o design do seu pop-up.
uso Elementor Pro criar um pop-up por tag de postagem é muito simples e fácil de usar. Você pode definir facilmente as condições de exibição do seu pop-up de maneira muito precisa.
JetPopup
O JetPopup da Crocoblock é uma extensão para Elementor. Você pode comprá-lo como um plug-in autônomo ou comprá-lo em um pacote com outros plug-ins Crocoblock. A vantagem de usar o JetPopup para criar uma janela pop-up é que ele vem com muitos recursos interessantes.
- Você pode brincar com os gatilhos da janela pop-up.
- Você pode criar animações para a janela pop-up.
- Um grande número de modelos pop-up está disponível.
Leia também: 22 melhores complementos premium para Elementor
Brizy Pro
O construtor pop-up de Brizy Pro oferece-lhe duas opções. O primeiro é o pop-up ativado por clique e o segundo são os gatilhos e condições automáticas.
- Abrindo com um clique: Seu pop-up pode ser acionado simplesmente clicando nos elementos da sua página.
- Acionadores e condições automáticas: você pode configurar as ações do visitante que determinarão quando os pop-ups serão exibidos.
Como criar e exibir pop-up por tag de postagem no WordPress com Elementor
Conforme mencionado anteriormente, você tem várias opções para criar um pop-up no WordPress. Neste tutorial, mostraremos como criar e exibir um pop-up por tag de postagem usando a versão Elementor Pro, então certifique-se de já ter um.
Etapa 1: criar o modelo pop-up
A primeira coisa a fazer é criar um novo modelo de Popup. Para criar um novo modelo Popup, vá para Modelos > Pop-ups no painel do WordPress e clique no botão Adicionar novo.
Em seguida, adicione o nome do seu Popup e clique no botão CRIE UM MODELO.
Você será direcionado para a biblioteca de modelos, poderá escolher um modelo na janela da biblioteca ou criar seu próprio modelo pop-up. Para usar um modelo da biblioteca, basta clicar no botão inserir.
Mas neste tutorial, vamos criar o modelo Popup do zero. Clique no ícone X para fechar a biblioteca de modelos.
Etapa 2: ajustar as configurações de pop-up
Precisamos fazer alguns ajustes nas configurações do Pop-up antes de começarmos a criar um modelo de Pop-up. Você pode encontrar as melhores configurações para o seu site. Neste tutorial, mostraremos as configurações de pop-up de sua escolha.
Clique no ícone de engrenagem no canto inferior esquerdo. Nas configurações de pop-up, altere o Largura em 90% da largura da vista (VW) Et o Posição en Centro-Inferior.
Etapa 3: crie o pop-up
Em seguida, crie seu modelo pop-up. Adicione uma nova seção e selecione a estrutura de 5 colunas. Nas configurações da seção, defina o Largura em 950. Você pode jogar com suas configurações.
Por exemplo, você pode ir para a guia Style para definir o plano de fundo, vá para a guia avançado para personalizar a margem e muito mais.
Agora, de volta às suas colunas. Na coluna da esquerda, defina a largura em 33% e nas outras quatro, em 16%.
Na coluna da esquerda, adicionaremos um widget de Título com algum texto. Você pode adicionar um texto convidando os visitantes do seu site a visualizar outro conteúdo relevante para o conteúdo atual ou qualquer outro texto de sua escolha.
À direita, adicionaremos um widget de imagem. Você pode adicionar imagens de miniaturas/imagens em destaque de postagens ou carregá-las manualmente.
Agora a estrutura está pronta. Volte para Configurações de pop-up para personalizar as animações de entrada, saída e margem. Neste tutorial, definimos a entrada como Desaparecer e a saída em Desbotar. Em seguida, vá para a guia avançado e defina a margem como 30 (valor comum para links).
Etapa 4: publicar o pop-up
Agora que o desenho está pronto, clique no botão PUBLICAR para definir condições de exibição e acionadores. Para definir a condição de exibição, clique no botão ADICIONE UMA CONDIÇÃO e selecione sua opção na lista suspensa.
Como você deseja exibir o Popup by post tag, você pode definir as seguintes condições de exibição (veja a animação).
Clique em Avançar. na aba gatilhos, defina o gatilho para Na rolagem virando o interruptor para sim. Defina a Direção defende Meia e a Largura acima de 95%. Porque queremos que o Popup apareça quando os visitantes chegarem ao final do nosso artigo.
Neste tutorial, não vamos definir Regras Avançadas. Então clique em SALVAR E FECHAR. Bem, agora terminamos.
Vamos ver o que parece.
Aqui você acabou de terminar o seu pop-up. Veja também nossos artigos relacionados:
- 6 trechos de CSS úteis para o widget de postagens do Elementor
- Como criar uma página de listagem com Elementor Loop Builder
- Como adicionar horário comercial em seu site Elementor
- Como adicionar quebra de linha no texto do botão Elementor
- Como criar e editar um rodapé no Elementor
- Como adicionar máscara de imagem no Elementor
- Elementor ou Brizy: Qual é o melhor construtor de páginas do WordPress?
