Criando um banner para exibir no topo do seu site

:bookmark: Este guia explica diferentes métodos para criar e personalizar banners em seu site Discourse, desde banners simples que podem ser dispensados até opções mais avançadas.

:person_raising_hand: Nível de usuário necessário: Moderador (Banner dispensável), Administrador

Banners são uma maneira eficaz de comunicar informações importantes aos visitantes do seu site. Este guia irá guiá-lo através de vários métodos para criar e personalizar banners no seu site Discourse.

Banner de boas-vindas

Um banner de boas-vindas cumprimenta membros novos e recorrentes com uma mensagem amigável e uma barra de pesquisa proeminente, facilitando para os visitantes encontrarem rapidamente o conteúdo que procuram.

Para ativar e personalizar o banner de boas-vindas, vá para a área de administração e selecione o link Aparência > Banner de boas-vindas na barra lateral.

Nesta área, você encontrará as seguintes configurações:

  • Ativado em temas…: Isso permite que você designe quais dos seus temas ativos devem exibir o banner de boas-vindas.
  • Imagem de fundo: Carregue uma imagem para servir como fundo para o seu banner de boas-vindas.
  • Cor do texto: Se a cor do texto padrão controlada pela sua paleta de cores conflitar com sua imagem de fundo, você pode selecionar uma nova cor aqui. Note que esta configuração só se aplica quando você carregou uma imagem de fundo.
  • Visibilidade da página: Isso determina em quais páginas o banner de boas-vindas é exibido. Por padrão, ele é mostrado em Páginas do menu superior (significando as páginas selecionadas na configuração do site Menu superior), mas você pode alterar para:
    • Somente página inicial: O banner de boas-vindas só aparece na página inicial do site (ou seja, a primeira página listada na configuração do site Menu superior).
    • Páginas de descoberta: O banner de boas-vindas aparece em todas as páginas do Menu superior, mesmo que não sejam mostradas no menu superior real do seu site (ou seja, não selecionadas na configuração).
    • Todas as páginas: O banner de boas-vindas aparece em todas as páginas do seu site. Isso geralmente não é recomendado, pois pode causar poluição visual em páginas de tópicos que distraem os membros da leitura e participação.
  • Localização: Isso determina onde o banner de boas-vindas aparece na página. Por padrão, ele mostra Acima do conteúdo do tópico, mas você também pode selecionar Abaixo do cabeçalho do site. A diferença é um pouco sutil e mostrada nas capturas de tela abaixo:

Você também pode personalizar o texto do banner de boas-vindas para alterar a saudação e adicionar mais texto explicativo ao banner de boas-vindas.

  • Cabeçalho para novos membros: A saudação principal mostrada aos novos membros na primeira vez que eles entram em seu site.
  • Cabeçalho para membros logados: A saudação principal mostrada aos membros recorrentes.
  • Cabeçalho para visitantes anônimos: A saudação principal mostrada aos membros anônimos (ou seja, que não estão logados).
  • Subcabeçalho para membros logados: Uma linha de texto secundária opcional abaixo do cabeçalho mostrado aos membros recorrentes.
  • Subcabeçalho para visitantes anônimos: Uma linha de texto secundária opcional abaixo do cabeçalho mostrado aos membros anônimos (ou seja, que não estão logados).
  • Placeholder de pesquisa: O texto de placeholder mostrado no campo de pesquisa do banner de boas-vindas.

Banner dispensável

Um banner dispensável é um aviso temporário que os usuários podem fechar. Veja como criar um:

  1. Crie ou navegue até um tópico em qualquer categoria (pública ou privada). A postagem original (OP) no topo do tópico será a fonte do seu banner.
  2. Abra as opções de administração clicando no ícone da chave de fenda à direita ou na parte inferior do tópico.
  3. Selecione “Fixar Tópico…”
  4. Na nova janela, escolha :pushpin: Tornar Tópico Banner

O banner agora aparecerá no topo do seu site. Os usuários verão um banner dispensável. A equipe também verá um link para editar o tópico de origem.

:information_source: Dicas para banners dispensáveis eficazes:

  • Mantenha o texto claro e conciso
  • A altura máxima é de 20vh (editável via CSS)
  • Para textos mais longos, os usuários podem rolar dentro do banner
  • Considere adicionar um link para um tópico público relevante para mais informações

Banner permanente

Para criar um banner que esteja sempre visível e não possa ser dispensado pelos usuários:

  1. Nas configurações do seu site, pesquise por global_notice.
  2. Insira seu texto ou HTML do banner neste campo.

:information_source: Dicas para banners permanentes:

  • Este tipo de banner é tipicamente usado para comunicações urgentes do site, mas pode ser usado para qualquer mensagem permanente
  • Este banner é visível para todos, incluindo usuários anônimos em sites com login_required
  • O banner pode ser removido redefinindo a configuração do site global notice

Banners avançados

Você pode construir banners mais avançados usando um componente de tema. Observe que esses componentes de tema podem entrar em conflito com o recurso principal de banner de boas-vindas.

Welcome Link Banner

Este componente permite que você adicione texto personalizado e 1-4 links ao seu banner. Ele oferece várias opções de personalização, incluindo:

  • Escolher onde exibir o banner (página inicial, listas de tópicos ou todas as páginas)
  • Adicionar links com ícones Font Awesome
  • Limitar a visibilidade com base nos níveis de confiança do usuário
  • Personalizar imagens ou cores de fundo
  • Ajustar cores de texto e ícone

Versatile Banner

Um dos componentes mais populares e bem mantidos, o Versatile Banner oferece amplas opções de personalização através da interface, incluindo:

  • Exibição do banner limitada a
    • usuários logados ou anônimos
    • dispositivo móvel ou desktop
    • página inicial, lista de tópicos ou todas as páginas
  • Opções dispensável, expansível ou persistente
  • Configuração de largura total do navegador
  • Gerenciamento de cores
  • Personalização de cabeçalho e colunas usando HTML

Personalizando banners com CSS

Você pode personalizar todos os tipos de banner usando CSS. Para mais informações sobre como usar CSS para personalizar seu site Discourse, consulte o Guia para iniciantes sobre como usar Temas Discourse.

43 curtidas