Cómo configurar el diseño de un contenedor en Elementor

¿Quieres aprender a configurar un contenedor en Elementor y controlar cómo se distribuyen los textos, las imágenes, los botones y el resto de los elementos de tu página web? En este tutorial te explicamos cómo utilizar las opciones de diseño del contenedor para organizar el contenido, ajustar el ancho y la altura, alinear los elementos y adaptar tu web a ordenadores, tabletas y móviles.

Los contenedores de Elementor te permiten crear diseños flexibles sin necesidad de saber programar. Si conoces las opciones de configuración, podrás diseñar páginas más ordenadas, mejorar la experiencia de navegación y conseguir que tu web se vea bien en diferentes tamaños de pantalla.

¿Qué es el diseño de un contenedor en Elementor?

Un contenedor en Elementor es un espacio que agrupa diferentes elementos de una página web, como encabezados, imágenes, textos, vídeos o botones. Puedes utilizarlo para organizarlos horizontal o verticalmente, controlar el espacio entre ellos y decidir cómo se distribuyen dentro de la página.

La pestaña Diseño (Layout) reúne las opciones que necesitas para modificar el tamaño del contenedor, la posición de sus elementos y la forma en la que se adapta al espacio disponible.

Para acceder a estas opciones, selecciona el contenedor que quieras editar y abre la pestaña Diseño (Layout) en el panel de Elementor.

Cómo configurar la pestaña Diseño (Layout) de Elementor

Dentro de la pestaña Diseño encontrarás diferentes ajustes. Vamos a ver para qué sirve cada uno y cuándo te conviene utilizarlo.

Ancho del contenido (Content Width)

Esta opción permite elegir cómo se distribuye el contenido dentro del contenedor. En el desplegable encontrarás dos posibilidades:

• Boxed (En caja): permite limitar el ancho del contenido interior sin tener que modificar el ancho del propio contenedor.
• Full Width (Ancho completo): permite ajustar el ancho del contenedor, mientras que el contenido interior se adapta al espacio disponible.

¿Cuál debes elegir? Depende de lo que quieras modificar en tu diseño. La siguiente tabla podría ser de mucha ayuda:

‼️Importante: puedes configurar el ancho del contenido de manera independiente para cada adaptación responsive, por ejemplo, para ordenador, tableta o móvil.

Ancho (Width)

La opción Width (Ancho) permite ajustar las dimensiones del contenido o del contenedor, dependiendo de la configuración anterior.

Puedes introducir el valor manualmente y elegir entre distintas unidades de medida:

• PX (píxeles): para establecer una medida concreta.
• % (porcentaje): para definir el ancho en relación con el espacio de referencia.
• VW (ancho de la ventana): para establecer el ancho en función de la ventana visible del navegador.

El efecto de este ajuste cambia según hayas seleccionado Boxed o Full Width.

Ancho con la opción Boxed (En caja)

Cuando seleccionas Boxed, el control de ancho modifica el espacio que ocupa el contenido dentro del contenedor, no el ancho del contenedor completo.

Esta opción resulta útil si quieres que el fondo del contenedor ocupe una superficie amplia, pero prefieres que el texto, las imágenes o los botones queden dentro de una zona más estrecha y legible.

Esta es la configuración predeterminada al crear un contenedor nuevo.

Ancho con la opción Full Width (Ancho completo)

Si seleccionas Full Width, el control de ancho permite modificar el ancho del propio contenedor.

Por ejemplo, puedes reducir la anchura de un contenedor para que no ocupe toda la página o establecer una anchura concreta para organizar mejor el diseño.

Ten en cuenta que, por defecto, los contenedores se extienden por el espacio disponible según su posición en la estructura de la página. Si un contenedor está directamente en la página, puede ocupar todo el ancho de la ventana. Si está dentro de otro contenedor, su anchura estará condicionada por el espacio disponible en el contenedor padre.

Altura mínima (Min Height)

La opción Min Height (Altura mínima) permite establecer la altura mínima que tendrá el contenido del contenedor.

Puedes introducir un valor manualmente o utilizar el control deslizante. Entre las unidades disponibles encontrarás:

• PX (píxeles): para establecer una altura mínima concreta.
• VH (altura de la ventana): para definir la altura en función de la ventana visible del navegador.

