Creando un banner para mostrar en la parte superior de su sitio

[Discourse]

Esta guía explica diferentes métodos para crear y personalizar banners en tu sitio de Discourse, desde banners simples que se pueden descartar hasta opciones más avanzadas.

Nivel de usuario requerido: Moderador (banner descartable), Administrador

Los banners son una forma eficaz de comunicar información importante a los visitantes de tu sitio. Esta guía te guiará a través de varios métodos para crear y personalizar banners en tu sitio de Discourse.

Banner de bienvenida

Un banner de bienvenida saluda a los miembros nuevos y recurrentes con un mensaje amigable y una barra de búsqueda prominente, lo que facilita a los visitantes encontrar rápidamente el contenido que buscan.

Para habilitar el banner de bienvenida:

1. En el área de administración, haz clic en el enlace Apariencia > Temas y componentes en la barra lateral.
2. Busca tu tema activo y haz clic en Editar.
3. Busca la configuración Habilitar banner de bienvenida y asegúrate de que esté marcada.

Esto habilitará el banner de bienvenida para este tema. Si ofreces varios temas seleccionables por el usuario, deberás repetir este proceso para cada tema.

Personalización del banner de bienvenida

Puedes personalizar el banner de bienvenida para cambiar su apariencia en tu comunidad. En el área de administración, cuando vayas a Todos los ajustes del sitio, puedes buscar “banner de bienvenida” para encontrar las siguientes opciones de personalización:

• Ubicación del banner de bienvenida: Esto determina dónde se muestra el banner de bienvenida en la página. Por defecto, se muestra “Encima del contenido del tema”, pero también puedes seleccionar “Debajo del encabezado del sitio”. La diferencia es un poco sutil y se muestra en las capturas de pantalla a continuación:

  

  
  

  

• Visibilidad de la página del banner de bienvenida: Esto determina qué páginas muestran el banner de bienvenida. Por defecto, se muestra en “Páginas del menú superior” (lo que significa las páginas seleccionadas en la configuración Menú superior), pero puedes cambiarlo a:

  • “Página de inicio”: El banner de bienvenida solo se muestra en la página de inicio del sitio (es decir, la primera página listada en la configuración Menú superior).
  • “Descubrimiento”: El banner de bienvenida se muestra en todas las páginas del Menú superior, incluso si no se muestran en el menú superior real de tu sitio (es decir, no están seleccionadas en la configuración).
  • “Todas las páginas”: El banner de bienvenida se muestra en todas las páginas de tu sitio. Generalmente no se recomienda, ya que puede causar desorden visual en las páginas de temas que distraen a los miembros de la lectura y la participación.

• Imagen del banner de bienvenida: Sube una imagen para que sirva como fondo de tu banner de bienvenida.

También puedes personalizar el texto del banner de bienvenida para cambiar el saludo y agregar más texto explicativo al banner de bienvenida. Para personalizar el texto del banner:

1. En el área de administración, haz clic en el enlace Apariencia > Textos del sitio en la barra lateral.

2. Busca la cadena de texto que deseas ajustar:

   • js.welcome_banner.header.logged_in_members — El saludo principal que se muestra a los miembros conectados en el banner de bienvenida.
   • js.welcome_banner.header.anonymous_members — El saludo principal que se muestra a los miembros anónimos (es decir, no conectados) en el banner de bienvenida.
   • js.welcome_banner.subheader.logged_in_members — Una línea de texto secundaria opcional que se muestra a los miembros conectados en el banner de bienvenida, debajo del encabezado.
   • js.welcome_banner.subheader.anonymous_members — Una línea de texto secundaria opcional que se muestra a los miembros anónimos (es decir, no conectados) en el banner de bienvenida, debajo del encabezado.
   • js.welcome_banner.search_placeholder — El texto de marcador de posición que se muestra en el campo de búsqueda del banner de bienvenida.

3. Haz clic en el botón Editar.

4. Actualiza el texto como desees.

5. Haz clic en Guardar Cambios.

Banner descartable

Un banner descartable es un aviso temporal que los usuarios pueden cerrar. Aquí te explicamos cómo crear uno:

1. Crea o navega a un tema en cualquier categoría (pública o privada). La publicación original (OP) en la parte superior del tema será la fuente de tu banner.
2. Abre las opciones de administración haciendo clic en el icono de la llave inglesa a la derecha o en la parte inferior del tema.
3. Selecciona “Fijar Tema…”
4. En la nueva ventana, elige Hacer Tema Banner

El banner ahora aparecerá en la parte superior de tu sitio. Los usuarios verán un banner descartable. El personal también verá un enlace para editar el tema fuente.

Consejos para banners descartables efectivos:

• Mantén el texto claro y conciso.
• La altura máxima es de 250px (editable a través de CSS).
• Para texto más largo, los usuarios pueden desplazarse dentro del banner.
• Considera agregar un enlace a un tema público relevante para obtener más información.

Banner permanente

Para crear un banner que siempre sea visible y que los usuarios no puedan descartar:

