¿Cómo utilizar Container y Grid Row para organizar el contenido en el Editor de bloques de Waclis?
El Editor de bloques de Waclis permite organizar el contenido de una Página web mediante estructuras de:
Sections;
Containers;
filas;
columnas;
componentes.
Dentro de Componentes encontrarás elementos estructurales como:
Container
Grid Row
Estos componentes permiten crear composiciones como:
[ TEXTO ] [ IMAGEN ]
[ CARD ] [ CARD ] [ CARD ]
[ PRODUCTO ] [ PRODUCTO ] [ PRODUCTO ] [ PRODUCTO ]
[ CONTENIDO PRINCIPAL ][ CONTENIDO SECUNDARIO ]
y adaptarlas para que en celular puedan transformarse, por ejemplo, en:
[ TEXTO ]
[ IMAGEN ]
o:
[ CARD ]
[ CARD ]
[ CARD ]
¿Por qué es tan importante comprender la estructura?
Porque muchos problemas visuales que parecen necesitar CSS en realidad se resuelven correctamente modificando:
Container;
Grid Row;
columnas;
tamaño de columnas;
alineación;
responsive.
Por ejemplo, si quieres:
50 % imagen
50 % texto
no deberías comenzar escribiendo:
.imagen {
width: 50%;
margin-left: 300px;
}
Es mucho más robusto utilizar:
Grid Row
├── Grid Column → 6
│ └── Image
└── Grid Column → 6
└── Text
La jerarquía básica
Una estructura habitual dentro del Editor de bloques es:
Section
└── Container
└── Grid Row
├── Grid Column
│ └── Componentes
└── Grid Column
└── Componentes
Por ejemplo:
Section
└── Container
└── Grid Row
├── Grid Column
│ └── Image
└── Grid Column
├── Heading
├── Paragraph
└── Button
Visualmente:
┌───────────────────────────────────────────────┐
│ │
│ [ IMAGEN ] TÍTULO │
│ Texto... │
│ [ BOTÓN ] │
│ │
└───────────────────────────────────────────────┘
¿Qué función cumple cada nivel?
Section
Agrupa una gran parte del contenido.
Puede controlar aspectos generales como:
ancho;
altura;
Background;
Overlay;
separadores;
espacios.
Container
Organiza y limita el área donde se encuentra el contenido.
Conceptualmente:
PANTALLA COMPLETA
┌───────────────────────────────────────────────┐
│ │
│ ┌───────────────────────────────┐ │
│ │ CONTAINER │ │
│ │ │ │
│ └───────────────────────────────┘ │
│ │
└───────────────────────────────────────────────┘
Grid Row
Crea una fila dentro de la cual puedes organizar diferentes columnas.
Por ejemplo:
Grid Row
├── Column 1
├── Column 2
└── Column 3
Grid Column
Cada columna contiene componentes.
Por ejemplo:
Column
├── Image
├── Heading
├── Paragraph
└── Link
Los componentes viven dentro de la estructura
Por eso es importante no pensar solamente en:
“quiero mover esta imagen”
sino también:
¿En qué columna está esa imagen?
¿Cuánto mide esa columna?
¿Cómo se comporta esa columna en celular?
Utiliza Navigator
Para comprender la estructura abre:
Navigator
Puedes encontrar una jerarquía similar a:
Section
└── Container
└── Grid Row
├── Grid Column
│ ├── Heading
│ └── Paragraph
└── Grid Column
└── Image
Navigator es especialmente importante en este tutorial
Porque visualmente puedes seleccionar:
Image
pero el problema que quieres solucionar puede encontrarse en:
Grid Column
o incluso en:
Grid Row
Ejemplo
Problema:
“La imagen ocupa demasiado ancho.”
Primero revisa:
Image
pero también:
Grid Column
porque quizá esa columna está configurada para ocupar:
8 de 12 unidades
cuando quieres:
6 de 12
Antes de modificar CSS, revisa la estructura
Esta regla puede evitar muchas personalizaciones innecesarias.
¿Dónde encuentro Container y Grid Row?
Abre:
Componentes
y localiza:
Container
Grid Row
dentro de la categoría estructural correspondiente que aparece en la biblioteca del editor.
¿Qué es Container?
Container permite agrupar contenido dentro de un área organizada.
Por ejemplo:
Section
└── Container
├── Heading
├── Paragraph
└── Grid Row
¿Por qué utilizar Container?
Ayuda a controlar el ancho visual del contenido.
Sin un ancho contenido, un Paragraph podría extenderse:
desde el extremo izquierdo de una pantalla enorme hasta el extremo derecho
produciendo líneas demasiado largas.
Con Container
puedes mantener:
CONTENIDO
con un ancho controlado
dentro de la pantalla
Container no significa necesariamente “pequeño”
Puede organizar:
textos;
grillas;
Cards;
imágenes;
manteniendo una estructura consistente.
Section: Boxed vs Full
Cuando seleccionas una Section, dentro de Contenido encontrarás:
Container width
con opciones:
Boxed
Full
¿Qué significa Boxed?
Boxed mantiene el contenido dentro de un ancho contenido.
Conceptualmente:
┌─────────────────────────────────────────────┐
│ │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ CONTENIDO │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
¿Cuándo utilizar Boxed?
Puede ser adecuado para:
textos;
Servicios;
Beneficios;
FAQ;
Cards;
Equipo;
contenidos institucionales.
¿Qué significa Full?
Full permite una composición de mayor amplitud dentro de la Section.
Conceptualmente:
┌─────────────────────────────────────────────┐
│ │
│ CONTENIDO │
│ │
└─────────────────────────────────────────────┘
Puede resultar útil para
Banners;
grandes imágenes;
determinadas Galerías;
composiciones visuales amplias;
fondos que necesitan ocupar toda el área.
Full no significa que cada texto deba tocar los bordes
Puedes tener:
SECTION FULL
└── contenido interno controlado
según la composición.
Ejemplo muy útil
Puedes querer:
FONDO
→ ancho completo
pero:
TEXTO
→ contenido dentro de un área cómoda
No confundas fondo Full con texto sin márgenes
Boxed vs Full: regla práctica
Utiliza:
BOXED
cuando quieres priorizar:
lectura;
organización;
ancho controlado.
Utiliza:
FULL
cuando la composición visual necesita mayor amplitud.
No existe una opción correcta para toda la Página web
Puedes combinar ambas según cada Section.
Ejemplo de Home
Banner
→ Full
Servicios
→ Boxed
Galería
→ Full o Boxed según diseño
Testimonios
→ Boxed
CTA final
→ Full
No hagas todas las Sections Full solamente para “aprovechar la pantalla”
En pantallas muy grandes puede resultar:
difícil de leer;
visualmente desordenado.
Tampoco hagas todo Boxed
si necesitas una composición realmente inmersiva.
¿Qué es Grid Row?
Grid Row permite dividir horizontalmente una zona de contenido en columnas.
Por ejemplo:
Grid Row
├── Column 1
└── Column 2
Visualmente
[ COLUMNA A ][ COLUMNA B ]
Tres columnas
[ A ][ B ][ C ]
Cuatro
[ A ][ B ][ C ][ D ]
El sistema de 12 unidades
Las grillas web suelen organizar el ancho disponible en:
12 unidades
Puedes repartirlas entre las columnas.
Ejemplo 6 + 6
6 + 6 = 12
Visualmente:
┌───────────────────┬───────────────────┐
│ │ │
│ 6 │ 6 │
│ │ │
└───────────────────┴───────────────────┘
Cada columna ocupa aproximadamente la mitad.
Ejemplo 4 + 4 + 4
4 + 4 + 4 = 12
Visualmente:
┌─────────────┬─────────────┬─────────────┐
│ 4 │ 4 │ 4 │
└─────────────┴─────────────┴─────────────┘
Tres columnas iguales.
Ejemplo 3 + 3 + 3 + 3
3 + 3 + 3 + 3 = 12
Cuatro columnas iguales.
Ejemplo 8 + 4
8 + 4 = 12
Visualmente:
┌──────────────────────────┬─────────────┐
│ │ │
│ 8 │ 4 │
│ │ │
└──────────────────────────┴─────────────┘
Ejemplo 4 + 8
[ pequeña ][ grande ]
Ejemplo 5 + 7
También puedes utilizar una distribución asimétrica:
5 + 7 = 12
Esto puede resultar útil para
[ IMAGEN ][ TEXTO ]
cuando una de las partes necesita más espacio.
No todas las columnas necesitan ser iguales
La distribución debe responder al contenido.
Ejemplos habituales
Imagen + texto
6 + 6
Imagen más pequeña + texto amplio
5 + 7
Sidebar + contenido
4 + 8
Contenido principal + lateral
8 + 4
Tres Cards
4 + 4 + 4
Cuatro Cards
3 + 3 + 3 + 3
Dos Cards
6 + 6
Una sola columna
12
No necesitas utilizar siempre 12 de manera visualmente exacta
Los espacios internos, Padding y otros estilos también influyen en la apariencia final.
¿Cómo configurar Grid Row?
Selecciona:
Grid Row
y abre:
Contenido
En su configuración encontrarás opciones relacionadas con:
Direction
Vertical align
Horizontal align
Wrap
También encontrarás:
Column 1;
Column 2;
Column 3;
etc.;
configuraciones de tamaño según dispositivo;
Remove para cada columna;
Add column.
Las opciones exactas visibles pueden variar según la cantidad de columnas y la estructura existente.
Column 1, Column 2, Column 3...
Cada una representa una columna dentro del Grid Row.
Por ejemplo:
Grid Row
├── Column 1
├── Column 2
└── Column 3
Cada columna puede tener un tamaño diferente
y puede adaptarse según el ancho de pantalla.
Tamaños según dispositivo
Dentro de cada columna encontrarás selectores correspondientes a tamaños de pantalla, identificados en el editor como:
Extra small
Small
Medium
Large
Extra large
Extra extra large
Estos controles permiten definir cómo se distribuye una columna en diferentes anchos.
Este es el verdadero responsive de la grilla
No debe confundirse con los iconos superiores:
celular
tablet
desktop
Los iconos superiores sirven para previsualizar
Los tamaños de columna dentro de Grid Row son los que permiten definir realmente la distribución.
Ejemplo conceptual
Desktop:
[ A ][ B ][ C ]
Mobile:
[ A ]
[ B ]
[ C ]
Para conseguirlo
las columnas deben tener una configuración responsive que permita:
compartir el ancho en pantallas mayores;
ocupar todo el ancho cuando la pantalla se vuelve estrecha.
No intentes conseguirlo ocultando columnas
La información debería seguir disponible.
Ejemplo de tres Cards
Desktop:
┌──────────┬──────────┬──────────┐
│ A │ B │ C │
└──────────┴──────────┴──────────┘
Tablet
podría utilizar:
┌──────────┬──────────┐
│ A │ B │
└──────────┴──────────┘
┌──────────┐
│ C │
└──────────┘
Mobile
┌─────────────────────┐
│ A │
└─────────────────────┘
┌─────────────────────┐
│ B │
└─────────────────────┘
┌─────────────────────┐
│ C │
└─────────────────────┘
No existe una única distribución obligatoria
Depende del contenido.
Tres Cards simples
pueden mantenerse tres en tablet si todavía son legibles.
Tres Cards con mucho contenido
pueden necesitar dos o una por fila.
Diseña con contenido real
Ejemplo de cuatro productos
Desktop:
[ A ][ B ][ C ][ D ]
Tablet:
[ A ][ B ]
[ C ][ D ]
Mobile:
[ A ]
[ B ]
[ C ]
[ D ]
Esta es una lógica muy habitual
pero siempre debes probar el resultado real.
¿Qué significa Direction?
Dentro de Grid Row encontrarás controles de:
Direction
Estos permiten modificar la dirección en la que se organizan los elementos dentro de la estructura correspondiente.
Puede resultar útil para invertir un orden visual
Por ejemplo, una composición:
[ IMAGEN ][ TEXTO ]
podría necesitar organizarse de otra manera según el diseño.
Pero utiliza Direction con cuidado
El orden visual y el orden estructural pueden no ser lo mismo.
Siempre comprueba:
Navigator;
desktop;
celular.
No inviertas elementos solamente para resolver una mala estructura
Ejemplo
Tienes:
Column 1
→ Image
Column 2
→ Text
Si realmente necesitas que Text sea el primer contenido en todas las pantallas
quizá sea más claro reorganizar las columnas.
Direction es útil
pero no debería convertirse en una forma de ocultar una estructura confusa.
Orden visual y accesibilidad
Piensa también en cómo se leerá el contenido de arriba hacia abajo.
Por ejemplo
Desktop:
[ IMAGEN ][ TEXTO ]
pero el orden estructural puede ser:
Text
Image
según la composición.
En celular eso puede convertirse en:
TEXT
IMAGE
Pregunta
¿Ese es el orden que quieres?
Utiliza Navigator para comprobarlo.
¿Qué significa Vertical align?
Permite controlar la alineación vertical de los elementos dentro de la fila según las opciones disponibles.
Por ejemplo
Dos columnas:
[ IMAGEN ALTA ][ TEXTO CORTO ]
Puedes querer que el texto quede:
arriba
O conceptualmente:
centrado verticalmente
respecto de la imagen.
Ejemplo
Sin alineación centrada:
┌───────────────┐ TÍTULO
│ │ Texto
│ │
│ IMAGEN │
│ │
│ │
└───────────────┘
Con contenido centrado visualmente:
┌───────────────┐
│ │
│ IMAGEN │ TÍTULO
│ │ Texto
│ │
└───────────────┘
Puede ser muy útil en secciones Texto e imagen.
Pero no centres verticalmente automáticamente
si una columna contiene mucho más contenido.
Por ejemplo
Image
vs.
Heading
Paragraph
List
Button
FAQ
puede necesitar alineación superior.
¿Qué significa Horizontal align?
Permite controlar cómo se distribuyen o alinean horizontalmente los elementos dentro de la estructura.
Puede ayudarte a:
alinear al inicio;
centrar;
distribuir;
según las opciones que muestre el editor.
No utilices grandes Margin para centrar
Por ejemplo, evita:
margin-left: 427px;
Utiliza la alineación de la estructura.
¿Qué significa Wrap?
Wrap controla cómo se comportan los elementos cuando no existe suficiente espacio horizontal.
Conceptualmente
Sin Wrap:
[ A ][ B ][ C ][ D ]
intenta mantenerse en la misma línea.
Con una estructura que permite reorganizarse:
[ A ][ B ]
[ C ][ D ]
puede adaptarse mejor.
Wrap puede resultar importante en composiciones con varios elementos
Pero no sustituye la correcta configuración responsive de las columnas.
No pienses:
“Activo Wrap y ya terminé el responsive.”
Todavía debes revisar:
tamaños;
columnas;
textos;
imágenes;
mobile.
Add column
Dentro de Grid Row encontrarás:
Add column
Permite agregar una columna adicional.
Ejemplo
Antes:
[ A ][ B ][ C ]
Después:
[ A ][ B ][ C ][ D ]
Al agregar una columna
revisa también los tamaños de las existentes.
Ejemplo
Tres columnas iguales:
4 + 4 + 4
Si agregas una cuarta
podría ser conveniente:
3 + 3 + 3 + 3
No agregues una columna y dejes la distribución anterior sin revisar
Podrías terminar con una fila poco equilibrada.
Otra posibilidad
No todas deben ser iguales.
Por ejemplo:
3 + 3 + 6
puede ser intencional.
La decisión depende del contenido.
Remove
Cada columna dispone de una opción:
Remove
Antes de utilizarla
comprueba qué contenido existe dentro.
Conceptualmente
Column 2
├── Image
├── Heading
└── Button
Si eliminas esa columna
puedes retirar toda esa estructura.
Utiliza Navigator antes de realizar cambios estructurales.
Si simplemente quieres eliminar un Paragraph
no elimines la columna completa.
Columna vacía
Un problema frecuente:
[ A ][ VACÍA ][ C ]
Puede ocurrir si eliminaste únicamente los componentes internos.
Si ya no necesitas la columna
revisa Grid Row y elimina o redistribuye correctamente la estructura.
No mantengas una columna vacía para crear espacio
Este es un error importante
Una columna vacía no debería utilizarse como sustituto de:
Margin;
Padding;
alineación.
Ejemplo incorrecto
[ VACÍA ][ TEXTO ][ VACÍA ]
solo para centrar el texto.
Puede funcionar visualmente en desktop
pero complicar responsive.
Mejor utiliza
Container;
alineación;
ancho;
Grid correctamente.
Espacios mediante Grid vs Padding
Grid sirve para organizar contenido.
Padding sirve para crear espacio interno.
No utilices una columna vacía de 3 unidades
solo para agregar Padding lateral.
Del mismo modo
no utilices:
padding-left: 400px;
para crear una falsa columna.
Utiliza la herramienta adecuada
Columnas y contenido
Cada columna puede contener uno o varios componentes.
Ejemplo simple
Column
└── Image
Ejemplo completo
Column
├── Heading
├── Paragraph
├── List
└── Button
No necesitas una nueva columna para cada elemento
Por ejemplo, esta estructura:
Column A → Heading
Column B → Paragraph
Column C → Button
no siempre es adecuada si los tres elementos deberían estar apilados.
Mejor:
Column
├── Heading
├── Paragraph
└── Button
Pregunta
¿Estos elementos deberían estar uno al lado del otro o uno debajo del otro?
Si deben estar uno debajo del otro
pueden compartir columna.
Si deben estar en paralelo
utiliza distintas columnas.
Ejemplo correcto: Card
Grid Column
└── Card
├── Image
├── Heading
├── Paragraph
└── Button
No crees cuatro columnas para:
Image | Heading | Paragraph | Button
si todos pertenecen a una misma Card.
Grid organiza bloques mayores
Jerarquía antes que apariencia
Cuando una página está bien estructurada:
Section
└── Container
└── Grid Row
├── Column
│ └── Card
└── Column
└── Card
es más fácil:
editar;
clonar;
mover;
adaptar a móvil.
Una estructura improvisada
Image con position absolute
Heading con margin-left
Paragraph con width fijo
Button con top
puede verse igual en tu computadora,
pero ser mucho más frágil.
Diseñador de arrastre libre vs Grid
El toolbar superior incluye:
Modo diseñador (Arrastre libre)
Esta herramienta no debe confundirse con organizar la página mediante Grid.
Grid
permite crear una estructura responsive.
Arrastre libre
puede utilizarse en situaciones particulares de diseño.
Para layouts habituales como:
imagen + texto
3 Cards
4 productos
prioriza Grid.
No utilices arrastre libre como sustituto de columnas
si necesitas que el diseño se adapte correctamente.
Ejemplo práctico 1: imagen + texto 50/50
Queremos:
Desktop
[ IMAGEN ][ TEXTO ]
Paso 1
Agrega o selecciona:
Grid Row
Paso 2
Configura dos columnas.
Paso 3
Distribuye:
6 + 6
en el tamaño de pantalla correspondiente.
Paso 4
En Column 1 agrega:
Image
Paso 5
En Column 2 agrega:
Heading;
Paragraph;
Button.
Paso 6
Configura Vertical align si necesitas ajustar la relación entre imagen y texto.
Paso 7
Revisa tablet.
Paso 8
En celular considera:
[ IMAGE ]
[ TEXT ]
Paso 9
Configura las columnas para que ocupen el ancho disponible en la pantalla estrecha.
Paso 10
Guarda.
Paso 11
Utiliza Ver página.
Ejemplo práctico 2: tres Servicios
Queremos:
Desktop
[ SERVICIO A ][ SERVICIO B ][ SERVICIO C ]
Utiliza:
4 + 4 + 4
Cada Column contiene una Card completa:
Column
└── Service Card
├── Icon
├── Heading
├── Paragraph
└── Button
Tablet
Puedes revisar si funcionan:
2 Cards
+
1 Card
o tres, dependiendo del contenido.
Mobile
puede utilizar:
[ A ]
[ B ]
[ C ]
Ejemplo práctico 3: cuatro Cards
Desktop:
[ A ][ B ][ C ][ D ]
Distribución:
3 + 3 + 3 + 3
Tablet:
[ A ][ B ]
[ C ][ D ]
Mobile:
[ A ]
[ B ]
[ C ]
[ D ]
Este patrón puede utilizarse para
productos destacados;
Equipo;
categorías;
Características;
Beneficios.
Ejemplo práctico 4: contenido 8 + 4
Queremos:
[ CONTENIDO PRINCIPAL ][ LATERAL ]
Distribución:
8 + 4
Puede utilizarse, por ejemplo, para:
artículo + contenido relacionado;
información + CTA;
contenido + datos de contacto.
En mobile
normalmente será más cómodo:
CONTENIDO PRINCIPAL
LATERAL
Ejemplo práctico 5: imagen 5 + texto 7
[ IMAGE ][ TEXT ]
Puede resultar adecuado cuando el texto necesita más espacio.
No fuerces 6 + 6 si:
imagen sencilla
y:
Heading
2 Paragraphs
List
Button
necesitan más ancho.
La distribución debe responder al contenido.
Ejemplo práctico 6: CTA con texto + Button
Desktop:
[ TEXTO PRINCIPAL ][ CONTACTAR ]
Puede utilizar:
8 + 4
o:
9 + 3
según la composición.
Mobile:
TEXTO
[ CONTACTAR ]
No posiciones el Button mediante:
right: 80px;
top: 35px;
si puede resolverse mediante Grid.
Ejemplo práctico 7: una sola columna
No todo necesita Grid múltiple.
Puedes utilizar:
12
para:
Heading
Paragraph
Button
centrados dentro de un Container.
No crees 2 columnas si solo existe un contenido.
Ejemplo práctico 8: dos Cards
6 + 6
Puede funcionar para:
dos planes;
dos servicios;
dos opciones;
dos contenidos destacados.
Mobile:
12
12
conceptualmente:
[ A ]
[ B ]
No inventes una tercera Card para completar una fila
Grid y duplicación
Supongamos que tienes:
Grid Row
├── Column
│ └── Card A
├── Column
│ └── Card B
└── Column
└── Card C
y necesitas una cuarta.
Puedes:
agregar una columna;
clonar la Card correspondiente;
colocarla dentro;
redistribuir las columnas.
Pero cuidado con el nivel que clonas
Si clonas:
Grid Row
duplicarás toda la fila.
Si quieres una Card
selecciona la Card o columna correspondiente según la estructura.
Navigator evita estos errores
Clonar Column vs Card
Si la columna contiene exclusivamente:
Card
puede ser útil duplicar la unidad completa.
Pero revisa:
contenido;
Links;
IDs;
imágenes.
No dejes una Card duplicada sin actualizar.
Mover columnas
Puedes cambiar su orden.
Por ejemplo:
Antes:
[ Servicio A ][ Servicio B ][ Servicio C ]
Después:
[ Servicio C ][ Servicio A ][ Servicio B ]
Recuerda revisar mobile
porque el orden de las columnas también suele determinar el orden de apilado.
Este punto es fundamental
Desktop puede permitir:
[ C ][ A ][ B ]
pero mobile probablemente mostrará:
C
A
B
Asegúrate de que esa secuencia tenga sentido.
Alternar Texto e imagen
Una página puede utilizar:
[ IMAGE ][ TEXT ]
[ TEXT ][ IMAGE ]
[ IMAGE ][ TEXT ]
En desktop esto genera ritmo.
Pero en mobile podrías obtener:
IMAGE
TEXT
TEXT
IMAGE
IMAGE
TEXT
Pregunta si quieres realmente:
dos bloques de texto consecutivos
en medio.
Puede ser preferible que en mobile todos se presenten:
IMAGE
TEXT
IMAGE
TEXT
IMAGE
TEXT
Si necesitas modificar ese comportamiento
revisa:
orden estructural;
Direction;
configuración responsive.
No resuelvas alternancia únicamente con posiciones rígidas.
Grid y Cards de igual altura
Grid organiza el ancho,
pero no garantiza automáticamente que todos los contenidos tengan exactamente la misma altura visual.
Por ejemplo:
Card A
10 palabras
Card B
60 palabras
Card C
20 palabras
pueden tener alturas diferentes.
No es un problema de columnas necesariamente.
Primero revisa el contenido.
Después puedes trabajar con una estructura flexible si necesitas alinear elementos.
No uses Height fija como primera solución.
Grid y Gap
La separación entre columnas puede estar determinada por:
estructura;
clases existentes;
Margin;
Padding.
No pegues manualmente las Cards
mediante Width superiores al espacio disponible.
Si las Cards están demasiado juntas
revisa:
columna;
Padding;
estructura.
Si están demasiado separadas
mismo procedimiento.
No utilices columnas vacías para crear Gap.
Container y ancho de lectura
Un Container puede ser especialmente importante en textos.
Ejemplo incorrecto en monitor grande
Texto de 180 caracteres ocupando de extremo a extremo toda la pantalla...
Mejor
┌──────────────────────────────┐
│ Texto dentro de un ancho │
│ cómodo para la lectura. │
└──────────────────────────────┘
Full width no siempre mejora el diseño
Container y Cards
Puedes utilizar:
Section Full
└── Container
└── Grid Row
├── Card
├── Card
└── Card
Así puedes tener
fondo de extremo a extremo
pero Cards dentro de un ancho controlado.
Este patrón es muy útil.
Container y Background
Recuerda que el Background puede configurarse en diferentes niveles.
Si aplicas Background a Section
puede cubrir toda la zona.
Si aplicas Background a una Card o Container
solo afectará ese elemento.
Antes de cambiar Background pregunta:
¿Quiero colorear toda la sección o solamente el contenido?
Selecciona el nivel correcto.
Ejemplo
Quieres:
FONDO GRIS EN TODA LA SECCIÓN
Selecciona:
Section
no cada columna individual.
Quieres:
Card A blanca
Card B blanca
Card C blanca
sobre fondo gris.
Selecciona:
Cards;
contenedores internos;
según la estructura.
No dupliques estilos innecesariamente.
Section Container height
Al seleccionar Section también encontrarás:
Container height
con opciones:
Auto
Full
Auto
permite que la altura responda al contenido.
Suele ser adecuada para:
Servicios;
texto;
Cards;
FAQ;
Equipo.
Full
puede utilizarse cuando la composición necesita una altura amplia según el diseño.
No utilices Full únicamente para crear espacio
Si una Section tiene:
un Heading
+
un Button
hacerla ocupar una gran altura puede no aportar.
Para espacios habituales utiliza:
Padding;
Margin;
de manera controlada.
Evita Height rígida
especialmente con contenido que cambia.
Grid y Typography
Un cambio de columna puede modificar mucho la cantidad de líneas.
Ejemplo
Heading dentro de columna 8:
Soluciones corporativas para empresas
puede ocupar una línea.
Si cambias a columna 4:
puede ocupar:
Soluciones
corporativas
para
empresas
Esto no necesariamente requiere reducir Font size.
Primero pregunta si la columna tiene el ancho correcto.
Lo mismo aplica a Buttons
Un CTA que desborda puede indicar:
Button demasiado largo;
columna demasiado pequeña.
No siempre es un problema del Button.
Grid y Images
Si Image utiliza:
width: 100%
ocupará el ancho de su columna.
Por eso cambiar la columna de:
6
a:
4
también modifica visualmente el tamaño de la imagen.
No necesitas cambiar Width de Image siempre.
Revisa el nivel estructural primero.
Grid y object-fit
Grid controla el espacio.
object-fit controla cómo la imagen ocupa su marco.
Son conceptos distintos.
Ejemplo
Column 4
└── Image
width: 100%
height: 280px
object-fit: cover
La columna decide:
cuánto ancho existe.
Image decide:
cómo se muestra dentro.
Responsive: una sola estructura
Siempre que sea posible:
utiliza una única estructura que se adapte.
Evita crear:
Section desktop
y:
Section mobile
duplicadas solo porque las columnas no estaban configuradas correctamente.
Duplicar versiones implica
editar dos veces;
Links duplicados;
IDs duplicados;
contenido que puede quedar desactualizado.
Utiliza Grid responsive primero.
Hide based on device screen width
En:
Avanzado
existen opciones para ocultar elementos según ancho de dispositivo.
Esto no debería utilizarse como primera solución para una mala grilla.
Ejemplo incorrecto
Desktop:
4 Cards
Mobile:
ocultas dos porque no entran.
Mejor:
4 Cards apiladas
si las cuatro son importantes.
Ocultar contenido es una decisión de contenido
no una solución automática de maquetación.
Vista previa de dispositivos
Después de configurar Grid utiliza:
teléfono;
tablet;
desktop;
en el toolbar superior.
Recuerda
estos controles:
previsualizan.
No asignan automáticamente los tamaños de columna.
La comprobación correcta es
CONFIGURAR GRID
↓
PREVISUALIZAR
↓
AJUSTAR
↓
VER PÁGINA
No:
hacer clic en teléfono
↓
esperar que las columnas se configuren solas
CSS vs Grid
Antes de escribir:
width
float
margin-left
position
left
right
pregunta:
¿Esto debería resolverse con Grid?
Muchas veces la respuesta es sí.
Ejemplo incorrecto
.columna-a {
width: 47%;
float: left;
}
.columna-b {
width: 47%;
float: right;
}
si ya tienes Grid Row disponible.
Mejor utilizar Grid
y reservar CSS para ajustes específicos.
Evita float para reconstruir layouts modernos
si la estructura del editor ya resuelve columnas.
Evita Margin lateral enorme
margin-left: 600px;
Puede funcionar solamente en tu pantalla.
Evita Width rígido
width: 900px;
en un componente dentro de una columna responsive.
Puede desbordar en tablet o celular.
Evita Position absolute
position: absolute;
left: 500px;
top: 200px;
para colocar elementos principales de una sección.
Puede perder la relación con:
texto;
altura;
responsive.
Position absolute puede tener usos específicos
pero no debería ser la herramienta predeterminada de maquetación.
Utiliza primero
Section
Container
Grid Row
Grid Column
Grid y CSS personalizado
Puedes complementar la estructura con CSS localizado.
Por ejemplo:
mi-seccion
como Class raíz.
Y:
mi-card
en las Cards.
Después:
.mi-seccion .mi-card {
border-radius: 16px;
}
Pero no necesitas CSS para definir una estructura que Grid Row ya puede crear.
Bootstrap y Grid
La estructura de columnas utilizada por Waclis se basa en una lógica de grilla de 12 unidades.
En el código puedes encontrar Classes estructurales como, por ejemplo:
col-sm-4
que representan parte de esa distribución.
No elimines Classes de columnas sin comprenderlas
Por ejemplo:
col-sm-4
puede estar determinando el ancho responsive.
Si quieres modificar la distribución
utiliza primero las opciones de Grid Row.
No borres manualmente Classes estructurales solamente porque “sobran”.
Waclis utiliza Bootstrap 4 en la Página web
Por eso, cuando solicites ayuda a una IA para modificar manualmente una estructura, aclara:
Waclis utiliza Bootstrap 4.
Importante sobre la biblioteca del editor
La categoría donde aparecen algunos de estos componentes puede mostrarse con una denominación diferente dentro de la interfaz.
Para trabajar con ellos, guíate por el nombre del componente:
Container;
Grid Row.
No sustituyas las Classes existentes por código de otra versión de Bootstrap
solamente porque encontraste un ejemplo diferente en Internet.
Conserva la estructura que ya funciona.
Grid Row y Classes existentes
En una fila de tres columnas puedes encontrar conceptualmente:
<div class="row">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
Este ejemplo ayuda a comprender:
4 + 4 + 4
No necesitas editar este HTML manualmente
para crear tres columnas.
Utiliza Grid Row.
HTML del elemento
Si necesitas investigar una estructura avanzada:
utiliza:
Editar código HTML <>
sobre el elemento seleccionado.
Puede ayudarte a identificar
Row;
Columns;
wrappers;
Classes.
Pero para cambios habituales utiliza primero:
Contenido → Grid Row
No abras Code editor global
solo para cambiar:
3 columnas
a:
4 columnas
Utiliza Add column y configuración de tamaños.
Grid y Linked styles
Las columnas y elementos internos pueden compartir Classes.
No confundas:
estructura Grid
con:
estilo visual de Card
Si tres Cards comparten:
servicio-card
Linked styles puede hacer que cambien juntas.
Eso no significa que sus columnas deban ser iguales.
Una Card puede estar en:
Column 4
y otra Card con la misma Class en:
Column 8
Estructura y estilo son niveles diferentes.
Grid y IDs
No necesitas agregar IDs a cada columna para configurar su ancho.
Utiliza las opciones estructurales.
ID solo cuando exista una necesidad específica
y mantenlo único.
No utilices
columna1
columna2
columna3
como IDs solamente para poder darles Width mediante CSS
si Grid Row ya lo resuelve.
Ejemplo práctico: corregir una sección mal construida
Supongamos que encuentras:
Image
→ width 420px
→ margin-left 150px
Text
→ width 550px
→ margin-left 700px
Antes de seguir ajustando Margin
reconstruye conceptualmente:
Section
└── Container
└── Grid Row
├── Column 6
│ └── Image
└── Column 6
└── Text
Después
la imagen y el texto se moverán como parte de una estructura.
Esto suele ser mucho más robusto.
Ejemplo práctico: centrar un bloque
Quieres:
TÍTULO
TEXTO
[ CTA ]
No necesitas:
margin-left: 380px;
Puedes utilizar:
Container;
una columna adecuada;
Horizontal align;
Typography alignment.
Ejemplo práctico: Card principal + dos secundarias
Desktop:
┌──────────────────────┬──────────────┐
│ │ B │
│ A ├──────────────┤
│ │ C │
└──────────────────────┴──────────────┘
Esta es una composición más avanzada.
Antes de modificarla:
utiliza Navigator;
identifica Rows y Columns;
comprende la jerarquía.
No intentes recrearla simplemente con:
top
left
position:absolute
En mobile probablemente necesites:
A
B
C
Mantén el orden lógico.
Ejemplo práctico: sección Full con contenido Boxed
Conceptualmente quieres:
██████████████████████████████████████████
█ █
█ TÍTULO █
█ [ CARD ][ CARD ][ CARD ] █
█ █
██████████████████████████████████████████
El fondo ocupa todo el ancho.
Pero Cards permanecen dentro de un área contenida.
Utiliza correctamente el nivel:
Section
→ Background
Container
→ contenido
Grid Row
→ Cards
No agregues Background individual a cada espacio vacío.
¿Qué hacer si quiero 100 % de ancho?
Primero selecciona la Section y revisa:
Container width → Full
cuando sea lo que realmente necesitas.
No comiences con:
width: 100vw;
margin-left: -200px;
Esas técnicas pueden generar:
scroll horizontal;
desalineación;
problemas responsive.
¿Qué hacer si quiero volver a un ancho contenido?
Utiliza:
Container width → Boxed
según la Section correspondiente.
¿Qué hacer si el fondo debe ser Full pero el texto no?
Mantén la Section amplia y controla la estructura interna del contenido.
No hagas el Paragraph ocupar toda la pantalla solo porque el fondo es Full.
¿Qué hacer si quiero dos columnas?
Utiliza Grid Row con dos columnas.
¿Qué hacer si quiero tres?
Agrega o configura tres columnas.
¿Qué hacer si quiero cuatro?
Mismo procedimiento.
Después distribuye las unidades correctamente.
¿Qué hacer si quiero cinco columnas?
Es posible crear composiciones con más elementos, pero revisa especialmente:
ancho;
contenido;
tablet;
mobile.
No sacrifiques legibilidad solamente para mantener cinco elementos en una fila.
Puede ser mejor:
Desktop:
[ A ][ B ][ C ][ D ][ E ]
si existe espacio,
pero tablet:
[ A ][ B ][ C ]
[ D ][ E ]
o una distribución más apropiada.
No es obligatorio que todas las filas queden completas.
¿Qué hacer si una última Card queda sola?
Por ejemplo:
[ A ][ B ]
[ C ]
Esto no significa necesariamente que exista un error.
Puedes:
mantenerla;
centrarla;
utilizar otra distribución;
cambiar el número de Cards.
No inventes contenido solo para llenar espacio.
¿Qué hacer si quiero centrar la última columna?
Revisa las opciones de alineación del Grid Row o la estructura correspondiente.
Evita agregar una columna vacía a cada lado como primera solución.
¿Qué hacer si una columna queda demasiado estrecha?
Revisa su tamaño.
Puede que estés utilizando:
4 + 4 + 4
cuando el contenido necesita:
6 + 6
o una estructura diferente.
No reduzcas Font size automáticamente.
¿Qué hacer si el Heading se rompe en cinco líneas?
Primero pregunta:
¿La columna es demasiado estrecha?
Después:
¿El Heading puede resumirse?
Finalmente:
¿Necesita ajuste tipográfico?
Resuelve en ese orden.
¿Qué hacer si la imagen se ve demasiado pequeña?
Puede ser:
Image Width;
columna pequeña;
Container Boxed.
Revisa los tres niveles.
¿Qué hacer si la imagen es muy grande?
Mismo procedimiento.
No cambies solamente Width de la imagen sin revisar su columna.
¿Qué hacer si las columnas no tienen la misma altura?
Puede deberse a contenidos diferentes.
Grid controla principalmente la distribución.
No fuerces Height fija inmediatamente.
¿Qué hacer si quiero centrar verticalmente el texto junto a una imagen?
Selecciona Grid Row y revisa:
Vertical align
Evita:
margin-top: 180px;
¿Qué hacer si quiero alinear contenido al inicio?
Utiliza la opción de alineación correspondiente.
¿Qué hacer si quiero invertir imagen y texto?
Puedes:
reorganizar las columnas;
revisar Direction;
según la estructura y el comportamiento responsive que necesites.
Después revisa celular.
¿Qué hacer si al invertir en desktop también cambia mobile?
Es esperable que Direction afecte la organización de la estructura.
Decide el orden que debe tener en cada tamaño y prueba.
¿Qué hacer si necesito un orden diferente específicamente en celular?
Primero revisa las opciones responsive y Direction disponibles en la estructura.
Evita duplicar toda la Section salvo que exista una necesidad excepcional.
¿Qué hacer si las columnas se salen de la pantalla?
Revisa:
tamaños de columnas;
Width de componentes internos;
Min Width;
Margin;
Padding.
Una columna puede ser responsive
pero un hijo con:
width: 900px;
seguirá provocando problemas.
Revisa también los componentes internos.
¿Qué hacer si aparece scroll horizontal?
Busca:
Width fijo;
Min Width;
Margin lateral;
Position;
imágenes;
Buttons largos;
Grid mal configurado.
No ocultes el problema mediante:
body {
overflow-x: hidden;
}
como primera solución.
Encuentra el elemento que desborda.
¿Qué hacer si eliminé una columna por accidente?
Utiliza:
Deshacer
si la acción acaba de ocurrir.
Antes de continuar haciendo cambios
restaura la estructura.
¿Qué hacer si eliminé el contenido pero quedó la columna?
Utiliza Navigator.
Decide si:
volverás a colocar contenido;
eliminarás la columna;
redistribuirás la fila.
¿Qué hacer si agregué una columna y la fila quedó desordenada?
Revisa todos los tamaños.
Ejemplo
Antes:
6 + 6
Agregaste tercera columna.
No dejes automáticamente:
6 + 6 + ?
sin revisar.
Puedes convertir en:
4 + 4 + 4
si deben tener la misma importancia.
¿Qué hacer si una columna debe ser más grande?
Utiliza:
7 + 5
o:
8 + 4
según el contenido.
No existe obligación de simetría.
¿Qué hacer si quiero tres columnas pero la central más grande?
Puedes utilizar conceptualmente:
3 + 6 + 3
Esto puede ser útil para determinadas composiciones.
¿Qué hacer si quiero una Card destacada?
Puedes darle:
columna mayor;
estilo adicional.
Ejemplo:
6 + 3 + 3
Principal:
6
Secundarias:
3 + 3
La jerarquía visual refleja la prioridad.
¿Qué hacer si quiero un contenido centrado que ocupe 8 unidades?
Puedes crear una composición adecuada y utilizar alineación de la fila, en lugar de llenar los lados con contenido falso.
El objetivo es mantener estructura clara.
¿Qué hacer si una Grid funciona en desktop pero no en tablet?
No escribas inmediatamente un media query.
Primero abre Grid Row y revisa:
Medium / Large / otros tamaños disponibles
según el breakpoint donde aparece el problema.
Puede resolverse directamente desde el editor.
¿Qué hacer si funciona en tablet pero no en móvil?
Revisa:
Extra small;
Small.
Después utiliza la vista de teléfono para comprobar.
¿Qué hacer si una vista previa se ve bien pero la página real no?
Utiliza:
Ver página
La vista final es la comprobación definitiva.
No te quedes únicamente con el lienzo del editor.
¿Qué hacer si una Card se ve distinta después de cambiar su columna?
Es normal que el contenido responda a un nuevo ancho.
Revisa:
Heading;
imagen;
Button;
Padding.
No significa necesariamente que Card esté rota.
¿Qué hacer si quiero utilizar CSS adicional?
Agrega una Class específica.
Por ejemplo:
mi-seccion
en la Section.
Después:
.mi-seccion .elemento {
}
Mantén el CSS limitado.
No utilices:
.row {
margin: 0;
}
globalmente sin comprender el impacto.
.row puede existir en muchas partes de la Página web.
Tampoco:
.container {
max-width: none;
}
globalmente.
Podrías convertir todas las áreas contenidas en Full.
Tampoco:
[class*="col-"] {
width: 100%;
}
Puede destruir toda la grilla.
Estos selectores son especialmente peligrosos
porque afectan estructura global.
CSS localizado
Si realmente necesitas modificar una fila concreta:
utiliza una Class propia.
Por ejemplo:
servicios-grid
Después:
.mi-seccion .servicios-grid {
}
No sobrescribas la grilla completa del sitio.
Utilizar IA para crear una estructura Grid
Puedes utilizar ChatGPT, Claude o Gemini.
Por ejemplo:
Estoy creando una sección en Waclis.
Necesito esta estructura:
Desktop:
[ imagen 5/12 ][ texto 7/12 ]
Mobile:
[ imagen ]
[ texto ]
Quiero resolverlo utilizando Container y Grid Row.
Waclis utiliza Bootstrap 4.
Explícame primero:
- cuántas columnas necesito;
- qué tamaño debería tener cada una;
- cómo deberían apilarse en celular.
No generes CSS salvo que sea necesario.
No utilices posiciones absolutas.
IA para tres Cards
Quiero mostrar 3 Cards dentro de Waclis.
Necesito:
- 3 por fila en desktop;
- 2 por fila en tablet cuando exista espacio;
- 1 por fila en celular.
Explícame cómo plantearlo mediante Grid Row y configuración responsive.
No uses Width fijo.
No agregues JavaScript.
IA para cuatro Cards
Tengo cuatro Cards.
Desktop:
4 por fila.
Tablet:
2 por fila.
Mobile:
1 por fila.
Waclis utiliza una grilla de 12 unidades.
Indícame la distribución conceptual para cada tamaño.
No generes HTML nuevo si puedo configurarlo desde Grid Row.
IA para revisar una estructura existente
Este es el HTML únicamente de una Section de Waclis:
[pegar sección]
Identifica:
- Section;
- Container;
- Row;
- Columns;
- tamaños de columnas existentes;
- componentes dentro de cada columna.
No reescribas el HTML.
No elimines Classes.
IA para diagnosticar Margin innecesario
Tengo esta estructura HTML y CSS:
[pegar]
El contenido se organiza mediante columnas, pero hay muchos:
- margin-left;
- left;
- top;
- width fijo.
Identifica cuáles parecen estar sustituyendo una maquetación que debería resolverse mediante Grid.
No cambies el código todavía.
IA para detectar CSS peligroso
Revisa este CSS de una Página web Waclis.
Busca selectores globales que puedan romper la estructura, especialmente:
.row
.container
[class*="col-"]
.col-sm-
.col-md-
.col-lg-
Indícame cuáles tienen un alcance demasiado amplio.
No modifiques el CSS.
IA para imagen + texto responsive
Tengo una sección:
Section
└ Container
└ Grid Row
├ Column
│ └ Image
└ Column
├ Heading
├ Paragraph
└ Button
Necesito:
- 50/50 en desktop;
- una columna en celular;
- imagen primero;
- texto después.
Explícame qué debo revisar en Grid Row.
Waclis utiliza Bootstrap 4.
No agregues JavaScript.
IA para alternar imagen y texto
Tengo tres filas:
1. Imagen | Texto
2. Texto | Imagen
3. Imagen | Texto
En desktop quiero mantener la alternancia.
En celular quiero siempre:
Imagen
Texto
Analiza cómo debería ser el orden estructural y qué debería revisar en Direction/responsive.
No dupliques las secciones.
No utilices posiciones absolutas.
IA para Boxed vs Full
Tengo esta sección:
[describir contenido]
Quiero decidir entre Container width:
- Boxed
- Full
Analiza cuál conviene según:
- legibilidad;
- tipo de contenido;
- ancho de imágenes;
- cantidad de Cards.
No generes CSS.
IA para corregir overflow
Esta sección genera scroll horizontal en celular.
HTML:
[pegar sección]
CSS:
[pegar solamente CSS relacionado]
Busca:
- widths fijos;
- min-width;
- margin lateral;
- posiciones absolutas;
- columnas mal configuradas;
- imágenes mayores a su contenedor.
No ocultes el overflow como solución.
Indica primero la causa.
IA para reorganizar sin CSS
Quiero modificar esta estructura de Waclis:
Actualmente:
4 columnas en todos los tamaños.
Necesito:
Desktop → 4
Tablet → 2
Mobile → 1
Explícame cómo intentar resolverlo primero desde Grid Row y sus tamaños por dispositivo.
No generes CSS salvo que las opciones del editor no sean suficientes.
Buenas prácticas para Container y Grid Row
Recomendamos:
comprender la jerarquía antes de modificar;
utilizar Navigator;
utilizar Section para agrupar bloques mayores;
utilizar Container para controlar el área de contenido;
elegir conscientemente Boxed o Full;
utilizar Grid Row para columnas;
trabajar con la lógica de 12 unidades;
utilizar 6+6 para dos columnas iguales;
utilizar 4+4+4 para tres;
utilizar 3+3+3+3 para cuatro;
utilizar distribuciones asimétricas cuando el contenido lo necesite;
configurar tamaños según dispositivo;
diferenciar responsive real de vista previa;
utilizar Vertical align cuando corresponda;
utilizar Horizontal align en lugar de Margin rígido;
revisar Direction y orden mobile;
utilizar Wrap conscientemente;
agregar y eliminar columnas desde Grid Row;
revisar contenido antes de usar Remove;
mantener una única estructura responsive cuando sea posible;
utilizar Grid antes que posiciones absolutas;
reservar CSS para ajustes adicionales;
conservar Classes estructurales existentes;
revisar el resultado mediante Ver página.
Errores frecuentes
Utilizar Margin para construir columnas
Utiliza Grid Row.
Utilizar Position absolute para el layout principal
Puede romper responsive.
Utilizar Width fijo en lugar de columnas
Adapta la estructura.
Utilizar columnas vacías para crear espacio
Utiliza Padding, Margin o alineación.
Hacer todo Full
Puede perjudicar la lectura.
Hacer todo Boxed
Puede limitar composiciones que necesitan amplitud.
Confundir Section Full con texto de extremo a extremo
Puedes mantener contenido interno controlado.
Utilizar Grid Row sin revisar mobile
Configura responsive.
Creer que el icono de teléfono configura las columnas
Solo previsualiza.
Ocultar columnas en móvil porque no entran
Adapta la grilla.
Mantener cuatro Cards estrechas en celular
Utiliza una o dos por fila según el contenido.
Reducir Font size para compensar una columna demasiado pequeña
Revisa Grid primero.
Modificar Image Width cuando el problema es la columna
Revisa jerarquía.
Agregar una columna y no redistribuir tamaños
Comprueba la suma y el diseño.
Eliminar contenido interno y dejar una columna vacía
Revisa Grid Row.
Eliminar una columna cuando solo querías borrar un Paragraph
Utiliza Navigator.
Mover una Image en lugar de toda la columna
Puedes romper la relación con el contenido.
Reordenar desktop sin revisar mobile
El orden de apilado puede cambiar.
Utilizar Direction sin comprender el orden estructural
Comprueba Navigator.
Centrar mediante margin-left
Utiliza alineación.
Utilizar grandes Margins para corregir Vertical align
Utiliza la configuración de la fila.
Duplicar toda la Section para crear una versión mobile
Primero intenta una estructura responsive única.
Utilizar Hide based on device para solucionar una mala grilla
Ocultar contenido no es responsive.
Aplicar CSS global a .row
Puede afectar toda la Página web.
Aplicar CSS global a .container
Puede modificar todos los Containers.
Aplicar CSS global a Classes de columnas
Puede destruir múltiples secciones.
Eliminar Classes como col-sm-4 sin comprenderlas
Pueden controlar el ancho responsive.
Copiar una grilla de otra versión de Bootstrap
Conserva la estructura existente de Waclis.
Abrir Code editor para una modificación disponible en Grid Row
Utiliza primero el editor visual.
No utilizar Ver página
La comprobación final debe realizarse en el frontend.
Flujo recomendado
1. DEFINIR LA COMPOSICIÓN
↓
2. IDENTIFICAR SECTION
↓
3. DEFINIR BOXED O FULL
↓
4. AGREGAR / REVISAR CONTAINER
↓
5. AGREGAR GRID ROW
↓
6. DEFINIR CANTIDAD DE COLUMNAS
↓
7. DISTRIBUIR LAS 12 UNIDADES
↓
8. COLOCAR COMPONENTES DENTRO
↓
9. REVISAR NAVIGATOR
↓
10. CONFIGURAR DIRECTION SI CORRESPONDE
↓
11. CONFIGURAR VERTICAL ALIGN
↓
12. CONFIGURAR HORIZONTAL ALIGN
↓
13. REVISAR WRAP
↓
14. CONFIGURAR TAMAÑOS POR DISPOSITIVO
↓
15. PREVISUALIZAR DESKTOP
↓
16. PREVISUALIZAR TABLET
↓
17. PREVISUALIZAR CELULAR
↓
18. CORREGIR ORDEN Y ANCHOS
↓
19. GUARDAR CAMBIOS
↓
20. VER PÁGINA
Checklist antes de finalizar
Comprendo la estructura Section → Container → Grid Row → Column.
Utilicé Navigator para comprobar la jerarquía.
Elegí conscientemente Boxed o Full.
El contenido no ocupa un ancho excesivo sin necesidad.
El fondo tiene el alcance correcto.
Grid Row contiene la cantidad correcta de columnas.
Las columnas reflejan la importancia del contenido.
Si son dos iguales, revisé una distribución 6+6.
Si son tres iguales, revisé 4+4+4.
Si son cuatro iguales, revisé 3+3+3+3.
Si la composición es asimétrica, los tamaños responden al contenido.
Los componentes están dentro de la columna correcta.
No utilicé columnas vacías solamente para crear espacio.
Revisé Direction.
El orden estructural tiene sentido.
El orden mobile tiene sentido.
Revisé Vertical align.
Revisé Horizontal align.
Revisé Wrap.
Configuré tamaños según dispositivo cuando corresponde.
No confundí los previews con la configuración responsive.
Desktop se visualiza correctamente.
Tablet se visualiza correctamente.
Celular se visualiza correctamente.
Las Cards no quedan demasiado estrechas.
Los Headings no se rompen por falta de ancho innecesariamente.
Las imágenes no desbordan las columnas.
Los Buttons no desbordan.
No existe scroll horizontal inesperado.
No utilicé Width fijo innecesario.
No utilicé grandes margin-left para crear el layout.
No utilicé posiciones absolutas innecesarias.
No dupliqué la Section para mobile si Grid podía resolverlo.
No oculté información para solucionar responsive.
Al agregar columnas revisé nuevamente todos los tamaños.
Al eliminar columnas revisé el contenido interno.
Al mover columnas revisé el orden mobile.
Conservé Classes estructurales que no necesitaba modificar.
No apliqué CSS global sobre .row.
No apliqué CSS global sobre .container.
No sobrescribí globalmente las Classes de columnas.
Utilicé CSS adicional solamente cuando realmente era necesario.
Guardé los cambios.
Revisé el resultado mediante Ver página.
En resumen
La estructura fundamental del Editor de bloques puede representarse así:
SECTION
↓
CONTAINER
↓
GRID ROW
↓
GRID COLUMNS
↓
COMPONENTES
Por ejemplo:
Section
└── Container
└── Grid Row
├── Column 6
│ └── Image
└── Column 6
├── Heading
├── Paragraph
└── Button
Esto produce conceptualmente:
Desktop
[ IMAGE ][ TEXT ]
y mediante la configuración responsive puede transformarse en:
Mobile
[ IMAGE ]
[ TEXT ]
La grilla utiliza una lógica de:
12 unidades
Por eso algunas distribuciones habituales son:
12
→ una columna
6 + 6
→ dos columnas iguales
4 + 4 + 4
→ tres columnas iguales
3 + 3 + 3 + 3
→ cuatro columnas iguales
8 + 4
→ principal + secundaria
5 + 7
→ composición asimétrica
Dentro de Grid Row puedes trabajar con:
Direction;
Vertical align;
Horizontal align;
Wrap;
columnas;
tamaños según dispositivo;
Add column;
Remove.
Y recuerda una diferencia fundamental:
Toolbar móvil/tablet/desktop
→ PREVISUALIZA
mientras:
Grid Row
→ CONFIGURA LA DISTRIBUCIÓN
Cuando una composición presenta problemas, antes de escribir:
margin-left
width fijo
position: absolute
left
top
pregunta:
¿Puedo resolverlo correctamente con Container y Grid Row?
En la mayoría de los layouts habituales, esa debería ser la primera opción.
También recuerda que Waclis utiliza Bootstrap 4, por lo que pueden existir Classes estructurales como:
row
col-sm-4
No las elimines o sustituyas sin comprender su función.
Si necesitas una personalización avanzada con IA, aclara siempre el entorno y pide preservar las Classes existentes.
Finalmente:
Configurar estructura → revisar Navigator → configurar responsive → previsualizar → Guardar Cambios → Ver página.
Una buena maquetación no debería depender de que el visitante tenga exactamente el mismo tamaño de pantalla que utilizaste mientras diseñabas.
Debe poder reorganizarse de forma natural.
Ese es precisamente el objetivo de trabajar correctamente con:
Container + Grid Row + Grid Columns.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp