Crie pop-ups Elementor no WooCommerce

Somos todos grandes fãs do WooCommerce. É simples de configurar e personalizar. Recursos que simplificam a criação e o gerenciamento de uma loja de comércio eletrônico dinâmica e poderosa estão incluídos no pacote.

No entanto, criar uma página de comércio eletrônico de sucesso envolve mais do que simplesmente adicionar produtos populares. Todas as páginas também devem ser visualmente atraentes. Quanto mais visualmente atraente e fácil de usar for o seu site, maior será a probabilidade de atrair mais clientes.

• Configuração da janela pop-up
• Você também pode criar pop-ups usando o construtor visual no Elementor
• Preferências de publicação

Embora o WooCommerce crie o carrinho de compras e a página de checkout para você quando você cria seu site, o Elementor os torna mais atraentes ao personalizá-los.

Você tem a opção de redesenhá-los ou recomeçar desde o início. Você pode repetir o processo para todas as outras páginas do seu site.

Ao criar uma página calorosa de agradecimento e atualizar as páginas Minha conta e Termos de serviço, você pode conquistar os corações e mentes de seus clientes.

A funcionalidade de arrastar e soltar do Elementor, combinada com este tutorial, garantirá que você tenha uma experiência sem problemas ao criar suas páginas.

Depois de configurar sua loja wooCommerce, você pode querer torná-la mais atraente para seus visitantes e clientes. Adicionar pop-ups dá ao usuário outra impressão e um novo desejo de permanecer em sua loja.

 Para criar um pop-up, vá em Modelos > Pop-ups na barra de menu. Será apresentada uma lista de todos os seus pop-ups e, se ainda não tiver criado um, você verá algo semelhante ao seguinte:

Depois de clicar em ADICIONAR NOVO POPUP (que é bastante autoexplicativo), você será solicitado a dar um nome a ele e, em seguida, selecionar um modelo a partir dos amp pré-fabricados exibidos. Vários modelos estão disponíveis para diversas finalidades; alguns são apropriados para anúncios, outros para promover descontos, outros são ideais para incentivar os usuários a se inscreverem em algo. Existem até amp para alertar os usuários sobre o uso de cookies ou outras notificações do GDPR. Assim que encontrar algo de que goste, clique nele para ver uma visualização ampliada e pressione o botão Inserir.

Você será levado ao construtor de pop-up no back-end do WordPress após clicar neste botão.

Se você já trabalhou com Elementor no passado, você se sentirá em casa com a interface, as opções e a forma como tudo é organizado para você. É essencialmente o mesmo processo de criação de modelos de páginas Elementor no WordPress.

No lado direito da tela está a tela principal, que exibe uma prévia do que você está trabalhando no momento. Você pode editar e personalizar cada elemento individualmente selecionando-o e selecionando Editar > Editar Elementos. Quando terminar, você verá os controles e preferências exibidos na barra lateral à esquerda, junto com a opção de Publicar seu trabalho.

Configuração da janela pop-up

 É nesse momento que você deverá ver uma prévia do seu pop-up – uma tela em branco ou o modelo que você escolheu.

As configurações de pop-up, sempre abertas por padrão, permitem que você personalize o funcionamento da própria tela pop-up. Eles são os seguintes:

• É aqui que você desejará passar mais tempo, pois é onde poderá criar diferentes tipos de pop-ups. Em outras palavras, ajustando essas configurações, você poderá fazer os seguintes efeitos:

• Pop-ups modais são um tipo de janela modal.
• Slides, barras de notificação e assim por diante.

Além disso, você pode personalizar diversas outras configurações importantes.

As seguintes opções estão disponíveis na Configurações :

• Altere a altura e a largura da imagem.
• Altere a orientação vertical ou horizontal do objeto (por amp , você pode fixá-lo na parte superior ou inferior para criar uma barra de notificação)
• Decida se deseja ou não usar uma sobreposição (isso permite, por amp , esmaecer o fundo quando o pop-up estiver ativo)
• Desative o botão Fechar do seu navegador.
• Inclui uma animação para a entrada.

Você pode fazer o seguinte na Estilo :

• Você pode alterar a cor de fundo, torná-lo um gradiente ou usar uma imagem como plano de fundo.
• Se a sobreposição estiver habilitada, configure-a.
• Caso você tenha o botão Fechar habilitado, deverá configurá-lo.

Finalmente, a guia Avançado contém algumas configurações de importação diversas que permitem fazer coisas como o seguinte:

• Exiba o botão Fechar ou faça com que o pop-up feche automaticamente após um determinado período de tempo.
• Ao clicar na sobreposição ou pressionar a tecla Escape, você pode evitar que a janela feche.

• Desative a capacidade de rolar a página para baixo.
• Evite vários pop-ups (se você direcionou vários pop-ups para a mesma página, isso evitará que seus visitantes fiquem irritados).

