Cómo llevar persuasivamente a los visitantes a la página con la configuración de animación incorporada de Div

Uno de los principales objetivos de las secciones de héroes es convencer a las personas de que continúen en la página y descubran más contenido e información que ha compartido. Con las opciones de animación incrustadas de la división, puede agregar animaciones interactivas a su página, lo que lo ayudará a conducir persuasivamente a los visitantes por la página. En este tutorial, motivaremos a los visitantes a reducir la sección de servicio utilizando iconos de flecha que los llevarán a la sección de servicio. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

¡Empecemos a crear! Suscríbase a nuestro canal de YouTube Agregar sección no. 1 Color de fondo Cree una nueva página y agregue una sección normal. Abra la configuración de la sección y cambie el color de fondo.
Color de fondo: # 0F0F0F

Separador inferior Continuar agregando un separador inferior a la sección.
Estilo divisor: encontrar en la lista
Color divisor: #ffffff
Altura del divisor: 30 px
Repetición horizontal del separador: 10x (escritorio), 4x (tableta y teléfono)

Sparto Agregue algunos valores de llenado personalizados.
Revestimiento superior: 269 PX (escritorio), 100 PX (tableta y teléfono)
Bajo forro: 674 PX (escritorio), 200 PX (tableta y teléfono)

Agregue la fila de la estructura de la columna y luego, agregue una nueva fila utilizando la siguiente estructura de la columna:

Dimensión sin agregar módulos, abrir la configuración promedio, acceder a la configuración de tamaño y activar la opción “Hacer esta fila de ancho completo”.
Haga esta fila ancho completo: sí

Agregue un módulo de texto Agregar contenido La única forma en que necesitamos en esta fila es un módulo de texto. Continúe y agregue un contenido H1 de su elección. Los titulares de texto y luego cambie su configuración de texto del encabezado.

Fuente del título: Didact Gothic
Título Fuente de peso: Bold
Alineación del texto del encabezado: Centro
Encabezado de texto en color: #ffffff
Tamaño de texto Cabezal: 170 PX (escritorio), 50 px (tableta y teléfono)
Altura de la línea de dirección: 0.8em
El texto del encabezado de sombra vertical: 1.5em

Encabezado de texto en color de sombras: RGBA (0.0,0,0.11)
Agregue el color de fondo de la sección 2 Continuar agregando la segunda sección a la página. Cambie el color de fondo a la configuración de la sección.

Color de fondo: # 0F0F0F
El divisor superior también agrega un separador superior a la sección.

Estilo divisor: encontrar en la lista
Color divisor: #ffffff
Altura del divisor: 30 px
Repetición horizontal del separador: 10x (escritorio), 4x (tableta y teléfono)
Espacio y aumento de los valores de espacio en la configuración de espaciado.

Revestimiento superior: 245 PX
Finamiento inferior: 245 PX
Agregue la fila La estructura de la columna Continúe agregando una nueva fila con la siguiente estructura de columnas en la sección:

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

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Agregue el modo de propaganda. La única parte del elemento de la propaganda que necesitamos es el icono. Seleccione el icono de flecha que indica hacia abajo.

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

Icono de color: # 4ffcffpplasing iconos: arriba
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 150 PX
Espacio para aumentar la cubierta del icono, tendremos que agregar un margen superior negativo. Esto permitirá que el módulo de la propaganda se superponga con la sección anterior y permitirá que la animación entre dos secciones se lleve a cabo sin problemas. Para compensar el margen personalizado, agregaremos el relleno personalizado desde arriba. Esto asegurará que el ícono permanezca exactamente en la misma posición que antes. Lo único que cambia es el tamaño y la cubierta de todo el módulo.
Margen superior: -550 PX

Revestimiento superior: 550 PX
Animación por último, pero no menos importante, agregue una animación al módulo de la propaganda utilizando la siguiente configuración:
Estilo de animación: diapositiva

Dirección de la animación: Down
Duración de la animación: 3000 ms
Retraso de animación: 1200 ms
Animación de intensidad: 100%
Opacidad de animación para comenzar: 100%
Curva de velocidad de animación: limpieza de la entrada de facilidad
Animación de imagen / icono: sin animación
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido La siguiente forma que necesitamos en la primera columna es un módulo de texto. Agregue un contenido a su elección.
Configuración de texto Continuar cambiando la configuración de texto.

Fuente de texto: Didact Gothic


