Cómo recrear las vistas previas del diseño del paquete ET con los efectos de movimiento de ventilador

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 en la página del producto Div. Lo que hace que este diseño único es la forma en que se presenta cada paquete de apariencia con tres imágenes separadas que se destacan en el plan. Hoy, le mostraremos cómo recrear el diseño de las vistas previas de nuestro paquete de diseño con el mismo efecto impresionante de Hover Hover en Div. 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 de la Divica Built -In. Pero no se preocupe, no llevará mucho tiempo construir y el resultado definitivamente vale la pena.
Vamos a empezar. Eye es un vistazo a las vistas previas del paquete de diseño con un efecto de ventilador de desplazamiento. Observe que la fila inferior tiene un efecto secundario que gira las imágenes por separado en el movimiento.

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

Descargue la previualización gratuita del paquete de diseño con efecto hover

Para poner su mano en los dibujos en este tutorial, primero debe descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? Suscríbase a nuestro canal de YouTube lo que necesita para comenzar a comenzar, deberá tener la siguiente configuración:
El tema instalado y activo
Una nueva página creada para crear desde cero en la división delantera (visual).
Tres imágenes para ser utilizadas para contenido falso. Para obtener los mejores resultados, las imágenes deben ser de aproximadamente 250 x 375 px. Debido a que estas son vistas previas de las páginas web, puede crear su propia captura de pantalla de cualquier diseño de página y luego cortar / cambiar cada imagen en consecuencia.
Después de eso, tendrá un lienzo vacío para comenzar a construir algunas pestañas flotantes en la división.
Recrea las vistas previas del paquete de presentación ET con los efectos de movimiento de ventilador en la división de la sección y la fila crea una nueva sección con una fila con tres columnas.
Antes de agregar módulos, abra la configuración de la fila y actualice el tamaño y el espacio de la siguiente manera: El ancho de la canaleta: 2

Ancho: 90%
Ancho máximo: 1120 PX (escritorio), 400 PX (tableta)
Luego agregue un poco de relleno a la fila en la tableta para obtener más espacio en su móvil.
Columna 1 revestimiento: 20% inactividad

COLUMNA 2 ENCENDIDO: 20% ABAJO
COLUMNA 3 ENVIADO: 20% ABAJO
Agregar la imagen 1 ahora está lista para agregar la primera de las tres imágenes que componirán la vista previa del paquete de diseño. Continúe y agregue un módulo de imagen en la columna 1.
Luego cargue la imagen en el módulo de imagen (debe tener aproximadamente 250 px con 375 px).

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

Alineación de imágenes: centro

Ancho: 220 PX
Desbordamiento verticalmente: oculto
ÍNDICE Z: 4
Como debemos apuntar al contenedor de imagen (no la imagen en sí), debemos agregar una altura personalizada, una sombra de la caja y un rayo de borde utilizando CSS personalizado. Agregue los siguientes CSS al elemento principal: Altura: 240px;
Shadow de caja: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22);

Border-radio: 9px;
Esto permitirá que la imagen se adapte con el contenido de la imagen cuando agregamos el efecto de desplazamiento más adelante. Como puede ver ahora, la imagen se cortó ligeramente en la parte inferior, porque tenemos una altura personalizada de 240 PX y la excedencia establecida en “Oculta”.
Agregando la imagen 2 para crear la segunda imagen, agregue un nuevo módulo de imagen en el primer módulo de imagen en la columna 1. luego cargue una nueva imagen (250×350) en el módulo.
Luego, debemos colocar la imagen detrás y ligeramente a la izquierda de la imagen 1. Para hacer esto, tendremos que agregar un ancho y altura personalizados con el flujo vertical oculto (como lo hicimos con la imagen 1). La principal diferencia aquí es que tenemos que darle a la imagen una posición absoluta, de modo que se muestre en el lado superior izquierdo detrás de la imagen 1. Para hacer esto, actualice lo siguiente: Ancho: 180 PX

