Adicione uma Barra de Notificação na parte superior do seu Site

Arranjar maneiras de chamar a atenção do visitante para que ele foque em um produto ou serviço específico é uma forma de aumentar a conversão do site.

É semelhante ao que acontece quando destacamos alguma promoção do site por meio de uma janela popup, que fica flutuando no meio da tela, assim que o internauta entra.

A verdade é que esses métodos funcionam e costumam ser bastante eficientes.

Barra de notificação

Uma barra de notificação é aquela que aparece na parte superior da tela, com objetivo de frisar algo que seja importante o visitante saber, como um curso, promoção, desconto, etc.

Veja este exemplo e confira a barra.

Como adicionar

O NotifySnack, que é o site onde criaremos a barra de notificação, não possui integração com o Wix. Desse modo, teremos que adicionar a barra usando um app HTML do editor.

Siga os passos para criar e adicionar a barra:

1. Acesse o NotifySnack.

2. Clique em ‘make a notification bar‘:

3. Faça cadastro com seu email ou use as redes sociais.

Depois, clique no botão ‘Register‘:

4. Em seguida você verá um aviso de que um link de confirmação foi enviado para seu email e terá um prazo de 24 horas para confirmar e validar a conta.

Clique em ‘Continue‘:

5. Escolha um template e configure a mensagem.

Observe a imagem:

Obs: Veja como está ficando na seção preview.

6. Em ‘Settings‘, as alterações que mais interessam são:

  • Height: que á altura da barra
  • Expand: onde você poderá definir se quer que a barra apareça junto com o carregamento da página ou após um tempo de 1, 5, 10, 15, 30 segundos ou até 1 minuto.
  • Open link in new tab: marque para que a página abra em nova guia.

Importante: deixe as configurações semelhante às da imagem acima, pois são as que melhor funcionam com esse tipo de integração.

Aparência

Você pode personalizar a aparência da barra, como cores, textos e tamanhos.

7. Para adicionar uma cor sólida, clique em ‘Solid colors‘:

8. Adicionar uma textura, clique em ‘Textures‘:

9. Em ‘Text Style‘ personalize os textos :

  • Message color: cor do texto da mensagem.
  • Link color: cor do texto do link.
  • Font: tipo de fonte.
  • Size: tamanho da fonte.
  • Style: formatação do texto.
  • Text shadow: sombra no texto.

10. Por fim, clique no botão verde ‘Finish‘ no canto inferior da página:

Copiando o código

11. Na página seguinte, clique no botão preto escrito S:

12. Copie todo o código que for exibido:

No Wix

13. Adicione um app HTML e COLE o código copiado:

Agora apenas posicione o app HTML na parte superior da página, mais precisamente no cabeçalho.

14. Para ter um melhor aspecto, desmarque a opção ‘Mostrar em todas as páginas‘:

Você pode editar sua barra voltando ao NotifySnack e clicando em ‘edit’ para fazer alterações.

É isso!

Esse é um bom recurso para ser sugerido no App Market. Para isso, basta que você faça uma pesquisa por ‘Snack‘ no Wix App Market e depois sugira a ferramenta clicando no link ‘Sugira um aplicativo‘.

Qualquer dúvida, comente o post. 😉

Saiba mais sobre este projeto, aqui.

2 comentários para “Adicione uma Barra de Notificação na parte superior do seu Site”

  1. Por LUIS EDUARDO DA SILVA MENDES

    Responder

    • Por Gabriel Martins

      Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

X

65 milhões de pessoas, ONGs e empresas já criaram seus sites no Wix. Crie o seu AQUI

¤
Leia mais:
imagem_no_post
Blog no Wix – Saiba como adicionar mais de uma imagem ou vídeo no Post

Fechar