1. En la configuración de tu sitio, busca global_notice.
2. Ingresa tu texto o HTML del banner en este campo.

Consejos para banners permanentes:

• Este tipo de banner se usa típicamente para comunicaciones urgentes del sitio, pero se puede usar para cualquier mensaje permanente.
• Este banner es visible para todos, incluidos los usuarios anónimos en sitios con login_required.
• El banner se puede eliminar restableciendo la configuración del sitio global notice.

Banners avanzados

Puedes crear banners más avanzados utilizando un componente de tema. Ten en cuenta que estos componentes de tema pueden entrar en conflicto con la función principal del banner de bienvenida.

Banner de Enlace de Bienvenida

Este componente te permite agregar texto personalizado y 1-4 enlaces a tu banner. Ofrece varias opciones de personalización, que incluyen:

• Elegir dónde mostrar el banner (página de inicio, listas de temas o todas las páginas).
• Agregar enlaces con iconos de Font Awesome.
• Limitar la visibilidad según los niveles de confianza del usuario.
• Personalizar imágenes o colores de fondo.
• Ajustar los colores del texto y los iconos.

Banner Versátil

Uno de los componentes más populares y bien mantenidos, el Banner Versátil ofrece amplias opciones de personalización a través de la interfaz, que incluyen:

• Visualización del banner limitada a:
  • usuarios conectados o anónimos
  • dispositivo móvil o de escritorio
  • página de inicio, lista de temas o todas las páginas
• Opciones de descartable, expandible o persistente.
• Configuración de ancho completo del navegador.
• Gestión de color.
• Personalización de encabezado y columnas usando HTML.

Personalización de banners con CSS

Puedes personalizar todos los tipos de banners usando CSS. Para obtener más información sobre cómo usar CSS para personalizar tu sitio de Discourse, consulta la Guía para principiantes sobre el uso de temas de Discourse.

[leopedrini (Leonardo Zanoni Pedrini)]

@Discourse

Enlace Apariencia > Temas y componentes en la barra lateral.

No pude encontrar esta opción… ¿Es una nueva función en la versión Beta?

[leopedrini (Leonardo Zanoni Pedrini)]

@leopedrini

No pude encontrar esta opción… ¿Es una nueva función en la versión Beta?

Actualización: después de actualizar de la 3.4.6 a la 3.5.0, se hizo visible:

[RBoy]

@Discourse

js.welcome_banner.search — El texto de marcador de posición que se muestra en el campo de búsqueda del banner de bienvenida.

Hay un error en la compilación 3.6.0.beta1-dev (e44347414a)

Cambiar este texto del sitio no tiene ningún efecto en el texto de la barra de búsqueda, que siempre muestra Search. Probado en Windows 10 x64 con Chrome.

[awesomerobot (Kris)]

Trabajando en una solución aquí: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

[RBoy]

¡Increíble, gracias, eso lo solucionó!

[tknospdr (David Muszynski)]

Tengo un problema con la imagen de fondo del banner de bienvenida.
Estoy usando Cloudflare R2 S3 buckets para el almacenamiento de objetos en el sitio en cuestión.
Cuando subo una imagen de fondo en la sección de administración, se muestra correctamente, si hago clic para mostrarla a tamaño completo funciona. Y si hago clic derecho y muestro la imagen en una nueva pestaña funciona y usando la URL del bucket público:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Lo que inyecta en el CSS es esta URL:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Tengo otro sitio que usa almacenamiento local y la imagen de fondo del banner funciona correctamente.

¿Es un error en el código o estoy haciendo algo mal?

Después de investigar un poco más, parece que este CSS controla la imagen de fondo:

Si reemplazo manualmente la URL en el inspector, funciona.
Intenté anularlo con:

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

Pero eso no está funcionando. Sigue pareciendo un error.

[yuriy (Yuriy Kurant)]

@tknospdr, ¿no entiendo del todo qué problema estás experimentando?

He revisado tu sitio https://eu.technospider.com y veo que la imagen de fondo se muestra como se esperaba:

[tknospdr (David Muszynski)]

Creo que finalmente logré que funcionara la anulación de CSS. El problema es que no debería necesitar una anulación.

Parece que el código del banner está utilizando el activo incorrecto si estás alojando con Cloudflare S3.

[yuriy (Yuriy Kurant)]

¿cuál es exactamente tu anulación?

Por nuestra parte, podríamos asegurarnos de aplicar solo una ruta de URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg en CSS:

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

Creo que esta regla te funcionaría sin necesidad de ninguna anulación.

[tknospdr (David Muszynski)]

@yuriy

¿Cuál es exactamente tu override?

Todo mi override es:

.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;
}

Por nuestro lado, podríamos asegurarnos de aplicar solo una ruta de URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg en CSS:

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

Creo que esta regla te funcionaría sin necesidad de overrides.

En la interfaz de usuario, lo único que puedo hacer es subir una imagen, así que creo que se necesita un cambio de código para poder eliminar mi declaración de override de CSS.
Estaría encantado de probar cualquier corrección que implementes.