Desbordamiento verticalmente: oculto

Luego agregue los siguientes CSS personalizados al elemento principal: Publicación: ¡Absoluto! Importante;
Arriba: 12px;
Izquierda: 25px;
Altura: 200px;
Shadow de caja: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22);
Border-radio: 9px;
Agregar imagen 3 Ahora estamos listos para agregar la tercera imagen para completar la vista previa del paquete de diseño. En este momento es lógico usar el modo de visualización de estructura alámbrica, porque tenemos algunas superposiciones que dificultan el uso del constructor visual. Implemente el modo de estructura alámbrica y copie la imagen 2.
Duplicamos la imagen porque queremos asumir la mayoría de las configuraciones que utilizamos para la imagen 2. La única diferencia (aparte de una nueva imagen) es que debemos colocar la imagen a la derecha en lugar de la izquierda. Abra la imagen duplicada (imagen 3) y actualice el módulo de imagen con una nueva imagen (250 × 375). Luego actualice CSS personalizado cambiando la propiedad de la posición izquierda a una posición correcta. No se requieren otros cambios de CSS.
Si lo prefiere, puede copiar y pegar el siguiente CSS en el elemento principal para reemplazar la corriente CSS. Posición: ¡Absoluto! Importante;

Arriba: 12px;


Derecha: 25px;

Altura: 200px;
Shadow de caja: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22); Border-radio: 9px;
Hasta ahora, bueno, aquí está el resultado final hasta ahora.
El diseño es en realidad muy hermoso como es, pero planteamos con una muesca, con un efecto de ventilador. Agregando CSS del efecto de ventilador de Hover Normalmente, si tuviera que lidiar con una sola imagen, podríamos agregar fácilmente los efectos flotantes utilizando el DIV incorporado. Pero este movimiento de ventilador requiere contratar el estado de flotación de varios niños (imágenes) simultáneamente cuando pasa sobre la columna principal. Cuando coloca el cursor sobre la columna, queremos que lo siguiente haga los siguientes ajustes de imágenes.
Agregue un tiempo de transición a cada imagen para una transición suave al mouse.
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 y más estrecho para mostrar más en la imagen.
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 más estrechas para mostrar más en la imagen.

Ajuste la imagen 2 para girar 5 grados en reversa al reloj y muévase ligeramente hacia la izquierda. Podemos hacer esto agregando un valor de -5 grados de transformación: propiedad rotada y ajustando el valor de la propiedad de la izquierda en 0.
Ajuste la imagen 3 para girar 5 grados en el sentido de las agujas del reloj y muévase ligeramente hacia la derecha. Podemos hacer esto agregando un valor de transformación de 5 grados: gire la propiedad y ajuste el valor de la propiedad de la posición correcta en 0.
Para agregar el CSS personalizado requerido para estos efectos de movimiento, debemos agregar una clase CSS personalizada a la fila que contiene las imágenes. Esto nos permitirá aplicar CSS personalizado solo a imágenes de una determinada fila. Abra la configuración ordinaria y agregue la siguiente clase CSS.
Clase CSS: Imágenes de Fan-Out
Para agregar CSS personalizado a la página, abra la configuración de la página y agregue el siguiente CSS personalizado a la pestaña avanzada. /** Curva de duración y velocidad de transición **/
.Fan-Out-Images .et_pb_image {
-Webkit-transición: 300 ms todo cúbico-bezier (.4,0, .2,1);
Transición: 300 ms todo cúbico-bezier (.4.0, .2,1);
}

