3 formas útiles de utilizar las opciones de desbordamiento en Divi

Las opciones de desbordamiento integradas de Divi hacen que sea muy sencillo agregar propiedades css de desbordamiento (es decir, visible, oculto, desplazamiento) a cualquier elemento de la página. Esto es útil para crear diseños únicos y contenido desplazable con facilidad. En esta publicación, voy a repasar lo que realmente hacen estas opciones de desbordamiento. Y analizaré tres formas útiles de utilizar el desbordamiento en su propio sitio Divi.

Empecemos.

Comprensión de las opciones de desbordamiento de Divi

Las opciones de desbordamiento de Divi le permiten establecer la propiedad de desbordamiento css de un elemento en uno de los siguientes valores:

1. Predeterminado: el valor predeterminado es visible (ver más abajo).
2. Visible: el contenido desbordado permanecerá visible y no se recortará cuando se extienda fuera de la caja. Dado que esta es la configuración predeterminada en Divi, rara vez necesitará seleccionarla.
3. Desplazamiento: el contenido desbordado se ocultará, pero los usuarios podrán desplazarse por el contenido oculto de forma vertical u horizontal.
4. Oculto: el contenido desbordado fuera del cuadro se ocultará (sin la capacidad de desplazarse)
5. Automático: esta opción activará la función de desplazamiento siempre que sea necesario (es decir, el contenido se extiende más allá del cuadro). Esto sería útil para diseños con una altura o un ancho establecidos que necesitan tener capacidades de desplazamiento en navegadores más pequeños.

Divi tiene una opción de desbordamiento tanto para desbordamiento horizontal como vertical, lo que le permite establecer diferentes valores de propiedad para cada uno. Esto resulta útil cuando desea agregar la funcionalidad de desplazamiento vertical a un elemento, pero no desea que una barra de desplazamiento también aparezca horizontalmente.

Aquí hay algunas ilustraciones rápidas tomadas de los diseños de este tutorial para ayudarlo a comprender cómo funcionan las opciones de desbordamiento.

Desbordamiento visible (predeterminado)

En este ejemplo, el contenido que se ha colocado fuera del contenedor de filas permanece visible, que es la configuración predeterminada para todos los elementos en Divi.

Desbordamiento oculto

Una vez que agrega la propiedad oculta de desbordamiento a la fila, el contenido fuera del cuadro se recorta y se oculta a la vista por completo.

Desplazamiento de desbordamiento

El uso de desplazamiento de desbordamiento le permite ocultar el contenido fuera del contenedor de la caja (al igual que el desbordamiento oculto). La principal diferencia es que aparece una barra de desplazamiento que permite al usuario desplazarse por el contenido que existe más allá de los límites del contenedor.

Por ejemplo, aquí hay un módulo de texto con una altura de 400 px. El contenido del módulo de texto se extiende más allá del módulo de texto, pero permanece visible de forma predeterminada.

Pero una vez que agrega la propiedad de desplazamiento de desbordamiento vertical al módulo de texto, aparece la barra de desplazamiento que permite al usuario desplazarse por el contenido oculto.

Ahora que comprende un poco mejor las opciones de desbordamiento, profundicemos en la creación de algunos ejemplos prácticos de formas útiles de usarlas en la vida real.

Suscríbete a nuestro canal de Youtube

3 formas útiles de utilizar las opciones de desbordamiento de Divi en Divi

# 1 Uso de Overflow Hidden para recortar contenido desbordado para diseños únicos

Para comprender cómo usar la propiedad oculta de desbordamiento, crearemos un diseño de ejemplo rápido con texto desbordado y una imagen desbordante. Luego veremos cómo cambia el diseño al configurar nuestra fila para que se desborde oculta.

Primero, cree una sección regular con una fila de una columna. Antes de comenzar a agregar módulos, démosle a la sección el siguiente relleno:

Acolchado personalizado: 12vw superior, 12vw inferior

Luego actualice la configuración de la fila de la siguiente manera:

