Es fácil personalizar el espaciado en secciones, filas y módulos con las Opciones de Espaciado de Divi.

El espaciado es un elemento importante en el diseño web. Ayuda a organizar tu contenido y mantener las cosas claras y equilibradas.

Con Divi, es fácil personalizar el espaciado en Secciones, Filas, Columnas y Módulos con las Opciones de Espaciado de Divi.

En esta guía, revisaremos todas las opciones de espaciado disponibles dentro del Constructor Visual de Divi.

La Diferencia Entre Margen y Relleno

• Margen – Los márgenes controlan el espacio alrededor de un elemento

• Relleno – El relleno controla el espacio dentro de un elemento

En las Opciones de Espaciado de Divi, puedes ajustar ambos. Mientras mayor sea el número, más espacio habrá. Mientras menor sea el número, menos espacio habrá.

Cuándo Usar Márgenes

Ejemplos:

• Usa la opción de margen para añadir o crear espacio entre varias columnas en una fila.

• Usa la opción de margen para añadir o crear espacio entre varios módulos en una columna.

Cuándo Usar Relleno

Ejemplos:

• Añadir relleno a una fila crearía espacio alrededor de las columnas que contiene.

• Añadir relleno a una columna crearía espacio entre sus bordes y cualquier elemento que contenga.

Si quieres añadir espacio dentro de un elemento y crear más espacio entre el contenido del elemento y su borde, entonces usa relleno.

Cómo Añadir Margen y Relleno a Elementos con las Opciones de Espaciado de Divi

1. Abre la ventana de configuración del elemento haciendo clic en el ícono de engranaje.

2. Ve a la pestaña Diseño.

3. Despliega el grupo de ajustes de Espaciado.

Añadir Margen en Divi

Si quieres que los valores de arriba y abajo sean iguales, haz clic en el ícono de cadena entre ellos para enlazarlos.

Cómo enlazar valores de margen en las Opciones de Espaciado de Divi

Añadir Relleno en Divi

1. Abre la ventana de configuración del elemento haciendo clic en el ícono de engranaje.

2. Ve a la pestaña Diseño.

3. Despliega el grupo de ajustes de Espaciado.

4. Usa la opción de relleno para añadir o cambiar los valores predeterminados de relleno.

Como con el margen, para añadir relleno, escribe un valor numérico o usa las flechas hacia arriba y hacia abajo para ajustar el relleno hacia mayor o menor.

Si quieres que los valores de arriba y abajo sean iguales, haz clic en el ícono de cadena entre ellos para enlazarlos.

Ajustes Responsivos para Margen y Relleno en las Opciones de Espaciado de Divi

• Coloca el cursor sobre el texto de margen o relleno.

• Haz clic en el ícono de teléfono.

Aparecerán tres pestañas:

• Escritorio

• Tableta

• Teléfono

Navega entre ellas para establecer márgenes y rellenos específicos para cada tipo de dispositivo.

Por defecto, el espaciado móvil heredará lo que está configurado en la vista de escritorio. Sin embargo, con esta opción puedes establecer márgenes únicos para dispositivos móviles.

Comprendiendo el Espaciado Predeterminado de Divi

Para ajustar estos valores, navega a: Personalizador del Tema → Ajustes Generales → Configuración de Diseño

Ancho del Espacio entre Columnas

• Valor 1 – sin espacio (margen) entre columnas

• Valor 2 – 3% de margen derecho entre columnas

• Valor 3 – 5.5% de margen derecho entre columnas

• Valor 4 – 8% de margen derecho entre columnas

Nota: También puedes configurar el ancho del espacio de filas individualmente dentro de la configuración de cada fila.

Usar Ancho Personalizado para la Barra Lateral

Altura de la Sección

Puedes aumentar o disminuir este valor escribiendo un número o arrastrando el control deslizante. Esto aumentará o disminuirá la altura predeterminada de las secciones en Divi.

Altura de la Fila

Puedes aumentar o disminuir este valor escribiendo un número o arrastrando el control deslizante. Esto aumentará o disminuirá la altura predeterminada de las filas dentro de Divi.

Ajustes de Espaciado para Móviles Dentro del Personalizador del Tema

Arrastra el control deslizante o escribe un valor numérico para ajustar las configuraciones.

Usa Unidades de Medida CSS Adecuadas

• Unidades de longitud absolutas

• Unidades de longitud relativas

Unidades de longitud absolutas

La longitud absoluta es una unidad fija, por lo que no cambiará cuando se cambie el tamaño del navegador, ya que no es relativa a ningún otro elemento.

Unidades de longitud relativas

Rara vez, si acaso, deberías establecer el relleno horizontal en píxeles, a menos que planees ajustar ese ancho en todos los puntos de ruptura necesarios para todos los dispositivos móviles.

Esta no es una buena práctica en el diseño web responsivo.

Para aprender más sobre unidades de medida en diseño web, lee nuestra Guía para Comprender y Aplicar Unidades de Longitud CSS en Divi.

Usando Márgenes y Rellenos para Espacios en Blanco

El espacio en blanco se usa para equilibrar el diseño de una página y organizar el contenido de manera visualmente atractiva. Los márgenes y rellenos te ayudan a crear espacio entre elementos para que el diseño sea equilibrado y sin desorden.

Comprendiendo los Márgenes Negativos

Comprendiendo los márgenes negativos en las Opciones de Espaciado de Divi

Aunque esto puede ser útil en algunos casos, usar otros métodos (como posición o transformación de traslación) es una mejor práctica para posicionar elementos en la página.

Nota importante: Se debe evitar usar valores negativos para los márgenes a menos que tengas un buen conocimiento del impacto que estos valores pueden tener en tu diseño.

Continuar aprendiendo

5 maneras creativas de usar los controles integrados de márgenes y espacios de Divi