/** Cambiar el ancho y la altura de la imagen 1 en el flotador **/
.Fan-Out-Images .ET_PB_COLUMN: HOVER .ET_PB_IMAGE: First-Child {
Ancho: 160px;
Altura: 240px;
}
/** Cambiar el ancho y la altura de la imagen 2 y 3 en Hover **/
.Fan-Out-Images .et_pb_column: hover .et_pb_image: nth-child (2), .fan-concards .et_pb_column: hover .et_pb_image: nth-child (3) {
Ancho: 160px;
Altura: 220px;
}
/** Gire la imagen 2 en sentido antihorario y muévase hacia la izquierda en el flotador **/
.Fan-Out-Images .et_pb_column: hover .et_pb_image: nth-child (2) {
Izquierda: 0;
-Webkit-transform: rotado (-5deg);
Transformación: rotado (-5deg);
}
/** Gire la imagen 3 en el sentido de las agujas del reloj y muévase hacia la derecha en el flotador **/
.Fan-Out-Images .et_pb_column: hover .et_pb_image: nth-child (3) {
Derecha: 0;
-Webkit-transform: rotado (5deg);
Transformación: rotado (5deg);
}
Agregué un comentario por encima de cada fragmento CSS para recordarle lo que hace cada uno. Una vez que hayas terminado. Verifique el resultado final. Resultado final
Efecto de movimiento opcional: las imágenes giratorias 1 y 2 por separado en el desplazamiento para agregar otro nivel de participación a las imágenes de vista previa del paquete de diseño, podemos hacer que la imagen 1 y la imagen 2 sean separadas del efecto de desplazamiento inicial. Esto permitirá al usuario interactuar con las imágenes de una manera única. Incluso puede agregar enlaces o vistas previas de la caja de la caja de luz a esas imágenes si lo desea. Así es como lo haces. Eliminación de las propiedades de transformación de la configuración de la página CSS primero, debe eliminar las dos líneas CSS personalizadas que giran la imagen cuando pasa sobre la columna. Abra la configuración de la página CSS y elimine lo siguiente: -webkit-transform: rotado (-5deg); transformar: rotar (-5deg);
-Webkit-transform: rotado (5deg);
Transformación: rotado (5deg);
Agregar las propiedades de transformación en el flotador para la imagen 2 y luego abra la configuración del módulo de imagen para la imagen 2 y use las opciones de transformación incorporadas para agregar el mismo valor de giro que he eliminado previamente para el movimiento.

Rotación del eje giratorio z (caminata): -5 grados

Translación de transformación del eje x (hover): -20px
Agregar las propiedades de transformación a la imagen 3 y luego actualice la configuración del módulo de imagen para la imagen 3 para agregar la propiedad de giro.
Rotar el eje de transformación Z (caminata): 5 grados
Translación del eje X de transformación (lugar con mouse): 20 px

Ahora verifique el resultado final. Resultado final
Agregar enlaces a imágenes Si desea crear enlaces de redirección para presentar un cierto paquete de look 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 la URL del enlace. Ajustando las nuevas vistas previas del paquete de diseño a las otras columnas para completar el diseño, podemos copiar las tres imágenes en la columna 1 y podemos pegarlas a columna 2 y columna 3.
Después de eso, todo lo que tiene que hacer es actualizar cada una de las imágenes en la columna 2 y 3 con otras nuevas. ¡Eso es todo! El diseño final aquí es el diseño final. La fila superior muestra el flujo de flujo del efecto cuando pasa sobre la columna. La segunda fila muestra el efecto secundario de mover el ventilador agregado a la imagen 2 y 3 por separado.


El aspecto de tres columnas en el escritorio se ajustará a una columna en la tableta y el teléfono.
El efecto final de Fan-Out Hover es un elemento de diseño hermoso y cautivador que puede usar para presentar los aspectos de la página en su propio sitio web. La combinación CSS personalizada y las divisiones incorporadas que tratamos en este tutorial funcionarán mágicamente. Y esta configuración servirá como un excelente punto de partida para explorar varios diseños utilizando el fabricante Divi. Esperamos que esto le inspire llevar su cartera al siguiente nivel. Espero tener noticias suyas en los comentarios. ¡Suerte!