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!