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.

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:
Webwriting – Veja como arrasar nos textos para Web

Fechar