Puedes usar columnas para organizar el contenido en diseños estructurados, lo que hará que tu sitio sea visualmente atractivo y que se pueda navegar por él con facilidad. En esta guía, aprenderás a personalizar algunos aspectos del diseño de tus columnas, como los colores y la alineación, así como su apariencia en dispositivos móviles.
Sigue estos pasos para añadir o cambiar el color de fondo de las columnas:
- Elige Vista de lista en la esquina superior izquierda del editor. El icono son tres líneas horizontales una encima de la otra.
- Encuentra el bloque Columnas y haz clic en él:
- En los ajustes del bloque Columnas del lado derecho de la pantalla, haz clic en la pestaña Estilos (el icono es un círculo blanco y negro):
- En los ajustes de color, haz clic en «Fondo» y elige un color de fondo.
- Haz clic en el botón «Guardar» para guardar tus cambios.
Si quieres elegir diferentes colores para cada columna, sigue los mismos pasos, pero selecciona un único bloque Columna en la vista de lista, en lugar del bloque Columnas general.
Si añades contenido a una nueva columna, se alineará a la parte superior del contenedor de la columna por defecto. Sigue estos pasos para cambiar la alineación del contenido dentro de las columnas:
- Elige Vista de lista en la esquina superior izquierda del editor. El icono son tres líneas horizontales una encima de la otra.
- Encuentra el bloque Columnas y haz clic en él:
- En la barra de herramientas que aparece encima o debajo de las columnas seleccionadas, haz clic en la opción de alineación vertical:
- Elige entre «Alinear hacia arriba», «Alinear en el centro» o «Alinear hacia abajo» para que todo el contenido que contienen las columnas se sitúe en la parte superior, en el centro o en la parte inferior del contenedor de la columna.
Si quieres elegir diferentes alineaciones para cada columna, sigue los mismos pasos, pero selecciona un único bloque Columna en la vista de lista, en lugar del bloque Columnas general. Si haces esto, puedes crear un diseño disperso como este:
Cuando utilizas un diseño de columnas, es importante tener en cuenta cómo verán tus columnas los visitantes de tu web que utilicen dispositivos móviles. Los teléfonos tienen pantallas más pequeñas, por lo que es posible que varias columnas no quepan bien en una sola fila si quieres que tu contenido se pueda leer.
Puedes «apilar» las columnas en las pantallas de los móviles para que aparezcan una encima de la otra, en lugar de todas en una sola línea:
- Elige el bloque Columnas, bien usando la vista de lista o bien usando la barra de herramientas del bloque.
- En los ajustes del bloque Columnas del lado derecho de la pantalla, activa el botón «Apilar en móvil»:
Este interruptor determina si las columnas se muestran de forma horizontal o apiladas verticalmente al ver la página o entrada en un dispositivo móvil. A continuación, se muestra un ejemplo de columnas apiladas cuando se ven en pantallas de ordenadores o portátiles en comparación con una pantalla móvil:
