Cómo llevar de manera persuasiva a los visitantes a la página con la configuración de animación incorporada de Divi

Uno de los propósitos principales de las secciones de héroes es convencer a las personas de que sigan desplazándose hacia abajo en la página y descubran más contenido e información que ha compartido. Con las opciones de animación integradas de Divi, puede agregar animaciones interactivas a su página que lo ayudarán a guiar de manera persuasiva a los visitantes por la página. En este tutorial, vamos a motivar a los visitantes a que se desplacen hacia abajo a la sección de servicios usando íconos de flecha que los llevan a la sección de servicios.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

¡Empecemos a crear!

Suscríbete a nuestro canal de Youtube

Agregar la sección n. ° 1

Color de fondo

Crea una nueva página y agrégale una sección regular. Abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: # 0f0f0f

Divisor inferior

Continúe agregando un divisor inferior a la sección.

• Estilo de divisor: Buscar en la lista
• Color del divisor: #ffffff
• Altura del divisor: 30 px
• Repetición horizontal del divisor: 10x (escritorio), 4x (tableta y teléfono)

Espaciado

Agregue también algunos valores de relleno personalizados.

• Relleno superior: 269 px (escritorio), 100 px (tableta y teléfono)
• Acolchado inferior: 674 px (escritorio), 200 px (tableta y teléfono)

Añadir fila

Estructura de la columna

Luego, agregue una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila, vaya a la configuración de tamaño y habilite la opción 'Hacer esta fila de ancho completo'.

• Hacer esta fila de ancho completo: Sí

Agregar módulo de texto

Agregar contenido

El único módulo que necesitamos en esta fila es un módulo de texto. Continúe y agregue contenido H1 de su elección.

Configuración del texto del encabezado

A continuación, cambie la configuración del texto del título.

• Fuente de encabezado: Didact Gothic
• Peso de la fuente del encabezado: negrita
• Alineación del texto del encabezado: centro
• Color del texto del encabezado: #ffffff
• Tamaño del texto del encabezado: 170 px (escritorio), 50 px (tableta y teléfono)
• Altura de la línea de rumbo: 0.8em

• Longitud vertical de la sombra del texto del encabezado: 1.5em
• Color de la sombra del texto del encabezado: rgba (0,0,0,0.11)

Agregar sección n. ° 2

Color de fondo

Continúe agregando la segunda sección a la página. Cambie el color de fondo en la configuración de la sección.

• Color de fondo: # 0f0f0f

Divisor superior

Agrega un divisor superior a la sección también.

• Estilo de divisor: Buscar en la lista
• Color del divisor: #ffffff
• Altura del divisor: 30 px
• Repetición horizontal del divisor: 10x (escritorio), 4x (tableta y teléfono)

Espaciado

Y aumente los valores de espaciado en la configuración de espaciado.

• Acolchado superior: 245px
• Acolchado inferior: 245px

Añadir fila

Estructura de la columna

Continúe agregando una nueva fila con la siguiente estructura de columnas a la sección:

Dimensionamiento

Abra la configuración de la fila, vaya a la configuración de tamaño y realice algunos cambios.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2

Agregar módulo Blurb

Seleccionar icono

El primer módulo que necesitaremos en la primera columna es un módulo Blurb. La única parte del elemento del módulo Blurb que necesitamos es el icono. Seleccione el icono de flecha que apunta hacia abajo.

Configuración de iconos

Luego, vaya a la pestaña de diseño y cambie la configuración del icono.

• Color del icono: # 4ffcff
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 150px

Espaciado

Para aumentar el alcance del ícono, necesitaremos agregar un margen superior negativo. Esto permitirá que el módulo Blurb se superponga a la sección anterior y permitirá que la animación entre dos secciones suceda sin problemas. Para compensar el margen personalizado, también agregaremos un relleno superior personalizado. Esto asegurará que el icono permanezca exactamente en la misma posición que antes. Lo único que cambia es el tamaño y el alcance de todo el módulo.

• Margen superior: -550px
• Relleno superior: 550px

Animación

Por último, pero no menos importante, agregue una animación al módulo Blurb usando la siguiente configuración:

• Estilo de animación: diapositiva
• Dirección de animación: Abajo
• Duración de la animación: 3000ms
• Retraso de animación: 1200ms
• Intensidad de animación: 100%
• Opacidad inicial de la animación: 100%
• Curva de velocidad de animación: Ease-In-Out
• Animación de imagen / icono: sin animación

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido

El siguiente módulo que necesitamos en la primera columna es un módulo de texto. Agregue algún contenido de su elección.

Configuración de texto

Continúe cambiando la configuración del texto.

• Fuente de texto: Didact Gothic
• Peso de la fuente del texto: negrita
• Color del texto: rgba (255,255,255,0.03)
• Tamaño del texto: 350px
• Orientación del texto: centro

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido

