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.
Nível de usuário necessário: Moderador (banner dispensável), Administrador
Banners são uma forma 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 em 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 o banner de boas-vindas:
- Na área de administração, clique no link Aparência > Temas e componentes na barra lateral.
- Encontre seu tema ativo e clique em Editar.
- Encontre a configuração
Habilitar banner de boas-vindase certifique-se de que ela esteja marcada.
Isso ativará o banner de boas-vindas para este tema. Se você oferece vários temas selecionáveis pelo usuário, precisará repetir este processo para cada tema.
Personalizando o banner de boas-vindas
Você pode personalizar o banner de boas-vindas para alterar sua aparência em sua comunidade. Na área de administração, ao ir para Todas as configurações do site, você pode pesquisar por “banner de boas-vindas” para encontrar as seguintes opções de personalização:
Localização do banner de boas-vindas: Isso determina onde o banner de boas-vindas aparece na página. Por padrão, ele aparece em “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:
Visibilidade da página do banner de boas-vindas: Isso determina em quais páginas o banner de boas-vindas é exibido. Por padrão, ele é exibido em “Páginas do menu superior” (significando as páginas selecionadas na configuraçãoMenu superior), mas você pode alterar para:- “Página inicial”: O banner de boas-vindas só é exibido na página inicial do site (ou seja, a primeira página listada na configuração
Menu superior). - “Descoberta”: O banner de boas-vindas é exibido em todas as páginas do
Menu superior, mesmo que não sejam exibidas no menu superior real do seu site (ou seja, não selecionadas na configuração). - “Todas as páginas”: O banner de boas-vindas é exibido em todas as páginas do seu site. Isso geralmente não é recomendado, pois pode causar poluição visual nas páginas de tópicos que distraem os membros da leitura e participação.
- “Página inicial”: O banner de boas-vindas só é exibido na página inicial do site (ou seja, a primeira página listada na configuração
Imagem do banner de boas-vindas: Faça o upload de uma imagem para servir como plano de fundo para o seu banner de boas-vindas.
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. Para personalizar o texto do banner:
- Na área de administração, clique no link Aparência > Textos do site na barra lateral.
- Procure a string de texto que você deseja ajustar:
js.welcome_banner.header.logged_in_members— A saudação principal mostrada aos membros logados no banner de boas-vindas.js.welcome_banner.header.anonymous_members— A saudação principal mostrada a membros anônimos (ou seja, não logados) no banner de boas-vindas.js.welcome_banner.subheader.logged_in_members— Uma linha de texto secundária opcional mostrada a membros logados no banner de boas-vindas, abaixo do cabeçalho.js.welcome_banner.subheader.anonymous_members— Uma linha de texto secundária opcional mostrada a membros anônimos (ou seja, não logados) no banner de boas-vindas, abaixo do cabeçalho.js.welcome_banner.search_placeholder— O texto de espaço reservado mostrado no campo de pesquisa do banner de boas-vindas.
- Clique no botão Editar.
- Atualize o texto conforme desejado.
- Clique em Salvar Alterações.
Banner dispensável
Um banner dispensável é um aviso temporário que os usuários podem fechar. Veja como criar um:
- 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.
- Abra as opções de administração clicando no ícone de chave inglesa à direita ou na parte inferior do tópico.
- Selecione “Fixar Tópico…”
- Na nova janela, escolha
Tornar Tópico um 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.
Dicas para banners dispensáveis eficazes:
- Mantenha o texto claro e conciso
- A altura máxima é de 250px (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:
- Nas configurações do seu site, pesquise por
global_notice. - Insira seu texto ou HTML do banner neste campo.
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 criar 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.
Banner de Link de Boas-Vindas
Este componente permite adicionar 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 ícones
Banner Versátil
Um dos componentes mais populares e bem mantidos, o Versatile Banner oferece extensas 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 de 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 o uso de temas Discourse.