El peso de la fuente de texto: en negrita
Color de texto: RGBA (255.255.255,0.03)
Tamaño de texto: 350 PX
Orientación de texto: centro
Agregue el módulo de texto no. 2 En la columna 1 Agregar contenido Agregue un segundo módulo de texto a la primera columna con un contenido H3 de su elección.
Configuración Encabezado de texto y modifique la configuración del texto del encabezado en la pestaña Diseño.

3 Fuentes de fuentes: Didact Gothic

Título 3 Alineación de texto: Centro
FRUP 3 Color de texto: #FFFFFRICA 3 Dimensión de texto: 40 PX (escritorio), 30 PX (tableta y teléfono)
Rúbrica 3 Espaciación de litros: -1 PX
Agregue un módulo divisor en la visibilidad de la columna 1 El siguiente modo requerido en la primera columna es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
Continúe el color cambiando el color del separador a la pestaña de diseño.

Color: #ffffff
Dimensión Modifique la configuración de tamaño.

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

Animación y agregue una animación al modo.
Estilo de animación: diapositiva
Director de Animación: Centro

Duración de animación: 2000 ms
Intensidad de animación: 10%
Curva de velocidad de animación: limpieza de la entrada de facilidad
Agregue el módulo de texto no. 3 en la columna 1 agrega el siguiente contenido y la última forma en que necesitamos en la columna Uno es otro módulo de texto. Agregue un contenido a su elección.
Configuración de texto Continuar cambiando la configuración de texto.
El texto del peso del texto: fácil

Color de texto: # B7B7B7

Tamaño del texto: 18 PX
La altura de la línea de texto: 1.8em
Orientación de texto: centro
Animación y agregue una animación al modo.
Estilo de animación: diapositiva
Dirección de Animación: Up

Intensidad de animación: 20%
Curva de velocidad de animación: limpieza de la entrada de facilidad
Clon los módulos 3 veces y coloque los duplicados en las columnas restantes ahora, después de haber terminado de cambiar todos los módulos en la columna 1, podemos clonar todos los módulos en la columna 1 3 veces y colocar los duplicados en las columnas restantes.
Cambie el contenido del módulo Cambie el contenido duplicado.
Agregue el retraso de animación a los módulos de separación duplicados Agregue un cierto retraso de animación a cada uno de los duplicados del módulo divisor. Modo divisor en la columna 2: 400ms

Modo divisor en la columna 3: 800 ms

Modo divisor en la columna 4: 1200 ms

Agregue el retraso de animación al módulo de texto # 3 duplicado Haga lo mismo para el último módulo de texto en cada columna.
Último módulo de texto en la columna 2: 400 ms
Último módulo de texto en la columna 3: 800 ms
Último módulo de texto en la columna 4: 1200 ms

Personalice el icono de la propaganda icono de color # 2 también, cambiamos el color y la animación del icono de la propaganda para cada uno de los duplicados. Abra el módulo de propaganda en la columna 2 y cambie el color del icono.
Icono de color: # ff6b86
Animación Modifique la configuración de animación.
Tipo de animación: diapositiva

Dirección de la animación: Down
Duración de animación: 2000 ms

Retraso de animación: 800 ms
Intensidad de animación: 62%
Opacidad de animación para comenzar: 100%
Animación de imagen / icono: sin animación
Personalice el icono de la propaganda icono de color # 3 Continúe abriendo módulos en la columna 3 y cambiando el color del icono.
Icono de color: # ffe500
Animación Modifique la configuración de animación.
Tipo de animación: diapositiva

Dirección de la animación: Down
Duración de animación: 1000 ms

Retraso de animación: 600 ms
Intensidad de animación: 69%
Opacidad de animación para comenzar: 100%
Animación de imagen / icono: sin animación
Personalice el ícono de la propaganda # 4 icono de color Abra el último módulo de propaganda, en la columna 4 y cambie el color del icono.
Icono de color: # 00ff9d
Animación y complete el diseño modificando la configuración de animación en la pestaña Diseño.
Tipo de animación: Slidedirection of Animation: Down

Duración de la animación: 3000 ms
Retraso de animación: 400 ms

Animación de intensidad: 100%
Opacidad de animación para comenzar: 100%
Animación de imagen / icono: sin animación
Pensamientos finales En esta publicación, le mostré cómo llevar a los visitantes al final de la página utilizando la configuración de animación de la Divic.La idea básica es que usas módulos de propaganda para sus íconos y aumenta su cobertura de animación en la sección de héroes.Puede usar este enfoque en cualquier tipo de sitio web que cree y sea 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.