Filas, columnas, espaciado y diseño responsive

Usa este flujo de trabajo cuando una página necesite más de una columna. Combina estructura, comportamiento responsive, fondos y revisión final del área de visualización.

Empieza por el orden de la pantalla estrecha

Escribe el orden de lectura previsto antes de elegir una cuadrícula de escritorio. El orden de origen del constructor sigue siendo la base cuando las columnas se apilan y cuando la tecnología de asistencia lee la página.

Mantén un encabezado junto al contenido que presenta y coloca la acción más importante antes del material secundario.

Elige el diseño de la fila

En el editor de bloques, una Section puede permanecer vacía o contener bloques de contenido directamente. Esta diferencia intencionada respecto al Page Builder heredado permite que una Section actúe como un Group consciente del tema sin necesidad de una Row. Añade una Row solo cuando la Section necesite una cuadrícula y, a continuación, añade o configura sus Columns. Una Row también puede permanecer vacía hasta que su estructura esté lista. Selecciona cualquiera de los tres bloques estructurales y usa las pestañas del inspector para mantener juntas las decisiones relacionadas:

• Layout controla el contenedor, la cuadrícula, el ancho, el desplazamiento, la alineación y el comportamiento fijo;
• Style controla los fondos, las superposiciones y los bordes;
• Advanced controla el posicionamiento, el espaciado, la visibilidad, los identificadores y la animación de columna heredada cuando es compatible.

El lienzo del editor previsualiza el fondo del cuerpo configurado, los colores del texto principal y de los enlaces, las fuentes del cuerpo y de los encabezados, la escala tipográfica, los anchos de la cuadrícula, el espaciado responsive, los bordes, los fondos de los elementos, las superposiciones y el estado de visibilidad. Los degradados y las imágenes de fondo del cuerpo también están representados. Esta previsualización está limitada intencionadamente a los estilos globales y estructurales necesarios para la edición; la hoja de estilos pública completa no se carga en Gutenberg.

Usa las opciones de previsualización nativas de WordPress Mobile, Tablety Desktop para los rangos móvil, tableta vertical y escritorio de POM. El mismo menú añade Tablet Landscape para el rango de 768–991 px y Very Large (1800px) para una vista general escalada de un lienzo de escritorio ancho. Fit Page escala una composición de escritorio de 1440 px hasta que su altura completa cabe en el editor, ofreciendo una vista aérea de las páginas largas. Very Large sigue siendo editable, mientras que Fit Page es de solo lectura porque su escala puede ser demasiado pequeña para una interacción fiable con los bloques. Ambas son ayudas de previsualización y no puntos de ruptura responsive, por lo que usan los valores de Desktop. Estos modos solo cambian el lienzo del editor y no añaden estilos ni clases a la página pública.

Para una Row de Gutenberg vacía, elige un preajuste o introduce un Custom column layout debajo de los preajustes. El selector usa el ancho disponible del lienzo. Elige la proporción más simple que se ajuste al contenido:

• 12/12 para una columna de ancho completo;
• 6/6 para dos columnas iguales;
• 4/4/4 para tres regiones iguales;
• 8/4 o 4/8 para una región principal y una compañera más estrecha.

Evita columnas de texto estrechas y columnas vacías usadas como espaciadores.

Para fracciones personalizadas como 1/3 + 2/3 o anchos de cuadrícula como 4-8, revisa Desktop columnsy, a continuación, elige Apply layout. Consulta anchos personalizados y separadores aceptados para ver ejemplos y límites.

Usa Add column en la barra de herramientas de la Row o en el inspector para ampliar la cuadrícula sin salir de la estructura seleccionada. Eliminar la última Column vuelve al selector de preajustes y de diseño personalizado.

Da a una Row de Gutenberg altura completa del área de visualización

Selecciona el bloque Row , abre Layout → Row layouty activa Full viewport height. La barra de herramientas del bloque también ofrece Normal height y Full height, igual que para la Section. La opción está desactivada por defecto.

Combínalo con Vertical alignment: Top, Center, Bottomo Stretch. Por ejemplo, Center coloca las columnas en el centro de la fila con altura de área de visualización y añade align-items-center web-full-height al mismo elemento de fila pública. El editor previsualiza la misma alineación. La altura completa es un mínimo: el contenido más largo puede expandir la fila sin recortarse.

Previsualiza la página en escritorio y móvil, luego guárdala y vuelve a abrirla para confirmar que las opciones de altura y alineación siguen seleccionadas. Usa Normal height o desactiva Full viewport height para volver a una altura basada en el contenido. Esta opción de Row de Gutenberg no cambia los controles de Inner Row heredados.

Configura las columnas

Abre Edit this column para establecer opciones compatibles como la alineación del contenido, el fondo, el borde, el espaciado, la visibilidad y el comportamiento avanzado. Una columna puede alinear su contenido arriba, en el centro o abajo.

Usa el panel Border de la Column para elegir su color de paleta, estilo y anchos responsive. Activa Add viewport class cuando un estilo o comportamiento personalizado deba reaccionar a si la columna está actualmente dentro del área de visualización; el tema añade check-viewport y alterna is-in-viewport en la página pública.

