[Ad_1]
Vamos.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
oficina
Móvil
Descarga el diseño GRATIS
Para obtener el diseño gratuito, primero deberá descargarlos usando el botón a continuación. Para acceder a la descarga, deberá suscribirse a nuestra lista de correo Divi Daily utilizando el formulario debajo. Como nuevo suscriptor, ¡recibirás aún más beneficios de 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.
¡Empecemos a recrear!
Agregue 2x secciones de marcador de posición
Añadir una nueva sección
Comience agregando una sección de marcador de posición a la página en la que está trabajando.
apresto
Abra la configuración de la sección y cambie la altura en la configuración de tamaño.
Sección de clonación
Clona la sección una vez. Esto te deja con dos secciones de marcador de posición en tu página. Estas secciones de marcadores de posición lo ayudarán a ver el efecto final después de seguir el tutorial. En un sitio web en vivo, las secciones de marcador de posición se reemplazarán con secciones normales que usa en toda la página.
Agregar una nueva sección entre las secciones de marcador de posición
Una vez que las secciones de marcador de posición estén en su lugar, agregue una nueva sección entre las secciones de marcador de posición.
Color de fondo
Abra la configuración de la sección y use un color de fondo blanco.
- Color de fondo: #ffffff
espaciamiento
Cambie a la pestaña de diseño de la sección y cambie los valores de relleno superior e inferior en consecuencia:
- Acolchado superior: 10vh
- Acolchado inferior: 10vh
Agregar línea # 1
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo todavía, abra la configuración de fila, vaya a la configuración de tamaño y cambie los valores de ancho y ancho máximos.
- Ancho: 100%
- Ancho máximo: 100%
Agregar un módulo de texto a la columna
Añadir una copia
El único módulo que necesitamos para esta línea es un módulo de texto. Agregue una copia de su elección.
Configuraciones de texto
Cambie a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:
- Fuente del texto: Montserrat
- Peso de la fuente del texto: Ultra Bold
- Estilo de fuente de texto: mayúsculas
- Color del texto: # fff2ea
- Tamaño del texto: 11vw
- Altura de la línea de texto: 1 em
- Alineación del texto: centro
Agregar línea # 2
Estructura de la columna
Agregue otra fila a la sección usando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canaleta personalizado: Sí
- Ancho de canalón: 2
- Ancho: 90%
- Alineación de línea: centro
Agregar módulo de imagen a la columna
Sube una imagen
Agregue un módulo de imagen a la columna de la fila. Sube una imagen de tu elección.
alineación
Cambie a la pestaña de diseño del módulo y cambie la alineación de la imagen en consecuencia:
apresto
Luego vaya a la configuración de tamaño y fuerce el ancho completo en el módulo.
Agregar un módulo de botón a la columna
Añadir una copia
El siguiente y último módulo que agregaremos a la columna es un módulo de botones. Utilice una copia de su elección.
Alineación de botones
Vaya a la pestaña Diseño y cambie la alineación de los botones.
Configuraciones de botones
Luego, diseñe el botón de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 16px
- Color del texto del botón: # 000000
- Color de fondo del botón: #ffffff
- Ancho del borde del botón: 0px
- Espaciado entre letras del botón: 2px
- Fuente del botón: Montserrat
- Peso de la fuente del botón: negrita
- Estilo de fuente del botón: mayúsculas
espaciamiento
Utilice también valores de relleno personalizados en la configuración de espaciado.
- Acolchado superior: 20px
- Acolchado inferior: 20px
- Acolchado izquierdo: 5%
- Acolchado derecho: 5%
Agregar posicionamiento absoluto a la línea 1
Una vez que haya completado la segunda fila, regrese a la fila # 1. Abra la configuración de la fila, vaya a la pestaña avanzada y haga que la sección sea absoluta. Al hacer esto, la línea y el módulo de texto dentro se colocarán debajo de la línea que contiene el módulo de imagen.
- Posición: Absoluto
- Ubicación: Centro
Clonar la fila n ° 1 y colocar el duplicado debajo de la fila n ° 2
Para permitir que el módulo de texto aparezca encima de la imagen, necesitaremos otra fila con un valor de índice z más alto. Clona la primera fila y coloca el duplicado debajo de la segunda fila.
Aplicar efectos a la fila 3
Incrementar el índice Z
Abra la fila duplicada y cambie el índice z en la pestaña avanzada.
Cambiar el color del texto
Abra el módulo de texto en la fila y cambie el color del texto.
Aplicar el modo de fusión a la línea
Luego abra la configuración de la fila y cambie el modo de fusión en la configuración de los filtros.
Use el efecto de desplazamiento en el módulo de texto en la fila # 3
Agregue un efecto de fundido de entrada y salida
Complete el tutorial volviendo a abrir el pod de texto, yendo a los efectos de desplazamiento y activando el efecto de aparición y desaparición gradual. ¡Eso es!
- Activar fade in y fade out: Sí
- Opacidad inicial: 0%
- Opacidad media: 0% (a 26%)
- Opacidad final: 100% (al 28%)
- Disparador de efecto de movimiento: medio del elemento
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
oficina
Móvil
Consideraciones finales
En este artículo, le mostramos cómo ser creativo con los efectos de desplazamiento integrados de Divi. Específicamente, le mostramos cómo reproducir aleatoriamente la copia con desplazamiento. Al principio, la copia parece estar debajo de la imagen. Después de desplazarse, la copia se revela sobre la imagen y se fusiona con la imagen. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si desea obtener más información sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro newsletter por correo electrónico y a nuestro Canal de Youtube para que siempre seas de las primeras personas en conocer y aprovechar este contenido gratuito.
[Ad_2]
