Cómo revelar contenido con un efecto de flota de shover en div en Div

La divulgación del contenido del módulo en flotación puede tener algunos beneficios útiles. 1) Puede ser una excelente manera de tener inicialmente un diseño más compacto o elegante de su página web. 2) Guardar espacio. 3) puede atraer a los usuarios a interactuar con su página 4) se ve fuerte :). La idea básica es mostrar solo parte del contenido del módulo (como un teaser), lo que hace que sea atractivo para los visitantes para moverse para ver más. Una vez que se mueve por encima del módulo, todo el contenido se revela con un efecto flotante suave que se abre y cierra como obturador.
En este tutorial, le mostraré cómo puede revelar el contenido del módulo con un efecto flotante de estilo gatillo usando el Divi Builder. Tire del ojo aquí hay un vistazo rápido a lo que construiremos juntos.


Las nociones básicas suscriben a nuestro canal de YouTube para comenzar, crear una nueva página, darle a la página un título y luego implementar Divi Builder para construir en el front-end. Seleccione la opción “Elija un aspecto prefabricado”. Luego, desde la ventana emergente de la biblioteca Pop-Up Div, seleccione el paquete SPA del día de diseño y haga clic para usar el aspecto de la página de destino.

¡Una vez que el aspecto se carga en la página, está listo para comenzar! Agregar los divisores a la parte superior e inferior del desplazamiento de la propaganda hacia abajo hasta la sección titulada “Spa de lujo” con las cuatro borrones. Usaremos la fila con las cuatro borrones para iniciar el diseño. Agregar el primer divisor El primer paso es agregar separadores arriba y debajo del módulo de propaganda para ocultar nuestro contenido de propaganda en la parte posterior. Puede pensar en estos separadores como persianas de una ventana que se abrirá y cerrará durante el vuelo. Agregue un módulo divisor por encima del texto en la primera columna y actualice lo siguiente: El color del fondo: #ffffff Color (divisor): #ffffff el peso del divisor: 100 px altura: 100 px margen personalizado: 0 px abajo el El fondo blanco coincide con el fondo de nuestra sección, porque no queremos verlo. Asegúrese de que el peso y la altura del separador sean los mismos.
Agregar el segundo divisor (naranja) Luego, cree otro divisor directamente debajo del divisor que acaba de crear y actualiza: color: # ff7a6b peso divisor: 2 px altura: 2 px margen personalizado: 0 px de jos entonces, vaya a la pestaña de contenido y darle al divisor un administrador de “divisor naranja”. Esto ayudará a distinguir el divisor del divisor anterior (blanco) cuando use el modo de estructura alambre para copiar y pegar el divisor a las otras columnas.

Guarde su página. Copiando y pegando los divisores alrededor de las borrosas ahora estamos listos para copiar y pegar nuestros separadores arriba y debajo de cada columna en cada una de las columnas. Para que este proceso sea un poco más fácil, implemente el modo de estructura alámbrica abriendo el menú Configuración en la parte inferior de la página y haga clic en el icono de estructura de alambre. (o use shft + w) en modo de estructura alámbrica, encuentre la fila que contiene borrones y los separadores que acabamos de crear. Luego copie y pegue el divisor y el divisor naranja en la parte superior y debajo de cada desenfoque, para que el resultado final se vea así. Su página debería verse así.

Personalizando los módulos de la propaganda Ahora que tiene todos los separadores en su lugar, es hora de editar nuestros módulos de propaganda con algunos ajustes de estilo, incluido un margen personalizado para crear el estallido del obturador. Primero, use multiselecto para seleccionar los cuatro módulos de propaganda. Para hacer esto, mantenga presionado 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 modal del elemento.

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

Luego deshabilite completamente la sombra del cuadro de imagen.

Para crear el brote del gatillo, debemos agregar márgenes negativos superiores e inferiores para ocultar implícitamente el contenido detrás de los separadores. Luego establezca los márgenes en 0 PX para revelar el contenido en Hover. Para hacer esto, agregue la siguiente distancia. Margen personalizado (predeterminado): -100px hacia arriba, -65px Margen personalizado (pase): 0 px en la parte superior, 0 px en el revestimiento personalizado inferior (desplazamiento): 10 px hacia arriba, 10 px más bajo necesitas ajustar los valores negativos Margen según cuánto contenido tiene. Por ejemplo, es posible que deba tener un margen más negativo para un contenido de texto más largo. Ahora mira el resultado hasta ahora. Observe que la parte superior e inferior de cada módulo está oculto detrás de los separadores hasta que los pasa.


Limpieza El efecto desencadenante del desencadenante El centrado vertical de los módulos en la actualidad, el efecto de activar el cursor empuja el resto del contenido por la página con cada movimiento. Esto causa un movimiento de página que puede distraer la atención. Además, la acción del movimiento solo va en una dirección descendente, que no es un verdadero efecto desencadenante. Queremos que el contenido se abra tanto hacia arriba como hacia abajo desde el centro. Para lograr esto, debemos hacer lo siguiente:

Abra la configuración de la fila e iguale las alturas de la columna.

Luego acceda a la pestaña avanzada e ingrese los siguientes CSS personalizados debajo del elemento principal: Align-Ritms: Center;

Esto asegurará que los módulos permanezcan enfocados verticalmente en la columna, dándonos ese efecto desencadenante hacia arriba y hacia abajo. Al otorgar a la línea una altura fija para evitar que el efecto de desplazamiento empuje el contenido de la página a continuación, debemos detener el giro para aumentar de altura con cada flotación. Para hacer esto, debemos establecer una altura fija en nuestro giro en el escritorio. Debido a que la altura se fijará, deberá asegurarse de que la altura de la fila sea lo suficientemente grande como para que coincida con la altura del contenido de la propaganda en su estado flotante. Sin embargo, no desea hacerlo demasiado grande, porque dejará demasiado espacio vacío en la parte superior y debajo de los módulos. En este ejemplo, estableceré la altura de la fila a 600 PX. Pero, dado que solo queremos la altura fija establecida solo en el escritorio, debemos agregar CSS a la configuración de nuestra página utilizando una consulta de medios. En primer lugar, en la configuración de la fila, dale a tu turno un ID de CSS: ID 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) {

#Aguja fija {

Altura: 600px;
}

}
Esto le da a su línea una altura fija de 600 PX en el escritorio y detiene el efecto de desplazamiento para empujar el resto del contenido de la página hacia abajo.
¡Eso es todo! El resultado final verifica el diseño final.
Y aquí está el efecto de flotar el gatillo.
Puede ser una buena idea deshabilitar el efecto de desplazamiento en su móvil. Para esto, todo lo que tiene que hacer es establecer el margen personalizado para cada módulo de propaganda, de la siguiente manera: