Fondo, superposición y paralaje
El tratamiento visual del fondo del subencabezado, en cursos y en lecciones.
Dónde están estos ajustes
Settings → POM LMS → Course → Course subheader y → Lesson → Lesson subheader. Campos idénticos en ambos lados, y ambos requieren que Override default subheader settings? esté activado.
El problema que resuelve una superposición
Un título sobre una fotografía es ilegible siempre que la fotografía es recargada o clara justo donde se asienta el texto. No puedes arreglar eso eligiendo un color para el título, porque cada curso tiene una imagen distinta.
Una superposición coloca una capa translúcida entre la imagen y el texto. Hace que cualquier imagen sea segura para escribir sobre ella.
Ajustes de superposición
| Ajuste | Opciones |
|---|---|
| Add overlay? | Activa el resto |
| Overlay style | Solid color o Gradient |
| Overlay color | Para superposiciones sólidas, de la paleta del tema |
| Overlay gradient color 1 y 2 | Para degradados |
| Overlay gradient orientation | Ocho direcciones, cada una etiquetada con una flecha — por ejemplo ↑ (From bottom to top) |
| Overlay alpha | Cuán opaca es la superposición |
Sólida
Un color con una única opacidad en todo el banner. Predecible, y la elección correcta cuando solo necesitas contraste.
Una superposición sólida oscura con un alfa moderado y títulos blancos funciona en cualquier fotografía.
Degradado
Dos colores que se funden en una de ocho direcciones. Úsalo para oscurecer solo donde está el texto: un degradado que corre ↑ (From bottom to top), oscuro abajo y transparente arriba, mantiene la imagen visible mientras hace legible la zona inferior.
Elige la orientación según dónde se asienta tu título.
Alfa
El único ajuste en el que merece la pena dedicar tiempo.
- Demasiado bajo — el título sigue siendo ilegible sobre imágenes claras.
- Demasiado alto — la fotografía desaparece y te queda un rectángulo de color.
Prueba con la imagen de curso más clara y más recargada que tengas, no con una cómoda. Súbelo hasta que esa imagen resulte cómoda y entonces detente.
Paralaje
| Ajuste | Efecto |
|---|---|
| Add parallax effect? | El fondo se mueve más despacio que la página al hacer scroll |
| Add opacity reduction effect when scrolling? | El banner se desvanece a medida que la página se desplaza |
Ambos son decoración. Ambos merecen un momento de reflexión antes de activarlos en las páginas de lecciones, donde los estudiantes hacen scroll constantemente:
- El paralaje en cada lección es movimiento que los estudiantes no pidieron, y puede resultar incómodo para personas sensibles al movimiento.
- El desvanecimiento funciona bien en un banner de curso alto, donde el contenido debería tomar el protagonismo a medida que el estudiante lee.
Un reparto razonable: efectos en el subencabezado del curso, ninguno en las lecciones.
Fondos a tamaño completo y peso de la página
El fondo del subencabezado es una imagen grande que se carga en cada página de curso y de lección. Comprímela antes de subirla — una fotografía de 4 MB detrás de un banner es la decoración más cara de tu sitio, y la sienten con más fuerza precisamente los estudiantes con datos móviles.
Verifica
- Configura la superposición y guarda.
- Abre tu curso con la imagen más clara y confirma que el título es legible.
- Abre el más oscuro y confirma que el banner no queda apagado.
- Haz scroll en una página de curso y confirma que el paralaje y el desvanecimiento se comportan bien.
- Repite en una página de lección y decide si los efectos pertenecen allí.
- Compruébalo en un teléfono, donde el paralaje puede comportarse de forma distinta.