Agregue un segundo módulo de texto a la primera columna con algún contenido H3 de su elección.

Configuración del texto del encabezado

Y cambie la configuración del texto del título en la pestaña de diseño.

• Fuente del encabezado 3: Didact Gothic
• Alineación del texto del encabezado 3: centro
• Color del texto del encabezado 3: #ffffff
• Tamaño del texto del encabezado 3: 40 px (escritorio), 30 px (tableta y teléfono)
• Espacio entre letras del encabezado 3: -1px

Agregar módulo divisor a la columna 1

Visibilidad

El siguiente módulo que se necesita en la primera columna es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Color

Continúe cambiando el color del divisor en la pestaña de diseño.

• Color: #ffffff

Dimensionamiento

Realice también algunos cambios en la configuración de tamaño.

• Ancho: 59%
• Alineación del módulo: centro

Animación

Y agregue una animación al módulo también.

• Estilo de animación: diapositiva
• Dirección de animación: Centro
• Duración de la animación: 2000 ms
• Intensidad de animación: 10%
• Curva de velocidad de animación: Ease-In-Out

Agregue el módulo de texto n. ° 3 a la columna 1

Agregar contenido

El siguiente y último módulo que necesitamos en la columna uno es otro módulo de texto. Agregue algún contenido de su elección.

Configuración de texto

Continúe cambiando la configuración del texto.

• Peso de la fuente del texto: Ligero
• Color del texto: # b7b7b7
• Tamaño del texto: 18px
• Altura de la línea de texto: 1.8em
• Orientación del texto: centro

Animación

Y agregue una animación al módulo.

• Estilo de animación: diapositiva
• Dirección de animación: Arriba
• Intensidad de animación: 20%
• Curva de velocidad de animación: Ease-In-Out

Clonar módulos 3 veces y colocar duplicados en las columnas restantes

Ahora que hemos terminado de modificar todos los módulos en la columna 1, podemos clonar todos los módulos en la columna uno 3 veces y colocar los duplicados en las columnas restantes.

Cambiar el contenido del módulo

Cambie el contenido de los duplicados.

Agregar retraso de animación a los módulos divisores de duplicados

Agregue también un retraso de animación a cada uno de los duplicados del módulo divisor.

• Módulo divisor en la columna 2: 400 ms
• Módulo divisor en la columna 3: 800ms
• Módulo divisor en la columna 4: 1200ms

Agregar retraso de animación a los duplicados del módulo de texto n. ° 3

Haga lo mismo con el último módulo de texto de cada columna.

• Último módulo de texto en la columna 2: 400 ms
• Último módulo de texto en la columna 3: 800ms
• Último módulo de texto en la columna 4: 1200ms

Personalizar el ícono Blurb # 2

Color del icono

También vamos a modificar el color y la animación del icono de propaganda para cada uno de los duplicados. Abra el módulo Blurb en la columna 2 y cambie el color del icono.

• Color del icono: # ff6b86

Animación

Cambie también la configuración de la animación.

• Tipo de animación: diapositiva
• Dirección de animación: Abajo
• Duración de la animación: 2000 ms
• Retraso de animación: 800ms
• Intensidad de la animación: 62%
• Opacidad inicial de la animación: 100%
• Animación de imagen / icono: sin animación

Personalizar el ícono de Blurb # 3

Color del icono

Continúe abriendo el Módulo Blurb en la columna 3 y cambie el color del icono.

• Color del icono: # ffe500

Animación

Modifique también la configuración de la animación.

• Tipo de animación: diapositiva
• Dirección de animación: Abajo
• Duración de la animación: 1000ms
• Retraso de animación: 600 ms
• Intensidad de la animación: 69%
• Opacidad inicial de la animación: 100%
• Animación de imagen / icono: sin animación

Personalizar el ícono de Blurb # 4

Color del icono

Abra el último módulo Blurb, en la columna 4, y cambie el color del icono.

• Color del icono: # 00ff9d

Animación

Y termine el diseño cambiando la configuración de la animación en la pestaña de diseño.

• Tipo de animación: diapositiva
• Dirección de animación: Abajo
• Duración de la animación: 3000ms
• Retraso de animación: 400 ms
• Intensidad de animación: 100%
• Opacidad inicial de la animación: 100%
• Animación de imagen / icono: sin animación

Pensamientos finales

En esta publicación, le mostramos cómo llevar de manera persuasiva a los visitantes por la página utilizando la configuración de animación de Divi. La idea básica es que uses módulos de Blurb para sus íconos y aumentes el alcance de su animación en la sección de héroes. Puede utilizar este enfoque en cualquier tipo de sitio web que cree y ser tan creativo como desee. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!