Uno de los propósitos principales de las secciones principales es convencer a las personas para que sigan desplazándose hacia abajo en la página y descubran más contenido e información que ha compartido. Con Divi y sus opciones de animación incorporadas, puede agregar animaciones interactivas a su página que lo ayudarán a guiar a los visitantes de manera persuasiva hacia abajo en la página. En este tutorial, vamos a motivar a los visitantes a que se desplacen hacia abajo hasta la sección de servicios usando íconos de flechas que los lleven a la sección de servicios.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
¡Comencemos a crear!
Suscríbete a nuestro canal de Youtube
Añadir Sección #1
Color de fondo
Cree una nueva página y agréguele una sección normal. 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: 30px
- 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)
- Relleno 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 columna:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de 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 algo de contenido H1 de su elección.
Ajustes de texto de encabezado
Cambie la configuración del texto del encabezado a continuación.
- Fuente del título: Didact Gothic
- Peso de la fuente del encabezado: Negrita
- Alineación del texto del título: Centro
- Color del texto del título: #ffffff
- Tamaño del texto del encabezado: 170 px (escritorio), 50 px (tableta y teléfono)
- Altura de la línea de encabezado: 0,8 em
- Longitud vertical de la sombra del texto del encabezado: 1,5 em
- Color de la sombra del texto del título: rgba(0,0,0,0.11)
Añadir Sección #2
Color de fondo
Continúe agregando la segunda sección a la página. Cambia el color de fondo en la configuración de la sección.
- Color de fondo: #0f0f0f
Divisor superior
Agregue un divisor superior a la sección también.
- Estilo de divisor: Buscar en la lista
- Color del divisor: #ffffff
- Altura del divisor: 30px
- 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.
- Relleno superior: 245px
- Relleno 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 del canalón: 2
Añadir módulo Blurb
Seleccionar icono
El primer módulo que necesitaremos en la primera columna es un módulo de Blurb. La única parte del elemento del Módulo de 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: #4ffff
- Ubicación del icono: superior
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 150 px
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 se realice sin problemas. Para compensar el margen personalizado, también agregaremos un relleno superior personalizado. Esto asegurará que el ícono 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 de Blurb usando la siguiente configuración:
- Estilo de animación: Diapositiva
- Dirección de animación: Abajo
- Duración de la animación: 3000ms
- Retardo de animación: 1200ms
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
- 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 de texto.
- Fuente del texto: didáctica gótica
- Peso de fuente de 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 #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.
Ajustes de texto de encabezado
Y cambie la configuración del texto del encabezado en la pestaña de diseño.
- Título 3 Fuente: Didact Gothic
- Encabezado 3 Alineación de texto: Centro
- Título 3 Color del texto: #ffffff
- Título 3 Tamaño del texto: 40 px (escritorio), 30 px (tableta y teléfono)
- Encabezado 3 Espaciado entre letras: -1px
Agregue el módulo divisor a la columna 1
Visibilidad
El siguiente módulo necesario 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 algunos cambios en la configuración de tamaño también.
- 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: 2000ms
- Intensidad de animación: 10%
- Curva de velocidad de animación: Facilidad de entrada y salida
Agregue el Módulo de Texto #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 de texto.
- Peso de la fuente del texto: Light
- Color del texto: #b7b7b7
- Tamaño del texto: 18px
- Altura de la línea de texto: 1,8 em
- 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: Facilidad de entrada y salida
Clonar módulos 3 veces y colocar duplicados en las columnas restantes
Ahora que terminamos 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
Cambia el contenido de los duplicados.
Agregar retraso de animación a módulos divisores de duplicados
Agregue también un poco de retraso de animación a cada uno de los duplicados del módulo divisor.
- Módulo Divisor en Columna 2: 400ms
- Módulo Divisor en Columna 3: 800ms
- Módulo Divisor en Columna 4: 1200ms
Agregar Retraso de Animación a los Duplicados del Módulo de Texto #3
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: 1200ms
Personalizar icono de Blurb #2
Color del icono
También estamos modificando el color y la animación del ícono de la publicidad 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: 2000ms
- Retardo de animación: 800ms
- Intensidad de animación: 62%
- Opacidad inicial de animación: 100%
- Animación de imagen/icono: sin animación
Personalizar icono 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
- Retardo de animación: 600ms
- Intensidad de animación: 69%
- Opacidad inicial de animación: 100%
- Animación de imagen/icono: sin animación
Personalizar icono de Blurb #4
Color del icono
Abra el último módulo de 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 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
- Retardo de animación: 400ms
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
- Animación de imagen/icono: sin animación
Pensamientos finales
En esta publicación, le mostramos cómo guiar de manera persuasiva a los visitantes hacia la página utilizando la configuración de animación de Divi. La idea básica es que utilice módulos de Blurb para sus íconos y aumente 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!