Las opciones de visibilidad de Divi te dan control sobre cuándo los elementos son visibles u ocultos.

Las opciones de visibilidad de Divi te dan control sobre cuándo los elementos son visibles u ocultos.

Esto es útil cuando deseas mostrar u ocultar cierto contenido según el dispositivo que esté utilizando tu visitante.

Dentro de las opciones de visibilidad de Divi, puedes mostrar u ocultar contenido según el tamaño del dispositivo en la ventana de visualización. También tienes la opción de controlar cómo se muestra el contenido desbordado.

Dentro de las opciones de visibilidad de Divi, encontrarás dos formas diferentes de ayudarte a tener control sobre cómo se ve y funciona tu diseño en todos los tamaños de pantalla.

Cómo acceder a las opciones de visibilidad

Dentro de la configuración del elemento

• Haz clic en el icono de engranaje para abrir la ventana emergente de configuración del elemento

• Ve a Avanzado → Visibilidad

• Puedes desactivar ese elemento en teléfono, tableta o escritorio haciendo clic en las casillas correspondientes

Clic derecho

Desactivar con clic derecho

Elementos desactivados se muestran con un 50% de opacidad
Cuando desactivas un elemento, se mostrará con un 50% de opacidad en el constructor visual cuando lo visualices en la ventana de visualización especificada.

Ejemplo: si eliges ocultar un elemento en una tableta, ese elemento tendrá un 50% de opacidad en la vista previa de tableta, pero 100% de opacidad en la vista previa de escritorio.

Cómo funcionan las opciones de visibilidad de Divi

Desactivar un elemento en un dispositivo
Puedes ocultar elementos en un dispositivo específico con las opciones de visibilidad de Divi. Esto es útil cuando un elemento de diseño se ve bien en escritorio pero no en dispositivos móviles.

En este caso, puedes usar las opciones de visibilidad de Divi para ocultar ese elemento en teléfonos y tabletas.

Para desactivar un elemento por dispositivo, haz clic en la casilla junto al dispositivo en el que deseas que el elemento esté desactivado.

Tamaños de ventana de dispositivo

• Escritorio – Dispositivos con un ancho de ventana de 981px o más

• Tableta – Dispositivos con un ancho de ventana entre 980px y 768px

• Teléfono – Dispositivos con un ancho de ventana menor a 767px

Configurar el desbordamiento de contenido de los elementos

Hay dos tipos de desbordamiento:

• Vertical (eje Y)

• Horizontal (eje X)

Dentro de las opciones de visibilidad de Divi, puedes elegir cómo se muestra el contenido desbordado.

Configurar la propiedad de desbordamiento determina qué ocurre con el contenido que se desborda (si se oculta o si aparece una barra de desplazamiento).

Consulta la ayuda visual a continuación para ver una demostración de las opciones de la propiedad de desbordamiento:

• Predeterminado

• Visible

• Desplazar

• Oculto

• Automático

Desbordamiento horizontal

Esto puede suceder cuando el elemento contenedor tiene un ancho o ancho máximo especificado que es demasiado pequeño para contener todo el contenido.

Configurar el desbordamiento horizontal de un elemento determina qué debería suceder si el contenido se desborda del contenedor en el eje X (eje horizontal).

• Predeterminado y Visible – El contenido desbordado no se recorta. Se mostrará fuera del contenedor del elemento.

• Desplazar – Aparecerá una barra de desplazamiento para el contenido desbordado.

• Oculto – El contenido desbordado se recorta y no es visible.

• Automático – Si el contenido se recorta, debería aparecer una barra de desplazamiento para ver el resto.

Ejemplo: el ejemplo a continuación muestra contenido de texto demasiado ancho para un elemento contenedor con un ancho máximo de 600px. Se muestran dos ejemplos de desbordamiento horizontal: oculto y desplazar.

Desbordamiento vertical

Esto puede ocurrir cuando el elemento contenedor tiene una altura o altura máxima especificada que es demasiado pequeña para contener todo el contenido.

Configurar el desbordamiento vertical de un elemento determina qué debería suceder si el contenido se desborda del contenedor en el eje Y (eje vertical).

• Predeterminado y Visible – El contenido desbordado no se recorta. Se mostrará fuera del contenedor del elemento.

• Desplazar – Aparecerá una barra de desplazamiento para el contenido desbordado.

• Oculto – El contenido desbordado se recorta y no es visible.

• Automático – Si el contenido se recorta, debería aparecer una barra de desplazamiento para ver el resto.

Ejemplo: la ilustración a continuación muestra un módulo de texto con una altura de 150px y un desbordamiento vertical configurado en desplazar. Aquí, puedes ver que el contenido es demasiado largo para la caja, por lo que aparece una barra de desplazamiento para mostrar el resto.

Consejos y buenas prácticas para usar las opciones de visibilidad de Divi

Simplifica el diseño móvil

Los elementos pueden aplastarse, volverse demasiado pequeños y no renderizarse bien. Simplificar tu diseño para dispositivos móviles es fácil con las opciones de visibilidad de Divi.

Consulta el ejemplo a continuación. Aquí, tenemos una sección diseñada con dos imágenes y un cuerpo de texto debajo.

En dispositivos móviles, apilar dos imágenes una sobre otra no es necesario y ocupa demasiado espacio visual en pantallas pequeñas.

Desactivar una imagen para que no se muestre en móviles ofrece una versión simplificada de tu diseño que se ve genial en estos dispositivos.

Sigue aprendiendo

• Cómo revelar imágenes usando cuadrículas horizontales al pasar el cursor y desbordamiento oculto con Divi

• Cómo crear un contenedor de desplazamiento para tu módulo de comentarios de Divi

• 3 formas útiles de usar las opciones de desbordamiento en Divi

• Cómo revelar imágenes usando cuadrículas horizontales al pasar el cursor y desbordamiento oculto con Divi