Crie pop-ups Elementor no WooCommerce

Todos nós somos grandes fãs do WooCommerce. É simples de configurar e personalizar. Recursos que simplificam a criação e o gerenciamento de uma loja de e-commerce dinâmica e poderosa estão incluídos no pacote.

No entanto, criar uma página de comércio eletrônico de sucesso vai muito mais do que simplesmente adicionar produtos populares. Todas as páginas também devem ser visualmente atraentes. Quanto mais atraente e amigável 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 WooCommerce crie o carrinho de compras e a página de checkout para você quando você constrói seu site, o Elementor os torna mais atraentes, personalizando-os.

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

Ao criar uma calorosa página de agradecimento e atualizar suas 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á para Modelos> Pop-ups na barra de menu. Você verá uma lista de todos os seus pop-ups e, se ainda não tiver criado um, 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 ex amp les pré-fabricados exibidos. Vários modelos estão disponíveis para vários fins; alguns são adequados para anúncios, outros para promover um desconto, outros são ideais para incentivar os usuários a se inscreverem. Há mesmo ex amp les para os usuários do uso de cookies ou outras notificações PIBR aviso. Assim que encontrar algo de que goste, clique nele para ver uma visualização maior e pressione o botão Inserir.

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

Se você já trabalhou com o Elementor no passado, você se sentirá em casa com a interface, as opções e a maneira como tudo está planejado para você. É essencialmente o mesmo processo que criar modelos de página 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. Ao 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

 É quando você deve 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 como a própria tela de pop-up funciona. Eles são os seguintes:

• É aqui que você deseja passar a maior parte do tempo, porque é onde você poderá criar diferentes tipos de pop-ups. Em outras palavras, ao ajustar essas configurações, você será capaz de 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 várias outras configurações importantes.

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

• Altere a altura e a largura da imagem.
• Alterar a orientação vertical ou horizontal do objeto (por ex amp le, você pode corrigi-lo para cima ou para baixo para criar uma barra de notificação)
• Tomar uma decisão sobre se deve ou não usar uma sobreposição (isto permite, por ex amp le, cinza o fundo quando a janela activa)
• Desative o botão Fechar em seu navegador.
• Inclui uma animação para a entrada.

Você pode fazer o seguinte na guia Estilo :

• Você pode alterar a cor do plano 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, você deve configurá-lo.

Por fim, 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 certo tempo.
• Ao clicar na sobreposição ou pressionar a tecla Escape, você pode impedir que a janela feche.

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

Para ter uma ideia de como essas configurações afetarão seu pop-up, veja como ele fica quando você altera a Posição para o canto inferior direito da janela:

Dê uma olhada em como o pop-up agora está permanentemente fixo 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 tiver concluído as configurações básicas de pop-up, você pode começar a projetar o conteúdo real de 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á um grande controle sobre o design final. O widget de formulário é a única coisa que você absolutamente deve incluir porque é o único que permite criar seu formulário de opt-in de e-mail.

Com o widget Form, você tem controle total sobre os campos que deseja oferecer, bem como o texto e a aparência do botão de envio. Para ex amp le:

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

Como afirmado anteriormente, você tem um grande controle sobre a aparência do seu site e também tem 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á compartilhar com o mundo. Após pressionar o botão PUBLICAR, você verá uma série de perguntas. Como uma ilustração:

É possível especificar as condições em que 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 rola para um elemento específico, entre outras possibilidades. Todas essas opções têm suas configurações, 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 de retorno, mostrar o pop-up apenas um determinado número de vezes ou talvez apenas mostrar o pop-up quando um visitante é direcionado ao seu site a partir de um determinado 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 por seus usuários.

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

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

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

Estamos de volta ao estágio de 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 um usuário que há um desconto disponível no produto específico que 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 ampla 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).

Portanto, vamos duplicar esse processo para o botão, que exibirá o preço do produto. Podemos formular o texto anterior como COMPRE AGORA PARA nos fornecer uma frase de chamariz atraente:

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 às configurações de publicação mais uma vez, o que nos permite especificar que queremos que o pop-up apareça apenas nas páginas do WooCommerce. Vamos definir o cronômetro para 15 segundos de inatividade para ser o gatilho. No final das contas foi assim:

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