Ancho: 80vw
Ancho máximo: 80vw
Relleno: 0px arriba, 0px abajo
Box Shadow: ver captura de pantalla
Fuerza de desenfoque de sombra de caja: 80px

Luego agregue un módulo de texto a la fila y actualice la siguiente configuración del módulo de texto:

Primero agregue un encabezado h2 en el cuadro de contenido de la siguiente manera:

<h2>Overflow</h2>

Luego actualice la configuración de diseño de la siguiente manera:

Fuente del encabezado 2: Lato
Peso de fuente del encabezado 2: Negrita
Estilo de fuente del título 2: TT
Alineación del texto del encabezado 2: centro
Color del texto del encabezado 2: #dddddd
Tamaño del texto del encabezado 2: 15vw
Encabezado 2 espaciado de letras: 0.1em
Sombra de texto del encabezado 2: ver captura de pantalla
Color de la sombra del texto del encabezado 2: rgba (0,0,0,0.05)

Ahora, para hacer que el texto desborde el área de contenido de la fila, necesitamos usar márgenes personalizados. Agregue el siguiente margen personalizado al módulo de texto para que se desborde por encima de la fila (verticalmente) y en cada lado de la fila (horizontalmente).

Margen: -6vw arriba, -10vw a la izquierda, -10vw a la derecha

A continuación, agregue otro módulo de texto debajo del que acaba de crear y actualice lo siguiente:

Contenido:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(Por cierto, los fragmentos de código como este son una excelente manera de aprovechar la opción de desplazamiento de desbordamiento).

Fuente de texto: Lato
Alineación del texto del texto: derecha
Texto Tamaño del texto: 24px (escritorio), 16px (teléfono)
Altura de la línea de texto: 1.3em
Ancho máximo: 50%
Alineación del módulo: derecha
Acolchado: 4vw derecho

Ahora, agreguemos una imagen que se desborde fuera de la fila. Cree un nuevo módulo de imagen debajo de los dos módulos de texto y luego cargue una imagen de su elección.

Luego actualice la configuración de la imagen de la siguiente manera:

Ancho máximo: 35vw
Margen: -12vw superior, -8vw inferior, -5vw izquierdo
Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: -40px
Posición vertical de la sombra del cuadro: -50px
Color de sombra: rgba (0,0,0,0.17)

Diseño con Fila establecida en Desbordamiento visible (predeterminado)

Ahora echemos un vistazo al diseño que mantiene nuestro desbordamiento de filas configurado como visible (el valor predeterminado).

Como puede ver, estas opciones visibles de desbordamiento predeterminadas son excelentes para crear algunos diseños hermosos y modernos.

Diseño con Fila establecida en Desbordamiento oculto

Ahora veamos qué sucede cuando usamos la propiedad Overflow Hidden para la fila. Abra la configuración de la fila y actualice lo siguiente:

Desbordamiento horizontal: oculto
Desbordamiento vertical: oculto

Aquí está el resultado.

Como puede ver, el contenido desbordado (el encabezado superior y la imagen) ahora está recortado y oculto para crear un diseño único. Y con esta configuración, puede aprovechar fácilmente las opciones de transformación para escalar y mover los elementos para obtener el diseño perfecto.

# 2 Uso de Overflow Scroll para permitir a los usuarios desplazarse por el contenido verticalmente

El siguiente ejemplo presenta el desplazamiento de desbordamiento vertical. Esta opción de desbordamiento es útil para agregar contenido desplazable a listas de enlaces o recursos. Puede convertir cualquier módulo o fila en un contenedor para contenido desplazable. He aquí cómo hacerlo con un módulo de texto.

Cree una sección regular con una fila de una columna. Luego agregue un módulo de texto con el siguiente contenido:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

Luego actualice la configuración de diseño del módulo de texto de la siguiente manera:

Fuente de texto: Lato

Color del texto del enlace: # 333333
Tamaño del texto del enlace: 18px

