Las Opciones de Tamaño de Divi facilitan el ajuste del tamaño de secciones, filas, columnas y módulos en Divi.

Las Opciones de Tamaño de Divi hacen que ajustar el tamaño de secciones, filas, columnas y módulos sea sencillo.

El tamaño es una parte esencial en la creación de sitios web atractivos.

Ajustar el alto y el ancho de los elementos en Divi es fácil gracias a sus Opciones de Tamaño, lo que permite mantener tu sitio web organizado, equilibrado y adaptable a diferentes dispositivos.

Términos y definiciones sobre tamaño

Antes de profundizar, definamos algunos de estos términos para saber con qué estamos trabajando.

Dónde encontrar las Opciones de Configuración de Divi

• Ancho: define el ancho real de un elemento.
  Si se establece en 100 %, el elemento será tan ancho como lo permita su contenedor.

• Recomendación: se recomienda usar valores en % al establecer el ancho para que se adapte automáticamente cuando cambia el tamaño de la ventana del navegador.
  Cuanto mayor sea el porcentaje, más ancho será el elemento; cuanto menor sea, más estrecho será.

• Ancho máximo: define el ancho absoluto máximo permitido para un elemento.
  Por ejemplo, si el ancho está en 100 % y el ancho máximo está en 80 %, el elemento solo alcanzará el 80 % porque el ancho máximo tiene prioridad sobre el ancho.

• Alto: define la altura real del elemento.
  Recomendación: se recomienda establecer la altura en píxeles (px) para que los elementos mantengan su altura al cambiar el tamaño de la ventana del navegador y sigan siendo compatibles con dispositivos móviles.

• Altura mínima: define la altura mínima de un elemento.
  La altura del elemento no será menor que la altura mínima establecida. Esta tiene prioridad sobre el valor de altura.

  Ejemplo: si la altura está en 200 px y la altura mínima está en 300 px, entonces el elemento tendrá al menos 300 px de alto.

• Altura máxima: define la altura máxima absoluta permitida para un elemento.
  Ejemplo: si la altura está en 200 px y la altura máxima está en 150 px, el elemento solo alcanzará los 150 px porque la altura máxima tiene prioridad sobre el valor de altura.

• Alineación: define la posición del elemento de diseño que estás editando. Puedes alinear los elementos:

  • A la izquierda

  • Al centro

  • A la derecha

  Nota: Hay algunas opciones más de ancho y altura disponibles dentro de las secciones especiales. Esas opciones se describen con más detalle en la sección sobre Tamaño de Secciones Especiales de esta guía.

Tamaño predeterminado en Divi

Por defecto:

• Secciones: están configuradas al 100 % de ancho y abarcan toda la pantalla.

• Filas: tienen un ancho del 80 % por defecto.

• Columnas: tienen un ancho del 100 %.

• Módulos: tienen un ancho del 100 % por defecto para llenar completamente el contenedor de la fila.

Estas opciones de tamaño predeterminadas se mantienen igual para dispositivos móviles, haciendo que tu diseño sea adaptable.

Unidades de longitud usadas para tamaño

Las unidades de longitud son letras o símbolos pequeños que siguen a un valor numérico (10px, 2em, 100 %, etc.) para establecer la longitud de un elemento.

Las unidades de longitud se dividen generalmente en dos categorías principales:

• Absolutas

• Relativas

Unidades de longitud absolutas
Se consideran absolutas porque no dependen de ningún otro elemento.

Estas unidades no se adaptan al tamaño del navegador y permanecen del mismo tamaño.

Incluyen las siguientes:

• pt – puntos

• px – píxeles

• in – pulgadas

• cm – centímetros

• mm – milímetros

• pc – picas

Nota importante: los píxeles son la única unidad de longitud absoluta que se recomienda usar en la web.

Las demás se utilizan principalmente para medidas físicas (no digitales), como en impresión.

Una unidad de píxel se refiere al tamaño de un punto en la pantalla del dispositivo (que puede variar ligeramente entre dispositivos).

Por eso, los píxeles se utilizan comúnmente para elementos que no necesitan escalar con el tamaño del navegador.

Unidades de longitud relativas

Un ejemplo común es el porcentaje, que depende del tamaño del elemento padre.

• em – relativo al tamaño de fuente del propio elemento

• rem – relativo al tamaño de fuente del elemento raíz

• vw – relativo al 1 % del ancho de la ventana del navegador

• vmin – relativo al 1 % de la dimensión más pequeña del navegador (alto o ancho)

• vmax – relativo al 1 % de la dimensión más grande del navegador (alto o ancho)

• % – relativo a 1/100 del ancho del elemento padre

Unidades de longitud sugeridas

• Ancho: %, vw y px (como ancho máximo)

• Alto: %, vw y px (como alto máximo)

• Márgenes: px, % y vw

• Rellenos: px, %, em, vw y vh

Guía para comprender y aplicar unidades de longitud en hojas de estilo con Divi

Cómo ajustar el tamaño en Divi

