¿Quieres dejar más espacio entre dos contenedores en Elementor, pero sin añadir líneas, dibujos ni elementos decorativos? ¡Es muy sencillo! Puedes conseguirlo ajustando el margen de los contenedores o utilizando la opción de espacio entre elementos.
En este tutorial te explicamos cómo separar contenedores en Elementor en vertical y en horizontal, paso a paso y sin necesidad de conocimientos técnicos.
- Cómo añadir espacio vertical entre dos contenedores en Elementor
- Cómo separar contenedores en Elementor en horizontal
- Margen vs relleno en Elementor
- Cómo utilizar la opción Gap para separar elementos en Elementor
- Cómo comprobar la separación en móvil y tablet
- FAQs sobre cómo separar contenedores en Elementor
- Consigue más espacio entre contenedores sin complicarte
Cómo añadir espacio vertical entre dos contenedores en Elementor
Si tienes dos contenedores colocados uno debajo del otro, puedes separarlos añadiendo un margen superior al segundo contenedor.
De esta forma, conseguirás que haya más espacio entre ambos sin necesidad de insertar un separador ni ningún otro elemento.
Paso 1. Selecciona el contenedor que quieres separar
Abre la página que quieras editar con Elementor y haz clic en el contenedor inferior, es decir, el que quieres alejar del que tiene encima.
Comprueba que has seleccionado el contenedor completo y no solamente una imagen, un texto u otro elemento de su interior.
Paso 2. Accede a la pestaña Avanzado
En el panel de ajustes de Elementor, entra en la pestaña Avanzado.
Aquí encontrarás diferentes opciones para modificar el espacio, la posición y otros aspectos del contenedor.
Paso 3. Modifica el margen superior
Busca el apartado Margen (Margin). Verás varios campos para introducir valores correspondientes a los lados superior, derecho, inferior e izquierdo.
En el campo superior, introduce el espacio que quieras dejar entre los dos contenedores. Puedes empezar con 30 píxeles y ajustar el valor hasta conseguir el resultado que buscas.
Por ejemplo:
- 20 px: separación pequeña.
- 30 px: separación moderada.
- 40 px: separación más amplia.
¡Y listo! Los dos contenedores quedarán separados por un espacio vacío, sin rayas, dibujos ni elementos adicionales.
Paso 4. Elimina el separador si ya no lo necesitas
Si anteriormente habías añadido un separador para conseguir esa distancia, puedes eliminarlo.
Selecciona el elemento que contiene las rayas o el dibujo y pulsa la opción para eliminarlo. Después, comprueba que el espacio entre los contenedores sea el adecuado.
Cómo separar contenedores en Elementor en horizontal
¿Y si los contenedores están colocados uno al lado del otro? También puedes dejar espacio entre ellos sin añadir ningún elemento decorativo.
El procedimiento es prácticamente el mismo que en el caso anterior.
Paso 1. Selecciona el segundo contenedor
Haz clic en el contenedor que quieras desplazar para aumentar la distancia respecto al que tiene a su izquierda.
Paso 2. Entra en Avanzado y modifica el margen izquierdo
Accede a Avanzado → Margen (Margin) y modifica el campo izquierdo.
Por ejemplo, si introduces 30 px, crearás una separación exterior de 30 píxeles en ese lado.
Comprueba el resultado en la vista previa y ajusta la cantidad de espacio según tus preferencias.
Importante: si utilizas márgenes para separar elementos, ten en cuenta que pueden influir en la distribución de la página, especialmente cuando trabajas con columnas, filas o diseños adaptables.
Margen vs relleno en Elementor
Cuando accedes a los ajustes de un contenedor, encontrarás dos opciones que pueden parecer similares: margen y relleno. Sin embargo, cumplen funciones diferentes.
Qué es el margen (Margin)
El margen crea espacio exterior alrededor de un elemento. Por eso, es la opción más adecuada cuando quieres aumentar la distancia entre dos contenedores independientes.
Por ejemplo, si quieres que un contenedor quede más alejado del que tiene encima, puedes aumentar su margen superior.
Qué es el relleno (Padding)
El relleno, también conocido como padding, crea espacio dentro del contenedor, entre sus límites y el contenido que incluye.
Por ejemplo, si quieres que una imagen o un texto no queden demasiado cerca de los bordes de su contenedor, puedes aumentar el relleno.
✨En resumen, utiliza el margen para separar elementos y el relleno para dar más espacio interior.
Cómo utilizar la opción Gap para separar elementos en Elementor
Además del margen, recuerda que Elementor dispone de una opción llamada Gap, que permite controlar el espacio entre los elementos de una misma distribución.
Esta alternativa resulta especialmente útil cuando tienes varios contenedores organizados en una fila o una columna.
Dónde encontrar la opción Gap
- Selecciona el contenedor que agrupa los elementos.
- Accede a la pestaña Disposición (Layout).
- Busca el ajuste relacionado con Huecos (Gap) o el espacio entre elementos.
- Introduce la distancia que quieras aplicar.
Según la configuración y la versión de Elementor, puedes encontrar controles para ajustar la separación horizontal y vertical.
Cuándo es mejor utilizar Gap en lugar del margen
Utiliza Gap cuando quieras mantener una distancia uniforme entre varios elementos que comparten un mismo contenedor.
En cambio, si solamente quieres separar dos contenedores concretos, modificar el margen del segundo suele ser una solución más directa.
Cómo comprobar la separación en móvil y tablet
Si tu página web está adaptada a diferentes dispositivos, es importante comprobar que el espacio entre los contenedores también se vea bien en móviles y tabletas.
Ajusta el margen para cada dispositivo
Elementor permite configurar determinados valores de forma independiente para ordenador, tablet y móvil cuando el control correspondiente ofrece opciones adaptables.
Si has añadido 40 px de margen superior para ordenador, quizá prefieras reducirlo en móvil para evitar que el contenido quede demasiado separado.
Revisa la vista adaptable de Elementor y comprueba que el resultado sea visualmente equilibrado en todos los tamaños de pantalla.
FAQs sobre cómo separar contenedores en Elementor
Consigue más espacio entre contenedores sin complicarte
Como has visto, separar contenedores en Elementor sin utilizar separadores es muy sencillo. Solo tienes que elegir la opción que mejor se adapte a tu diseño.
Si quieres dejar espacio entre dos contenedores colocados uno debajo del otro, prueba con el margen superior del segundo. Si están uno al lado del otro, puedes utilizar el margen lateral. Y si necesitas mantener una separación uniforme entre varios elementos, Gap puede ser tu mejor aliado. Así conseguirás una página web más limpia, ordenada y agradable de navegar, sin necesidad de añadir elementos.
