> ## Documentation Index > Fetch the complete documentation index at: https://docs.tangerinelearning.com/llms.txt > Use this file to discover all available pages before exploring further. # Diseño y layout > Ancho y fondo de la página, filas y columnas, opciones de presentación de cada bloque y estilo de marca del programa ## Descripción Mint separa el **contenido** de cada bloque de su **presentación**. La presentación se controla en tres niveles, de más general a más concreto: | Nivel | Qué se ajusta | Dónde | | - | - | - | | **Página** | Ancho del área de contenido y fondo de la página | **Editar layout** en la barra de la sección | | **Fila** | Ancho, márgenes y fondo de una fila, y su reparto en columnas | Opciones de fila (icono del margen derecho) | | **Bloque** | Ancho de su columna, márgenes, fondo, visibilidad y contenido emergente | Pestaña **Opciones** del panel del bloque | Por encima de los tres, el **estilo de marca del programa** (tipografías y colores) se aplica a todas las páginas. > [!NOTE] > > El layout en filas y columnas, el fondo degradado y el contenido emergente se activan con la opción de **aspecto avanzado** del entorno. Sin ella, la página es una secuencia vertical de bloques con sus opciones básicas. Ver [Configuración y disponibilidad](https://docs.tangerinelearning.com/herramientas-autor/mint/configuracion-entorno.md). *** ## Layout de la página **Editar layout** (lápiz de la barra de la sección) abre el panel **Configuración**: ![Panel Configuración del layout con Tamaño bloque central S, M y L, Color de fondo sólido o degradado e Imagen de fondo](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/interfaz/configuracion-layout.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=dd59ff1e88d4592ad66f042978a2be70) | Opción | Valores | | - | - | | **Tamaño bloque central** | **S (50%)**, **M (75%)** o **L (100%)** del ancho disponible. Define cuánto ocupa el contenido en pantallas grandes | | **Color de fondo** | **Sólido** o **Degradado** (dos colores) | | **Imagen** | Imagen de fondo de la página, desde **Buscar en la biblioteca** o **Subir archivo**. Sustituye al color de fondo | **Borrar layout** (papelera de la barra) vacía la sección completa. Es una acción destructiva y pide confirmación. *** ## Filas y columnas Cada bloque se coloca en una **fila**. Por defecto, una fila contiene un solo bloque a todo el ancho. Con los botones **+** que aparecen a izquierda y derecha de un bloque se añaden **columnas**, para colocar bloques uno junto a otro: una imagen junto a su explicación, dos notas en paralelo, etc. ![Fila con dos columnas: una declaración y una nota colocadas una junto a otra, con la barra de acciones de la columna](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/interfaz/columnas.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=40387caca177e44de413087cbd80e28d) * Una fila admite hasta **4 columnas**. Al llegar al máximo, los **+** laterales y **Duplicar** se desactivan. * **Mover a la izquierda / derecha** cambia el orden de los bloques dentro de la fila. * En pantallas estrechas (móvil), las columnas se apilan una debajo de otra. ### Configuración de fila La opción **Editar** de la fila abre **Configuración**: ![Panel de configuración de fila con Ancho, márgenes superior, inferior, izquierdo y derecho y Color de fondo](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/interfaz/configuracion-fila.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=f59da4680589b9a7610aa494bf508afa) | Opción | Efecto | | - | - | | **Ancho** | Porcentaje del ancho de la página que ocupa la fila. Por defecto, hereda el tamaño del bloque central | | **Margen superior / inferior / izquierdo / derecho** | Espacio alrededor de la fila, de 10 en 10 px | | **Color de fondo** | Franja de color a todo el ancho de la fila, útil para separar visualmente apartados | *** ## Opciones de cada bloque La pestaña **Opciones** del panel de un bloque reúne los ajustes de presentación. Casi todos los bloques comparten estos: ![Pestaña Opciones de un bloque con ancho de columna, márgenes, visibilidad solo para el docente y color de fondo](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/interfaz/panel-bloque-opciones.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=da9d2c56c6f9e14d1b46c1cb376df519) | Opción | Efecto | | - | - | | **Ancho columna** | 25%, 50%, 75%, 100% o un valor personalizado. Solo con layout en columnas | | **Margen superior / inferior** | Espacio antes y después del bloque | | **Margen izquierdo / derecho** | Espacio lateral dentro de la columna. Solo con layout en columnas | | **Visible** > **Solo para el docente** | Oculta el bloque a los alumnos; el docente lo sigue viendo. Útil para soluciones, orientaciones o material de apoyo | | **Color de fondo** | Fondo del bloque, con transparencia. **Borrar** lo quita. El selector recuerda los últimos colores usados | | **Incluir contenido emergente** | Añade un botón que abre una ventana emergente. Ver [Contenido emergente](https://docs.tangerinelearning.com/herramientas-autor/mint/contenido-emergente.md) | Según el tipo de bloque, aparecen opciones adicionales: | Opción | Bloques | Efecto | | - | - | - | | **Tamaño del contenido** | Imagen centrada, Imagen y texto, Carrusel, Acordeón, Pestañas | Ancho de la imagen o el medio, de 5% a 100% | | **Posición de la imagen** | Imagen y texto | Imagen a la izquierda o a la derecha del texto | | **Alineación de imagen** | Acordeón, Pestañas, Intercambiador de imagen, Antes y después | Alineación de las imágenes dentro del bloque | | **Anchura imagen** | Embebido, Gráfico etiquetado | Pequeño, Mediano o Ancho completo | | **Borde** > **Mostrar borde** | Embebido | Marco alrededor del contenido incrustado | | **Zoom on Click** | Bloques con imagen | El alumno puede ampliar la imagen pulsándola. Activado por defecto | | **Step Label** | Proceso | Texto de la cabecera de cada paso (por defecto, *Paso*). `[NUMBER]` indica dónde va el número | > [!NOTE] > > Las etiquetas **Zoom on Click** y **Step Label** aparecen actualmente en inglés en la interfaz. *** ## Estilo de marca del programa Las tipografías y colores de las páginas Mint no se eligen en el editor: se heredan del **programa digital**, de modo que todas sus páginas mantienen una identidad visual coherente. | Origen | Qué define | | - | - | | **Aspecto avanzado del programa** | Tipografía de encabezados y de cuerpo, color primario y secundario (sólido o degradado) y estilo de los bordes | | **Plantilla del programa** | Fuente y color primario, cuando el programa no tiene aspecto avanzado | El color primario se aplica a elementos como los iconos de las notas, los botones, los marcadores interactivos y las barras de navegación. > [!NOTE] > > Como el estilo se hereda, una misma página se verá con colores y fuentes distintas si se duplica en un programa con otra apariencia. Esto es intencionado: permite reutilizar contenido entre productos de marca diferente. *** ## Situaciones especiales > [accordion] ¿Cómo se ve una página con columnas en el móvil? > > Las columnas se apilan verticalmente en el orden en que están en la fila. Conviene revisar que el orden tenga sentido leído de arriba abajo. > [accordion] ¿Puedo ocultar solo una parte de la página a los alumnos? > > Sí, bloque a bloque con **Solo para el docente**. Para contenido dirigido al docente, el bloque **Notas para el profesorado** ya es invisible para los alumnos por defecto. > [accordion] Un bloque tiene un fondo degradado pero no puedo editarlo > > El degradado solo es editable si el entorno tiene habilitado el aspecto avanzado. Si no lo está, el panel muestra un aviso y el degradado se conserva, pero solo se puede sustituir por un color sólido. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.