Abre Animations para configurar la misma animación de desplazamiento que usan las columnas del Page Builder. Puedes elegir si el efecto empieza cuando la parte superior o inferior de la columna entra en el área de visualización, invertirlo, desactivarlo en móvil y ajustar la opacidad, la escala, la rotación y la traslación en cada eje compatible. Estos controles usan el motor de animación de columnas existente del tema; no añaden una animación de entrada de Gutenberg independiente.

Usa una Inner Row solo cuando el contenido requiera otra cuadrícula genuina dentro de una columna.

Elige el comportamiento fijo según el tipo de contenedor

Los bloques de POM usan el mismo comportamiento fijo gestionado que sus equivalentes del Page Builder:

• activar Sticky en una Section la mantiene arriba mientras las secciones posteriores pasan sobre ella. Las secciones fijas consecutivas comparten esa posición superior; no se empujan entre sí. Las secciones normales pasan por debajo y el pie del sitio saca a las secciones fijas de la vista;
• activar Sticky en una Row revela Sticky row behavior, donde Replace previous sticky row sustituye la fila activa y Stack below previous sticky rows mantiene ambas filas visibles dentro de la misma columna. Las filas de columnas diferentes tienen secuencias fijas independientes;
• activar Sticky en una Column mantiene el contenido de la columna dentro del límite de altura establecido por sus columnas hermanas.

Las filas y columnas fijas tienen en cuenta el encabezado fijo visible. Revísalas mientras te desplazas hacia abajo y hacia arriba, y prueba columnas con contenido más corto y más alto. El comportamiento fijo de las columnas se desactiva a anchos de 768 px e inferiores, incluido al redimensionar un diseño de escritorio que ya está fijo. Al expandir contenido, cambiar de pestaña, cargar imágenes y cambiar el tamaño del área de visualización se actualizan el espacio ocupado y las posiciones fijas.

Verifica las filas principales superpuestas

1. Activa Sticky en dos filas principales o Sections consecutivas.
2. Activa Full height en el Page Builder, o Full viewport height en una Section, cuando cada panel deba llenar la pantalla.
3. Da a cada panel un fondo opaco para que pueda cubrir el panel anterior. Las filas principales fijas se sitúan automáticamente por encima de las filas hermanas normales, y las filas fijas posteriores por encima de las anteriores.
4. Desplázate hacia abajo hasta que el segundo panel llegue arriba. Ambos paneles permanecen en el borde fijo, con el segundo pintado sobre el primero.
5. Continúa hacia una sección normal y confirma que pasa por debajo de los paneles fijos. Continúa hasta el pie del sitio y confirma que empuja los paneles hacia arriba sin quedar cubierto. Desplázate hacia arriba para comprobar que cada panel vuelve a su posición original sin huecos.
6. Revisa las filas internas en los modos Replace previous sticky row y Stack below previous sticky rows , incluidas dos columnas independientes. Expande los acordeones y cambia de pestaña mientras revisas su espaciado.
7. Redimensiona una columna fija de escritorio a móvil y de vuelta, y luego desplázate por el final de su fila. El contenido debe seguir siendo accesible y el pie debe permanecer sin obstrucciones.

Un panel fijo que llena la pantalla puede ocultar las secciones normales que pasan por debajo. Coloca en consecuencia el contenido que deba permanecer visible. Si el pie del sitio está desactivado, las filas principales se detienen al final del contenido principal.

Las secciones más altas que el área de visualización desplazan su contenido antes de descansar en el borde inferior del área de visualización. Las pilas internas que superan la altura disponible también dejan que su contenido inferior entre en el área de visualización. El contenido fijo permanece dentro de su diseño contenedor; las filas anidadas siguen la posición y el recorte de su elemento principal. Las transformaciones personalizadas o las reglas de desbordamiento en los antecesores del diseño afectan a ese espacio de coordenadas y deben comprobarse en la página terminada.

Trata los fondos como decoración

Sections, Rows y Columns admiten colores de paleta, imágenes de fondo de escritorio y móvil, superposiciones y fondos de vídeo. Elige el tamaño de imagen registrado y si debe cargarse de forma diferida o inmediata. Las Columns pueden mantener las capas de fondo dentro de su relleno responsive, y las Sections pueden colocar capas de imagen, vídeo, deslizador y superposición en la mitad izquierda o derecha con un diseño móvil arriba o abajo. Conserva el significado en el texto; no hagas que la información esencial esté disponible solo en un fondo.

En Gutenberg, selecciona la Section, Row o Column y abre Style → Background. Usa Set background image o Set mobile background para abrir la biblioteca de medios de WordPress. Después de seleccionar una imagen, haz clic en su previsualización para reemplazarla o en Remove para borrar esa selección. Los controles de selección usan el estilo de botón secundario de WordPress, incluidos Set video thumbnail y los controles de la presentación de diapositivas Select Images / Edit Gallery de la Section.

