Introdução
Os pop-ups são ferramentas poderosas para aumentar a conversão em sites e landing pages, sem comprometer a experiência do usuário. Eles permitem que você utilize estratégias como “micro comprometimento”, onde os visitantes interagem com um elemento antes de se comprometerem totalmente, como preencher um formulário. Neste tutorial, vamos guiá-lo sobre como adicionar, configurar e personalizar pop-ups na Rockty, para que você possa aproveitar ao máximo essa funcionalidade.
1. Passo a Passo para Criar Pop-ups
Adicionando um Pop-up:
Para adicionar um pop-up em suas páginas, insira um novo elemento e selecione o tipo de pop-up que deseja utilizar.
💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.
Editando o Pop-up:
Após adicionar o pop-up, uma mensagem aparecerá no topo da tela informando que a página possui um pop-up, especificando o tipo (barra cinza com texto verde neon). Para editar, clique no texto verde com o código ou nome do pop-up.
Configurações Gerais:
Você pode fechar, excluir ou acessar as configurações gerais do pop-up usando os ícones de X, lixeira, e engrenagem, respectivamente.
Os pop-ups seguem a mesma estrutura de construção de uma página: Seção/Container > Linhas/Colunas > Elementos.
2. Tipos de Pop-ups na Rockty
Pop-up Tradicional:
Exibido na tela quando acionado por uma ação, como um clique em botão, imagem ou texto.
📺 Assista ao vídeo abaixo para uma demonstração prática sobre como configurar o Pop-up Tradicional:
Pop-up de Saída:
Aparece quando o usuário tenta sair da página, ideal para capturar uma última conversão.
🚨 Importante: Esse tipo de pop-up funciona apenas em desktops, não sendo exibido em dispositivos móveis como tablets e celulares.
Pop-up de Congelamento:
É disparado após um tempo determinado, interrompendo a navegação até que o usuário interaja com o pop-up.
💡 Dica: Lembre-se que as ações dos pop-ups (como abrir ao clicar em botões) funcionam apenas em páginas publicadas.
3. Configurações Comuns para Todos os Tipos de Pop-up
Ajustes: Defina um identificador para o pop-up, configure a possibilidade do usuário fechar o pop-up, ajuste o tamanho e o espaçamento interno, e defina a posição na tela.
Estilo: Personalize a cor de fundo, insira imagens, ajuste bordas, radiais e sombras para dar o estilo desejado ao pop-up.
Avançado: Adicione efeitos de movimento, como animações e CSS Classes, para tornar o pop-up mais dinâmico e alinhado ao design da página.
Conclusão
Os pop-ups são uma excelente maneira de capturar a atenção dos usuários e aumentar a conversão em suas páginas. Com as diversas opções de configuração na Rockty, você pode personalizar completamente seus pop-ups para se alinhar ao objetivo do seu site. Explore as diferentes funcionalidades e ajuste as configurações para obter os melhores resultados!
Dicas Adicionais
Timing e Contexto: Utilize pop-ups de forma estratégica, evitando interromper a navegação logo ao entrar na página. Considere usar pop-ups de congelamento apenas após o visitante demonstrar interesse no conteúdo.
Segmentação: Personalize os pop-ups para diferentes públicos com base no comportamento do usuário, como páginas visitadas ou tempo de permanência, para tornar a mensagem mais relevante.
Design Responsivo: Certifique-se de que os pop-ups são responsivos e funcionam bem em todos os dispositivos, ajustando tamanhos e posicionamento para telas menores.
CTA Claro e Direto: Os botões de chamada para ação (CTA) devem ser claros e atraentes, incentivando o usuário a realizar a ação desejada sem confusão.
Evite Pop-ups em Excesso: Use pop-ups com moderação para não sobrecarregar o usuário, o que pode resultar em uma experiência negativa e aumento na taxa de rejeição.
Teste A/B: Realize testes A/B para descobrir quais tipos de pop-ups, mensagens e tempos de exibição geram melhores resultados, ajustando conforme necessário.
Precisa de Ajuda?
Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!