Una sección de héroe atractiva es uno de los aspectos más importantes de cualquier sitio web. Agregar transiciones suaves y animaciones para mostrar el contenido de la sección de héroes es una forma de mejorar la calidad de su sección de héroes. En Divi , las transiciones básicas de la sección de héroe se pueden lograr fácilmente con un módulo deslizante (pasar de una diapositiva a otra), pero las posibilidades de diseño de animación pueden ser limitadas. Sin embargo, con un poco de pensamiento creativo (fuera de la caja), puede desbloquear el poder de Divi para diseñar una sección de héroe completamente personalizada con innumerables animaciones o transiciones únicas.
En este tutorial, le mostraremos cómo crear una sección de héroe con transiciones y animaciones únicas que se pueden diseñar y personalizar fácilmente con la configuración de Divi Builder.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
De forma predeterminada, la segunda fila tendrá una posición absoluta que cubre la primera fila, por lo que la primera fila no será visible. Para editar la primera fila, primero deberá abrir la configuración de la segunda fila y cambiar la posición a la predeterminada. Una vez hecho esto, puede volver a agregar la posición absoluta antes de publicar.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Comprender la idea básica primero
Antes de que comencemos a construir nuestra sección principal, puede ser útil comprender la idea básica detrás del diseño. Básicamente, lo que vamos a hacer es crear una sección con dos filas. Cada fila servirá como un diseño de sección principal (como una diapositiva). Cada fila tendrá una sola columna que se personaliza para que sea de pantalla completa (abarque todo el ancho y el alto de la ventana de su navegador).
Usando esta gran cantidad de espacio disponible en cada columna, podemos posicionar cada módulo con precisión usando la posición absoluta en Divi. Después de eso, podemos agregar estilos de animación, duraciones y retrasos a cualquiera de esos módulos o filas para lograr las transiciones y animaciones de la sección principal que queremos. El objetivo de este tutorial es mostrarte un diseño básico, pero como ya habrás adivinado, hay un montón de posibilidades.
Parte 1: Creación del diseño de la sección del primer héroe con elementos de animación personalizados
En esta primera parte del tutorial, vamos a crear el primer diseño de la sección principal que residirá en una sola fila y columna dentro de la sección.
Actualizar relleno de sección
Antes de hacer cualquier otra cosa, abra la configuración de la sección predeterminada en el generador y elimine el relleno superior e inferior predeterminado:
- Relleno: 0px arriba, 0px abajo
Creación de la primera fila y columna
Comencemos agregando una fila de una columna a la sección. Esta primera fila contendrá el diseño de nuestra sección de héroe inicial antes de pasar a una segunda fila/diseño que construiremos después de esta fila.
Configuración de fila
Abra la configuración de la fila y agregue un fondo personalizado de la siguiente manera:
Gradiente de fondo
- Degradado de fondo Color izquierdo: #8300e9
- Degradado de fondo Color derecho: #0c71c3
Imagen de fondo
- Cargar imagen
- Mezcla de imagen de fondo: Multiplicar
En la pestaña de diseño, actualice el tamaño y el relleno de la siguiente manera:
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
- Relleno: 0px arriba, 0px abajo
El ancho de medianil 1 eliminará los márgenes predeterminados que puedan afectar el espacio de diseño de nuestro módulo más adelante. Y queremos que el ancho abarque todo el ancho del navegador, ya que esto servirá como nuestro fondo principal para nuestra sección de héroe de pantalla completa.
Configuración de columna
La verdadera clave de este diseño es la personalización de la columna. Queremos que la columna abarque la altura y el ancho completos de la ventana del navegador. Esto nos dará espacio para agregar y colocar múltiples módulos dentro de la columna usando la posición absoluta. Y queremos usar la propiedad flex para centrar verticalmente cualquier módulo que agreguemos sin la posición absoluta.
Abra la configuración de la columna y agregue el siguiente CSS personalizado al elemento principal:
|
01
02
03
04
05
06
|
height:100vh;width: 100% !important;display:flex;flex-direction: column;align-items:center;justify-content:center; |
Agregar los módulos
Ahora podemos agregar el módulo que queremos usar para agregar el contenido para el diseño inicial de la sección principal.
Llamada a la acción
Para nuestro primer módulo, agreguemos un módulo de llamada a la acción que incluirá el título para el diseño de nuestra sección de héroe inicial.
Debido a nuestro CSS personalizado de columna, el módulo debe permanecer centrado verticalmente dentro de la ventana automáticamente.
Configuración de contenido
Luego abra la configuración de la llamada a la acción y actualice lo siguiente:
- Título: Ver el mundo
- Botón: dejar en blanco
- Cuerpo: dejar en blanco
- Usar color de fondo: NO
Configuración de diseño
- Fuente del título: Oswald
- Peso de la fuente del título: ligero
- Estilo de fuente del título: cursiva
- Tamaño del texto del título: 7vw (escritorio), 40px (teléfono)
- Ancho máximo: 50vw (escritorio), 70vw (tableta y teléfono)
Animación
- Estilo de animación: Fundido
- Duración de la animación: 3000ms
¡Haz un seguimiento del tiempo de tu animación!
La clave para hacer que este diseño funcione es orquestar el tiempo de cualquier duración de la animación y/o los valores de retraso de la animación para que los siguientes elementos de diseño de la sección del héroe no comiencen hasta que se hayan completado las animaciones del diseño de la primera sección del héroe. Para este ejemplo, el módulo de llamada a la acción tiene una duración de animación de 3000 ms (o 3 segundos). Es importante recordar esto para que podamos retrasar la animación del diseño de transición (o siguiente). El siguiente diseño de la sección del héroe de transición que vamos a crear después de este consta de una fila separada (con nuevos elementos de diseño y animaciones) que se encuentra encima de esta (como una superposición). Sin embargo, tendremos que retrasar la animación de toda esa fila/diseño para que el diseño de la primera sección del héroe tenga el tiempo adecuado para animarse. Así que teóricamente,
Aunque hacer un seguimiento del tiempo puede ser complicado, especialmente con muchos elementos de animación, esta configuración le brinda un mundo de posibilidades para agregar todo tipo de diseños de animación porque tiene el poder de ajustar la duración y el retraso de cada elemento de animación.
Divisor
Aunque podemos elegir cualquier diseño de módulo/contenido para animar en nuestra sección de héroe inicial, lo simplificaremos agregando un módulo divisor con una animación de diapositivas.
Continúe y agregue un nuevo módulo divisor en el módulo de llamada a la acción.
Configuración de diseño
En la pestaña de diseño en la Configuración del divisor, actualice lo siguiente:
- Color de línea: #ffffff
- Peso del divisor: 1vw
- Ancho: 40vw
Aproveche la unidad de longitud de VW
El uso de la unidad de longitud vw aquí es perfecto porque queremos que el tamaño del divisor se escale de manera consistente con el ancho del navegador para un diseño receptivo fluido. Dado que la columna principal del divisor tiene un ancho del 100% y una altura de 100vh, la unidad de longitud vw es perfecta para estos elementos de diseño. Ya lo hemos usado para nuestro texto de título de CTA también.
Transformar
Para agregar un giro único al diseño del divisor, actualice la opción de sesgo de transformación de la siguiente manera:
- Transformar eje X sesgado: 45 grados
Animación
- Estilo de animación: Diapositiva
- Duración de la animación: 2000ms
- Retardo de animación: 1000ms
Posición
Ahora coloque el divisor con una posición absoluta de la siguiente manera:
- Posición: Absoluta
- Ubicación: abajo a la izquierda
- Desplazamiento vertical: 15vh
Resultado
Aquí está el resultado hasta ahora.
Parte 2: Creación del diseño de la sección principal de transición (segundo) con elementos de animación personalizados
Duplicar la primera fila
Para impulsar el diseño de nuestra segunda sección de héroe/transición, duplique la primera fila.
Ahora podemos modificar el contenido, el diseño y la animación de los elementos de la fila duplicada según sea necesario.
Actualizar fondo de fila
Abra la configuración de fila de la fila nueva/duplicada y actualice el fondo con una nueva combinación de colores degradados e imagen:
- Degradado de fondo Color izquierdo: #8300e9
- Degradado de fondo Color derecho: #e02b20
- Imagen de fondo: [subir nueva imagen]
- Mezcla de imagen de fondo: Multiplicar
Actualizar módulo de llamada a la acción
Contenido
A continuación, abra la configuración del módulo de llamada a la acción y actualice el contenido de la siguiente manera:
- Título: ¿Por qué esperar?
- Botón: Ver oferta
- Cuerpo: ¡Consigue un par de anteojos que te encanten hoy!
- URL del enlace del botón
Configuración de botones
En la pestaña de diseño, actualice la configuración del botón de la siguiente manera:
- Tamaño del texto del botón: 30 px (escritorio), 20 px (teléfono)
- Color de fondo del botón: #8300e9
- Color del borde del botón: #8300e9
Actualizar animación
A continuación, cambie la duración y el retraso de la animación:
- Duración de la animación: 2000ms
- Retardo de animación: 4000ms
Divisor duplicado
Dado que el diseño de la primera sección del héroe incluía un divisor que se desliza hacia la parte inferior izquierda de la sección del héroe, podemos agregar otro divisor complementario que se desliza hacia la parte superior derecha en este diseño de transición de la sección del héroe.
Para facilitar este proceso, duplique el divisor existente.
Posición del divisor
Luego abra la configuración del divisor duplicado y actualice la posición de la siguiente manera:
- Posición Ubicación: arriba a la derecha
Actualizar animación de división
- Retardo de animación: 3000ms
- Intensidad de animación: 70%
Posición de fila
Ahora que el diseño de la siguiente sección de héroe de transición está terminado, ahora podemos darle a la fila una posición absoluta para que se asiente sobre el diseño inicial de la sección de fila/héroe.
Actualice la posición de configuración de la fila de la siguiente manera:
- Posición: Absoluta
- Índice Z: 10
Animación de fila
Para asegurarse de que la animación de este segundo diseño de sección de héroe de transición aparezca en el momento adecuado, actualice la configuración de animación de la siguiente manera:
- Estilo de animación: Fundido
- Duración de la animación: 2000ms
- Retardo de animación: 3000ms
Resultado final
Pensamientos finales
Con suerte, las técnicas de diseño presentadas en este tutorial mejorarán su comprensión de Divi para crear animaciones y transiciones sorprendentes para su sección de héroe. Siéntete libre de jugar con diferentes animaciones (deslizar, voltear, etc.) y agregar nuevos módulos para elementos de diseño adicionales. Y es muy probable que también vea aún más aplicaciones para esta técnica.
Espero escuchar de usted en los comentarios.
¡Salud!