Por ejemplo, si introduces 100 VH, el contenedor tendrá una altura mínima equivalente al 100 % de la altura de la ventana visible. Esto puede resultar útil para crear secciones que ocupen toda la pantalla, como una portada con una imagen de fondo y un mensaje principal.

 💡Consejo: puedes configurar esta altura por separado para ordenador, tableta y móvil. Comprueba el resultado en cada dispositivo, especialmente si el contenedor incluye textos largos o imágenes.

Cómo organizar los elementos dentro de un contenedor

La sección Items (Elementos) reúne los ajustes que controlan cómo se distribuyen los elementos que has añadido al contenedor.

Estas opciones te permiten decidir si los elementos aparecen en horizontal o en vertical, cómo se alinean y cuánto espacio queda entre ellos.

Dirección (Direction)

La opción Direction (Dirección) determina el orden y la orientación de los elementos dentro del contenedor. Puedes elegir entre cuatro posibilidades:

1. Row (Fila horizontal): coloca los elementos en horizontal, uno al lado del otro.
2. Column (Columna vertical): coloca los elementos en vertical, uno debajo del otro.
3. Row reverse (Fila invertida): coloca los elementos en horizontal, pero invierte su orden.
4. Column reverse (Columna invetida): coloca los elementos en vertical, pero invierte su orden.

¿Cuándo utilizar cada dirección?

• Utiliza Row para colocar varios botones en una misma línea o mostrar una imagen junto a un texto.
• Elige Column para organizar un título, un párrafo y un botón, uno debajo del otro.
• Recurre a las opciones inversas cuando necesites cambiar el orden visual de los elementos sin tener que reorganizarlos manualmente.

Contenido justificado (Justify content)

La opción Justify content (Contenido justificado) permite distribuir los elementos a lo largo del eje principal del contenedor y controlar el espacio que queda entre ellos.

El resultado depende de la dirección que hayas elegido. Por ejemplo, si utilizas Row, controlarás la distribución horizontal; si eliges Column, controlarás la distribución vertical.

Estas son las opciones disponibles:

1. Flex start (Inicio): coloca los elementos al principio del eje principal.
2. Center (Centro): agrupa los elementos en el centro.
3. Flex end (Fin): coloca los elementos al final del eje principal.
4. Space between (Espacio intermedio): coloca el primer elemento al principio y el último al final, distribuyendo el espacio sobrante entre los elementos.
5. Space around (Espacio alrededor): distribuye el espacio alrededor de cada elemento. Los espacios de los extremos suelen ser menores que los espacios completos entre elementos.
6. Space evenly (Espacio uniforme): distribuye el espacio de manera uniforme entre los elementos y los extremos del contenedor.

Por ejemplo, si quieres colocar tres botones en una misma línea y repartirlos por el ancho disponible, puedes utilizar Space Between. Si prefieres que los tres queden agrupados en el centro, selecciona Center.

Alinear elementos (Align items)

La opción Align items (Alinear elementos) controla la alineación de los elementos en el eje transversal, es decir, el eje perpendicular al de la dirección elegida.

Puede parecer complicado, pero es más sencillo de lo que parece. Si los elementos están en una fila, esta opción controla principalmente su alineación vertical. Si están en una columna, controla principalmente su alineación horizontal.

Puedes elegir entre estas opciones:

1. Flex start (Inicio): alinea los elementos al principio del eje transversal.
2. Center (Centro): centra los elementos en el eje transversal.
3. Flex end (Fin): alinea los elementos al final del eje transversal.
4. Stretch (Estirar): intenta que los elementos ocupen todo el espacio disponible en el eje transversal.

La opción Stretch solo se aplica cuando las dimensiones de los elementos lo permiten. Por ejemplo, si un elemento tiene un ancho definido, puede que no se estire horizontalmente.

Ejemplo práctico: imagina que tienes una imagen y un texto colocados uno al lado del otro. Si quieres que el texto quede centrado verticalmente respecto a la imagen, puedes seleccionar Row en Dirección y Center en Alinear elementos.

Cómo combinar Justify content y Align items

