Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear hermosas revelaciones de desplazamiento en línea utilizando DJ Layout Pack . Esta es una excelente manera de llamar la atención sobre un contenedor de columna específico en su sitio web, sin tener que agregarlo a su página varias veces. Agregaremos un efecto genial de lanzamiento/desplazamiento a la técnica que ayudará a los visitantes a sujetar el contenedor de la columna y dejarlo caer cuando lo deseen. ¡También podrá descargar el archivo JSON de forma gratuita!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga GRATIS el diseño Inline Scroll Reveals
Para poner sus manos en el diseño de revelaciones de desplazamiento en línea gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad 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.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡Empecemos a Recrear!
Crear nueva página usando la página de inicio de DJ Layout Pack
Agregar nueva página
Para este tutorial de caso de uso, vamos a utilizar uno de los diseños de DJ. Comience creando una nueva página, dándole un título a su página y cambiando a Visual Builder.
Subir página de inicio de DJ
Continúe cargando el diseño de la página de inicio de DJ en su página.
Agregue un valor de índice Z más alto a cada sección en la página
Agregue un índice Z más alto a la sección de héroe
Vamos a arreglar una columna específica y permitir que se muestre donde queramos. Lo contrario también es cierto; queremos ocultarlo donde no queremos que aparezca. Para hacerlo, le daremos a cada sección de la página (además de aquella en la que se encuentra la columna, que es la sección n.º 2 de la página) un valor de índice z más alto. Comience abriendo la sección de héroe y aumente el índice z en la configuración de visibilidad.
- Índice Z: 2
Copiar índice Z
Una vez que haya agregado el índice z, puede copiarlo.
Pegar en otras secciones de la página, excepto en la sección n.º 2
Y péguelo en todas las demás secciones de la página, excepto en la sección n. ° 2 (la sección que contiene la columna que transformaremos en una revelación de desplazamiento en línea).
Cambiar Sección #2
Coloque el contenido de la columna en filas separadas
Cambiar estructura de columna de fila
Comencemos modificando la segunda sección, comenzando con la estructura de columnas de la fila.
fila duplicada
Continúe clonando la fila.
Eliminar módulos en filas
Retire los módulos de texto y botón de la primera fila y los módulos de audio de la segunda fila.
Modifique la Fila #1 en la Sección #2
Retire algunos módulos de audio (para adaptarse a tamaños de pantalla más pequeños)
En los próximos pasos, vamos a arreglar la columna que contiene los módulos de audio. Ahora, para asegurarnos de que la columna se ajuste a la altura de la ventana gráfica de los tamaños de pantalla más pequeños, necesitaremos eliminar algunos módulos de audio.
Agregar margen inferior a la fila
Continúe abriendo la configuración de la fila, yendo a la pestaña de diseño y agregando un poco de relleno inferior. Necesitaremos este espacio para permitir que la columna se revele al desplazarse más adelante en el tutorial.
- Margen inferior: 700px
Configuración de columna abierta
¡Es hora de comenzar a transformar la columna en una revelación de desplazamiento en línea! Abra la configuración de la columna.
Sombra de caja flotante
Luego, vaya a la pestaña de diseño y cambie algunos valores de sombra de cuadro al pasar el mouse.
- Fuerza de desenfoque de sombra de cuadro: 150px
- Color de sombra: rgba (0,0,0,0,55)
Escala de transformación de desplazamiento
Aumente el tamaño de la columna al pasar el mouse también modificando los valores de escala de transformación.
- Fondo: 110%
- Derecha: 110%
Elemento principal predeterminado
Para arreglar la columna, agregaremos algunas líneas de código CSS al elemento principal de la columna.
|
01
02
03
04
|
position: fixed;bottom: 100px;max-width: 800px !important;width: 80% !important; |
Pase el elemento principal
Asegúrese de agregar la línea CSS de posición fija al elemento principal flotante también. Esto evitará que la columna parpadee.
|
01
|
position: fixed; |
Índice Z predeterminado
Ahora, en circunstancias normales, queremos que el módulo aparezca debajo de todo el contenido de la página. Para asegurarnos de que eso suceda, vamos a cambiar el índice z de la columna.
- Índice Z: 0
Índice Z flotante
Sin embargo, al pasar el mouse, queremos que la columna se superponga a todo el contenido de la página. Tan pronto como alguien suelte la columna, volverá a su lugar detrás de todo el contenido de la página. Cambie el índice z al pasar el mouse en consecuencia:
- Índice Z: 10
Modifique la Fila #2 en la Sección #2
Agregar relleno superior a la columna
Por motivos estéticos, vamos a abrir la columna en la segunda fila de la sección #2 y agregaremos un relleno superior personalizado.
- Relleno superior: 80px
Agregue un margen inferior personalizado a las secciones a lo largo de la página
Localizar Sección
Configuración de sección abierta
Ahora que hemos modificado la columna de revelación de desplazamiento en línea, tenemos que crear algo de espacio para que aparezca. Ya lo hemos hecho para la fila en la que se encuentra (relleno inferior de 700 px), pero también permitiremos que la columna se muestre en otros lugares de la página. Abra la configuración de la sección de la siguiente sección:
Agregar margen inferior
Vaya a la configuración de espaciado y agregue un poco de margen inferior. Agregar el margen inferior creará un espacio vacío en la página que permitirá que aparezca la columna de índice z bajo.
- Margen inferior: 700px
Localizar Sección
Configuración de sección abierta
Abra la siguiente sección a continuación:
Agregar margen inferior
Y agregue un poco de margen inferior aquí también.
- Margen inferior: 700px
Retire el exceso de relleno de la sección
Retire el acolchado inferior de la sección n.º 2
Ahora, lo único que nos queda por hacer es optimizar la forma en que nuestro diseño coincide con la revelación de desplazamiento en línea. Abra la segunda sección de la página y retire el relleno inferior.
- Abajo: 0px
Localizar Sección
Configuración de sección abierta
Abra la siguiente sección de configuración a continuación:
Retire el relleno inferior y agregue el relleno superior
Agregue un poco de relleno superior y retire el relleno inferior.
- Relleno superior: 100px
- Relleno inferior: 0px
Localizar Sección
Configuración de sección abierta
En la última sección. Abra la configuración de la sección.
Retire el acolchado superior
Retire el relleno superior y ¡listo!
- Relleno superior: 0px
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear revelaciones de desplazamiento en línea con Divi y DJ Layout Pack . Esta es una excelente manera de agregar interacción a su sitio web. ¡Esperamos que este tutorial lo inspire a crear sus propias revelaciones de desplazamiento en línea fijas también! Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.