Crear el curso
Diseño del curso: colores, tipografías y combinaciones listas
En «Diseño» eliges una combinación lista o ajustas el color principal, el secundario, el fondo, el texto, las tipografías, los márgenes y el redondeo. Se aplica al momento a todas las diapositivas con maqueta y se deshace con Ctrl+Z.
Qué cambia el Diseño
En el menú lateral, pulsa «Diseño». Ahí defines el tema de todo el curso:
- Diapositivas con maqueta: cambian al momento colores, tipografías, márgenes y redondeo.
- Reproductor del curso: el color principal colorea los botones y la barra de progreso.
- Lienzo libre y páginas importadas: no cambian, porque sus textos y formas tienen colores propios. Si importaste un PDF, la página se queda como está.
Los elementos con un color puesto a mano conservan ese color. Para que vuelvan a seguir el tema, marca «Usar el del tema» en su panel.
A la derecha tienes «Así se verá», una diapositiva de muestra con texto, tarjetas y botón que cambia mientras ajustas.
Cambiar los colores del curso
- En el menú lateral, pulsa «Diseño».
- Si quieres un punto de partida, pulsa una de las «Combinaciones listas».
- Cambia el color «Principal»: pulsa el cuadro de color o escribe el código en el campo de al lado (por ejemplo #1a73c9).
- Ajusta si quieres «Secundario», «Fondo» y «Texto». Si aparece un aviso de contraste, elige un tono más oscuro o más claro.
- Vuelve a «Editar contenido» (o pulsa Escape): el tema ya está aplicado a todas las diapositivas con maqueta.
No hay botón de guardar en Diseño: cada cambio se aplica al momento y cada uno se deshace con Ctrl+Z.
Combinaciones listas
Un clic aplica colores y tipografías que combinan bien y cumplen el contraste. Después puedes ajustar lo que quieras.
| Combinación | Tipografías | Para qué |
|---|---|---|
| Por defecto | DM Serif Display + Manrope | Azul y lima, el punto de partida |
| curiosea | DM Serif Display + Manrope | Verde oliva sobre fondo hueso |
| Azul profesional | Montserrat + Inter | Formación corporativa |
| Salud | Nunito | Tonos verde azulado, aire sanitario |
| Editorial | Merriweather + Lora | Cálido, para cursos con mucho texto |
| Máxima legibilidad | Atkinson Hyperlegible | Texto negro, alto contraste, pensado para baja visión |
| Noche | Montserrat + Inter | Fondo oscuro y texto claro |
La combinación aplicada aparece marcada. Si después cambias un color, deja de estar marcada: es normal.
Colores
| Color | Dónde se usa |
|---|---|
| Principal | Botones, antetítulos, anverso de las tarjetas, barra de progreso y colores automáticos de las infografías |
| Secundario | Reverso de las tarjetas |
| Fondo | Fondo de las diapositivas con maqueta |
| Texto | Texto de las diapositivas con maqueta |
Cada color tiene un cuadro (abre el selector del navegador) y un campo para escribir el código, con el formato #rrggbb (por ejemplo #1a73c9). Si escribes un código no válido, no se aplica: el campo vuelve a mostrar el código que había y el color no cambia. En pantalla no sale ningún mensaje (solo lo anuncian los lectores de pantalla), así que, si el color no cambia, revisa el código.
Tipografías
En «Tipografías» eliges una para «Títulos» y otra para «Texto». Hay ocho: Manrope, Inter, Nunito, Montserrat, Atkinson Hyperlegible, DM Serif Display, Lora y Merriweather.
Van incluidas en la herramienta y dentro del paquete SCORM (licencia SIL Open Font License), así que el curso se ve igual en cualquier LMS y no carga nada de otras webs. No se pueden subir tipografías propias.
Si buscas máxima legibilidad, Atkinson Hyperlegible está diseñada para personas con baja visión.
Márgenes y redondeo
En «Márgenes y redondeo por defecto» ajustas, con el deslizador o escribiendo el número:
- Márgenes: el espacio entre las celdas y alrededor, de 0 a 60.
- Redondeo: lo redondeadas que salen las esquinas, de 0 a 40.
Cada diapositiva puede tener valores propios desde su panel (sin nada seleccionado, apartado «Márgenes»). Con «Usar los del tema» vuelve a estos. Te lo cuento en maquetas.
Restablecer el tema
Al final de la columna tienes «Restablecer el tema por defecto». Vuelve a los colores, tipografías, márgenes y redondeo con los que empieza un curso nuevo. Si te arrepientes, Ctrl+Z.
Selector de color y colores propios
Cuando cambias el color de un elemento en una maqueta (por ejemplo, el fondo de un texto o el color de un punto), el panel muestra:
- Colores del tema: el principal, el secundario, el texto, el fondo y dos tonos del principal.
- Colores personalizados: los que tú guardas para este curso.
- Un selector a mano, para cualquier color.
- «Usar el del tema» (o «Automático» en las infografías), para que el elemento siga al tema.
Para guardar un color propio, elígelo con el selector a mano y pulsa el «+» de «Colores personalizados». Se guardan hasta 16 por curso, dentro del proyecto. Para quitar uno, selecciónalo y pulsa Suprimir, o usa «Quitar … de los colores personalizados». Los elementos que ya lo usaban lo conservan.
En Chrome y Edge, los selectores de color del lienzo libre y de Diseño también te sugieren estos colores dentro del selector del navegador. En otros navegadores no salen esas sugerencias, pero puedes escribir el código a mano.
Contraste y accesibilidad
La herramienta comprueba el contraste mientras eliges. Si el texto y el fondo tienen menos de 4,5:1 (lo que pide WCAG AA), o el color principal deja poco contraste con el texto de sus botones, verás un aviso debajo de los colores. Oscurece o aclara el color hasta que desaparezca. Las combinaciones listas ya lo cumplen.
Deshacer un cambio de diseño
Cada cambio se deshace con Ctrl+Z o con el botón Deshacer de la barra de arriba, y se rehace con Ctrl+Y. Más atajos en exportar y guardar.