Principal Construtor de Sites/Builder Como criar Pop-ups na Rockty šŸŽ„

Como criar Pop-ups na Rockty šŸŽ„

Última atualização em Jan 30, 2025

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

  1. 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.
      ​


  2. 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.
      ​

      ​


  3. 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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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!