Cómo revelar contenido con un efecto de desplazamiento del obturador en Divi

Revelar el contenido del módulo al pasar el mouse puede tener algunos beneficios útiles. 1) Puede ser una excelente manera de tener un diseño más compacto o elegante de su página web inicialmente. 2) Ahorra espacio. 3) Puede atraer a los usuarios a interactuar con su página. 4) Se ve genial :). La idea básica es mostrar solo una parte del contenido del módulo (como un adelanto), lo que hace que sea atractivo para los visitantes desplazarse para ver más. Una vez que se desplazan sobre el módulo, todo el contenido se revela con un efecto de desplazamiento suave que se abre y se cierra como un obturador.

En este tutorial, le mostraré cómo puede revelar el contenido del módulo con un efecto de desplazamiento de estilo de obturador usando el constructor Divi.

Vistazo

Aquí hay un vistazo rápido a lo que construiremos juntos.

Empezando

Suscríbete a nuestro canal de Youtube

Para comenzar, cree una nueva página, déle un título a la página y luego implemente Divi Builder para construir en la interfaz. Seleccione la opción "Elegir un diseño prediseñado". Luego, en la ventana emergente de Divi Library, seleccione el paquete Day Spa Layout y haga clic para usar el diseño de la página de destino.

Una vez que el diseño se haya cargado en la página, ¡estará listo para comenzar!

Agregar divisores en la parte superior e inferior de la propaganda

Desplácese hacia abajo en la página hasta la sección titulada "Experiencias de spa de lujo" con los cuatro anuncios. Usaremos la fila con los cuatro anuncios para iniciar el diseño.

Agregar el primer divisor

Nuestro primer paso es agregar divisores por encima y por debajo del módulo de propaganda para ocultar el contenido de nuestra propaganda detrás. Puede pensar en estos divisores como en las contraventanas de una ventana que se abre y se cierra al pasar el mouse.

Agregue un módulo divisor sobre la propaganda en la primera columna y actualice lo siguiente:

Color de fondo: #ffffff
Color (del divisor): #ffffff
Peso del divisor: 100px
Alto: 100px
Margen personalizado: 0px inferior

El fondo blanco coincide con el fondo de nuestra sección ya que no queremos verlo. Asegúrese de que el peso y la altura del divisor sean iguales.

Agregar el segundo divisor (naranja)

A continuación, cree otro divisor directamente debajo del divisor que acaba de crear y actualice lo siguiente:

Color: # ff7a6b
Peso del divisor: 2px
Alto: 2px
Margen personalizado: 0px inferior

Luego salte a la pestaña de contenido y asigne al divisor una etiqueta de administrador "divisor naranja". Esto ayudará a distinguir el divisor del divisor anterior (blanco) cuando usamos el modo de estructura alámbrica para copiar y pegar el divisor en las otras columnas.

Guarde su página.

Copiar y pegar los divisores alrededor de los desenfoques

Ahora estamos listos para copiar y pegar nuestros divisores encima y debajo de cada uno de los anuncios en cada una de las columnas. Para facilitar un poco este proceso, implemente el modo de estructura alámbrica abriendo el menú de configuración en la parte inferior de la página y haciendo clic en el icono de estructura alámbrica. (o use shft + w)

En el modo de estructura alámbrica, busque la fila que contiene los desenfoques y los divisores que acabamos de crear. Luego copie y pegue el divisor y el divisor naranja arriba y debajo de cada uno de los borrones para que el resultado final se vea así.

Luego, regrese a la vista de escritorio (shft + w) para terminar el diseño. Tu página debería verse así.

Personalización de los módulos de Blurb

Ahora que tiene todos los divisores en su lugar, es hora de editar nuestros módulos de propaganda con algunos ajustes de estilo, incluido un margen personalizado para crear el efecto de desplazamiento del obturador.

Primero, use la selección múltiple para seleccionar los cuatro módulos de propaganda. Para hacer esto, simplemente mantenga presionada la tecla ctrl (o cmd) y haga clic en cada módulo. Luego abra la configuración de uno de los módulos para implementar la configuración del elemento modal.

