Cómo tomar las imágenes en progreso para promover una galería de imágenes en div

Saber cómo resaltar las imágenes con los efectos del desfile de Divi puede ser un elemento de diseño sutil e impresionante para ayudar a promover una galería de imágenes en una página de destino. La idea es atraer a los usuarios mientras llevan la página hacia abajo, ventilando imágenes como un puñado de cartas de juego. En este tutorial, crearemos un aspecto de sección limpia para promocionar una galería de imágenes que incluya una colección de imágenes que se destacan en el desplazamiento. Puede usar cualquier imagen que desee con este diseño y sería una buena ventaja en cualquier página de destino. Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial.
Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Para importar la sección de la sección en la Biblioteca Divic, navegue a la Biblioteca de Divic. Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Parte 1: Creación de la apariencia y el contenido simulado para esta primera parte del tutorial, construiremos la apariencia de la sección con una fila con dos columnas que tiene un título y un botón en la columna izquierda. En la segunda parte, agregaremos las imágenes de ventilador a la columna derecha. Configuración de la sección Antes de agregar algo para buscar, actualice la configuración de sección predeterminada de la siguiente manera:
Junta: 10 VW hacia arriba, 10 VW abajo
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregando la fila y luego, agregue una nueva fila con una estructura de columna de dos tercios.

Configuración de fila y luego actualice la configuración de la fila con una imagen de fondo personalizada. Utilizo uno de los look prefabricados para la página de destino de la tienda de papelería. Después de esta actualización, sigue:

Tamaño de la imagen de fondo: dimensión real La imagen de fondo: superior izquierda
Ancho máximo: 900 PX
Agregar el módulo de texto para crear el título Una vez que la fila esté lista, agregue un nuevo módulo de texto a la columna 1 para crear el título.
Contenido de texto Agregue el siguiente título H1 al contenido del cuerpo: & lt; h1 & gt; nuestra galería & lt;/h1 & gt;

Configuración de texto y luego actualice la configuración de texto de la siguiente manera:

Título de la fuente: Bellefair

Alineación del texto del encabezado (tableta y teléfono): derecho
Tamaño de texto Cabezal: 150 PX (escritorio y tableta), 110 PX (teléfono)
Agregue el botón debajo del módulo de texto, agregue un nuevo módulo de botón.
Botón de texto Actualizar el texto del botón con “Ver la galería”.

Botón de configuración En la pestaña Diseño, actualice lo siguiente:

Alineación (tableta y teléfono): correcto

Tamaño de texto de texto: 14 PX
El color del texto del botón: #ffffff
El color de fondo del botón: # 121212
El ancho del nudo del botón: 0 PX
Distancia entre letras y botones: 3 PX
Botón de fuente: Montserrat
Botón de estilo de fuente: TT
Marja: 7VW Top
Parte 2: Creación de imágenes con el efecto de desarrollo de ventilador en esta segunda parte del tutorial, crearemos las imágenes con el efecto de desarrollo de ventilador. Comenzaremos con la imagen central. Utilizo las imágenes en la página de diseño prefabricado de la Galería de Moda. Todos deberían tener el mismo tamaño para un diseño consistente. Los que uso son 400 PX con 600 PX. Crear la imagen central agrega un nuevo módulo de imagen a la columna derecha.
Luego suba una imagen en el modo.

Configuración de imagen Actualización del ancho y margen máximo para pantallas móviles de la siguiente manera:

Ancho máximo (tableta y teléfono): 200 PX


Marja (tableta y teléfono): izquierda 0 PX
Creación de la imagen media derecha para crear la segunda imagen (o la imagen en el centro a la derecha), copie el primer módulo de imagen. Imagen y luego abra la configuración para el módulo de imagen duplicada y actualice lo siguiente: Posición:
Posición: Absoluto

Transformar el origen

Origen de giro: el centro inferior
Efectos bajo el movimiento horizontal, actualice lo siguiente:

Active el movimiento horizontal: sí
Comenzando el desplazamiento: 0 (al 20%)

GABE ADRIO: 0.5 (al 50%)
Compensación final: 0.5 (100%)
En el giro, actualice lo siguiente:
Activar rotación: sí
Rotación de inicio: 0 grados (al 20%)

Rotación promedio: 20 grados (al 50%)
Rotación final: 20 grados (al 100%)
Creando la imagen correcta para crear la tercera imagen que llegará al extremo derecho, copie la segunda imagen que creamos.
Actualice el desarrollo de los efectos de movimiento horizontal, actualice lo siguiente:
Brecha promedio: 1

Retraso final: 1

En el giro, actualice lo siguiente:
Rotación promedio: 40 grados
Rotación final: 40 grados

Si no lo ha notado, esencialmente aumentamos la brecha horizontal con 0.5 pasos y la brecha rotativa con 20 grados con cada imagen. Esto creará distancias iguales entre las imágenes. Y debido a que la animación del efecto del desfile se basa en el origen transformado en el centro inferior, dará la impresión de que las imágenes se extienden como un puñado de cartas de juego.
Etiquete las imágenes en el cuadro de capa antes de crear las dos últimas imágenes, actualicemos las etiquetas de imágenes actuales para que no nos confundamos.
Creando la imagen en el medio izquierdo para crear la imagen en el medio izquierdo, podemos duplicar la imagen en el medio derecho.

Luego, tírelo sobre la imagen central en la parte superior de la columna. Puede actualizar y esa etiqueta de imagen. Actualice los efectos de desarrollo Abra la configuración para la imagen izquierda y actualice los siguientes efectos: bajo movimiento horizontal …
GAP promedio: -0.5

Grado final: -0.5

Nota: Todo lo que hacemos es cambiar el valor del desplazamiento a lo negativo.

Bajo rotación …
Rotación promedio: -20 grados
Rotación final: -20 grados
Creando la imagen izquierda eventualmente, para crear la imagen en la izquierda final duplicando la imagen derecha y tirando de la parte superior de la columna.

También puede actualizar la etiqueta.
Actualice los efectos de desarrollo Abra la configuración para la imagen izquierda y actualice los efectos de desarrollo: bajo movimiento horizontal:
GAP promedio: -1

Grado final: -1

Bajo rotación …

Rotación promedio: -40 grados
Rotación final: -40 grados
Columna 1 Índice Z En este momento, las imágenes en la columna se superponen a la columna 1. Para cambiar esto, abra la configuración para la columna 1 y actualice el índice Z de la siguiente manera:

IND ÍNDICE: 10
Agregar nuevas imágenes y filtros ahora, todo lo que tenemos que hacer es actualizar cada una de las imágenes con otras nuevas / diferentes.
Para un efecto único, agregue los siguientes filtros a todas las imágenes (usando una selección múltiple), excepto la imagen correcta.

Saturación: 20%
Opacidad: 85%

El resultado es el resultado hasta ahora … Rotar la columna para cambiar un poco el diseño, podemos rotar la colección de imágenes girando a los padres. Para esto, abra la configuración de la columna 2 y agregue la siguiente opción de transformación:

Rotar el eje de transformación Z: 40 grados
El resultado final aquí es el resultado final.Desktop comprimido por teléfono final En este tutorial, aprendí a avivar las imágenes usando los efectos de desplazamiento de DIV, ¡pero no tienes que parar aquí!Puede usar fácilmente la misma técnica para resaltar cualquier colección de módulos (pienso en borrones).Hemos limitado la distancia de desplazamiento con los efectos de cada imagen, por lo que el diseño ni siquiera es funcional (es decir, realmente no puede ver todas las imágenes).Pero puede aumentar la compensación para hacer que las imágenes sean más visibles si lo desea.Espero tener noticias suyas en los comentarios.¡Suerte!