Para ter uma ideia de como essas configurações afetarão seu pop-up, veja como ficará quando você alterar a posição para o canto inferior direito da janela:

Dê uma olhada em como o pop-up agora está permanentemente fixado no canto inferior direito. Usando um gatilho de rolagem em conjunto com uma animação de entrada, você pode obter um efeito de deslizamento discreto e agradável.

Você também pode criar pop-ups usando o construtor visual no Elementor

Assim que concluir as configurações básicas de pop-up, você poderá começar a projetar o conteúdo real do seu pop-up arrastando e soltando elementos na interface visual de arrastar e soltar.

Você pode usar qualquer widget Elementor que desejar, o que lhe dá muito controle sobre o design final. O widget Formulário é a única coisa que você absolutamente deve incluir porque é o único que permite criar seu formulário de inscrição por e-mail.

Com o widget Formulário, você tem controle total sobre os campos que deseja oferecer, bem como sobre o texto e a aparência do botão de envio. Por amp :

Além disso, recomendo fortemente que você se familiarize com todos os widgets e opções de design do Elementor.

Conforme afirmado anteriormente, você tem grande controle sobre a aparência do seu site e também acesso a alguns widgets úteis que podem ajudá-lo a aumentar sua taxa de conversão.

Preferências de publicação

Quando estiver satisfeito com o que criou, você desejará compartilhá-lo com o mundo. Após pressionar o botão PUBLICAR, você receberá uma série de perguntas. Como ilustração:

É possível especificar as condições sob as quais deseja que o pop-up apareça? Você pode escolher quais páginas incluir ou excluir dos resultados da pesquisa. Você pode ter quantas condições desejar.

Qual é, então, o evento que faz com que o pop-up apareça? Você pode escolher se deseja ou não exibir o pop-up imediatamente no carregamento da página, na rolagem ou quando o usuário rolar para um elemento específico, entre outras possibilidades. Todas essas opções possuem configurações próprias, permitindo uma personalização completa.

Por último, mas não menos importante, você verá algumas regras avançadas, como mostrar o pop-up apenas para visitantes recorrentes, mostrar o pop-up apenas um determinado número de vezes ou talvez mostrar o pop-up apenas quando um visitante for encaminhado ao seu site a partir de um site específico. URL. Existem mais alguns também. Essas opções podem melhorar significativamente a experiência do usuário em seu pop-up, permitindo que você o projete com verdadeira integridade e consideração pelos usuários.

Conclua as configurações da maneira que desejar e clique em SALVAR E FECHAR. Você será levado a amp como será o seu pop-up depois de clicar neste botão.

Os pop-ups podem ser personalizados e conteúdo dinâmico pode ser adicionado a eles.

Leve as coisas para o próximo nível, certo? Até este ponto, selecionamos um modelo e ajustamos uma ou duas sessões, e isso é tudo. Considere o cenário em que queremos personalizar ainda mais nosso pop-up.

Estamos de volta à fase ADICIONAR NOVO POPUP do processo, onde podemos especificar um título e escolher um modelo mais uma vez.

Depois disso, podemos selecioná-lo, fazer as alterações necessárias nas configurações básicas e clicar em PUBLICAR mais uma vez.

Ok, é aqui que as coisas começam a ficar interessantes. Podemos usar o Elementor para buscar dados dinâmicos de nossa instalação do WordPress e inseri-los no próprio pop-up em nosso pop-up. Podemos incluir informações como o nome do usuário, o título da página e assim por diante.

Considere o seguinte cenário: estamos executando o WooCommerce e queremos informar ao usuário que há um desconto disponível no produto específico que ele está visualizando no momento. Para começar, selecione uma seção de texto do modelo e clique em Dinâmico na barra lateral:

Temos uma grande variedade de opções para escolher, incluindo informações da própria postagem, informações do site como um todo, informações da mídia, informações do autor e até informações do WooCommerce. Selecionaremos um título de produto e ele será adicionado ao nosso bloco de conteúdo de texto como resultado de nossa seleção.

Suponha que os detalhes do banco de dados não sejam recuperados corretamente. Nesse caso, é possível especificar alguns antes do texto, alguns depois do texto e um texto substituto (se os detalhes do banco de dados não forem recuperados corretamente).

Então vamos duplicar esse processo para o botão, que exibirá o preço do produto. Podemos formular o texto anterior como COMPRE AGORA PARA para nos fornecer um apelo à ação convincente:

Podemos até dar um passo adiante e usar a imagem do produto como plano de fundo da própria janela pop-up.

Quando pressionamos PUBLICAR, somos apresentados mais uma vez às configurações de publicação, permitindo-nos especificar que queremos que o pop-up apareça apenas nas páginas WooCommerce. Definiremos o cronômetro para 15 segundos de inatividade para ser o gatilho. Veja como acabou no final:

Embora o design possa ser melhorado, você pode ver que exibimos o nome do produto, seu preço e uma imagem do produto como plano de fundo do pop-up. Brilhante!