Divi y sus opciones de desbordamiento integradas 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, explicaré tres formas útiles de usar el desbordamiento en su propio sitio Divi.
Empecemos.
Las opciones de desbordamiento de Divi te permiten establecer la propiedad de desbordamiento de css de un elemento en uno de los siguientes valores:
- Predeterminado: el valor predeterminado es visible (ver más abajo).
- 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.
- Desplazamiento: el contenido desbordado se ocultará, pero los usuarios podrán desplazarse por el contenido oculto, ya sea vertical u horizontalmente.
- Oculto: el contenido desbordado fuera del cuadro se ocultará (sin la capacidad de desplazarse)
- Automático: esta opción activará la funcionalidad de desplazamiento cuando sea necesario (es decir, el contenido se extiende más allá del cuadro). Esto sería útil para los 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 el desbordamiento horizontal como para el vertical que le permite establecer diferentes valores de propiedad para cada uno. Esto es útil cuando desea agregar la funcionalidad de desplazamiento vertical a un elemento, pero no desea que una barra de desplazamiento aparezca también horizontalmente.
Aquí hay algunas ilustraciones rápidas tomadas de los diseños en este tutorial para ayudarlo a comprender cómo funcionan las opciones de desbordamiento.
Desbordamiento visible (predeterminado)
En este ejemplo, el contenido que se colocó fuera del contenedor de filas permanece visible, que es la configuración predeterminada para todos los elementos en Divi.
Una vez que agrega la propiedad oculta de desbordamiento a la fila, el contenido fuera del cuadro se recorta y se oculta por completo.
Pergamino de desbordamiento
El uso del 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 usar las opciones de desbordamiento de Divi en Divi
Para comprender cómo usar la propiedad oculta de desbordamiento, vamos a crear un diseño de ejemplo rápido con texto desbordado y una imagen desbordada. 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, proporcionemos a la sección el siguiente relleno:
Acolchado personalizado: 12vw arriba, 12vw abajo
Luego actualice la configuración de la fila de la siguiente manera:
Ancho: 80vw
Ancho máximo: 80vw
Relleno: 0px arriba, 0px abajo
Sombra de cuadro: ver captura de pantalla
Fuerza de desenfoque de sombra de cuadro: 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:
|
01
|
<h2>Overflow</h2> |
Luego actualice la configuración de diseño de la siguiente manera:
Fuente del encabezado 2: Lato
Peso de la fuente del encabezado 2: Negrita
Estilo de fuente del encabezado 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
Espaciado entre letras del encabezado 2: 0.1em
Sombra del texto del encabezado 2: ver captura de pantalla
Título 2 Color de sombra de texto: rgba(0,0,0,0.05)
Ahora, para que el texto desborde el área de contenido de la fila, debemos usar márgenes personalizados. Agregue el siguiente margen personalizado al módulo de texto para que se desborde sobre la fila (verticalmente) y en cada lado de la fila (horizontalmente).
Margen: -6vw arriba, -10vw izquierda, -10vw derecha
A continuación, agregue otro módulo de texto debajo del que acaba de crear y actualice lo siguiente:
Contenido:
|
01
02
|
<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:
Texto Lato Alineación de texto: derecha
Tamaño de texto de texto: 24 px (escritorio), 16 px (teléfono)
Altura de línea de texto: 1,3 em
Ancho máximo: 50 %
Alineación de módulo: derecha
Relleno: 4vw derecha
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 arriba, -8vw abajo, -5vw izquierda
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: -40px
Posición vertical de sombra de cuadro: -50px
Color de sombra: rgba(0,0,0,0.17)
Diseño con Fila establecida en Desbordamiento visible (predeterminado)
Ahora veamos el diseño manteniendo nuestro desbordamiento de fila 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 desbordante (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.
N.º 2 Uso del desplazamiento de desbordamiento para permitir que los usuarios se desplacen verticalmente por el contenido
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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
|
<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 del texto: Lato
Color del texto del enlace: #333333
Tamaño del texto del enlace: 18px
Color de texto de lista ordenada:
Tamaño de texto de lista ordenada: 20px
Altura de línea de lista ordenada: 1.8em
Tipo de estilo de lista ordenada: cero decimal
Encabezado 3 Peso de fuente: Ultra Negrita
Encabezado 3 Tamaño de texto: 50 px
Ancho máximo: 500 px
Relleno: 3 % arriba, 3 % abajo, 8 % a la izquierda, 8 % a la 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 400 px. Dado que el valor de desbordamiento predeterminado para el módulo de texto está visible, notará que el texto se desborda debajo del módulo.
Todo lo que tenemos que hacer ahora es configurar el desbordamiento vertical para desplazarse 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 desplazable en Divi
#3 Usar Desbordamiento de Desplazamiento para Permitir a los Usuarios Desplazarse por el Contenido Horizontalmente
Usar el desplazamiento de desbordamiento para el desplazamiento horizontal es otra forma de mantener el 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 mostrarle cómo hacerlo, vamos a construir juntos un ejemplo rápido.
Primero, cree una sección regular con una fila de una columna.
Luego agregue un módulo de publicidad 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 del texto: Centro
Fuente del título: Lato
Peso de la fuente del título:
Relleno grueso: 3 % a la izquierda, 3 % a la derecha
Duplique el módulo de publicidad 5 veces para que tenga un total de 6 publicidades en su columna de fila.
Luego, actualice la configuración de la fila con el siguiente CSS personalizado en el elemento principal de la columna.
|
01
02
|
display: grid;grid-template-columns: repeat(6, 50%); |
Esto le dará a su columna de anuncios publicitarios 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 notas publicitarias/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 anuncios publicitarios siempre se alinearán bien. Aquí está el diseño final.
Agregué una sombra de cuadro a la fila para que pueda ver un poco mejor el cuadro de contenido. 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 magnéticas horizontales .
Pensamientos finales
Los elementos superpuestos y los elementos de posicionamiento fuera del diseño de cuadrícula típico se están volviendo más comunes en estos días. En su mayoría, esto se hace puramente 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 desbordado 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 escuchar de usted en los comentarios.
¡Salud!