Cómo recrear las vistas previas del paquete de diseño de ET con efectos de desplazamiento en abanico en Divi

Una de las características interesantes del nuevo diseño del sitio web de elegantthemes.com son las vistas previas del paquete de diseño prefabricado en la página del producto Divi. Lo que hace que este diseño sea único es cómo cada paquete de diseño se presenta con tres imágenes separadas que se despliegan al pasar el mouse.

Hoy, le mostraremos cómo recrear el diseño de las vistas previas de nuestro paquete de diseño con ese mismo efecto de desplazamiento de abanico impresionante en Divi. Debido a que el diseño es un poco más avanzado, usaremos CSS personalizado en combinación con las opciones de diseño integradas de Divi. Pero no se preocupe, la construcción no llevará mucho tiempo y el resultado definitivamente vale la pena.

Empecemos.

Vistazo

Aquí hay un vistazo a las vistas previas del paquete de diseño con un efecto de desplazamiento en abanico. Observe que la fila inferior tiene un efecto de desplazamiento secundario que rota las imágenes por separado al desplazarse.

El diseño de tres columnas en el escritorio se ajustará a una columna en la tableta y el teléfono.

Descargue GRATIS el diseño de efectos de desplazamiento en abanico de vista previa del paquete de diseño

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Suscríbete a nuestro canal de Youtube

Lo que necesitas para empezar

Para comenzar, necesitará tener la siguiente configuración:

1. El tema Divi instalado y activo
2. Una nueva página creada para construir desde cero en el generador de interfaz (visual) de Divi.
3. Tres imágenes para usar como contenido simulado. Las imágenes deben tener alrededor de 250 px por 375 px para obtener mejores resultados. Dado que se trata de vistas previas de páginas web, puede crear sus propias capturas de pantalla de cualquier diseño de página y luego recortar / cambiar el tamaño de cada imagen en consecuencia.

Después de eso, tendrá un lienzo en blanco para comenzar a construir algunas pestañas flotantes en Divi.

Recreación de vistas previas del paquete de diseño de ET con efectos de desplazamiento en abanico en Divi

Construyendo la sección y la fila

Cree una nueva sección regular con una fila de tres columnas.

Antes de agregar módulos, abra la configuración de filas y actualice el tamaño y el espaciado de la siguiente manera:

• Ancho de la canaleta: 2
• Ancho: 90%
• Ancho máximo: 1120px (escritorio), 400px (tableta)

Luego, agregue algo de relleno a la fila en la tableta para obtener más espacio en el dispositivo móvil.

• Acolchado de la columna 1: 20% inferior
• Acolchado de la columna 2: 20% inferior
• Acolchado de la columna 3: 20% inferior

Agregar imagen 1

Ahora estamos listos para agregar nuestra primera de las tres imágenes que conformarán el diseño de vista previa de nuestro paquete de diseño. Continúe y agregue un módulo de imagen a la columna 1.

Luego cargue la imagen en el módulo de imagen (debe tener un tamaño de alrededor de 250 px por 375 px).

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

• Alineación de la imagen: centro
• Ancho: 220px
• Desbordamiento vertical: oculto
• Índice Z: 4

Dado que necesitamos apuntar al contenedor de la imagen (no a la imagen en sí), debemos agregar una altura personalizada, una sombra de cuadro y un radio de borde utilizando CSS personalizado. Agregue el siguiente CSS al elemento principal:

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Esto permitirá que la imagen se ajuste con el del contenedor de imágenes cuando agreguemos el efecto de desplazamiento más adelante. Como puede ver ahora, la imagen se ha cortado ligeramente en la parte inferior porque tenemos una altura personalizada de 240px y el desbordamiento establecido en "oculto".

Agregar imagen 2

Para crear la segunda imagen, agregue un nuevo módulo de imagen debajo del primer módulo de imagen en la columna 1. Luego cargue una nueva imagen (250X350) al módulo.

Luego, debemos colocar la imagen detrás y ligeramente a la izquierda de la imagen 1. Para hacer esto, necesitaremos agregar un ancho y una altura personalizados con el desbordamiento vertical oculto (al igual que hicimos con la imagen 1). La principal diferencia aquí es que necesitamos darle a la imagen una posición absoluta para que se muestre en la parte superior izquierda de la columna detrás de la imagen 1.

Para hacer esto, actualice lo siguiente:

• Ancho: 180px
• Desbordamiento vertical: oculto

Luego agregue el siguiente CSS personalizado al elemento principal:

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Agregar imagen 3

Ahora estamos listos para agregar la tercera imagen para completar la vista previa del paquete de diseño. En este punto, tiene sentido usar el modo de vista de estructura alámbrica, ya que tenemos algunas superposiciones que dificultan el uso del constructor visual. Implemente el modo de estructura alámbrica y duplique la imagen 2.

Duplicamos la imagen porque queremos trasladar la mayoría de las configuraciones que usamos para la imagen 2. La única diferencia (además de una nueva imagen) es que necesitamos colocar la imagen a la derecha en lugar de a la izquierda.

Abra la imagen duplicada (imagen 3) y actualice el módulo de imagen con una nueva imagen (250 × 375).

Luego actualice el CSS personalizado cambiando la propiedad de posición left a una propiedad de posición right . No se necesitan otros cambios en el CSS.

Si lo prefiere, puede copiar y pegar el siguiente CSS en el elemento principal para reemplazar el CSS actual.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Hasta ahora, todo bien

Aquí está el resultado final hasta ahora.

El diseño es realmente hermoso tal como está, pero vamos a mejorarlo con un efecto de desplazamiento en abanico.

Agregar el CSS de efecto de desplazamiento en abanico

Normalmente, si estuviéramos tratando con una sola imagen, podríamos agregar fácilmente efectos de desplazamiento usando las opciones de Divi integradas. Pero este efecto de desplazamiento en abanico requiere que activemos el estado de desplazamiento de varios elementos secundarios (imágenes) a la vez al pasar el mouse sobre la columna principal. Al pasar el cursor sobre la columna, queremos que lo siguiente realice los siguientes ajustes en las imágenes.

1. Agregue una duración de transición a cada imagen para una transición suave al pasar el mouse.
2. Ajuste la Imagen 1 para que tenga un ancho de 180 px y una altura de 240 px. Esto hará que el contenedor de la imagen crezca más alto y más estrecho para mostrar más de la imagen.
3. Ajuste la imagen 2 y 3 para que tenga un ancho de 160 px y una altura de 220 px. Esto también hará que las imágenes se vuelvan más altas y más estrechas para mostrar más de la imagen.
4. Ajuste la Imagen 2 para que gire 5 grados en sentido antihorario y muévala ligeramente hacia la izquierda. Podemos hacer esto agregando un valor de -5 grados a la propiedad transform:rotate y ajustando el valor de la propiedad de la posición left a 0.
5. Ajuste la Imagen 3 para que gire 5 grados en el sentido de las agujas del reloj y muévala ligeramente hacia la derecha. Podemos hacer esto agregando un valor de 5 grados a la propiedad transform:rotate y ajustando el valor de la propiedad de la posición right a 0.

Para agregar el CSS personalizado necesario para estos efectos de desplazamiento, necesitamos agregar una clase CSS personalizada a la fila que contiene las imágenes. Esto nos permitirá aplicar el CSS personalizado solo a las imágenes de una fila en particular.

Abra la configuración de la fila y agregue la siguiente clase CSS.

• Clase CSS: imágenes en abanico

Para agregar el CSS personalizado a la página, abra la configuración de la página y agregue el siguiente CSS personalizado en la pestaña Avanzado.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

Agregué un comentario sobre cada fragmento de CSS para recordarle lo que está haciendo cada uno.

Una vez que haya terminado. Mira el resultado final.

Resultado final

Efecto de desplazamiento opcional: rotación de la imagen 1 y 2 por separado al desplazar el cursor

Para agregar otro nivel de participación a las imágenes de vista previa del paquete de diseño, podemos hacer que la rotación de la imagen 1 y la imagen 2 ocurra por separado del efecto de desplazamiento inicial. Esto permitirá al usuario interactuar con las imágenes de una manera única. Incluso puede agregar enlaces separados o vistas previas de lightbox a esas imágenes si lo desea.

Así es como lo haces.

Sacar las propiedades de transformación de la configuración de página CSS personalizado

Primero, debe eliminar las dos líneas de CSS personalizado que rotan la imagen cuando se desplaza sobre la columna. Abra la configuración de página CSS personalizado y saque lo siguiente:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Agregar propiedades de transformación al pasar el mouse para la imagen 2

Luego, abra la configuración del módulo de imagen para la imagen 2 y use las opciones de transformación integradas de Divi para agregar el mismo valor de rotación de transformación que eliminamos anteriormente para el estado de desplazamiento.

• Transformar Girar eje Z (flotar): -5deg
• Transformar Traducir eje X (desplazamiento): -20px

Agregar propiedades de transformación al pasar el mouse para la imagen 3

Luego actualice la configuración del módulo de imagen para la imagen 3 para agregar la propiedad de rotación de transformación.

• Transformar Girar eje Z (flotar): 5 grados
• Transformar Traducir eje X (desplazamiento): 20px

Ahora mira el resultado final.

Resultado final

Agregar enlaces a imágenes

Si desea crear enlaces de redireccionamiento para mostrar un paquete de diseño en particular o un diseño de página en una página separada, sería mejor agregar la misma URL del enlace a las tres imágenes del paquete. Para hacer esto, abra cada uno de los módulos de imagen y agregue la URL del enlace.

Adición de nuevas vistas previas del paquete de diseño a las otras columnas

Para rematar el diseño, podemos copiar las tres imágenes de la columna 1 y pegarlas en la columna 2 y en la columna 3.

Después de eso, todo lo que necesita hacer es actualizar cada una de las imágenes en las columnas 2 y 3 con otras nuevas.

¡Eso es todo!

Diseño final

Aquí está el diseño final. La fila superior muestra el efecto de desplazamiento en abanico cuando se desplaza sobre la columna. La segunda fila muestra el efecto secundario de desplazamiento en abanico agregado a la imagen 2 y 3 por separado.

El diseño de tres columnas en el escritorio se ajustará a una columna en la tableta y el teléfono.

Pensamientos finales

El efecto de desplazamiento en abanico es un elemento de diseño hermoso y atractivo que puede utilizar para presentar diseños de página en su propio sitio web. La combinación de CSS personalizado y la configuración de Divi incorporada que cubrimos en este tutorial funcionará mágicamente. Y esta configuración servirá como un excelente punto de partida para explorar más diseños con el constructor Divi. Con suerte, esto le dará algo de inspiración para llevar su cartera al siguiente nivel.

Espero tener noticias tuyas en los comentarios.

¡Salud!