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 tentador para los visitantes pasar el cursor por encima para ver más. Una vez que se desplazan sobre el módulo, todo el contenido se revela con un suave efecto de desplazamiento 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 utilizando el constructor Divi .
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, asigne un título a su página y luego implemente Divi Builder para construir en la interfaz. Seleccione la opción «Elegir un diseño prefabricado». Luego, desde la ventana emergente de la biblioteca Divi, seleccione el paquete de diseño Day Spa y haga clic para usar el diseño de la página de destino.
Una vez que el diseño se carga en la página, ¡está listo para comenzar!
Adición de divisores en la parte superior e inferior de Blurb
Desplácese hacia abajo en la página hasta la sección titulada «Experiencias de spa de lujo» con los cuatro anuncios publicitarios. Usaremos la fila con los cuatro anuncios publicitarios para iniciar el diseño.
Agregar el primer divisor
Nuestro primer paso es agregar divisores arriba y debajo del módulo de publicidad para ocultar nuestro contenido de publicidad detrás. Puede pensar en estos divisores como persianas de una ventana que se abrirán y cerrarán al pasar el mouse.
Agregue un módulo divisor arriba de la propaganda en la primera columna y actualice lo siguiente:
Color de fondo: #ffffff
Color (del divisor): #ffffff
Peso del divisor: 100 px
Altura: 100 px
Margen personalizado: 0 px 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
Altura: 2px
Margen personalizado: 0px inferior
Luego salta a la pestaña de contenido y dale 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 Blurbs
Ahora estamos listos para copiar y pegar nuestros divisores arriba y debajo de cada uno de los anuncios publicitarios 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 Shift + w)
En el modo de estructura alámbrica, busque la fila que contiene los anuncios publicitarios 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 anuncios publicitarios para que el resultado final se vea así.
A continuación, vuelva a la vista de escritorio (mayús + w) para finalizar 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 publicidad con algunos ajustes de estilo, incluido un margen personalizado para crear el efecto de desplazamiento del estilo del obturador.
Primero, use la selección múltiple para seleccionar los cuatro módulos publicitarios. 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 el modal de configuración del elemento.
En la pestaña de contenido, agregue algunas líneas de contenido simulado.
Luego deshabilite la sombra del cuadro de imagen por completo.
Para crear el efecto de desplazamiento del obturador, debemos agregar márgenes superior e inferior 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): -100 px arriba, -65 px abajo
Margen personalizado (hover): 0 px arriba, 0 px abajo
Relleno personalizado (desplazamiento): 10 px arriba, 10 px abajo
Es posible que deba ajustar los valores del margen negativo según la cantidad de contenido que tenga. Por ejemplo, es posible que necesite tener más margen negativo para contenido de texto más largo.
Ahora mira el resultado hasta ahora.
Observe que la parte superior e inferior de cada módulo están ocultas detrás de los divisores hasta que pasa el cursor 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 las filas e iguale las alturas de las columnas.
Luego vaya a la pestaña avanzada e ingrese el siguiente CSS personalizado en el elemento principal:
|
01
|
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.
Dando a la fila una altura fija
Para evitar que el efecto de desplazamiento empuje hacia abajo el contenido de la página a continuación, debemos evitar que la fila crezca en altura con cada desplazamiento. Para ello debemos establecer una altura fija a 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 como para adaptarse a la altura del contenido de la propaganda en su estado de desplazamiento. Sin embargo, no querrá hacerlo demasiado alto porque dejará demasiado espacio en blanco arriba y debajo de los módulos. En este ejemplo, estableceré la altura de la fila en 600 px. 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:
|
01
02
03
04
05
|
@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 deshabilitar 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 publicitario de la siguiente manera:
Margen personalizado (tableta): 0px arriba, 0px abajo
Pensamientos finales
Este efecto de desplazamiento del obturador es una forma creativa de provocar a su audiencia para que 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. Siéntase libre de explorar sus propios diseños nuevos y emocionantes, y no dude en compartirlos con nosotros. Espero escuchar de usted en los comentarios.
¡Salud!