# Banners

> Los banners del área del alumno: el tipo de cada modelo de navegación, qué pasa al hacer clic, las imágenes, el vídeo de fondo, las vitrinas y el orden.

Un banner es una franja en el área del alumno que lleva al alumno a un destino: un producto, una página externa o ninguno. No da acceso a nada. Los banners están en **Contenido > Banners**.

## Cómo funciona

**La regla más importante:** el tipo de banner depende del modelo de navegación de la cuenta. Eliges el modelo en **Configuraciones > Área del alumno**, en el campo **Modelo de navegación**.

| Tipo de banner | Aparece en | Qué es |
|---|---|---|
| **Banner completo** | **Modelo Cademí** | La franja estilo streaming: imagen o vídeo de fondo, logo, título, texto y botón. |
| **Imagen** | **Modelo Educacional** | Una imagen para computadora y otra para celular. |
| **HTML personalizado** | **Modelo Educacional** | Un código HTML tuyo, que se muestra en el área del alumno. |

Un banner del otro modelo queda guardado, pero no aparece. La lista muestra **No se muestra en el estilo actual**. La edición explica cómo cambiar el formato.

El banner tiene dos estados: **Publicado** y **Borrador**. El estado está en la etiqueta de la lista y en el encabezado de la edición. En borrador, el banner desaparece para los alumnos. La vista previa del administrador todavía lo muestra.

## Paso a paso

### Crear un banner

1. Abre **Contenido > Banners**.
2. Haz clic en **Nuevo Banner**.
3. Completa **Nombre**. Solo identifica el banner en el panel.
4. En el Modelo Educacional, elige el **Formato**: **Imagen** o **HTML personalizado**.
5. Haz clic en **Guardar**.

Luego se abre la edición del banner.

### Elegir qué pasa al hacer clic

El panel **Acción al hacer clic** no existe en el **HTML personalizado**, porque el HTML trae sus propios enlaces. En los demás, elige en **Al hacer clic en el banner**:

- **No hacer nada**.
- **Abrir un producto**: elige el **Producto de destino**. El alumno sin acceso va a la oferta del producto. Si no hay oferta, la pantalla muestra **Oferta no configurada.**, con un acceso directo para completarla.
- **Abrir una página externa**: completa la **Dirección de destino** completa, con https://.

Si la acción no es **No hacer nada**, elige en **Abrir enlace en**: **Misma ventana** o **Nueva pestaña**.

### Armar un Banner completo

- **Contenido del banner**:
  - **Logo**, en PNG de hasta 300 KB, de preferencia horizontal;
  - **Título** y **Texto**, cada uno con un color;
  - **Mostrar sombra en los textos**;
  - **Texto del botón**. Si queda vacío, el botón desaparece;
  - **Colores del botón**.
- **Imágenes de fondo**: **Imagen para escritorio** (JPG de hasta 800 KB, 1920 × 1080 px) e **Imagen para móvil** (JPG de hasta 800 KB, 600 × 1050 px).
- **Vídeo de fondo (opcional)**:
  - **URL del vídeo**: la URL completa de un vídeo de YouTube o de Vimeo;
  - **URL del vídeo para móvil**. Si queda vacía, el celular usa el mismo vídeo;
  - **Mostrar superposición del vídeo**: un color con transparencia, para que los textos se lean bien;
  - **Sonido del vídeo**: **Con sonido** o **Sin sonido**. Los navegadores solo reproducen el vídeo solo cuando no tiene sonido;
  - **Al terminar el vídeo**: **Repetir** o **Detener**.
- **Apariencia**: **Altura del banner** en porcentaje de la pantalla, **Mostrar degradado inferior**, **Color del menú sobre el banner** y **Reducir contenido durante el vídeo**.

### Armar un banner de Imagen o de HTML

- **Imagen**: **Imagen para escritorio** (JPG de hasta 1 MB, 1920 × 1080 px) e **Imagen para móvil** (JPG de hasta 1 MB, 600 × 1050 px).
- **HTML personalizado**: pega el **Código HTML**.
- **Visualización**: marca las vitrinas en las que aparece el banner. Si no marcas ninguna, aparece en todas.

Guarda con la barra del pie de la pantalla.

### Ordenar, duplicar y eliminar

- Arrastra los banners por el asa para cambiar el orden.
- **...** > **Duplicar** crea una copia.
- **...** > **Eliminar** manda el banner a la papelera.

Para recuperarlo, abre la **Papelera** en la esquina de la pantalla.

## Para tener en cuenta

- **Banner completo sin vitrinas.** El **Banner completo** no tiene la opción de vitrinas. En el Modelo Cademí, es la franja de la página de inicio.
- **Imagen de fondo con vídeo.** Sube la imagen de fondo aunque tengas vídeo. Queda detrás del vídeo mientras carga. Sin la imagen para celular, el celular usa la de computadora.
- **Banner del producto.** Un producto también puede tener su propio banner, arriba de su página. Las opciones se parecen a las del banner completo. Consulta [Página del producto y página de la clase](/es/conteudo/pagina-do-produto-e-da-aula).
- **Banners del otro modelo.** Cambiar el **Modelo de navegación** de la cuenta no borra los banners del otro modelo. Solo dejan de aparecer, hasta que cambies el formato de cada uno.

## Preguntas frecuentes

**Creé un banner y el alumno no lo ve.** Revisa tres cosas:

1. El estado es **Publicado**.
2. El tipo coincide con el modelo de navegación de la cuenta.
3. En un banner de **Imagen** o **HTML personalizado**, las vitrinas marcadas en **Visualización** son las correctas.

**El banner aparece como un espacio en blanco.** Falta la imagen de fondo. Sube la **Imagen para escritorio** y la **Imagen para móvil** antes de publicar.

**Quiero poner un vídeo en el banner, pero la opción no aparece.** El vídeo solo existe en el **Banner completo**, del Modelo Cademí. Los banners de **Imagen** y de **HTML personalizado** no tienen vídeo de fondo.