Debajo de la pestaña de contenido, agregue algunas líneas de contenido simulado.

Luego, desactive la sombra del cuadro de imagen por completo.

Para crear el efecto de desplazamiento del obturador, debemos agregar márgenes superiores e inferiores negativos para ocultar el contenido detrás de los divisores de forma predeterminada. Luego, establecemos los márgenes en 0px para revelar el contenido al pasar el mouse. Para hacer esto, agregue el siguiente espaciado.

Margen personalizado (predeterminado): -100px arriba, -65px abajo
Margen personalizado (desplazamiento): 0px arriba, 0px abajo

Relleno personalizado (desplazamiento): 10 píxeles en la parte superior, 10 píxeles en la parte inferior

Es posible que deba ajustar los valores de los márgenes negativos según la cantidad de contenido que tenga. Por ejemplo, es posible que deba tener un margen más negativo para un contenido de texto más extenso.

Ahora mira el resultado hasta ahora.

Observe que la parte superior e inferior de cada módulo está oculta detrás de los divisores hasta que pase el mouse sobre ellos.

Limpieza del efecto de desplazamiento del obturador

Centrado vertical de los módulos

Actualmente, el efecto de desplazamiento del obturador empuja el resto del contenido hacia abajo en la página con cada desplazamiento. Esto provoca cierto movimiento de página que puede distraer. Además, la acción de desplazamiento solo va hacia abajo, lo que no es un verdadero efecto de obturador. Queremos que el contenido se abra tanto hacia arriba como hacia abajo desde el centro. Para lograr esto, necesitamos hacer lo siguiente:

Abra la configuración de filas y ecualice las alturas de las columnas.

Luego, vaya a la pestaña avanzada e ingrese el siguiente CSS personalizado en el elemento principal:

align-items: center;

Esto asegurará que los módulos permanezcan centrados verticalmente dentro de la columna, dándonos ese efecto de obturador hacia arriba y hacia abajo.

Dar a la fila una altura fija

Para evitar que el efecto de desplazamiento hacia abajo empuje hacia abajo el contenido de la página a continuación, debemos evitar que la fila crezca en altura con cada desplazamiento. Para hacer esto, debemos establecer una altura fija para nuestra fila en el escritorio. Debido a que la altura será fija, deberá asegurarse de que la altura de la fila sea lo suficientemente alta para adaptarse a la altura del contenido de la propaganda en su estado flotante. Sin embargo, no desea que sea demasiado alto porque dejará demasiado espacio en blanco por encima y por debajo de los módulos. En este ejemplo, voy a establecer la altura de la fila en 600px. Pero, dado que solo queremos que la altura fija se establezca solo en el escritorio, debemos agregar algo de CSS a la configuración de nuestra página mediante una consulta de medios.

Aquí está lo que tú necesitas hacer.

En primer lugar, en la configuración de la fila, asigne a su fila una ID de CSS:

ID de CSS: altura fija

Luego abra la configuración de la página (en la pestaña avanzada) y agregue el siguiente CSS personalizado:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

Esto le da a su fila una altura fija de 600 px en el escritorio y evita que el efecto de desplazamiento empuje el resto del contenido de la página hacia abajo.

¡Eso es todo!

El resultado final

Mira el diseño final.

Y aquí está el efecto de desplazamiento del obturador.

Puede ser una buena idea desactivar el efecto de desplazamiento en el móvil. Para hacer eso, todo lo que necesita hacer es establecer el margen personalizado para cada módulo de propaganda de la siguiente manera:

Margen personalizado (tableta): 0px arriba, 0px abajo

Pensamientos finales

Este efecto de desplazamiento del obturador es una forma creativa de hacer que su audiencia busque más información sobre sus diferentes servicios. Y con la magia de Divi y algunos fragmentos de CSS, el resultado final es bastante elegante. Estoy seguro de que hay muchas más aplicaciones para este efecto de desplazamiento del obturador, ya que puede usar cualquier módulo que desee. No dude en explorar algunos de sus propios diseños nuevos y emocionantes y no dude en compartirlos con nosotros. Espero tener noticias tuyas en los comentarios.

¡Salud!