Criando um banner para exibir no topo do seu site

[Discourse]

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:

1. Na área de administração, clique no link Aparência > Temas e componentes na barra lateral.
2. Encontre seu tema ativo e clique em Editar.
3. Encontre a configuração Habilitar banner de boas-vindas e 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ção Menu 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.

• 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:

1. Na área de administração, clique no link Aparência > Textos do site na barra lateral.
2. 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.

3. Clique no botão Editar.
4. Atualize o texto conforme desejado.
5. 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:

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 de chave inglesa à direita ou na parte inferior do tópico.
3. Selecione “Fixar Tópico…”
4. 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:

1. Nas configurações do seu site, pesquise por global_notice.
2. 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.

[leopedrini (Leonardo Zanoni Pedrini)]

@Discourse

Link Aparência > Temas e componentes na barra lateral.

Não consegui encontrar essa opção… É um novo recurso na versão Beta?

[leopedrini (Leonardo Zanoni Pedrini)]

@leopedrini

Não consegui encontrar essa opção… É um recurso novo na versão Beta?

Atualização: após atualizar da versão 3.4.6 para a 3.5.0, ela ficou visível:

[RBoy]

@Discourse

js.welcome_banner.search — O texto de espaço reservado exibido no campo de pesquisa do banner de boas-vindas.

Há um bug na build 3.6.0.beta1-dev (e44347414a)

Alterar este texto do site não tem efeito sobre o texto na barra de pesquisa, que ainda exibe sempre Search. Testado no Windows 10 x64 rodando Chrome

[awesomerobot (Kris)]

Trabalhando em uma correção para isto aqui: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

[RBoy]

Incrível, obrigado - isso corrigiu!

[tknospdr (David Muszynski)]

Estou com um problema com a imagem de fundo do meu banner de boas-vindas.
Estou usando buckets S3 do Cloudflare R2 para armazenamento de objetos no site em questão.
Quando faço upload de uma imagem de fundo na seção de administração, ela aparece corretamente, se eu clicar para exibi-la em tamanho real, funciona. E se eu clicar com o botão direito e mostrar a imagem em uma nova aba, funciona e usando o URL do bucket público:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

O que ele injeta no CSS, no entanto, é este URL:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Tenho outro site que usa armazenamento local e a imagem de fundo do banner funciona corretamente.

Isso é um bug no código, ou estou fazendo algo errado?

Depois de investigar um pouco mais, parece que este CSS controla a imagem de fundo:

Se eu substituir manualmente o URL no inspetor, funciona.
Eu tentei substituir isso com:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

Mas isso não está funcionando. Ainda parece um bug.

[yuriy (Yuriy Kurant)]

@tknospdr, não estou entendendo bem qual problema você está enfrentando?

Verifiquei seu site https://eu.technospider.com e vejo que a imagem de fundo está sendo renderizada como esperado:

[tknospdr (David Muszynski)]

Acho que finalmente consegui o CSS override funcionando. O problema é que ele não deveria precisar de um override.

Parece que o código do banner está usando o asset errado se você estiver hospedando com Cloudflare S3.

[yuriy (Yuriy Kurant)]

Qual exatamente é o seu override?

Do nosso lado, poderíamos garantir que aplicamos apenas um nome de caminho de URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg em CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Acredito que esta regra funcionaria para você sem exigir nenhum override?

[tknospdr (David Muszynski)]

@yuriy

Qual exatamente é o seu override?

Meu override completo é:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

Do nosso lado, poderíamos garantir que aplicamos apenas um nome de caminho de URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg em CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Acredito que esta regra funcionaria para você sem exigir nenhum override?

Na interface do usuário, tudo o que posso fazer é carregar uma imagem, então acredito que uma alteração de código é necessária para poder remover minha declaração de override de CSS.
Ficarei feliz em testar quaisquer correções que você implementar.