Color de texto de lista ordenada:
Tamaño del texto de la lista ordenada: 20px
Altura de la línea de lista ordenada: 1.8em
Tipo de estilo de lista ordenada: decimal-inicial-cero

Peso de la fuente del encabezado 3: Ultra Bold
Tamaño del texto del encabezado 3: 50px
Ancho máximo: 500px
Relleno: 3% arriba, 3% abajo, 8% izquierda, 8% derecha

Así es como se ve el módulo de texto antes de dar un desplazamiento de altura y desbordamiento.

Ahora, actualice el módulo de texto con una altura máxima de 400px. Dado que el valor de desbordamiento predeterminado para el módulo de texto es visible, notará que el texto se desborda debajo del módulo.

Todo lo que tenemos que hacer ahora es configurar el desbordamiento vertical para que se desplace de la siguiente manera:

Desbordamiento vertical: desplazamiento

Aquí está el diseño final.

Para obtener más ejemplos sobre cómo usar el desplazamiento de desbordamiento vertical en su sitio Divi, consulte estas publicaciones:

• Cómo crear una maqueta de galería de desplazamiento con las nuevas opciones de desbordamiento de Divi
• Cómo diseñar un área de widget de publicaciones recientes desplazables en Divi

# 3 Uso de Overflow Scroll para permitir a los usuarios desplazarse horizontalmente por el contenido

Usar el desplazamiento de desbordamiento para el desplazamiento horizontal es otra forma de mantener su contenido accesible desde una ubicación concisa. Además, también es una excelente manera de incorporar la funcionalidad de deslizamiento lateral en dispositivos móviles sin un complemento.

Para mostrarte cómo hacerlo, vamos a crear un ejemplo rápido juntos.

Primero, cree una sección regular con una fila de una columna.

Luego agregue un módulo de propaganda a la fila.

Puede reemplazar la imagen predeterminada con una nueva imagen o icono. Luego actualice la configuración de diseño con algunos ajustes:

Alineación de texto: centro
Fuente del título: Lato
Peso de la fuente del título: Pesado
Relleno: 3% a la izquierda, 3% a la derecha

Duplique el módulo de propaganda 5 veces para que tenga un total de 6 anuncios en la columna de su fila.

Luego actualice la configuración de la fila con el siguiente CSS personalizado para el elemento principal de la columna.

display: grid;
grid-template-columns: repeat(6, 50%);

Esto le dará a su columna de anuncios en un diseño de cuadrícula horizontal con 6 columnas cada una con un ancho que es el 50% del contenedor (o en este caso la fila). Esto significa que dos anuncios / columnas ocuparán el espacio dentro de la fila. Los otros 4 módulos se extenderán fuera de la fila hacia el lado derecho. Aquí es donde la propiedad de desplazamiento de desbordamiento resulta útil. Actualice la siguiente opción de desbordamiento:

Desbordamiento horizontal: desplazamiento

Ahora puede ajustar el ancho de la fila según sea necesario y los dos borrones siempre se alinearán bien. Aquí está el diseño final.

Agregué una sombra de cuadro a la fila para que pueda ver el cuadro de contenido un poco mejor. Observe cómo se mostrarán inicialmente dos anuncios publicitarios hasta que el usuario se desplace hacia la derecha.

Para obtener más información, consulte la publicación completa sobre la creación de tarjetas deslizantes horizontales.

Pensamientos finales

La superposición de elementos y elementos de posicionamiento fuera del diseño de cuadrícula típico se está volviendo más común en estos días. En su mayoría, esto se hace únicamente con fines de diseño. Comprender cómo usar las opciones de desbordamiento de Divi lo ayudará a comprender cómo ocultar o mostrar contenido fuera de un contenedor para crear estos diseños únicos. Y, comprender el desplazamiento de desbordamiento también será útil para agregar contenido desplazable a su sitio web.

Espero que este artículo haya ayudado a arrojar algo de luz sobre la propiedad de desbordamiento y cómo puede usarla para su próximo proyecto Divi.

Espero tener noticias tuyas en los comentarios.

¡Salud!