Os primeiros popups foram criados a partir do cenário imaginado por Ethan Zukerman para oalojamento de sua página no Tripod no início dos anos 90. Seus usuários reclamaram da quantidade de anúncios que ele colocou no site, então ele decidiu colocar os banners em uma página separada que abria quando um usuário acessava a página.
Este pequeno pedaço de código ainda não era um pop-up real como você vê em todos os sites agora, mas foi aí que tudo começou. Nas páginas da web modernas, os pop-ups são usados para diversos fins, não apenas para anúncios. Formulários de contato, avisos de política de privacidade e sugestões de assinatura também são frequentemente apresentados como pop-ups.
Há duas coisas que incomodam os usuários quando se trata de pop-ups: quando eles pulam em você quando você não os deseja; e quando sua aparência difere completamente do estilo do site. Esses dois problemas aparecem quando você usa plug-ins que não parecem ser da mais alta qualidade.
O maior problema da maioria dos plugins que desenvolvedores iniciantes usam para criando pop-ups é a falta de controle sobre a mensagem resultante. No entanto, você pode evitar todos esses problemas se usar o Elementor para criar um site.
Dois plugins incríveis, criados especialmente para Elementor página Builder, ajudam você a criar pop-ups de qualquer tipo, forma e estilo que você precisar – Construtor Popup Elementor et JetPopup. Já que ambos são feitos da mesma carne que o Elementor era, a única pergunta a fazer é qual desses plug-ins escolher. Para ajudá-lo a tomar essa decisão, farei uma revisão completa de ambos e você poderá comparar seus prós e contras. Então vamos !
Download e instalação
Este não é o critério mais importante ao escolher qual plugin usar, mas para experimentá-lo você precisa obtê-lo primeiro. É por isso que vou começar do início e delinear o processo para obtê-lo - o preço, o esforço envolvido e a simplicidade do processo de configuração.
Construtor de pop-ups
Este plugin foi criado pela equipe Elementor. Podemos, portanto, chamá-lo de seu "filho" real. Esta é a última atualização do Elementor, lançada em janeiro de 2019 para atender às necessidades dos clientes. No entanto, ele não está disponível para usuários da versão gratuita do Elementor.
O Popup Builder está incluído no plano de assinatura profissional. Portanto, para ter a capacidade de criar pop-ups, você deve primeiro ter o Elementor Pro. O plano de preços mais simples que permite usar toda a variedade de recursos do Elementor para um único site custa US $ 49 por ano. Assim, desde os primeiros passos (compra do Elementor Pro), segue o algoritmo para obtenção do Popup Builder:
- Compre Pro Elementor página Builder.
- Vá para sua conta pessoal e faça o download do plug-in.
- Vá para o painel do seu site, Plugins> Adicionar novo, clique no botão “Carregar plugin” e escolha o arquivo .zip apropriado.
- Quando a instalação estiver concluída, ative o plugin com sua chave de licença.
- Aqui está o Popup Builder que pode ser encontrado na guia Modelos> Popups.
É um longo caminho, mas com o Popup Builder você também obtém uma enorme coleção de diferentes elementos do Elementor, como widgets, modelos e outras ferramentas adicionais.
Construtor de pop-ups
JetPopup
A "família" de plugins Jet já possui mais de artigos 10 e o JetPopup é um deles. Foi cuidadosamente criado especificamente para a Elementor e aumenta o número de suas ferramentas disponíveis. Este plugin é t
Totalmente compatível com as versões gratuitas e pagas. Assim, você não precisa fazer compras adicionais. O JetPopup custa US $ 15 e, uma vez obtido, você pode usá-lo em apenas um site. Se você precisar dele para mais de um projeto, pode comprar o plugin sob a licença do desenvolvedor (custará $ 45) e usá-lo em cinco sites. O algoritmo para obter o plug-in é um pouco mais simples:
- Compre o plug-in no TemplateMonster Marketplace. Será baixado para o seu computador.
- Vá para o painel do seu site, Plugins> Adicionar novo, clique no botão “Carregar plugin” e escolha o arquivo .zip apropriado.
- Quando a instalação for concluída, ative o plugin.
- Voila! Ao abrir o menu de personalização Elementor (clicando no botão "Editar com Elementor"), você encontrará a seção JetPopup no menu esquerdo do widget.
Criação de pop-up
Agora, quando as ferramentas estão prontas, posso tentar criar um pop-up com os dois plugins e ver como o recurso é simples e compreensível. Em seguida, vou criar um pop-up básico e dar uma olhada nas opções de personalização do Popup Builder e JetPopup.
Construtor de pop-ups
No Pro Elementor, os pop-ups são feitos separadamente das páginas do site. Para alterar a aparência do site, abra a página que deseja personalizar, clique no botão “Editar com Elementor” e faça as alterações. Mas para criar (e depois editar) pop-ups, você deve ir para Modelos> Pop-ups e clicar no botão “Adicionar novo pop-up”.
Experimente o Popup Builder agora
Na janela aberta, você precisa escolher o modelo que criará (sim, você pode criar modelos não apenas para pop-ups, mas também para páginas e outros itens) e dar um nome a ele.
Depois de pressionar o botão "Criar modelo", você será redirecionado para o menu de personalização Elementor. É mais fácil personalizar um item existente, construindo-o do zero. Portanto, primeiro você será solicitado a escolher um modelo apropriado.
Escolhi um dos modelos exibidos no topo da lista da biblioteca. Logo após a escolha, você pousa na área de trabalho Elementor a que provavelmente está acostumado. As opções de personalização são colocadas na barra lateral do lado esquerdo da tela. Você tem três guias aqui.
A guia "Configurações" permite alterar o layout do pop-up, alterar o nome do modelo e visualizar. Na guia "Estilo", você pode personalizar o design - altere cores, fontes, imagens e bordas. A guia "Avançado" também possui um conjunto de controles deslizantes adicionais; por exemplo, eles impedem que o pop-up seja fechado com a tecla ESC.
Como você pode ver - nada inesperado, se você já usou o Elementor antes, não encontrará problemas com este plugin. Aqui está um vídeo detalhado que explica como criar uma janela pop-up usando o Popup Builder:
JetPopup
Este plug-in também adiciona uma nova guia ao seu painel de tema WordPress e com sua ajuda, os pop-ups também são criados separadamente das páginas. Os pop-ups prontos para uso também são armazenados em uma guia chamada "Biblioteca de pop-ups". Para criar um novo pop-up, você pode pressionar o botão “Adicionar” no modelo pré-criado ou ir para JetPopup> Adicionar novo pop-up, dar um nome ao modelo e pressionar “Editar com Elementor”.
O campo de trabalho é um pouco diferente da norma, porque agora você está criando uma janela menor. No menu esquerdo, você pode adicionar qualquer tipo de item ao seu pop-up.
O plugin JetPopup adiciona um único item ao menu do widget - botão de ação contextual. Isso permite definir o tipo de ação que ocorrerá quando o usuário pressionar o botão.
Não é muito óbvio abrir as configurações na janela pop-up. Você precisa clicar no botão de manutenção na parte inferior do menu. O menu de configurações é bastante semelhante ao do Popup Builder, mas existem apenas duas guias de personalização. “General Settings” permite que você defina um efeito de animação, renomeie o modelo ou defina as condições. Na guia “Estilo” você pode alterar layouts, cores, imagens, fontes e bordas.
O JetPopup possui uma funcionalidade um pouco menos óbvia, mas compensa com tutoriais em vídeo detalhados e úteis.
gatilhos
Para ser útil e não incomodar os visitantes, os pop-ups devem aparecer no momento certo. As condições sob as quais o pop-up é exibido são chamadas de "gatilhos". Quanto mais detalhadas as condições disponíveis, mais flexível é o plug-in pop-up. A precisão é muito importante se você não deseja que seu usuário saia do site após a janela pop-up do formulário de inscrição aparecer.
Construtor de pop-ups
Este plug-in ajuda a definir as condições necessárias logo após a personalização da janela pop-up. Quando você pressiona o botão "Publicar", você vê a janela na qual pode definir condições (em quais páginas esse pop-up será exibido), gatilhos (quando a janela pop-up será exibida) e regras avançadas.
O Popup Builder tem seis gatilhos, como exibição em uma rolagem e clique, e sete regras avançadas, como exibição após um determinado número de sessões ou exibição em determinados dispositivos. Gatilhos e regras avançadas possuem botões deslizantes simples e será muito rápido definir todos os parâmetros que você deseja.
JetPopup
Todos os gatilhos, condições e eventos de abertura são agrupados nos parâmetros. Depois de clicar no botão de manutenção, você abre as guias de configurações e pode definir gatilhos imediatamente. Você pode definir a porcentagem da página após a rolagem, o menu de contexto a ser exibido ou o número de segundos após os quais o usuário verá a mensagem.
A janela só pode ser exibida uma vez ou toda vez que o usuário realizar determinadas ações (não recomendo muito - não deixará os usuários satisfeitos). Você também pode escolher com muita precisão quais postagens ou páginas esse pop-up concreto será exibido. Em geral, este plugin é bastante flexível e permite exibir pop-ups com grande precisão.
posicionamento
Os usuários certamente não serão capazes de evitar as janelas que saltam do centro da tela, mas elas distraem os visitantes do site e podem ser realmente irritantes. Nem todos os pop-ups devem ser colocados no centro, uma fita estreita na parte superior será menos perceptível, mas pode ser muito mais eficaz. Isso significa que você precisa controlar a posição da janela e ser capaz de se mover pela tela.
Construtor de pop-ups et JetPopup divida a tela em nove setores e permite que você coloque seu pop-up em qualquer um deles. O posicionamento é definido ao longo das escalas esquerda-direita e cima-baixo. Não é muito flexível, mas é o suficiente para um pop-up.
Efeitos de animação
A forma como a janela desliza (ou rola ou salta) na página é muito importante. Se a janela estiver se movendo muito rápido ou muito lentamente, não será eficaz. Saltos, cócegas e tremores também devem ser usados com grande precisão. Os efeitos de animação tornam o site mais dinâmico, mas também podem estragar toda a impressão.
Construtor de pop-ups tem 36 tipos de animação de entrada, incluindo diferentes tipos de deslizamento, implantação, zoom, salto e rotação em diferentes direções. Tudo isso, junto com a duração da animação, pode ser encontrado na seção "Layout" da guia Configurações.
Existem 13 tipos de animação no plugin JetPopup, incluindo desbotamento, inversão vertical, slides diferentes, salto e zoom. Você os encontrará na seção "Configurações" da guia Configurações.
modelos
Em alguns casos, você deseja criar um pop-up com uma estrutura específica e saber exatamente como deve ficar. Mas esta é uma ocasião bastante rara; muito mais frequentemente você não tem ideia de quais elementos seu popup deve conter. É aqui que os modelos são úteis. Mesmo que você não use nenhuma das amostras pré-configuradas, processá-las pode fornecer uma boa visão geral. E, é claro, personalizar um item pronto para uso é muito mais rápido e fácil do que construí-lo do zero.
Construtor de pop-ups adicionou uma categoria à biblioteca de modelos do Elementor. Como eu disse antes, você pode ver isso logo no início do novo processo de criação de um pop-up. A variedade de modelos pop-up é grande o suficiente; existem mais de 100 itens. No canto superior esquerdo, uma ferramenta de classificação por categoria suspensa permite que você agilize sua pesquisa. As categorias são compreensíveis e não demorará muito para encontrar o pop-up de que você precisa.
JetPopup também possui uma enorme biblioteca de modelos. Todos eles são armazenados na guia Biblioteca contextual e possuem recursos úteis, como o botão de visualização e o contador de uso. Existem mais opções de classificação, a lista pode ser configurada para exibir um tipo específico de modelos e, em seguida, ser colocada em qualquer ordem; por exemplo, dependendo da data de criação. Não posso dizer o número exato de modelos disponíveis, mas definitivamente existem mais de 100.
Tabela de comparação
| Construtor Popup Elementor | JetPopup | |
| Preço | 45 $ | 15 $ |
| modelos | 100+ | 100+ |
| gatilhos | Gatilhos 6, regras avançadas do 7 | Eventos abertos 5 com parâmetros adicionais |
| Animatio | Tipos 36 | Tipos 13 |
| Tutoriais | documentação | documentação, tutoriais em vídeo do 9 |
JetPopup vs Construtor de pop-ups
Conclusão
Não sei dizer qual desses dois plugins é o melhor; é muito complicado julgá-los. Cada caso e cada pessoa tem seus próprios requisitos para a escolha de plug-ins. Acho que você mesmo deve definir - qual desses dois será o melhor para você? Desejo-lhe boa sorte em adicionar um pop-up incrível ao seu site!
