Diseño adaptativo
WebAcappella permite crear sitios web adaptables (responsive), capaces de ajustarse automáticamente a diferentes tamaños de pantalla: ordenador, tableta y móvil.
El software funciona como un sistema modular basado en cuadros, líneas y columnas.
Comprender el modo responsivo
- Un sitio web adaptativo debe ajustarse sin perder legibilidad ni ergonomía.
- WebAcappella incluye varios puntos de ruptura (breakpoints) que permiten ajustar el diseño según el tamaño de la pantalla.
- Los tres modos de visualización principales disponibles son:
✔ Modo escritorio: visualización en pantalla grande (PC, Mac).
✔ Modo tableta: adaptación a pantallas intermedias.
✔ Modo móvil: optimización para smartphones.
Acceder a las opciones de pantalla
- Busque los iconos correspondientes a los diferentes tamaños de pantalla situados encima del área de trabajo.
- Haga clic en el icono para ver la vista previa del sitio en cualquier momento.
Propiedades responsivas
- Algunas propiedades se pueden adaptar según el modo de visualización (escritorio, tableta, móvil).
- Cuando un ajuste se puede modificar para una pantalla específica, se muestra un icono de modo responsivo junto al parámetro.
Al activar estas opciones, cada modo de visualización tendrá su propio ajuste, sin afectar a los demás.
Otro ejemplo de uso: adaptar el tamaño de las fuentes. Un texto demasiado grande puede ser difícil de leer en un móvil.
Cambiar el tamaño de las columnas
Cada línea tiene una o varias columnas, cuya anchura varía entre 1 y 12 unidades.
Al activar el modo columnas manteniendo pulsada la tecla Opción (Mac) / Alt (Windows), se pueden seleccionar las columnas más fácilmente.
Cuando se selecciona una columna, se puede:
- Moverla para reorganizar la estructura.
- Cambiar su tamaño para ajustar su ocupación en la línea.
- Utilizar una disposición fluida: las columnas se reorganizan automáticamente en función de la pantalla.
- Comprobar el cambio de tamaño de las columnas: deben adaptarse para evitar una visualización demasiado apretada en el móvil.
Modo Cascada: apilar los elementos en una columna
El modo Cascada permite forzar el apilamiento vertical de los elementos contenidos en una columna en una pantalla determinada.
Es especialmente útil en dispositivos móviles para evitar una disposición horizontal demasiado apretada y mejorar la legibilidad.
- Selecciona una línea.
- Acceda a los parámetros de la línea (panel de la derecha).
- Activar el modo «Cascada» para la pantalla seleccionada actualmente.
- Los elementos de cada columna se apilan automáticamente en vertical.
Utilizar un «Break» para forzar un salto de línea
El elemento Break permite forzar que una línea pase por debajo de la anterior en una pantalla determinada. Este ajuste se hereda en las pantallas de menor tamaño, lo que garantiza una mejor adaptación del contenido.
- Es necesario seleccionar una línea.
- Abre la barra de herramientas de elementos.
- Selecciona el elemento Break.
- Arrastra y suelta el Break en una línea donde desees forzar un salto de línea.
⚠ Un Break insertado en una línea estará activo en esta pantalla y en las de menor tamaño.
Ocultar elementos según la pantalla
Si un elemento es demasiado complejo para una pantalla pequeña, se puede ocultar según el tamaño de la pantalla.
- Seleccione un elemento.
- Acceda a las opciones de visibilidad (en las propiedades a la derecha).
- Marque o desmarque las opciones para mostrar u ocultar el elemento en el escritorio, la tableta o el móvil.
Probar y finalizar la visualización
- Cambie al modo móvil con regularidad para comprobar el resultado.
- Ajuste los márgenes y los espacios para evitar que los elementos queden demasiado juntos.
- Utilice la vista previa (Cmd + T / Ctrl + T) para ver el resultado en condiciones reales.
Buenas prácticas
- Utilice una estructura de columnas flexibles para una mejor adaptabilidad.
- Activar el modo Cascada en determinadas líneas para evitar que los elementos queden mal alineados en dispositivos móviles.
- Utilizar un salto de línea si esta debe aparecer debajo de otras a partir de una pantalla determinada.
- Pruebe cada modo de visualización antes de la publicación.
- Optimizar las imágenes y los textos para garantizar una buena legibilidad en todas las pantallas.