No tienes que utilizar estas opciones por separado. De hecho, combinar la justificación y la alineación en Elementor te permite conseguir diseños más precisos.

Por ejemplo, si quieres colocar varios elementos en horizontal, centrarlos verticalmente y distribuirlos de manera uniforme, puedes seguir estos pasos:

1. Selecciona el contenedor.
2. En Dirección (Direction), elige Row.
3. En Alinear elementos (Align Iiems), selecciona Center para centrar los elementos verticalmente.
4. En Contenido justificado (Justify content), elige la distribución que necesites.

Prueba las diferentes combinaciones hasta encontrar la que mejor se adapte al diseño de tu página.

Espacio (hueco) entre elementos (Gap)

La opción Gap (Hueco) permite controlar la separación entre los elementos que contiene un contenedor.

Puedes introducir un valor en píxeles, porcentajes o unidades relativas al ancho de la ventana (VW). También puedes combinar este ajuste con las opciones de alineación y justificación para conseguir una distribución más precisa.

Por ejemplo, si tienes dos columnas de contenido y quieres que no queden pegadas, puedes utilizar Gap para crear una separación entre ellas.

Importante: el espacio añadido con Gap se suma al espacio que ocupan los elementos. Si utilizas porcentajes y el ancho total de los elementos más la separación supera el espacio disponible, el diseño puede desbordarse o los elementos pueden pasar a otra línea si has activado Wrap.

Imagina que quieres colocar dos elementos del 50 % de ancho. Si añades una separación del 5 %, el conjunto ocupará más del 100 % del espacio disponible. Para mantenerlos en una sola línea, podrías asignar un ancho del 47,5 % a cada elemento y dejar un 5 % de separación entre ambos.

En algunos diseños puede ser más conveniente utilizar el margen (margin) o el relleno (padding) en lugar de Gap.

Por defecto, Elementor establece una separación de 20 píxeles entre elementos, aunque puedes modificar este valor en Ajustes del sitio > Diseño (Site Settings > Layout). También puedes adaptar la separación a cada dispositivo.

Envoltura (Wrap)

La opción Wrap (Envoltura) permite que los elementos pasen a una nueva línea cuando no hay suficiente espacio para mantenerlos todos en la misma.

Sin este ajuste, los elementos pueden intentar permanecer en una sola línea, incluso cuando el espacio disponible es insuficiente. Con Wrap, puedes distribuirlos en varias líneas dentro del mismo contenedor.

Por ejemplo, puedes colocar un título ancho en la primera línea y varios elementos más pequeños debajo, sin tener que crear necesariamente contenedores adicionales para cada fila.

Esta opción resulta especialmente útil cuando quieres crear diseños flexibles que se adapten a diferentes tamaños de pantalla.

Alinear contenido (Align content)

La opción Align content (Alinear contenido) aparece cuando activas Wrap. Permite distribuir las diferentes líneas de elementos dentro del espacio disponible en el contenedor.

Encontrarás las mismas opciones de distribución que en Justify Content:

1. Flex start (Inicio): agrupa las líneas al principio.
2. Center (Centro): coloca las líneas en el centro.
3. Flex end (Fin): coloca las líneas al final.
4. Space between (Espacio intermedio): distribuyeel espacio entre las líneas.
5. Space around (Espacio alrededor): distribuye el espacio alrededor de las líneas.
6. Space evenly (Espacio uniforme): reparte el espacio de forma uniforme.

No debes confundir Align content con Align items. La primera opción organiza las líneas cuando hay varias; la segunda controla la alineación de los elementos dentro de una línea.

Opciones adicionales del contenedor en Elementor

Además de controlar las dimensiones y la distribución de los elementos, puedes configurar cómo se muestra el contenido que sobresale del contenedor y qué etiqueta HTML utiliza.

Desbordamiento (Overflow)

La opción Overflow (Desbordamiento) determina qué ocurre cuando el contenido supera el espacio disponible dentro de un contenedor.

Por ejemplo, puede suceder si una imagen es demasiado grande, si un elemento tiene unas dimensiones fijas o si varios elementos no caben en el espacio asignado.

En el desplegable encontrarás estas opciones:

