Añade una fila.
Una fila divide una sección en columnas, para que puedas poner contenido lado a lado: tres servicios, una foto junto a su texto, una barra lateral junto a un artículo. Eliges la división entre doce ajustes y puedes dar a los teléfonos un diseño propio. Lee esta página para añadir una fila; para una fila dentro de una columna, lee Anidamiento.
Añade una fila
El ejemplo añade una fila de tres columnas a una sección, una por cada servicio que ofrece un equipo.
- Haz clic en + en una sección para abrir el selector de elementos.
- Elige Fila en la pestaña Diseño. Llega con dos columnas iguales.
- Haz clic en el icono de cuadrícula (Diseño de columnas) en la barra de control de la fila, elige un ajuste de columnas como tres columnas iguales, y haz clic en Guardar.
- Haz clic en + en una columna para añadirle contenido.
- Haz clic en Guardar en la barra de herramientas para guardar la página.
El icono de cuadrícula está justo tras el tirador de arrastre de la fila. Un ajuste cambia las columnas en cuanto haces clic en él; Cancelar devuelve el diseño anterior.
Lo que ves
Los tres servicios quedan lado a lado, cada columna un tercio del ancho de la sección. En pantallas de menos de 768 píxeles, las columnas se apilan: cada una toma todo el ancho, en el orden que tienen en la página.
Las columnas solo son tan altas como su contenido, así que una columna corta termina antes que sus vecinas. Lo notas cuando las columnas tienen un color de fondo; Columnas de igual alto las iguala.
Configura tu fila
Diseños de columnas
El icono de cuadrícula abre un panel por cada tamaño de pantalla que tiene su propio diseño. Cada panel muestra estos doce ajustes como casillas:
| Ajuste | Diseño |
|---|---|
| 1/1 | Una columna de ancho completo |
| 1/2 + 1/2 | Dos columnas iguales |
| 1/3 + 1/3 + 1/3 | Tres columnas iguales |
| 1/4 + 1/4 + 1/4 + 1/4 | Cuatro columnas iguales |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Seis columnas iguales |
| 1/4 + 1/2 + 1/4 | Estrecha, ancha, estrecha |
| 1/6 + 4/6 + 1/6 | Estrecha, muy ancha, estrecha |
| 1/4 + 3/4 | Un cuarto a la izquierda, tres cuartos a la derecha |
| 3/4 + 1/4 | Tres cuartos a la izquierda, un cuarto a la derecha |
| 2/3 + 1/3 | Ancha a la izquierda, estrecha a la derecha |
| 1/3 + 2/3 | Estrecha a la izquierda, ancha a la derecha |
| 5/12 + 7/12 | Un poco estrecha a la izquierda, un poco ancha a la derecha |
Para cualquier otra división, haz clic en Diseño personalizado y escribe los anchos como
fracciones, como 1/6 + 5/6. Los anchos que suman más de 1 pasan a una
línea nueva. Cuando abres el diálogo de nuevo, Diseño personalizado está marcado y
muestra el diseño, como Diseño personalizado (1/6 + 5/6).
Un diseño por tamaño de pantalla
El primer panel, Dispositivos medianos (≥ 768px), fija el diseño desde tabletas hacia arriba. Para cambiar también los teléfonos, haz clic en Añadir tamaño de pantalla arriba del diálogo. Se abre un panel para Extrapequeño (< 576px); elige otro tamaño de su lista si necesitas uno, y luego un ajuste. Quitar tamaño de pantalla borra un panel de nuevo.
Ajustes de fila y columna
Abre Más > Ajustes en la barra de control de la fila, o en la barra de la columna para el ajuste de columna.
| Ajuste | Elemento | Efecto | Valor por defecto |
|---|---|---|---|
| Columnas de igual alto | Fila | Estira cada columna al alto de la más alta | Desactivado |
| Reflejar fila | Fila | Muestra las columnas en orden inverso desde 768 píxeles hacia arriba; las columnas apiladas conservan su orden de página | Desactivado |
| Centrado vertical | Columna | Centra el contenido en una columna más alta que él | Desactivado |
Reflejar fila sirve para una página de filas alternas: foto a la izquierda, luego foto a la derecha, mientras los teléfonos siempre muestran primero la foto.
Mueve y quita columnas
Arrastra una columna por su tirador, o usa Más > Mover a la izquierda o Mover a la derecha en su barra. Las columnas no tienen Eliminar: elige un ajuste con menos columnas en su lugar. El contenido nunca se pierde así; pasa a la última columna que queda.
Si no lo ves
- El centrado vertical en una columna no cambia nada. La columna solo es tan alta como su contenido, así que no hay espacio donde centrar. Activa Columnas de igual alto en los ajustes de la fila.
- Las columnas se apilan en un teléfono. Por debajo de 768 píxeles es lo normal. Haz clic en el icono de cuadrícula, luego en Añadir tamaño de pantalla, y elige un ajuste para Extrapequeño (< 576px).
- El texto saltó a otra columna. Elegiste un ajuste con menos columnas, y el contenido de las columnas quitadas pasó a la última. Pulsa Ctrl+Z (Cmd+Z en un Mac) para deshacer el cambio.
- Una columna no tiene Eliminar en su menú Más. Las columnas se quitan desde el diseño. Haz clic en el icono de cuadrícula de la fila y elige un ajuste con menos columnas.
¿Qué sigue?
- Anidamiento: pon una fila dentro de una columna para una cuadrícula más fina.
- Secciones: dale a la banda alrededor de tus columnas su propio fondo.
- Diseño adaptable: cómo se adapta tu diseño a cada tamaño de pantalla.