Quien aprendió Elementor hace unos años piensa en secciones y columnas: un bloque a todo lo ancho, dentro columnas, y en las columnas los widgets. Quien empieza hoy ve contenedores en su lugar. Los dos sistemas conviven, y eso genera confusión. Aquí va la explicación.
La diferencia en una frase
El sistema antiguo tenía tres niveles fijos — sección, columna, widget. El contenedor es un nivel que se puede anidar a voluntad y que internamente trabaja con Flexbox, el modelo de maquetación con el que hoy se construye prácticamente cualquier sitio web moderno.
Qué mejora con ello
Menos anidamiento, menos marcado. Antes, un bloque de una sola columna necesitaba sección y columna, es decir, dos niveles para un bloque de contenido. Con contenedores es uno. A lo largo de una página entera eso suma bastante menos HTML — lo que beneficia al tiempo de carga y hace la estructura más legible.
Una alineación que realmente funciona. Alinear por abajo tres cajas con alturas de texto distintas era, con columnas, un apaño a base de alturas mínimas iguales y trabajo manual. Con Flexbox son dos clics: dirección, alineación, listo.
Comportamiento en vez de adivinar cifras. Usted define si los elementos van en una fila o uno debajo de otro, cómo se reparten, si saltan de línea cuando el espacio se estrecha. La maquetación reacciona al espacio disponible, en vez de estar atada a porcentajes fijos — algo que marca la diferencia sobre todo en tabletas.
Orden libremente modificable. ¿En escritorio la imagen debe ir a la izquierda, pero en el móvil encima del texto? Con Flexbox eso es un ajuste, no una construcción doble.
Los cuatro ajustes que realmente necesita
El contenedor tiene muchas opciones. En la práctica trabajará casi exclusivamente con cuatro:
Dirección — uno al lado del otro (fila) o uno debajo del otro (columna). El interruptor más importante de todos.
Alineación — cómo se sitúan los elementos en sentido transversal a la dirección. En una fila: arriba, al centro, abajo.
Distribución — cómo se reparte el espacio a lo largo de la dirección. «Espacio entre» es el valor que necesita para cabeceras con el logo a la izquierda y el menú a la derecha.
Espaciado (gap) — la distancia entre los elementos. Sustituye a los rellenos internos que antes se ponían en cada columna, y lo hace de forma más fiable.
Cuando haya entendido estos cuatro, construirá el noventa por ciento de todas las maquetaciones. El resto es acabado fino.
Una estructura que ha demostrado funcionar
Para un bloque de contenido normal uso un contenedor exterior, en dirección columna, a todo lo ancho y con fondo. Dentro, un contenedor interior, limitado en anchura y centrado — esa es su zona de texto. Y dentro de ese, donde haga falta, un contenedor en dirección fila para los elementos que van uno junto a otro.
Este patrón — fuera el marco, dentro la limitación de anchura, y ahí los contenidos — aguanta muchísimo y sigue siendo comprensible meses después.
¿Debería reconstruir las páginas existentes?
No. Al menos, no sin un motivo.
Elementor ofrece una conversión de secciones a contenedores. Funciona bien a menudo, pero no siempre sin pérdidas — en especial en páginas con muchos espaciados individuales, márgenes negativos o CSS propio. Reconstruir una página que se ve bien y funciona no le trae ni un visitante más y puede costarle medio día de retoques.
Mi forma de proceder: lo nuevo se construye con contenedores, lo existente se queda como está. Cuando una página antigua vaya a revisarse de todos modos por contenido, aproveche la ocasión para reconstruirla. Así el sitio va migrando poco a poco sin que tenga que convertirlo en un proyecto de reforma.
Si aun así convierte: antes una copia de seguridad, y después revise cada página en móvil y tableta. Lo que además puede salir mal en estos casos está en Actualizar Elementor sin romper el diseño.
El efecto secundario que más valoro
Menos anidamiento significa menos HTML por página. No es un milagro de rendimiento — el tiempo de carga depende mucho más de las imágenes y los scripts. Pero es un paso en la dirección correcta, y no cuesta nada, porque de todos modos va usted a construir. Las palancas mayores para el tiempo de carga están en Elementor y Core Web Vitals.
Elementor Pro: los contenedores existen en ambas versiones. Pro solo pasa a ser relevante cuando quiera usar esta estructura también para la cabecera, el pie y los diseños de entrada. Ver Elementor Pro
Si empieza de cero
Ni siquiera aprenda el sistema antiguo. Las secciones y columnas seguirán apareciéndole durante mucho tiempo en tutoriales y vídeos antiguos — puede leerlos sin usarlas. Empiece directamente con contenedores; así se ahorra aprender un modelo para tener que desaprenderlo después.
Así es exactamente como procedo también en mi formación de Elementor: Flexbox desde el principio, porque es el estado del arte sobre el que va a trabajar los próximos años.
Etiquetas