Diseño de cajas / líneas / columnas

En WebAcappella, la organización de los elementos sigue una estructura precisa:

  • Las cajas son los contenedores principales que estructuran la página.

  • Las líneas encajan directamente en las cajas, lo que permite una organización horizontal.

  • Las columnas son elementos como cualquier otro (texto, imagen, botón) y deben arrastrarse a una fila para organizar el contenido verticalmente.

Esta jerarquía permite diseñar diseños de página flexibles y adaptables.

Leyenda de colores

En la interfaz WebAcappella, cada elemento que estructura la página está representado por un color específico:

  • Marrón para las cajas.

  • Rosa para las líneas.

  • Verde para las columnas.

Cuando se selecciona un elemento, éste queda rodeado por un borde del mismo color.

Captura que ilustra los colores de los elementos y su encuadre en la selección

Crear una nueva página

  1. Cree una nueva página en WebAcappella.

  2. Se coloca automáticamente una casilla que contiene una línea.

    ../../_images/step_10.png

Añadir columnas a una fila

  1. Cada línea está dividida en 12 muescas, lo que facilita el ajuste de la anchura de las columnas.

  2. Arrastre y suelte una o varias columnas en la fila.

  3. Repita la operación para añadir varias columnas una al lado de la otra.

  4. Cambia el tamaño de las columnas ajustando sus proporciones.

  5. En cada una de las columnas que crees, arrastra los elementos que quieras (texto, imagen, botón, etc.) para que ocupen el ancho de la columna.

    ../../_images/step_20.png

Añadir cuadros y líneas

  1. Puede arrastrar tantos cuadros como necesite a la misma página.

    ../../_images/step_30.png

Consejos prácticos

  • Favorezca una estructura clara utilizando varios recuadros para organizar la página.

  • Utilice columnas para equilibrar el diseño de la página, pero evite utilizar demasiadas para no sobrecargar la pantalla del móvil.

  • Pruebe regularmente el modo responsive para asegurarse de que se muestra correctamente en todas las pantallas.