Cómo utilizar los nuevos efectos de animación de Divi

Bienvenido a la parte 1 de esta serie de 6 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 la animación Divi.

La animación puede dar vida a una página. Si se hace de forma eficaz, el usuario puede comprometerse y estar más inclinado a explorar el contenido de su página. Si se hace mal, las animaciones pueden distraer completamente al usuario y alejarlo en un estado de decepción aturdida. La velocidad, el tiempo y la intensidad de la animación juegan un papel importante en esta sinfonía de movimiento a medida que el usuario se desplaza hacia abajo en la página.

Las funciones de animación avanzadas de Divi le permiten agregar animación a cualquier elemento de su sitio web. Y puedes combinar estos elementos animados para crear innumerables combinaciones de movimiento que hagan que tus secciones cobren vida.

En la parte 1 de esta serie, le mostraré cómo usar el constructor visual para construir y animar las dos primeras secciones de nuestra página de demostración en vivo que muestra el poder de las funciones de animación de Divi.

Empecemos.

Aquí hay un adelanto de lo que construiremos en esta serie

Parte 1 de la serie

Sección 1

Sección 2

Parte 2 de la serie

Seccion 3

Sección 4

Parte 3 de la serie

Sección 5

Parte 4 de la serie

Sección 6

Parte 5 de la serie

Sección 7

Parte 6 de la serie

Sección 8

Sección 9

Preparación de los elementos de diseño

Para la primera sección, necesitará dos imágenes. La primera es su imagen de fondo de pantalla completa con dimensiones de alrededor de 1280 × 800. Aquí está el que estoy usando:

La segunda imagen es una versión editada de la misma imagen que se ha volteado verticalmente y se ha desvanecido hacia la parte inferior. Esta segunda imagen servirá como fondo para su título principal y debe ser de alrededor de 800 × 400.

Para crear la imagen al revés, abra la imagen en Vista previa y seleccione Herramientas> Voltear verticalmente o abra la imagen en Photoshop, seleccione Imagen> Rotación de imagen> Voltear lienzo vertical. Para agregar el efecto de desvanecimiento en la parte inferior de la imagen, utilicé la herramienta de borrador en modo pincel con un tamaño de 800px y 0% de dureza. Luego mantuve presionada la tecla Mayús y arrastré el pincel a lo largo del borde inferior.

Asegúrese de exportarlo como un archivo png.

Si no tiene Photoshop, puede probar una solución de edición de fotos gratuita como gimpshop para realizar muchas de las mismas ediciones de diseño. Si no sabe cómo usar un software de edición de fotos (y no le importa aprender en este punto), no dude en omitir la segunda imagen por ahora, o use la de abajo (haga clic y arrástrela a su escritorio).

Para la segunda sección, necesitará dos imágenes. El primero debería rondar los 730 × 490 como este.

Y el segundo debería rondar los 525 × 660 como el de abajo.

Comprensión de la terminología de la animación

Si aún no lo ha hecho, siga adelante y lea la publicación de actualización de funciones que presenta animaciones avanzadas. Al final de la publicación, Nick brinda una definición / descripción útil de cada una de las características de animación que encontrará en todo el constructor. Comprender lo que realmente hacen estas funciones de animación es importante para el proceso de creación.

Una vez que comprenda cuáles son estas funciones de animación, profundicemos.

Cómo utilizar los nuevos efectos de animación de Divi

Suscríbete a nuestro canal de Youtube

Agregue su nueva configuración de página

Desde el panel de WordPress, vaya a Páginas> Agregar nuevo. Luego agregue un título a su página. A continuación, busque la configuración de la página Divi en el cuadro en la parte superior derecha de la página y seleccione Navegación por puntos "ON". En el cuadro Atributos de página, seleccione Página en blanco para su plantilla de página. Finalmente, haga clic en el botón "Usar Divi Builder" e implemente Visual Builder para comenzar a construir su diseño.

Construcción de la sección 1: Diseño y animación de encabezados a pantalla completa

Esta sección de encabezado se comportará de manera muy similar a un módulo de encabezado de ancho completo configurado en pantalla completa. En otras palabras, cuando se carga el sitio, la sección llenará todo el ancho y alto de la ventana del navegador sin importar el tamaño de la ventana. Pero en lugar de usar el módulo de encabezado de ancho completo, usaremos una sección estándar y estableceremos la altura en 100vh. De esa manera podemos agregar un módulo de texto dentro de él.

