Crie pop-ups Elementor no WooCommerce

Somos todos grandes fãs do WooCommerce. É muito fácil de configurar e personalizar. Recursos que simplificam a criação e o gerenciamento de uma loja virtual dinâmica e poderosa já estão incluídos no pacote.

No entanto, criar uma página de e-commerce de sucesso vai além de simplesmente adicionar produtos populares. Todas as páginas precisam ser visualmente atraentes. Quanto mais visualmente atraente e fácil de usar for o seu site, maior a probabilidade de atrair mais clientes.

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

Embora o WooCommerce crie o carrinho de compras e a página de finalização da compra automaticamente quando você cria seu site, o Elementor os torna mais atraentes, permitindo a personalização.

Você tem a opção de redesenhá-las ou começar do zero. Você pode repetir o processo para todas as outras páginas do seu site.

Ao criar uma página de agradecimento acolhedora e atualizar as páginas "Minha Conta" e "Termos de Serviço", você pode conquistar o coração e a mente dos 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 proporciona ao usuário uma nova impressão e um desejo renovado de permanecer em sua loja.

 Para criar uma janela pop-up, acesse Modelos > Janelas Pop-up na barra de menu. Você verá uma lista de todas as suas janelas pop-up e, caso ainda não tenha criado nenhuma, verá algo semelhante a isto:

Depois de clicar em ADICIONAR NOVO POP-UP (o que é bastante autoexplicativo), você deverá dar um nome ao pop-up e selecionar um modelo entre osamppredefinidos. Vários modelos estão disponíveis para diferentes finalidades; alguns são adequados para anúncios, outros para promover um desconto, outros ainda são ideais para incentivar os usuários a se inscreverem em algo. Há atéamppara alertar os usuários sobre o uso de cookies ou outras notificações da LGPD (Lei Geral de Proteção de Dados). Assim que encontrar um modelo do seu agrado, clique nele para ver uma pré-visualização maior e, em seguida, pressione o botão Inserir.

Ao clicar neste botão, você será redirecionado para o construtor de pop-ups no painel administrativo do WordPress.

Se você já trabalhou com o Elementor antes, vai se sentir em casa com a interface, as opções e a forma como tudo está organizado. É basicamente o mesmo processo de criação de modelos de página do Elementor no WordPress.

No lado direito da tela, encontra-se a tela principal, que exibe uma pré-visualização do seu trabalho atual. Você pode editar e personalizar cada elemento individualmente, selecionando-o e clicando em Editar > Editar Elementos. Ao concluir, você verá os controles e preferências exibidos na barra lateral à esquerda, juntamente com a opção de Publicar seu trabalho.

Configuração da janela pop-up

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

As Configurações de Janela Pop-up, sempre abertas por padrão, permitem personalizar o funcionamento da própria janela pop-up. São elas:

• É aqui que você deve dedicar a maior parte do seu tempo, pois é onde poderá criar diferentes tipos de pop-ups. Em outras palavras, ajustando essas configurações, você poderá obter os seguintes efeitos:

• As janelas modais são um tipo de janela modal.
• Painéis deslizantes, 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 aba Configurações

• Alterar a altura e a largura da imagem.
• Alterar a orientação vertical ou horizontal do objeto (poramp, você pode fixá-lo na parte superior ou inferior para criar uma barra de notificações)
• Decida se deseja ou não usar uma sobreposição (isso permite, poramp, escurecer o fundo quando a janela pop-up estiver ativa)
• Desative o botão de fechar do seu navegador.
• Inclua uma animação para a entrada.

Na aba Estilo

• Você pode alterar a cor de fundo, criar um gradiente ou usar uma imagem como plano de fundo.
• Se a sobreposição estiver ativada, configure-a.
• Caso o botão de fechar esteja ativado, você precisa configurá-lo.

Por fim, a aba Avançado contém algumas configurações de importação diversas que permitem realizar ações como as seguintes:

• Exibir o botão de fechar ou fazer com que a janela pop-up feche automaticamente após um determinado período de tempo.
• Clicando na sobreposição ou pressionando a tecla Esc, você pode impedir que a janela se feche.

• Desative a opção de rolar a página para baixo.
• Evite exibir vários pop-ups (se você direcionou vários pop-ups para a mesma página, isso impedirá que seus visitantes fiquem irritados).

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

Observe como o pop-up agora está fixo permanentemente 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 elegante.

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

Assim que você concluir as configurações básicas do Popup, poderá começar a criar o conteúdo propriamente dito, arrastando e soltando elementos na interface visual de arrastar e soltar.

Você pode usar qualquer widget do Elementor que desejar, o que lhe dá muito controle sobre o design final. O widget Formulário é o único que você precisa incluir, pois é 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. Poramp:

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

Como já foi dito, você tem bastante controle sobre a aparência do seu site e também tem acesso a alguns widgets úteis que podem ajudar a aumentar sua taxa de conversão.

Preferências de publicação

Quando estiver satisfeito com o que criou, você vai querer compartilhar com o mundo. Após clicar no botão PUBLICAR, você verá uma série de perguntas. Por exemplo:

É possível especificar as condições em que o pop-up deve aparecer? Você pode escolher quais páginas incluir ou excluir dos resultados da sua pesquisa. Você pode definir quantas condições desejar.

Qual é, então, o evento que faz com que o pop-up apareça? Você pode escolher se deseja exibir o pop-up imediatamente ao carregar a página, ao rolar a tela ou quando o usuário rolar até um elemento específico, entre outras possibilidades. Todas essas opções possuem suas configurações, permitindo personalização completa.

Por último, mas não menos importante, você encontrará algumas regras avançadas, como exibir o pop-up apenas para visitantes recorrentes, exibi-lo apenas um número determinado de vezes ou, talvez, apenas quando um visitante for direcionado ao seu site por meio de um URL específico. Há ainda outras opções. Essas configurações podem melhorar significativamente a experiência do usuário com o seu pop-up, permitindo que você o projete com verdadeira integridade e consideração pelos seus usuários.

Preencha as configurações da maneira que desejar e clique em SALVAR E FECHAR. Você verá umaampde como ficará sua janela pop-up após clicar neste botão.

As janelas pop-up podem ser personalizadas e conteúdo dinâmico pode ser adicionado a elas.

Vamos elevar o nível, que tal? Até agora, selecionamos um modelo e ajustamos uma ou duas configurações, e só. Considere o cenário em que queremos personalizar ainda mais nosso pop-up.

Voltamos à etapa ADICIONAR NOVO POP-UP 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 novamente.

Ok, é aqui que as coisas começam a ficar interessantes. Podemos usar o Elementor para buscar dados dinâmicos da nossa instalação do WordPress e inseri-los diretamente no popup. 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 usando o WooCommerce e queremos informar ao usuário que há um desconto disponível no produto específico que ele está visualizando. Para começar, selecione um trecho 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 publicação, informações do site como um todo, informações de mídia, informações do autor e até mesmo informações do WooCommerce. Selecionaremos um título de produto, e ele será adicionado ao nosso bloco de conteúdo de texto como resultado da nossa seleção.

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

Vamos então duplicar esse processo para o botão, que exibirá o preço do produto. Podemos reformular o texto anterior como "COMPRE AGORA POR" para criar uma chamada à ação convincente:

Podemos ir ainda mais longe e usar a imagem do produto como plano de fundo da própria janela pop-up.

Ao clicar em PUBLICAR, as configurações de publicação são exibidas novamente, permitindo especificar que o pop-up apareça apenas nas páginas do WooCommerce. Definiremos o temporizador para 15 segundos de inatividade como gatilho. Veja como ficou no final:

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