• A través del grupo de configuraciones del elemento

• Usando los controles de arrastre en el constructor visual

Valores de entrada y control deslizante

• Abre la configuración del elemento haciendo clic en el ícono de engranaje

• Navega a la pestaña Diseño

• Haz clic en el grupo de opciones Tamaño para expandirlo

• Ingresa un valor numérico o usa el control deslizante

Controles de tamaño arrastrables en Divi

En lugar de abrir manualmente un panel de configuración y escribir valores, puedes simplemente arrastrar para ajustar los elementos en la página y ver los resultados al instante.

Esta innovación en la interfaz te permite ajustar fácilmente el ancho, alto, margen y relleno de cualquier módulo, fila o sección. Aprende más sobre los controles arrastrables aquí.

Tamaño de secciones, filas y módulos

Opciones de Tamaño de Sección

• Ancho

• Ancho máximo

• Alineación de la sección

• Altura mínima

• Altura

• Altura máxima

Puedes arrastrar el control deslizante o ingresar valores numéricos en el campo correspondiente para editar estos valores.

---

Para establecer estilos móviles, coloca el cursor sobre el valor que deseas cambiar y haz clic en el icono del teléfono, activando las Configuraciones Responsivas de Divi.

Aparecerán tres pestañas:

• Escritorio

• Tableta

• Teléfono

Navega entre ellas para establecer valores específicos.

Por defecto, el tamaño móvil hereda lo establecido en la vista de escritorio; sin embargo, con esta opción puedes definir valores únicos para móvil.

Opciones de tamaño de ancho completo

• Ancho del contenido: los elementos se extienden al ancho completo del elemento padre, pero en secciones de ancho completo puedes ajustar el ancho del contenido interno.

• Ancho máximo del contenido: al establecer un ancho máximo, el contenido interno nunca superará el valor que especifiques.
  

• Igualar alturas de columna: obliga a todas las columnas a asumir la altura de la columna más alta de la fila, manteniendo una apariencia uniforme.

• Usar ancho de canal personalizado: el espacio entre columnas (canal) puede ajustarse mediante un valor numérico o deslizador en porcentaje:

  • Valor 1 – sin espacio entre columnas

  • Valor 2 – 3 % de espacio

  • Valor 3 (predeterminado) – 5,5 % de espacio

  • Valor 4 – 8 % de espacio

• Ancho interior: por defecto, los elementos se extienden al ancho completo del padre, pero aquí puedes ajustar el ancho del contenido interno.

• Ancho máximo interior: estableciendo un ancho máximo, el contenido interno nunca superará el valor indicado.
  

• Igualar alturas de columna (mismo comportamiento que en sección especial).

• Usar ancho de canal personalizado, con los mismos valores (%) que en sección especial.
  

Hay dos formas:

1. Coloca el cursor sobre la fila y haz clic en el icono de engranaje para abrir ajustes, luego cambia la estructura de columnas desde el menú desplegable. También puedes arrastrar y soltar los elementos de columna para reordenarlos.

2. Coloca el cursor sobre la fila, haz clic en el icono de columnas y selecciona la estructura deseada.

Opciones de tamaño de módulo

• Ancho

• Ancho máximo

• Alineación de sección

• Altura mínima

• Altura

• Altura máxima

Puedes usar el control deslizante o ingresar valores numéricos.

Para establecer estilos móviles, coloca el cursor sobre el valor deseado y haz clic en el icono del teléfono, habilitando las configuraciones responsive. Aparecerán las pestañas Escritorio, Tableta y Teléfono para definir valores específicos. Por defecto, el tamaño móvil hereda los valores del escritorio, pero con esta opción puedes establecer valores únicos para móvil.

Consejos y mejores prácticas para usar Opciones de Tamaño

• Usa unidades relativas para el ancho  Para mantener diseños adaptables en móviles, es mejor usar unidades relativas como % o vw para los valores de ancho. Esto permite que el ancho del contenedor se ajuste automáticamente según la ventana del navegador.

• Ten en cuenta el espaciado al ajustar tamaños
  El espaciado (relleno) influye en el tamaño del contenido interno. Por ejemplo, si un contenedor tiene ancho del 100 % y contiene relleno, el contenido real será menor.

• Ajusta las opciones de tamaño para móvil
  Aunque Divi está diseñado para ser responsive, es buena idea revisar tu diseño en móviles. Activa el constructor visual, haz clic en el icono de móvil en la esquina inferior izquierda de la barra de Divi y cambia de dispositivo mediante el menú desplegable superior.

• Cómo crear un formulario de contacto emergente fijo en la esquina usando Opciones de Tamaño

• Cómo optimizar el tamaño del logotipo en móviles en el módulo de menú ancho completo

• Cómo crear secciones con efecto al pasar el ratón usando nuevas opciones de tamaño y desbordamiento

• Usar las nuevas opciones de altura y ancho para crear diseño responsive

• Mejores prácticas de diseño móvil: cómo usar vw, vh y rem para páginas fluidas en Divi