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


Una de las características interesantes del nuevo diseño del sitio web de elegantthemes.com es la vista previa del paquete de diseño prefabricado en el 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, vamos a mostrarle cómo recrear el diseño de nuestras vistas previas del paquete de diseño con el mismo efecto de desplazamiento desplegable en Divi. Debido a que el diseño es un poco más avanzado, utilizaremos algunos CSS personalizados en combinación con las opciones de diseño integradas de Divi. Pero no se preocupe, no tomará mucho tiempo construirlo 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 desplegable. Observe que la fila inferior tiene un efecto secundario de desplazamiento que rota las imágenes por separado al pasar el mouse.

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Para echar mano de los diseños de este tutorial, primero deberá descargarlo con 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

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?

(incrustar) https://www.youtube.com/watch?v=Kq0JEzaNMz4 (/ incrustar)

Suscríbase 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 crear desde cero en el creador front-end (visual) de Divi.
  3. Tres imágenes para ser utilizadas como contenido simulado. Las imágenes deben tener alrededor de 250 px por 375 px para obtener mejores resultados. Como 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 de desplazamiento en Divi.

Recreando las 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.

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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

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

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Luego agregue un poco de relleno a la fila en la tableta para obtener más espacio en el móvil.

  • Columna 1 Relleno: 20% inferior
  • Columna 2 Relleno: 20% inferior
  • Columna 3 Relleno: 20% inferior

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Agregar imagen 1

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

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Luego, suba la imagen al módulo de imagen (debe tener un tamaño de aproximadamente 250 px por 375 px).

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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

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

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Como necesitamos apuntar al contenedor de imágenes (no a la imagen en sí), necesitamos agregar una altura personalizada, sombra de cuadro y radio de borde usando 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 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 240 px y el desbordamiento está configurado como "oculto".

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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) en el módulo.

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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: 180 px
  • 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;

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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 generador visual. Implemente el modo de estructura alámbrica y duplique la imagen 2.

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Duplicamos la imagen porque queremos transferir 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 el left posición de propiedad a un right posición de propiedad. No se necesitan otros cambios en el CSS.

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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 aquí todo bien

Aquí está el resultado final hasta ahora.

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

El diseño es realmente hermoso como es, pero vamos a subirlo un poco con un efecto de desplazamiento desplegable.

Agregar el CSS de efecto de desplazamiento de despliegue

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

  1. Agregue una duración de transición a cada imagen para una transición suave en el desplazamiento.
  2. Ajuste la Imagen 1 para tener un ancho de 180 px y una altura de 240 px. Esto hará que el contenedor de imágenes crezca más alto y más estrecho para mostrar más de la imagen.
  3. Ajuste las imágenes 2 y 3 para tener 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 estrechas para mostrar más de la imagen.
  4. Ajuste la Imagen 2 para girar 5 grados en sentido antihorario y muévase ligeramente hacia la izquierda. Podemos hacer esto agregando un valor de -5 grados transform:rotate propiedad y ajustando el valor de la left propiedad de posición a 0.
  5. Ajuste la Imagen 3 para girar 5 grados en sentido horario y muévase ligeramente hacia la derecha. Podemos hacer esto agregando un valor de 5 grados a la transform:rotate propiedad y ajustando el valor de la right propiedad de posición a 0.

Para agregar el CSS personalizado necesario para estos efectos de desplazamiento, debemos 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 en una fila en particular.

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

  • Clase CSS: fan-out-images

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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);
}

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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

Una vez que hayas terminado. Mira el resultado final.

Resultado final

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Efecto de desplazamiento opcional: imagen giratoria 1 y 2 por separado al pasar el mouse

Para agregar otro nivel de interacció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 sucedan 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.

Extracción de 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 giran la imagen al pasar el cursor 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);

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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

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

  • Transformar girar eje Z (pasar el mouse): -5deg
  • Transformar Traducir eje X (pasar el mouse): -20px

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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

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

  • Transformar Rotar Eje Z (pasar el mouse): 5deg
  • Transformar Traducir eje X (pasar el mouse): 20px

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Ahora mira el resultado final.

Resultado final

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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 de enlace a las tres imágenes en el paquete. Para hacer esto, abra cada uno de los módulos de imagen y agregue el enlace URL.

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Agregar nuevas vistas previas del paquete de diseño a las otras columnas

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

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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

¡Eso es!

Diseño final

Aquí está el diseño final. La fila superior muestra el efecto de desplazamiento de desplazamiento desplegable al pasar el mouse sobre la columna. La segunda fila muestra el efecto secundario de desplazamiento desplegable agregado a las imágenes 2 y 3 por separado.

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

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

vista previa del paquete de diseño divi desplegar efectos de desplazamiento

Pensamientos finales

El efecto de desplazamiento de despliegue es un elemento de diseño hermoso y atractivo que puede usar 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 gran punto de partida para explorar más diseño usando el constructor Divi. Con suerte, esto le dará algo de inspiración para llevar su cartera al siguiente nivel.

Espero tener noticias suyas en los comentarios.

¡Salud!