ElegantThemes

Aquí se explica cómo mezclar la copia mientras se desplaza con la configuración de posición de Divi y los efectos de desplazamiento.

La forma en que utiliza creativamente las funciones integradas de Divi puede marcar la diferencia en el diseño de su página. Por ejemplo, los efectos de desplazamiento de Divi le permiten crear hermosas interacciones mientras se desplaza. Hoy estamos agregando otro tutorial a su lista de cosas que hacer con los efectos de desplazamiento integrados de Divi. Más específicamente, le mostraremos cómo combinar la copia mientras se desplaza. A primera vista, la copia está debajo de la imagen adjunta. Sin embargo, una vez que se desplace hasta cierto punto, la copia aparecerá sobre la imagen del producto y comenzará a fusionarse con la imagen. Esto conduce a un efecto llamativo que no requiere esfuerzo. ¡También puede descargar el archivo JSON de diseño de forma gratuita!

Empecemos.

avance

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

Escritorio

Teléfono celular, teléfono móvil

Copia mixta al desplazarse

Descarga el diseño GRATIS

Para tener en sus manos el diseño gratuito, primero debe descargarlo desde el botón a continuación. Para obtener acceso a la descarga, debe suscribirse a nuestra lista de correo electrónico Divi Daily utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y presione descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content {color de fondo: # 4843d2! important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header {color de fondo: #ffffff! important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content: antes de {border-top-color: #ffffff! important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content: antes, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content: antes; Color del marco izquierdo: #ffffff! Importante; } @media solo pantalla y (ancho máximo: 767px) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content: antes de {border-top-color: #ffffff! important; Color del marco izquierdo: ¡transparente! Importante; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content: after {border-bottom-color: #ffffff! important; Color del marco izquierdo: ¡transparente! Importante; }} .et_bloom .et_bloom_optin_1 .et_bloom_form_content button {color de fondo: # f92c8b! important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i {color: # f92c8b! important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i: before {background: # f92c8b! important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid {border-color: # f7f9fb! important} .et_bloom .et_bloom_optin_1 .et_bloom_form_content button {background-color: # f92c8b! important; } .Et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, h2 .et_bloom .et_bloom_optin_1 lapso .et_bloom_form_container, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2} .Et_bloom fuerte .et_bloom_optin_1 .et_bloom_form_container p, p .et_bloom .et_bloom_optin_1 .et_bloom_form_container abarcar .et_bloom .et_bloom_optin_1 .et_bloom_form_container p fuerte, .et_bloom .et_bloom_optin_1 .et_bloom_form_container formulario de entrada, .et_bloom .et_bloom_optin_1 .et_bloom_form_container formulario botón span {font-family: «Open Sans», Helvetica, Arial, Lucida, Sans-Serif; } p.et_bloom_popup_input {padding-bottom: 0! important;}

Descarga gratis

Descarga gratis

Suscríbase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Siga con y se convertirá en un Divi Master en poco tiempo. Si ya está suscrito, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos.

¡Empecemos a reconstruir!

Agregue 2x secciones de marcador de posición

Agregar una nueva sección

Comience agregando una sección de marcador de posición a la página en la que está trabajando.

Copia mixta al desplazarse

Dimensionamiento

Abra la configuración de corte y cambie la altura en la configuración de tamaño.

  • Altura: 50vh

Copia mixta al desplazarse

Sección de clonación

Clona la sección una vez. Esto te deja con dos secciones de marcador de posición a tu lado. 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 reemplazan con secciones normales que usa en toda la página.

Copia mixta al desplazarse

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.

Copia mixta al desplazarse

Color de fondo

Abra Configuración de sección y use un color de fondo blanco.

  • Color de fondo: #ffffff

Copia mixta al desplazarse

distancia

Vaya a la pestaña Diseño de la sección y cambie los valores de espaciado superior e inferior en consecuencia:

  • Acolchado superior: 10vh
  • Tapicería inferior: 10vh

Copia mixta al desplazarse

Agregar línea 1

Estructura de la columna

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

Copia mixta al desplazarse

Dimensionamiento

Sin agregar ningún módulo, abra la configuración de fila, vaya a la configuración de tamaño y cambie los valores de ancho y ancho máximo.

  • Ancho: 100%
  • Ancho máximo: 100%

Copia mixta al desplazarse

Agregar módulo de texto a la columna

Agregar una copia

El único módulo que necesitamos para esta línea es un módulo de texto. Incluya una copia de su elección.

Copia mixta al desplazarse

Configuración de texto

Cambie a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

  • Fuente del texto: Montserrat
  • Peso de la fuente del texto: Ultra Bold
  • Fuente del texto: letras mayúsculas
  • Color del texto: # fff2ea
  • Tamaño del texto: 11vw
  • Altura de la línea de texto: 1em
  • Alineación del texto: centro

Copia mixta al desplazarse

Agregar la línea 2

Estructura de la columna

Agregue otra fila a la sección con la siguiente estructura de columnas:

Copia mixta al desplazarse

Dimensionamiento

Sin agregar ningún módulo, 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

Copia mixta al desplazarse

Agregar módulo de imagen a la columna

Cargar imagen

Agregue un módulo de imagen a la columna de la fila. Sube una imagen de tu elección.

Copia mixta al desplazarse

Alineación

Cambie a la pestaña Diseño del módulo y cambie la orientación de la imagen en consecuencia:

  • Orientación de la imagen: centro

Copia mixta al desplazarse

Dimensionamiento

Luego vaya a la configuración de tamaño y fuerce el módulo para que sea de ancho completo.

  • Forzar ancho completo: Sí

Copia mixta al desplazarse

Agregar módulo de botón a la columna

Agregar 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.

Copia mixta al desplazarse

Alineación clave

Vaya a la pestaña Diseño y cambie la orientación del botón.

  • Orientación clave: centro

Copia mixta al desplazarse

Configuración de botones

Luego, diseñe el botón de esta manera:

  • Usar estilos de botones personalizados: 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 marco del botón: 0px
  • Espaciado entre letras clave: 2px
  • Fuente del botón: Montserrat
  • Peso de la fuente del botón: negrita
  • Fuente del botón: mayúsculas

Copia mixta al desplazarse

distancia

También use algunos valores de espaciado personalizados en la configuración de espaciado.

  • Acolchado superior: 20px
  • Acolchado inferior: 20px
  • Acolchado izquierdo: 5%
  • Tapizado derecho: 5%

Copia mixta al desplazarse

Agregar posicionamiento absoluto a la línea 1

Cuando haya completado la segunda fila, vuelva a la fila 1. Abra la configuración de la fila, vaya a la pestaña Avanzado y dé la vuelta a la sección. Esto coloca la línea y el módulo de texto que contiene debajo de la línea con el módulo de imagen.

  • Posición: Absolutamente
  • Ubicación: centro

Copia mixta al desplazarse

Clone la fila 1 y coloque un duplicado debajo de la fila 2

Para que el módulo de texto aparezca sobre la imagen, necesitamos otra línea con un valor de índice z más alto. Clona la primera fila y coloca el duplicado debajo de la segunda fila.

Copia mixta al desplazarse

Aplicar efectos a la línea 3

Incrementar el índice Z

Abra la línea duplicada y cambie el índice Z en la pestaña «Avanzado».

  • Índice Z: 12

Copia mixta al desplazarse

Cambiar el color del texto

Abra el módulo de texto en la fila y cambie el color del texto.

  • Color del texto: # 1e1e1e

Copia mixta al desplazarse

Aplicar el modo de fusión a la fila

Luego abra la configuración de línea y cambie el modo de fusión en la configuración del filtro.

  • Modo de fusión: superposición

Copia mixta al desplazarse

Utilice el efecto de desplazamiento para el módulo de texto en la línea 3

Agregue efectos de aparición y desaparición gradual

Complete el tutorial volviendo a abrir el módulo de texto, yendo a los efectos de desplazamiento y activando el efecto de aparición y desaparición gradual. ¡Eso es todo!

  • Activar mostrar y ocultar: Sí
    • Opacidad inicial: 0%
    • Opacidad media: 0% (al 26%)
    • Endopacidad: 100% (al 28%)
  • Activador de efectos de movimiento: centro del elemento

Copia mixta al desplazarse

avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado para diferentes tamaños de pantalla.

Escritorio

Copia mixta al desplazarse

Teléfono celular, teléfono móvil

Copia mixta al desplazarse

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con los efectos de desplazamiento integrados de Divi. Más específicamente, le mostramos cómo combinar la copia mientras se desplazaba. Al principio, la copia parece estar debajo de la imagen. Después de desplazarse, la copia aparece sobre la imagen y se fusiona con la imagen. ¡También puede descargar el archivo JSON gratis! 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 recibir más obsequios de Divi, asegúrese de obtenerlo Suscríbete a nuestro boletín de correo electrónico y canal de Youtube Por lo tanto, siempre estará entre los primeros en conocer y beneficiarse de este contenido gratuito.

El cargo Aquí se explica cómo mezclar la copia mientras se desplaza con la configuración de posición de Divi y los efectos de desplazamiento. apareció primero Blog temático elegante.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *