Agregar un efecto de desplazamiento de expansión a su diseño de cuadrícula es una forma única de atraer a su audiencia para que interactúe con el contenido de su página. La idea es comenzar con una pantalla compacta de su cuadrícula y luego expandir esa cuadrícula para traer el contenido de la cuadrícula al frente cuando un usuario pasa el cursor sobre el elemento en Divi . Esto es excelente para expandir una galería de imágenes para mostrar una galería más grande (con imágenes más grandes) al pasar el mouse por encima. Y también podría expandir un grupo de anuncios publicitarios para atraer a los visitantes a explorar sus servicios.
Empecemos.
Aquí hay un adelanto de los ejemplos de efectos de desplazamiento de expansión que cubriré en este tutorial.
Empezando
Para este tutorial, todo lo que realmente necesitas es Divi. También utilizaremos el diseño prefabricado de la página Acerca de de la agencia de diseño disponible en Divi Builder para iniciar el diseño.
Para comenzar, cree una nueva página, asigne un título a su página y haga clic para usar Divi Builder. A continuación, seleccione la opción para elegir un diseño prefabricado. Desde la carga desde la ventana emergente de la biblioteca, seleccione el paquete de diseño de la agencia de diseño y luego haga clic para usar la página Acerca de de la agencia de diseño.
Una vez que el diseño se haya cargado en la página, publíquelo. Para este tutorial, usaré el constructor Divi en la interfaz. Para hacer esto, todo lo que necesita hacer es hacer clic en el botón «Crear en el front-end» en la parte superior del editor de la página del back-end.
¡Ahora estás listo para comenzar!
Expansión de Blurbs en Hover
Para este primer ejemplo, le mostraré cómo expandir los anuncios publicitarios en la segunda sección de este diseño que muestran los servicios ofrecidos.
Mover los módulos de Blurb para ocupar solo una fila
Actualmente, la sección se compone de dos filas de tres columnas con una nota publicitaria en cada columna.
Dado que agregaremos nuestro efecto de desplazamiento a una sola fila, debemos mover los anuncios de la fila inferior a la fila superior. Asegúrese de que cada columna en la fila superior tenga dos anuncios publicitarios.
Luego elimine la fila inferior vacía.
Personalización de los módulos de Blurb
A continuación, vamos a usar Multiselect para seleccionar los seis anuncios publicitarios para que podamos aplicar el mismo diseño a todos ellos simultáneamente. Para hacer eso, mantenga presionada la tecla ctrl (o cmd) y haga clic en cada uno de los módulos publicitarios hasta que todos estén seleccionados. Luego haga clic en el ícono de configuración en uno de los anuncios publicitarios para abrir el modal de configuración de elementos.
Continúe y elimine el contenido que se encuentra en el cuadro de contenido y luego actualice la configuración de diseño de la siguiente manera:
Tamaño del texto del título 16 px
Ancho: 150 px
Alineación del módulo: centro
Relleno personalizado: 10 px arriba, abajo por defecto, izquierda por defecto, derecha por defecto
Dar a los módulos un ancho personalizado de 150 px mantiene el texto del título bloqueado en su lugar cuando expandimos la fila.
Guarde los cambios y haga clic fuera de la selección múltiple.
Haz que la publicidad central sea más pronunciada
A continuación, abra la configuración del módulo de publicidad para la publicidad superior en la segunda columna titulada «Identidad de marca». Luego actualice lo siguiente:
Tamaño de fuente del icono: 120 px
Tamaño del texto del título: 18 px (predeterminado)
Esto simplemente hace que la publicidad central sea más pronunciada como la pieza central desde la cual las otras publicidades se expandirán hacia afuera.
Personalización de la fila para expandir al pasar el mouse
Para expandir nuestros módulos al pasar el mouse, ajustaremos el tamaño y el espaciado de la fila. Abra la configuración de la fila y actualice lo siguiente:
Ancho personalizado: 750 px
Ancho de medianil: 4
Relleno personalizado (predeterminado): 150 px a la izquierda, 150 px a la derecha
Relleno personalizado (pasar el cursor): 0 px a la izquierda, 0 px a la derecha
Relleno personalizado (tableta): 0 px a la izquierda, 0 px a la derecha
El cambio en los valores de relleno al pasar el mouse es lo que crea el efecto de expansión al pasar el mouse. La fila se expandirá 150 px a la derecha y 150 px a la izquierda.
Mira el resultado final.
Hacer una cuadrícula circular
Si desea crear un diseño de cuadrícula circular que se expanda, todo lo que necesita son algunos ajustes menores.
Primero duplique uno de los anuncios exteriores y arrástrelo sobre el anuncio grande de la segunda columna. Luego, elimine el texto del título en la publicidad central con el ícono grande.
Para alinear verticalmente los anuncios publicitarios, puede agregar un pequeño fragmento de CSS personalizado. Abra la configuración de la fila y agregue el siguiente CSS personalizado al elemento principal:
|
01
|
align-items: center; |
Ahora mira el resultado.
Expandiendo la Cuadrícula a la Derecha
También puede optar por expandir la cuadrícula hacia la izquierda o hacia la derecha. Simplemente organice sus módulos y luego actualice el relleno personalizado de su fila. Por ejemplo, si desea expandir el contenido a la derecha, establezca su relleno personalizado predeterminado en 0 px a la izquierda y 300 px a la derecha.
Cómo se ve en el móvil
Esto es a lo que se recurrirá el diseño en tabletas y teléfonos inteligentes. El efecto de desplazamiento de expansión tampoco estará activo en dispositivos móviles.
Adición de un efecto de desplazamiento de expansión a una galería de imágenes
También puede expandir una galería de imágenes al pasar el mouse usando el módulo de galería para mostrar un diseño de cuadrícula más grande con imágenes más grandes. Para hacer esto, ubique la sección hacia la parte inferior del título de diseño de la página Acerca de la agencia de diseño «Nuestro trabajo».
Luego agregue una nueva fila de una columna debajo de la fila con las tres imágenes. Dentro de la fila, agregue un módulo de galería.
Actualice la configuración del módulo de la galería de la siguiente manera:
Agregue 4 imágenes a la galería con las mismas dimensiones para que se vean iguales en la fila.
Número de imágenes: 4
Mostrar título y leyenda: NO
Mostrar paginación: No
A continuación, vaya a la pestaña de diseño y actualice lo siguiente:
Color de icono de zoom: #353740
Color de superposición de desplazamiento: rgba(252,210,29,0.92)
Ancho (escritorio): 40 %
Ancho (desplazamiento): 100 %
Ancho (tableta): 100 %
Cambiar el ancho del módulo de la galería al pasar el mouse es lo que crea el efecto de expansión al pasar el mouse. Establecer el ancho de la tableta al 100% también evita que ocurra el efecto de desplazamiento en el móvil.
Esto es lo que parece hasta ahora.
Todavía tenemos que actualizar la configuración de nuestras filas para mejorar un poco la funcionalidad y hacer coincidir el diseño.
Abra la configuración de la fila y actualice lo siguiente:
Ancho personalizado: 80 %
Ancho de canaleta: 2
Alturas de columna igualadas: SÍ
Evitar que el efecto de expansión del desplazamiento empuje el contenido hacia abajo en la página
Si desea que la galería de imágenes se expanda sin empujar el contenido de la página hacia abajo, puede hacerlo configurando una altura mínima para su fila. esto mejorará la UX, especialmente con un botón directamente debajo de la galería.
Vaya a la configuración de la fila y agregue el siguiente CSS personalizado en el elemento principal:
|
01
|
min-height: 350px |
Luego agregue el siguiente CSS personalizado en el elemento principal de la columna:
|
01
|
margin: auto; |
Igualar las alturas de las columnas activa la propiedad css «display: flex» en el backend que permite que «margin: auto» alinee el contenido de la columna para que se centre verticalmente dentro de la fila que ahora tiene una altura mínima de 350 px. Obtenga más información sobre este concepto en nuestro artículo completo sobre cómo alinear verticalmente el contenido en Divi .
Mira el resultado final.
Agregar más imágenes a la galería
También puede agregar 4 imágenes más a la galería y aumentar la altura mínima de su fila a 475 px para obtener el siguiente resultado.
Cómo se ve en el móvil
Así es como se verá la galería en el móvil. El efecto de desplazamiento de expansión no está activo.
Pensamientos finales
Los ejemplos dados son solo algunas de las formas en que usa Divi para crear un efecto de desplazamiento de expansión para todo el contenido de su cuadrícula. Pero estoy seguro de que puede usarlo para muchos otros casos de uso. Puede expandir módulos de cartera, módulos de tienda o incluso módulos de blog. Así que sé creativo y diviértete explorando las posibilidades por tu cuenta.
Espero escuchar de usted en los comentarios a continuación.
¡Salud!