Con Visual Builder, haga clic para editar la configuración de la sección estándar que ya se muestra de forma predeterminada al iniciar el constructor. Actualice lo siguiente:

En la pestaña Contenido ...

Imagen de fondo: [ingrese su imagen de fondo de 1280 × 800]
Usar efecto de paralaje: SÍ
Método Parallax: True Parallax

En la pestaña Diseño…

Relleno personalizado: 5% arriba, 0 px derecha, 5% abajo, 0 px izquierda

En la pestaña Avanzado…

Agregue el siguiente CSS personalizado en el cuadro Elemento principal:

min-height: 100vh

Esta línea de CSS le dice a la sección que muestre el 100% de la altura de la ventana gráfica.

Guardar ajustes

Luego inserte una estructura de una columna en su fila y agregue un módulo de texto a la columna. Actualice la configuración del módulo de texto de la siguiente manera:

En la pestaña Contenido ...

Simplemente agregue la palabra "Divi" dentro del cuadro de contenido.

En la pestaña Diseño…

Fuente de texto: Oswald, mayúscula (TT)
Tamaño de fuente de texto: 14px
Texto Color del texto: # 08408e
Espaciado de letras de texto: 1.5em (deberá escribir esto)
Orientación del texto: centro
Margen personalizado: 2%
Estilo de animación: Flip
Repetición de animación: una vez
Dirección de animación: Derecha
Duración de la animación: 2000 ms
Retraso de animación: 1100ms
Intensidad de animación: 100%
Opacidad inicial de la animación: 0%
Curva de velocidad de animación: Ease-In-Out

Tiempo de espera… Hagamos una pausa por un minuto para que pueda mostrarle lo que se necesitaría para agregar esta animación similar manualmente.

Aquí está el html con estilo en línea necesario para la animación:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

Y aquí está el CSS necesario para la animación:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

Y esto no incluye el código necesario para activar la animación cuando se vuelve visible en la ventana del navegador. De todos modos, todo eso para decir que tener estas funciones de animación integradas es un gran ahorro de tiempo. Y poder ver la animación en vivo mientras edita las opciones de animación es una ventaja considerable.

Ahora continuemos actualizando la configuración del módulo de texto:

En la pestaña Avanzado…

Agregue la siguiente línea de CSS personalizado al cuadro Elemento principal:

text-indent: 1.5em

Guardar ajustes

A continuación, agregue otro módulo de texto directamente debajo del que acaba de crear y actualice la configuración de la siguiente manera:

En la pestaña Contenido ...

Agregue el siguiente html en la pestaña de texto del cuadro de contenido:

<p><span>Believing</span><br />is  Seeing</p>

En la pestaña Diseño…

Color del texto: claro
Fuente de texto: Oswald, mayúscula (TT)
Tamaño de fuente de texto: 8vw (debe escribir esto; esto hace que el tamaño de fuente sea del 8% del ancho de la ventana gráfica)
Texto Color del texto: rgba (255,255,255,0.79)
Altura de la línea de texto: 1.4em
Orientación del texto: centro
Estilo de animación: Doblar
Dirección de animación: Arriba
Duración de la animación: 1800ms
Retraso de animación: 0 ms
Intensidad de animación: 60%

Guardar ajustes

Este efecto de animación revelará el título principal doblándolo (o levantándolo) desde una posición aparentemente plana. Ahora que hemos terminado con el texto del título principal, agreguemos nuestra imagen de fondo al revés a la fila.

Ahora vaya a la Configuración de fila de la fila que contiene los dos módulos de texto que acaba de crear y actualice la Configuración de la siguiente manera:

En la pestaña Contenido ...

Imagen de fondo: [inserte su imagen de 800 × 440]
Tamaño de la imagen de fondo: Ajustar
Posición de la imagen de fondo: Centro superior
Repetición de imagen de fondo: sin repetición

En la pestaña Diseño…

Usar ancho personalizado: SÍ
Unidad:%
Ancho personalizado: 50%
Relleno personalizado: 12% arriba, 0% derecha, 5% abajo, 0% izquierda
Estilo de animación: diapositiva
Dirección de animación: Arriba
Retraso de animación: 300 ms
Intensidad de animación: 20%

Este efecto de animación desliza la imagen hacia arriba, casi como si se elevara desde detrás de las montañas.

Eso es todo para la primera sección. Echemos un vistazo a nuestro diseño y animación final.

Los tres elementos animados aquí incluyen la Fila (que se desliza hacia arriba), el módulo de texto con el texto "Creer para ver" (que se despliega desde el centro) y el módulo de texto con el texto "Divi" (que está retrasado para abrirse hacia la derecha después de que los otros elementos se hayan detenido). La combinación realmente atrae al visitante al revelar diferentes piezas de contenido de manera intencionada y oportuna.

Edificio de la Sección 2

Esta segunda sección de nuestra página de demostración de animación muestra una forma sutil, pero extremadamente genial, de revelar contenido en su página. De hecho, es casi imposible reconocer todos los movimientos a primera vista.

Para construir la segunda sección, agregue una sección regular debajo de la sección anterior. En la sección, agregue una fila de dos columnas (la mitad y la mitad).

En la columna de la izquierda, agregue un módulo de texto con la siguiente configuración:

En la pestaña Contenido ...

Ingrese el siguiente html en la pestaña de texto del cuadro de contenido:

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

En la pestaña Diseño…

Color del texto: claro
Fuente de texto: Montserrat
Tamaño de fuente de texto: 18px
Altura de la línea de texto: 1.8em
Fuente de encabezado: Montserrat, negrita (B), mayúscula (TT)
Tamaño de fuente del encabezado: 39px (escritorio)
Altura de la línea de encabezado: 2.2em
Margen inferior: 50 px
Estilo de animación: diapositiva
Dirección de animación: Arriba
Intensidad de animación: 10%

Este efecto de animación revelará el bloque de texto deslizándolo hacia arriba para verlo.

Guardar ajustes

A continuación, agregue un módulo de botones debajo del módulo de texto que acaba de crear. Actualice la configuración del módulo de botones de la siguiente manera:

En la pestaña Contenido ...

Texto del botón: Más información
URL del botón: # (o lo que quieras que sea)

En la pestaña Diseño…

Alineación de botones: izquierda
Color del texto: claro
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 15px
Radio del borde del botón: 0
Espaciado de letras de botones: 3px
Fuente del botón: Montserrat, negrita (B), mayúscula (TT)
Mostrar icono de botón: SÍ
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
Retraso de animación: 100 ms
Intensidad de animación: 10%

Para contrarrestar el efecto del texto anterior, este efecto de animación revelará el botón deslizándolo hacia abajo a la vista con un ligero retraso.

Todavía no puede ver el texto y el botón porque actualmente es texto blanco sobre un fondo blanco. Esta bien. Pronto agregaremos nuestros antecedentes.

A continuación, agregue un módulo divisor a la columna de la derecha.

Luego actualice la Configuración de la siguiente manera:

En la pestaña Diseño…

Alto: 260px

En la pestaña Avanzado…

Deshabilitar la visibilidad en el escritorio

Agregar un divisor aquí ayudará a que la imagen de fondo permanezca visible en dispositivos móviles.

Guardar ajustes

Ahora agreguemos nuestros fondos a cada una de nuestras columnas. Vaya a la Configuración de filas y actualice lo siguiente:

En la pestaña Contenido ...

Columna 1 Colores de degradado de fondo: # fe8840, rgba (238,78,78,0.9)
Columna 1 Dirección de gradiente: 135 grados
Imagen de fondo de la columna 2: [ingrese su imagen de 730 × 490]
Columna 2 Posición de la imagen de fondo: arriba a la izquierda
Repetición de la imagen de fondo de la columna 2: Sin repetición

En la pestaña Diseño…

Usar ancho personalizado: SÍ
Ancho personalizado: 1366px
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 1
Ecualizar alturas de columna: SÍ
Relleno personalizado: 0px arriba, 0px derecha, 0px abajo, 0px izquierda
Columna 1 Relleno personalizado: 5% arriba, 7% derecha, 5% abajo, 7% izquierda
Estilo de animación: Doblar
Dirección de animación: Arriba
Duración de la animación: 800ms

Este efecto de animación revelará toda la fila doblándola (o colocándola) a la vista.

En la pestaña Avanzado…

Agregue el siguiente CSS personalizado al cuadro Elemento principal:

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

