Uso de las animaciones de Divi para desplegar contenido con imágenes deslizantes
Publicado: 2017-10-12Bienvenido a la parte 2 de esta serie de 5 partes que le enseñará cómo usar las nuevas opciones de animación de Divi para diseñar secciones de página increíbles. Lo guiaré a través de cómo construir las diferentes secciones de nuestra página de demostración en vivo para mostrarle técnicas para agregar animaciones a su sitio web. Las funciones de animación son realmente divertidas y fáciles de usar. Y con Visual Builder, puede ver cómo su creación cobra vida en cada etapa del camino. Ven y únete a mí mientras exploramos el poder de las animaciones Divi.
En la parte 1 de nuestra serie, creamos las dos primeras secciones de la página de demostración de la animación. El diseño y la animación del encabezado en la primera sección mostró una forma única de animar los elementos de un módulo de texto dentro de una sección estándar de pantalla completa. Al construir la segunda sección, descubrimos una forma de incorporar animaciones sutiles y armoniosas a filas de contenido que podrían usarse fácilmente para presentar contenido en una página de destino de una manera atractiva.
Hoy continuamos nuestro viaje para diseñar diseños de sección que usen la animación de manera efectiva (y creativa) al desplazarse por la página. Construiremos la tercera y cuarta sección de nuestra página de demostración en vivo que muestra el poder de las funciones de animación de Divi. Ambas secciones tienen diseños que pueden adoptarse fácilmente para que sus propios proyectos muestren productos o servicios.
Empecemos.
Aquí hay un adelanto de lo que estaremos construyendo en la publicación de hoy
Seccion 3
Sección 4
Preparación de los elementos de diseño
Prepara tus imágenes
Para la tercera sección, necesitará dos imágenes. El primero debe ser de alrededor de 880 × 600 y el segundo alrededor de 790 × 880. Estos tamaños de imagen no tienen que ser exactos. Solo incluyo estas dimensiones para darte una idea.
Al construir la cuarta sección, también verás dos imágenes alrededor de 600 × 400.
Utilice el Visual Builder
No es necesario un código avanzado aquí. Usaremos solo Visual Builder para diseñar las siguientes dos secciones de nuestra página que creamos en la parte 1 de esta serie. Dado que su página ya está configurada, está listo para comenzar.
Uso de las animaciones de Divi para desplegar contenido con imágenes deslizantes
Suscríbete a nuestro canal de Youtube
Construcción de la sección 3 de la demostración
La Sección 3 es un gran ejemplo de cómo diseñar y animar el Módulo de Llamado a la Acción con una imagen adjunta.
Vamos a sumergirnos.
Con Visual Builder, agregue una sección regular con una fila de dos columnas. En la columna de la izquierda agregue un módulo de imagen.
Actualice la configuración de imagen de la siguiente manera:
En la pestaña Contenido ...
URL de la imagen: [inserte su imagen de 880 × 600]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Estilo de animación: diapositiva
Dirección de animación: izquierda
Intensidad de animación: 20%
Opacidad inicial de la animación: 100%
Guardar ajustes
Agregar módulo divisor
En la columna de la derecha, mostraremos nuestro contenido utilizando el módulo divisor y el módulo de llamada a la acción. El módulo divisor se utilizará para agregar una línea divisoria corta sobre el texto.
Agregue un módulo divisor a la columna de la derecha.
Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
Mostrar divisor: SÍ
En la pestaña Diseño…
Color: # e4ca77
Peso del divisor: 4px
Ancho: 80px (debe ingresar este valor ya que el predeterminado es el porcentaje)
Alineación del módulo: predeterminado (izquierda)
Margen personalizado: 60px superior, 0px inferior
Estilo de animación: Doblar
Dirección de animación: Derecha
Duración de la animación: 1200ms
Retraso de animación: 50 ms
Intensidad de la animación: 70%
Opacidad inicial de la animación: 0%
Guardar ajustes
Agregar un módulo de llamado a la acción
Debajo del módulo divisor, agregue un módulo de llamada a la acción con la siguiente configuración:
En la pestaña Contenido ...
Título: "La vista perfecta"
Texto del botón: "Más información"
Contenido: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, eficitur nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, eficitur nisi ".
Enlace: #
Usar color de fondo: NO
En la pestaña Diseño…
Color del texto: oscuro
Orientación del texto: izquierda
Fuente de encabezado: Lato, mayúsculas (TT)
Tamaño de fuente del encabezado: 38px
Color del texto del encabezado: # 0c0c0c
Espaciado de letras de encabezado: 0.2em
Altura de la línea de encabezado: 1.4em
Fuente del cuerpo: Lato
Tamaño de fuente del cuerpo: 18px
Color del texto del cuerpo: # 9e9e9e
Altura de la línea del cuerpo: 1.8em
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 15px
Color del texto del botón: # 000000
Color de fondo del botón: rgba (225,225,225,0)
Ancho del borde del botón: 0px
Espacio entre letras del botón: 2px
Fuente del botón: Lato, Negrita (B), Mayúscula (TT)
Icono de botón: flecha derecha
Mostrar solo el icono al pasar el mouse para el botón: NO
Espacio entre letras del botón de desplazamiento: 0px
Estilo de animación: Doblar
Dirección de animación: Derecha
Duración de la animación: 1200ms
Retraso de animación: 50 ms
Intensidad de la animación: 70%
Opacidad inicial de la animación: 0%
Guardar ajustes
Ahora haga clic para editar la configuración de la fila y actualizar lo siguiente:
En la pestaña Diseño…
Usar ancho personalizado: SÍ
Ancho personalizado: 1366px
En la pestaña Avanzado…
Agregue el siguiente CSS personalizado al cuadro Elemento principal de la columna 1:
z-index: 999;
Guardar ajustes
Duplique su fila y actualícela
Eso es todo para la primera fila. Para ahorrar tiempo creando la segunda fila, duplique la fila que acaba de crear.
Edite la configuración de fila duplicada de la siguiente manera:
En la pestaña Avanzado…
Saque el CSS personalizado en el elemento principal de la columna 1 y agréguelo al cuadro de elemento principal de la columna 2:
z-index: 999;
Dado que nuestra imagen estará en la columna de la derecha, necesitamos que esa columna permanezca encima del texto que se anima a la izquierda.
Guardar ajustes
Actualizar el módulo de imagen y el módulo de llamada a la acción en la segunda fila
A continuación, arrastre el módulo de imagen a la columna derecha y arrastre el módulo divisor y el módulo de llamada a la acción a la columna izquierda.
Esta sección tendrá una estructura de columnas ligeramente diferente. Haga clic en el icono Cambiar fila de estructura de columna (junto al icono de fila duplicada) y seleccione un diseño de columna de dos tercios un tercio.
Ahora todo lo que tenemos que hacer es volver a visitar cada uno de los módulos dentro de la fila y hacer algunos cambios.
Primero, actualice la configuración del módulo divisor de la siguiente manera:
En la pestaña Diseño…
Alineación del módulo: derecha
Dirección de animación: izquierda
Guardar ajustes
A continuación, actualice la configuración del módulo de llamada a la acción de la siguiente manera:
Título: "Habla por sí mismo"
Orientación del texto: Derecha
Alineación del texto del encabezado: derecha
Ancho: 700px (escriba esto)
Dirección de animación: izquierda
Guardar ajustes
A continuación, actualice el Módulo de imagen en la columna de la derecha con su nueva imagen de 790 × 880.
¡Eso es todo para la sección 3!
Mira tu resultado.
Construcción de la sección 4 de la demostración
La sección 4 lleva el diseño del módulo de imagen a otro nivel con algunos trucos avanzados de CSS. Y, apilar módulos de texto para doblarlos sobre una bisagra se combina bien con la entrega. Vamos a sumergirnos.
Con Visual Builder, agregue una sección regular con una fila de dos columnas (la mitad y la mitad). Antes de agregar nuestro primer módulo, agreguemos un color de fondo a nuestra sección. Haga clic para editar la configuración de la sección.
Debajo de la pestaña de contenido, seleccione la pestaña de color de fondo e ingrese el color # 262938.
Guardar ajustes
Agregue el primer módulo de texto
En la columna de la izquierda, agregue un módulo de texto y actualice la configuración de texto de la siguiente manera:
En la pestaña Contenido ...
Ingrese el siguiente html en la pestaña de texto del cuadro de contenido:
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
En la pestaña Diseño…
Color del texto: claro
Fuente de encabezado: Playfair Display, negrita (B)
Tamaño de fuente del encabezado: 38px
Altura de la línea de encabezado: 1.3em
Margen personalizado: 20px inferior
Animación: Fold
Dirección de animación: Arriba
Agregue el segundo módulo de texto
A continuación, agregue otro módulo de texto directamente debajo del módulo de texto actual. Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
Contenido: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, eficitur nisl. Sed nec purus tempus, sagittis mi id, eficitur nisl ".
En la pestaña Diseño…
Color del texto: claro
Tamaño de fuente de texto: 18px
Texto Color del texto: rgba (255,255,255,0.66)
Altura de la línea de texto: 1.9em
Margen personalizado: 40px inferior
Estilo de animación: Doblar
Dirección de animación: Abajo
Retraso de animación: 150 ms
Guardar ajustes
Agregar el módulo de botones
Agregue un módulo de botones debajo del último módulo de texto y actualice la configuración de la siguiente manera:
Texto del botón: Más información
URL del botón: #
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 15px
Color del texto del botón: # 01254c
Color de fondo del botón: #ffffff
Radio del borde del botón: 0px
Fuente del botón: negrita (B), mayúscula (TT)
Relleno personalizado: 10 px arriba, 30 px derecha, 10 px abajo, 30 px izquierda
Estilo de animación: diapositiva
Dirección de animación: Abajo
Duración de la animación: 1600ms
Retraso de animación: 150 ms
Intensidad de animación: 20%
Guardar ajustes
Agregar módulo de imagen a la columna derecha
Eso es todo para esa columna. Ahora necesitamos agregar un módulo de imagen a la columna de la derecha. Luego actualice la configuración de la siguiente manera:
En la pestaña Contenido ...
URL de la imagen: [inserte su imagen de 600 × 400]
En la pestaña Diseño…
Forzar ancho completo: SÍ
Estilo de animación: diapositiva
Dirección de animación: Derecha
Retraso de animación: 800ms
Intensidad de animación: 20%
Guardar ajustes
Actualizar la configuración de la fila
Ahora haga clic para editar la configuración de la fila y actualizar lo siguiente:
En la pestaña Diseño…
Usar ancho personalizado: SÍ
Ancho personalizado: 1366px
Relleno personalizado: 27 px arriba, 0 px derecha, 170 px abajo, 0 px izquierda
Columna 1 Relleno personalizado: 6% superior
En la pestaña Avanzado…
Agregue el siguiente CSS personalizado al cuadro Elemento principal de la columna 1:
z-index: 999;
Este CSS agrega asegura que el texto permanezca en la parte superior de la imagen durante la animación.
Luego, agregue el siguiente CSS personalizado al cuadro Elemento principal de la columna 2:
transform: scale(1.3); transform-origin: top right;
Este CSS agrega un diseño inteligente para escalar (aumentar) el tamaño de todo en la columna 2 (la imagen). La propiedad de origen de transformación le dice a la columna que se escale desde la parte superior derecha de la fila. Esto crea una ligera superposición del texto de la izquierda y la imagen.
Guardar ajustes
Duplica y actualiza tu fila
Ahora, como hicimos en la sección 3, vamos a duplicar la fila. Después de duplicar la fila, arrastre los 2 módulos de texto y el módulo de botones de la columna de la izquierda a la derecha. Y arrastre el módulo de imagen de la columna derecha a la izquierda. Ahora todo lo que tenemos que hacer es realizar algunas actualizaciones menores en nuestra fila duplicada y su contenido.
Primero, actualice la configuración de la fila con lo siguiente:
En la pestaña Diseño…
Relleno personalizado: 40 px arriba, 0 px derecha, 40 px abajo, 0 px izquierda
Columna 1 Relleno personalizado: [restaurar a los valores predeterminados; borrar 6% arriba]
Columna 2 Relleno personalizado: 6% superior
En la pestaña Avanzado…
Borre el CSS personalizado del cuadro de elemento principal de la columna 1 y del cuadro de elemento principal de la columna 2. Esto se transfirió de la duplicación y ya no lo necesitamos.
Actualizar módulo de imagen
A continuación, actualice el Módulo de imagen (ahora en la columna de la izquierda) con lo siguiente:
En la pestaña Contenido ...
URL de la imagen: [inserte su nueva imagen de 600 × 400]
En la pestaña Diseño…
Dirección de animación: izquierda
En la pestaña Avanzado…
Si pensabas que esta imagen ya estaba borrosa. ¡piensa otra vez! Todo lo que necesita hacer para agregar este efecto de desenfoque es agregar la siguiente línea de CSS personalizado al cuadro Elemento principal:
filter: blur(5px) opacity(.6);
Además del efecto de desenfoque, este CSS también hace que la imagen sea semitransparente con una opacidad del 60%.
Guardar ajustes
Actualizar el módulo de texto en la columna de la derecha
Pasando a la columna de la derecha, actualice el contenido superior del Módulo de texto con un encabezado h1 más corto:
<h1>Consectetur adipiscing elit</h1>
Guardar ajustes
¡Y voilá! Todos hemos terminado con la sección 4. Veamos nuestro resultado final.
Bono: descargue estas secciones para una fácil importación
Como beneficio adicional, hemos empaquetado las secciones integradas en el tutorial de hoy en una descarga gratuita que puede obtener utilizando el formulario de suscripción por correo electrónico a continuación. Simplemente ingrese su correo electrónico y aparecerá el botón de descarga. No se preocupe por "volver a suscribirse" si ya es parte de nuestro Boletín Divi. Vuelva a ingresar su correo electrónico no resultará en más correos electrónicos o duplicados. Simplemente revelará la descarga.
¡Disfrutar!
Descargar el paquete de diseño
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.
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 usar estas descargas, comience por ubicar el archivo comprimido llamado Animation_Effects_Part_2.zip en nuestra carpeta de descargas. Descomprímalo para revelar las siguientes importaciones.
Efectos de animación, parte 2 (sección 1) .json
Efectos de animación, parte 2 (sección 2) .json
Navegue en su administrador de WordPress a Divi> Biblioteca Divi> Importar y exportar. Cuando aparezca el modal de portabilidad, haga clic en la pestaña de importación y en el botón etiquetado como elegir archivo.
Seleccione el archivo json que prefiera y haga clic en "Importar diseños de Divi Builder". Una vez que se complete la importación, navegue hasta la publicación o página a la que le gustaría agregar una de las secciones anteriores.
Activa el constructor visual. Navegue a la parte de la página a la que le gustaría agregar una de las secciones anteriores. Al hacer clic en el icono de agregar una nueva sección, se le presentará la opción "Agregar desde la biblioteca". Elija esta opción y seleccione el diseño que desee.
Terminando
Además de hacerme un poco hambriento de carbohidratos, esta sección muestra formas creativas de mostrar y animar imágenes. Además, los módulos de texto que se despliegan en una bisagra con el botón retrasado que se desliza atraen aún más al usuario a hacer clic en el CTA.
Subiendo
En la parte 3 de esta serie, les mostraré una hermosa manera de diseñar y animar módulos publicitarios. Este diseño de sección se puede utilizar para una variedad de propósitos. Puedo ver que esta es una forma de mostrar el proceso de su servicio o una lista de sus servicios o productos.
Deseando que llegue.
¡No olvide comunicarse en los comentarios a continuación!