En la página pública, las Sections, Rows y Columns de Gutenberg usan las mismas clases estructurales, alineación flex, capas de fondo, visibilidad por dispositivo y datos ScrollMe que sus equivalentes del Page Builder. La Section sigue renderizándose en el servidor; las Rows y Columns conservan su marcado de bloque guardado. Una regla de permiso compartida opcional puede suprimir condicionalmente cualquiera de los tres en el momento del renderizado sin hacer que la Row o Column sean dinámicas. El espaciado seleccionado, los anchos de borde, las imágenes, los degradados y las alturas de fondo dividido se escriben en la hoja de estilos generada por entrada en lugar de en atributos style en línea.

Para los fondos de imagen:

• elige un recorte intencionado;
• proporciona una imagen móvil cuando la composición de escritorio no sobreviva a un área de visualización estrecha;
• mantén Background image loading en Lazy (default) a menos que la imagen deba solicitarse inmediatamente;
• mantén el contraste suficiente, usando una superposición cuando sea necesario.

Los fondos de vídeo compatibles pueden configurarse para Start after first interaction, reduciendo el movimiento no solicitado y el trabajo inicial. Los vídeos de fondo se reproducen sin sonido. Los archivos directos, YouTube y Vimeo empiezan o se reanudan solo mientras su sección interseca el área de visualización, se pausan al salir de ella y se pausan mientras la pestaña del navegador está oculta. Un fondo que el visitante u otro control pausó no se reinicia simplemente porque vuelva a entrar en el área de visualización. Los fondos de YouTube también esperan a que su reproductor esté listo antes de que el tema controle la reproducción. Esto admite la reproducción automática en línea en navegadores móviles, incluido Safari en iPhone, cuando el navegador permite la reproducción automática.

Las presentaciones de diapositivas de fondo pertenecen a las Sections. La altura completa del área de visualización y el movimiento de fondo animado están disponibles en Sections y en Rows de Gutenberg. Las Columns usan las opciones de fondo de columna heredadas y las transformaciones ScrollMe en lugar de esos efectos exclusivos de las filas.

Cuando el sitio incluye Pomatio Video Hosting, elige Self-hosted y pega la del vídeo Logical video URL en el campo MP4. Las filas, filas internas, columnas, columnas internas y el bloque Section mantienen la misma ruta de fondo Jarallax que las URL MP4 directas. El vídeo debe pertenecer al sitio actual y tener su salida progresiva estándar; no es necesario activar Scroll. La URL lógica resuelve ese MP4 privado temporalmente. No copies una URL de entrega temporal de las herramientas de desarrollo del navegador. Video.js no se carga para los fondos.

Aplica la visibilidad responsive solo cuando sea necesario

El control compartido Device visibility tiene cuatro rangos:

• Large: 993 px y más ancho;
• Medium: de 769 px a 992 px;
• Small: de 545 px a 768 px;
• Extra small: 544 px y más estrecho.

La visibilidad cambia si el componente renderizado se muestra en cada rango; no crea una versión alternativa del contenido. Consulta Usar la visibilidad por dispositivo.

Usa Permission rule cuando un bloque estructural deba ser condicional. La lista proviene de Theme Settings > Permission rules, donde se pueden combinar roles, compras, suscripciones y otras condiciones compatibles. Deja el campo en Always visible cuando no se requiera ninguna condición.

Las Rows también ofrecen Hide/reveal long content cuando esa función del tema está activada. Establece la altura de activación, el comportamiento al hacer clic o al pasar el cursor, la sombra de degradado, el estilo del botón y las etiquetas de abrir y cerrar. La salida pública usa el mismo morecontent motor en tiempo de ejecución y atributos de datos que las Inner Rows heredadas.

Identifica y enlaza las Sections de Gutenberg

Usa el panel de Gutenberg Advanced de la Section cuando el CSS o un enlace necesiten un selector público estable:

• HTML anchor establece el id público de la Section y también lo usan sus estilos generados por entrada;
• Additional CSS class(es) se añaden directamente al contenedor público de la Section;
• cuando no se proporciona un ancla, el bloque mantiene su propio identificador interno único.

Establece Administrative title en el panel de diseño de la Section para darle a la Section una etiqueta reconocible en el editor y en la Vista de lista. Nunca se imprime en la página pública.

Cuando Scroll to next section arrow está activado, sus controles de color usan la paleta del tema y la flecha omite los hermanos que no son Sections para llegar al siguiente bloque Section.

Revisa el resultado

Comprueba al menos un área de visualización en cada rango usado por la página. Confirma:

• que el orden de apilamiento sigue explicando el contenido;
• que ningún texto ni control queda recortado;
• que la página no tiene desplazamiento horizontal;
• que los recortes de fondo y las superposiciones conservan la legibilidad;
• que los botones, formularios, pestañas, menús y carruseles siguen funcionando;
• que el contenido oculto no es la única vía hacia una tarea importante.

Usa Controlar el espaciado y la alineación para decisiones de espaciado detalladas.