Filas, columnas y componentes

Page Builder acepta contenido únicamente donde lo permiten sus reglas de padre e hijo. Comprender esas reglas evita soltados fallidos, contenedores rotos y anidamientos innecesarios.

Las secciones definen regiones de Gutenberg

En el editor de bloques, una Section de POM es la contrapartida consciente del tema de un Group nativo. Puede permanecer vacía, contener bloques normales directamente o contener Rows cuando se necesita una cuadrícula. Su título administrativo ayuda a identificar la región en la Vista de lista y no es contenido público.

Mostrar u ocultar las guías de diseño

Gutenberg muestra los límites de los contenedores de diseño de POM incluso cuando el puntero está en otro lugar. Los colores coinciden con el constructor Legacy:

• Section: rosa sólido (#fbadf0).
• Row: turquesa sólido (#adfbf3).
• Column: una línea melocotón discontinua de 1 px (#f7ccb0).

Las guías se sitúan dentro de cada contenedor con distintos desplazamientos para que los bordes del padre y del hijo sigan siendo distinguibles. No cambian el tamaño del contenido, el espaciado ni los bordes y sombras configurados para la página pública.

Cada contenedor conserva una guía al pasar el cursor o seleccionarlo; solo su color se vuelve ligeramente más intenso. Haz clic en la línea rosa, turquesa o melocotón para seleccionar su Section, Row o Column, incluidas las Rows cuyas Columns ocupan todo el espacio disponible. Los contenedores anidados mantienen carriles de guía separados. La etiqueta del bloque, la barra lateral y las migas de pan confirman qué contenedor está seleccionado. Los tiradores de redimensionamiento y los controles de contenido conservan sus acciones normales; la Vista de lista sigue disponible para la navegación con teclado.

Para cambiar su visibilidad, abre Options (el menú de tres puntos en la parte superior derecha de Gutenberg) y elige Layout guides en el grupo Panels . Una marca de verificación significa que las guías persistentes están visibles. WordPress recuerda esta preferencia para tu usuario; no cambia la preferencia de otro autor ni requiere guardar la página. La retroalimentación al pasar el cursor y al seleccionar sigue disponible cuando las guías persistentes están ocultas, para que aún puedas identificar y manipular el bloque activo.

Las guías aparecen solo en el editor. Usa la vista previa del frontend para inspeccionar la página sin controles de edición. Si la opción de guías está marcada pero falta el límite de un contenedor, confirma que se trata de una Section, Row o Column de POM y no de un tipo de bloque distinto.

Las filas dividen el contenido en columnas

Una fila es el contenedor exterior de una sección horizontal. Usa una fila nueva cuando el contenido tenga un propósito, fondo, tratamiento de espaciado o comportamiento adaptable distinto.

Una Row de Gutenberg contiene Columns y puede permanecer vacía. Cuando insertas una Row vacía, Choose a column layout llena el ancho disponible con nueve ajustes preestablecidos ilustrados y una opción Custom . En lienzos más estrechos, los botones se reparten en más líneas. El Page Builder legacy sigue requiriendo sus estructuras establecidas de Row e Inner Row para el contenido almacenado en shortcode.

Iniciar una Row de Gutenberg con un ajuste preestablecido

1. Edita una página en Gutenberg e inserta Row, ya sea directamente en una Section o dentro de una Column donde se permita otro nivel de anidamiento.
2. Elige un diseño en Choose a column layout. El icono muestra el número y las proporciones de sus columnas de escritorio; su leyenda indica los anchos de la cuadrícula.
3. Añade contenido dentro de las Columns resultantes. Siguen siendo Columns editables normales: puedes redimensionarlas, reordenarlas, duplicarlas o eliminarlas de forma independiente.
4. Previsualiza Escritorio, los dos tamaños de Tablet y Móvil antes de publicar.

Cada ajuste preestablecido comienza con col-12 col-sm-12 col-md-12: sus columnas se apilan a ancho completo por debajo del punto de ruptura de escritorio (992 px). Cambia los anchos adaptables individuales en los ajustes de cada Column cuando se necesite un diseño distinto. Add column añade otra Column a ancho completo en móvil/tablet con un ancho de escritorio flexible.

Elegir un ajuste preestablecido es una operación deshacible. Undo vuelve al selector vacío, y Redo restaura las Columns. El selector solo se muestra cuando una Row está vacía; no reemplaza el contenido existente. Eliminar todas las Columns lo muestra de nuevo. Los bloqueos de inserción existentes siguen aplicándose, y una Row vacía puede guardarse sin elegir un ajuste preestablecido.

Iniciar una Row de Gutenberg con anchos personalizados

1. Inserta una Rowvacía. Selecciona Custom para enfocar el campo Custom column layout situado debajo de los ajustes preestablecidos, o haz clic directamente en el campo.
2. Introduce los anchos en orden de lectura. El campo comienza en 1/1, una columna a ancho completo. Revisa Desktop columns para confirmar los anchos interpretados.
3. Elige Apply layouto pulsa Intro en el campo. Una entrada no válida muestra una explicación y deja la Row vacía para que puedas corregirla.
4. Añade contenido y previsualiza los diseños de escritorio y móvil. Los diseños personalizados usan los mismos valores predeterminados de ancho completo en móvil/tablet y el mismo comportamiento de Undo que los ajustes preestablecidos.

Los espacios alrededor de /, - y + son opcionales. Separa las columnas con +, espacios, comas, puntos y comas o |. Se aceptan las variantes habituales de barras y guiones pegadas. Usa + para hacer explícita una lista: 2 + 4 significa dos anchos de cuadrícula, mientras que 2/4 es una única fracción de mitad de ancho. Un par independiente que sume 12, como 4/8, se interpreta como dos anchos de cuadrícula, coincidiendo con las leyendas de los ajustes preestablecidos. Tres o más enteros separados por barras o guiones son una lista de anchos de cuadrícula.

Usa hasta 12 columnas y 256 caracteres de entrada. Los anchos fijos deben ser enteros del 1 al 12 o fracciones que se resuelvan exactamente en esos anchos; valores como 1/7 no se redondean. 1/5 sigue el comportamiento existente de columna flexible, equivalente a Auto, en lugar de forzar un ancho fijo del 20%. Un total inferior a 12 puede dejar espacio sin usar; un total superior a 12 se ajusta salvo que la Row use desplazamiento horizontal. Comprueba la vista previa antes de aplicar anchos fijos y flexibles mezclados.

Elegir el desplazamiento horizontal de la fila

Usa una fila horizontal para una secuencia de tarjetas, imágenes o paneles que deba permanecer en una línea. Configura los anchos de columna para que su ancho combinado supere la fila en los puntos de ruptura donde se necesite desplazamiento; activar la opción no las redimensiona.

1. Abre Pages → All Pages, edita la página y selecciona la fila.

2. En Page Builder, edita Row o Inner Row y activa Horizontal scroll. En Gutenberg, selecciona Row → Layout → Row layout → Horizontal scroll.

3. Elige Horizontal scroll behavior:

   Opción	Experiencia del visitante
   Native horizontal scroll	Desplázate lateralmente con el panel táctil, un gesto táctil o la barra de desplazamiento del navegador. Es el valor predeterminado, también para las filas guardadas anteriormente.
   Horizontal scroll with page scroll	En escritorio con ratón o panel táctil, la fila permanece en su sitio mientras el desplazamiento vertical de la página avanza por su contenido horizontal. La página continúa después de la última columna; al desplazarse hacia atrás se invierte la secuencia. La entrada horizontal nativa sigue disponible.
   Horizontal scroll on hover	Con un ratón, pasa el cursor hacia el borde izquierdo o derecho para moverte en esa dirección. El movimiento se acelera hacia los bordes y se detiene cerca del centro, al salir el puntero o en cualquiera de los extremos.

4. Guarda y previsualiza el frontend. Gutenberg mantiene una franja nativa y editable en el editor en lugar de ejecutar la animación de fijación o de hover.

5. Comprueba la primera y la última columna, los enlaces, el foco de teclado y las pantallas estrechas. Las filas mejoradas pueden recibir el foco del teclado. En el modo de desplazamiento de página, Izquierda/Derecha se mueven por la fila enfocada, y Inicio/Fin llegan a la primera/última posición.

Ambos modos mejorados conservan el desplazamiento nativo para las preferencias de movimiento reducido y los punteros gruesos, como las pantallas táctiles. La fijación de desplazamiento de página comienza en 992 px y requiere que la fila quepa debajo de la cabecera fija dentro del área de visualización. Las filas más altas que ese espacio, las filas en contenedores fijos gestionados y las filas de desplazamiento de página anidadas dentro de otra fila de desplazamiento de página usan el desplazamiento nativo. Mantén las secuencias fijadas de forma independiente en filas separadas. Una fila sin desbordamiento no necesita animación.

Para una Row exterior de Page Builder, el desplazamiento se aplica a sus columnas dentro del contenedor de la sección. Row stretch → Only content elimina esa estructura, por lo que los ajustes de fila horizontal no se aplican. Gutenberg coloca esta opción en Row, incluidas las Rows anidadas, en lugar de en Section.

Si no hay movimiento, comprueba primero los anchos de columna, el comportamiento seleccionado, el tamaño del área de visualización, la capacidad del puntero y la preferencia de movimiento reducido del dispositivo. Los modos de desplazamiento de página y de hover cargan un script condicional compartido; el modo nativo no necesita ningún script adicional. Las cargas de imágenes y los cambios adaptables actualizan la distancia disponible.

Las columnas contienen el contenido de la página

Una columna es una región dentro de una fila. Su anchura la define el diseño de la fila, mientras que sus propios ajustes pueden controlar la alineación, el fondo, los bordes, el espaciado, la visibilidad y las opciones avanzadas.

Añade encabezados, texto, imágenes, botones, formularios y otros componentes normales dentro de una columna.

Mover contenido de Gutenberg existente a una Column

No necesitas volver a crear un Heading configurado u otro bloque de contenido para cambiar su padre. Selecciona el bloque y arrastra su tirador Move block hasta la Column. El interior resaltado significa que el bloque se convertirá en un hijo de esa Column; una línea de inserción significa que se colocará antes o después del bloque indicado. Al moverlo se conservan el texto, el formato y los ajustes del bloque. Undo restaura su posición anterior.

Una Column acepta contenido normal y bloques Row anidados. No acepta una Section ni otra Column directamente. Para crear una cuadrícula anidada, inserta una Row y coloca sus Columns dentro de ella. Se admiten hasta cuatro niveles de Row/Column; los contenedores especiales como Finder conservan sus restricciones de hijos adicionales.

Mover una Column completa a otra Row

1. Selecciona Column, en lugar de un Heading o Paragraph en su interior. Usa el botón de bloque padre, las migas de pan o la List View para seleccionar el contenedor.
2. Arrastra su tirador Move block a otra Row. El tirador de arrastre nativo de WordPress y la Vista de lista también permiten mover Columns entre Rows compatibles.
3. Con Move block, usa la línea de inserción para elegir la posición. Para columnas una al lado de la otra, la línea es vertical y la mitad izquierda/derecha elige antes/después. Para columnas apiladas, la línea es horizontal y la mitad superior/inferior elige antes/después. Una Row vacía resalta su interior.
4. Suelta, comprueba el nuevo padre en la Vista de lista y guarda. Todos los bloques y ajustes hijos de la Column se mueven juntos. Undo restaura la posición anterior; Escape cancela un arrastre de Move block antes de soltar.

Los botones de mover nativos usan izquierda/derecha para una sola línea horizontal y arriba/abajo cuando las columnas se apilan o se ajustan. Reordenan los elementos hermanos sin arrastrar y pueden activarse con el teclado. La Vista de lista mantiene su orden vertical del documento en todos los tamaños de vista previa.

Una Column puede moverse a otra Row compatible, incluida una Row anidada, pero no puede colocarse directamente dentro de una Column o Section, dentro de sus propios descendientes, ni más allá de la profundidad de anidamiento admitida. Se aplican los bloqueos de bloque y plantilla existentes. Estos controles y marcadores de inserción solo afectan al editor, no al HTML del frontend.

Pegar en una Column

1. Copia los bloques deseados con la acción Copy de WordPress.
2. Selecciona la Columnde destino usando la Vista de lista o las migas de pan del bloque cuando la columna ya contenga contenido.
3. Abre el menú de opciones de tres puntos de la Column y elige Paste inside column.
4. Si el navegador no puede leer el portapapeles, pega en el campo mostrado con Ctrl+V en Windows o Command+V en macOS. El texto normal se convierte en un Paragraph; los bloques copiados conservan su configuración.
5. Comprueba el orden anidado en la Vista de lista, guarda el borrador y previsualiza el resultado.

También puedes usar el atajo de pegado mientras la propia Column tiene el foco en el lienzo. Pegar mientras editas texto dentro de un Paragraph o Heading hijo sigue usando el comportamiento normal de edición de texto. Pegar en una Column añade contenido sin reemplazar la Column ni sus hijos existentes.

Como con el copiado de bloques nativo, revisa cualquier ancla HTML asignada manualmente en el contenido copiado y da a cada copia un ancla única antes de publicar. Mover un bloque existente conserva su ancla.

Si algún bloque copiado no está permitido, o el árbol supera el límite de anidamiento, todo el pegado se rechaza con un aviso. Nada se elimina silenciosamente de una selección mixta. Copia el contenido permitido por separado, o pega una Row junto con sus Columns en lugar de una Column independiente.

Colores de la paleta del contenedor

Gutenberg Section, Rowy Column ofrecen Text color y Text hover color junto con Background hover color en Background y Border hover color en Border. Elige una muestra numerada de la paleta del tema; bórrala para conservar el color heredado o normal. El hover del borde requiere un estilo y un ancho de borde visibles. Pasa el cursor sobre el bloque en el editor y en la vista previa del frontend para comprobar el resultado.

Los ajustes legacy de Row, Inner Row, Column e Inner Column ofrecen las mismas opciones. Sus atributos de shortcode son text_color, text_hover_color, bg_hover_colory border_hover_color, cada uno acepta ranuras de paleta 1–15 o un valor vacío. Por ejemplo: [vc_column text_color="2" text_hover_color="3"]Content[/vc_column].

Ambos editores usan text-main-N, text-main-N-hover, bg-main-N-hovery border-main-N-hover. Los colores de texto se heredan a través del contenido anidado salvo que un hijo tenga un color más específico; los enlaces conservan su propio color de tema o de bloque donde esa regla tiene prioridad. El hover del fondo de la columna también alcanza su propia capa de fondo mientras el puntero está sobre el contenido, incluido el contenido fijo. Las imágenes de fondo y las superposiciones conservan su superposición normal y pueden cubrir un color de fondo. Los colores al pasar el cursor son mejoras opcionales; el contenido debe seguir siendo comprensible en dispositivos táctiles sin hover. Estas opciones no cargan activos de frontend adicionales y no se ofrecen en Paragraph, Heading, el Text Block legacy o el Title legacy.

Los componentes proporcionan contenido o comportamiento

Los componentes van desde contenido simple, como Title y Text Block, hasta funciones interactivas o basadas en datos, como formularios, carruseles, listados y Advanced map.

Algunos componentes son contenedores. Sus elementos hijos están restringidos:

• un mapa acepta marcadores de mapa o rutas;
• una pestaña o acordeón acepta sus secciones correspondientes;
• un carrusel acepta sus diapositivas o elementos admitidos.

Si un elemento está ausente de la biblioteca dentro de un contenedor, puede que no sea un hijo válido allí.

Filas anidadas

Gutenberg usa un único bloque Row en cada nivel de anidamiento admitido; no hay un bloque Inner Row separado ni un conjunto de opciones reducido. En el Page Builder legacy, un Inner Row sigue siendo el contenedor de shortcode correspondiente. Usa el anidamiento solo cuando una sección necesite realmente otra cuadrícula. Las filas muy anidadas son más difíciles de reordenar, adaptar al móvil y entender con tecnología de asistencia.

Activos de frontend condicionales

Los bloques estructurales de Gutenberg reutilizan los mismos activos condicionales del tema que sus contrapartidas legacy. Jarallax solo lo solicitan las Sections, Rows o Columns con un fondo de paralaje o vídeo. El soporte de fondo animado se limita a las Sections, y las Rows lo solicitan cuando hay una imagen de fondo. El carrusel de fondo y el control de sección siguiente se limitan a las Sections. Una Row que usa contenido de ocultar/revelar reutiliza el script More content existente del tema cuando esa función está activada en Theme Settings.

El orden de origen importa

El orden del lienzo se convierte en el orden base de lectura y apilamiento. Antes de dar estilo a un diseño de varias columnas:

1. coloca primero el contenido más importante;
2. mantén un encabezado junto al contenido que presenta;
3. haz que el orden en pantalla estrecha sea comprensible;
4. evita depender solo de la posición visual para explicar una relación.

Verificar una estructura

Contrae las filas no relacionadas y lee la rama afectada de fuera hacia dentro: fila, columna, componente, elemento hijo opcional. Previsualiza después y comprueba la misma secuencia en un área de visualización estrecha.