Guardar ajustes

A continuación, agregue una fila de dos columnas (un tercio dos tercios) debajo de la fila que acaba de terminar de crear.

En la columna de la izquierda, agregue un módulo divisor y actualice la configuración de la siguiente manera:

En la pestaña Diseño…

Alto: 400px

En la pestaña Avanzado…

Deshabilitar la visibilidad en el escritorio

Agregar un divisor aquí ayudará a que la imagen de fondo permanezca visible en dispositivos móviles.

Guardar ajustes

Para ahorrar tiempo, haga clic derecho y copie el módulo de texto en la columna izquierda de la fila de arriba que contiene el texto “El tiempo es dinero”. Luego péguelo en la columna derecha (dos tercios) de la fila de abajo.

Actualice la nueva configuración del módulo de texto de la siguiente manera:

En la pestaña Contenido ...

Cambie el texto del encabezado h1 a "Conmutar como un profesional" en el cuadro de contenido.

En la pestaña Diseño…

Texto Color del texto: # a8a8a8
Color del texto del encabezado: # 414159
Estilo de animación: diapositiva
Dirección de animación: Abajo
Intensidad de animación: 10%

Este efecto de animación revela el bloque de texto deslizándolo hacia abajo para verlo.

Ahora haga clic derecho y copie el módulo de botones en la columna izquierda de la fila de arriba y péguelo debajo del módulo de texto que acaba de editar.

Actualice la configuración del módulo de botones de la siguiente manera:

Color del texto del botón: # ff4823
Color del borde del botón: # ff4823
Color del texto de desplazamiento del botón: # ff2323

Guardar ajustes

Para el último paso, edite la configuración de la fila actualizando lo siguiente:

En la pestaña Contenido ...

Color de fondo: #ffffff
Imagen de fondo de la columna 1: [inserte su imagen de 525 × 660]
Columna 1 Posición de la imagen de fondo: arriba a la izquierda
Repetición de la imagen de fondo de la columna 1: Sin repetición
Columna 2 Colores de degradado de fondo: rgba (255,255,255,0.91), #ffffff
Dirección del gradiente de la columna 2: 135 grados

En la pestaña Diseño…

Usar ancho personalizado: SÍ
Ancho personalizado: 1040px
Usar ancho de canalón personalizado: SÍ
Ancho de la canaleta: 1
Ecualizar alturas de columna: SÍ
Relleno personalizado: 0px arriba, 0px derecha, 0px abajo, 0px izquierda
Columna 2 Relleno personalizado: 5% arriba, 7% derecha, 5% abajo, 7% izquierda
Estilo de animación: Doblar
Dirección de animación: Abajo
Duración de la animación: 800ms

Este efecto de animación revelará toda la fila al plegarla para que quede a la vista.

En la pestaña Avanzado…

Agregue el siguiente CSS personalizado en el cuadro Elemento principal:

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

Eso es todo por esta sección. Mira tus resultados.

Debido a que los elementos de animación y diseño de esta sección son sutiles, creo que es un gran ejemplo del tipo de diseño y animación que podría usarse en la mayoría de las páginas. Las filas superior e inferior se abren como si estuviera mirando un libro que se abre desde atrás. El texto y los botones se mueven ligeramente hacia arriba en la fila superior y hacia abajo en la fila inferior. Una gran combinación.

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.

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 usar estas descargas, comience por ubicar el archivo comprimido llamado Animation_Effects_Part_1.zip en nuestra carpeta de descargas. Descomprímalo para revelar las siguientes importaciones.

Efectos de animación, parte 1 (sección 1) .json

Efectos de animación Parte 1 (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

Espero que estas dos secciones sirvan de inspiración para futuras versiones que utilicen las funciones de animación de Divi. Los conceptos de diseño por sí solos son excelentes y los diseños se pueden adaptar fácilmente a cualquier sitio web con solo unos pocos ajustes menores. Estén atentos ya que cubriremos mucho más en esta serie.

Subiendo

En la siguiente parte de esta serie, continuaré nuestra exploración de las funciones de animación avanzadas de Divi mediante la creación de las secciones 3 y 4 de nuestra página de demostración de animación.

Esto es lo que puede esperar construir.

Seccion 3:

Sección 4:

Deje los comentarios que tenga a continuación.

¡Salud!