• Default (Por defecto): permite que el contenido sobresalga del contenedor según el comportamiento predeterminado del diseño.
• Hidden (Oculto): oculta la parte del contenido que queda fuera de los límites del contenedor. Esa parte no estará accesible mediante el desplazamiento normal dentro del contenedor.
• Auto (Automático): permite generar barras de desplazamiento cuando sean necesarias para acceder al contenido que desborda.

La opción Auto puede ser útil para crear zonas de contenido desplazable, especialmente en dispositivos móviles, donde el usuario puede deslizar el dedo para consultar los elementos disponibles.

Consejo: utiliza Hidden con cuidado. Si un texto, una imagen o un botón queda fuera de los límites del contenedor, podrías ocultar una parte importante del contenido.

Etiqueta HTML (HTML Tag)

La opción HTML Tag (Etiqueta HTML) permite elegir la etiqueta que identifica el contenedor en el código de tu página web.

Aunque no necesites conocer programación para utilizar Elementor, esta configuración es importante porque las etiquetas HTML ayudan a los navegadores, a los buscadores y a las tecnologías de asistencia a interpretar la estructura del contenido.

Entre las etiquetas que puedes encontrar están:

• div: agrupa contenido sin asignarle un significado semántico específico.
• section: identifica una sección temática de la página.
• article: identifica contenido independiente, como un artículo.
• header: identifica la cabecera de una página o sección.
• footer: identifica el pie de una página o sección.
• main: identifica el contenido principal de la página.
• a: permite crear un enlace. Si quieres que todo el contenedor sea clicable, puedes utilizar esta etiqueta siguiendo la configuración correspondiente de Elementor.

La etiqueta más adecuada depende de la función que desempeñe el contenido. No es necesario utilizar etiquetas semánticas en todos los contenedores: en ocasiones, una etiqueta div es suficiente.

La etiqueta más adecuada depende de la función que desempeñe el contenido. No es necesario utilizar etiquetas semánticas en todos los contenedores: en ocasiones, una etiqueta div es suficiente.

¿Por qué es importante elegir bien la etiqueta HTML para el SEO?

La estructura HTML ayuda a los buscadores a interpretar la organización y el significado del contenido de tu web. Por eso, conviene utilizar etiquetas semánticas cuando corresponda, sin elegirlas únicamente por motivos estéticos.

Por ejemplo, si un contenedor agrupa el contenido principal de una sección temática, puede tener sentido utilizar section. Si agrupa un artículo independiente, puede ser más apropiado article.

No obstante, elegir una etiqueta HTML no garantiza por sí solo una mejor posición en Google. El posicionamiento SEO depende de muchos factores, entre ellos la calidad del contenido, la estructura de la página, la experiencia de usuario y otros aspectos técnicos.

También puedes adaptar la etiqueta HTML a diferentes dispositivos desde los controles responsive disponibles en Elementor.

Contenedores «modo responsive»

Junto a cada opción que lo permita, tendrás 3 iconos correspondientes a los distintos dispositivos, para que puedas configurar el aspecto de tu contenedor en cada uno de ellos:

FAQs sobre los contenedores de Elementor

Configura tus contenedores en Elementor sin complicarte

Ahora ya conoces las principales opciones de la pestaña Diseño de Elementor y sabes cómo utilizarlas para organizar los elementos de tu página web. Recuerda que no necesitas modificar todos los ajustes para conseguir un buen resultado. Empieza por elegir la dirección adecuada, ajusta el ancho del contenedor y utiliza las opciones de alineación y separación para ordenar el contenido. Por último, comprueba siempre cómo se ve tu página en ordenador, tableta y móvil. Un diseño bien organizado no solo mejora la apariencia de tu web, sino que también facilita la navegación de tus visitantes.

¿Necesitas ayuda con Elementor o con el diseño de tu web?

Si configurar los contenedores, adaptar tu página al móvil o conseguir que todos los elementos encajen correctamente te está llevando más tiempo del que esperabas, en Tu Web con Alegría podemos ayudarte. Tanto si necesitas mejorar tu web actual como si tu plan de mantenimiento se te ha quedado pequeño, podemos orientarte para que tengas una página funcional, bien organizada y preparada para crecer.

Deja de pelearte con tu web y dedícate a tu negocio. ¡Nosotras te ayudamos!