Cómo hacer que el contenido oculte en el flotador con div (¡descarga gratuita!)

Agregar interacciones sutiles a su sitio web realmente puede aumentar la experiencia general de los usuarios. Sin embargo, una de las cosas que hará que su sitio web se vea más elegante, respetando la facilidad del usuario, hace que el contenido aparezca en la carrera. Este es un enfoque excelente para presentar servicios, productos, características y más. En este tutorial, le mostraremos cómo crear un diseño específico de A a Z, pero una vez que obtenga el enfoque, puede hacer que funcione para cualquier tipo de sitio web en el que esté trabajando. Al final de esta publicación de blog, también distribuiremos el archivo JSON de este diseño que puede descargar de forma gratuita y usar sin restricciones.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

¡Empecemos a crear! Agregue una nueva sección de fondo predeterminada Inicie agregando una nueva sección a una página nueva o existente y cambie el color de fondo de la sección.
Color de fondo: # E0E0E0

Coloque el cursor en el color de fondo Cambiar este color de fondo al cursor.
Color de fondo: # 000000

Espacio ir a la pestaña de diseño y agregar algunos valores de espaciado personalizados. Para que este tutorial funcione, solo usaremos unidades de visualización. Esto asegurará que todo permanezca en su lugar, independientemente del tamaño de la pantalla.
Margen superior: 5VW
Margen inferior: 5VW
Margen izquierdo: 3VW
Margen derecho: 3VW
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue la estructura de la fila # 1 de la columna Continuar agregando una nueva línea utilizando la siguiente estructura de columnas: fondo de gradiente sin agregar módulos, abrir la configuración de la fila y agregar un fondo de gradiente.

Color 1: # FF5B79
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: centro
Posición inicial: 15%
Posición final: 15%
Dimensión y realice algunos cambios en la configuración de tamaño de la fila.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio y agregue algunos valores de llenado personalizados en la configuración de espaciado.

Revestimiento superior: 9VW
Revestimiento inferior: 9VW
Columna 1 Iluminación izquierda: 5VW
Columna 1 Revelaje derecho: 5VW
Columna 2 Lenaje izquierdo: 5VW
Columna 2 Reinicio recto: 5VW
Agregue un módulo de texto a la columna 1 Agregar contenido es hora de comenzar a agregar módulos. El primer módulo que necesitamos es un módulo de texto en la columna 1. Agregue el contenido H3 y un enlace.

Configuración del enlace de texto Entonces, acceda a la configuración del texto del enlace y realice algunos cambios en el enlace.

Fuente de enlace: Didact Gothic
Estilo de enlace de fuente: subrayado
Enlace subrayado de estilo: sólido
Enlace de color de texto: #ffffff
Tamaño del enlace de texto: 20 PX
Configuración Mostrar texto y configuración de texto H3.

3 Fuentes de fuentes: Didact Gothic
Frup 3 color de texto: #ffffff
Rúbrica 3 Dimensión de texto: 50 PX
Visibilidad por último, pero no menos importante, deshabilite el módulo en el escritorio. Solo necesitamos que este módulo aparezca en tamaños de pantalla más pequeños.

Agregue el módulo divisor a la columna 2 la segunda visibilidad y el último módulo requerido en la columna 1 es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”. Divisor: sí

Color luego cambie el color del separador.
Color: #ffffff

El espacio agregue algunos valores de margen personalizados al módulo divisor.
Margen superior: 11VW (escritorio), 80 px (tableta),

Margen inferior: 50 PX (tableta y teléfono)
Agregue el módulo de texto no. 1 En la columna 2 Agregar contenido vamos a la segunda columna! Agregue un módulo de texto con un contenido H4 a su elección.
Configuración Entrada de texto Luego, acceda a la configuración del texto H4 y realice algunos cambios.

La sección de 4 fuentes: Didact Gothic

Título 4 Fuente de peso: Bold
Título 4 Color de texto: #ffffff
Título 4 Dimensión de texto: 2VW (escritorio), 40 px (tableta), 30 px (teléfono)
Agregue el módulo de texto no. 2 En la columna 2 agregue contenido justo debajo del módulo de texto anterior, continúe y agregue otro con un contenido de párrafo.
Configuración de texto Vaya a la siguiente configuración de texto y realice algunos cambios.

Fuente de texto: Didact Gothic

Color de texto: #ffffff
Tamaño de texto: 0.9VW (escritorio), 18 px (tableta y teléfono)
Altura de la línea de texto: 2em
Sparto agregue algunos valores de margen personalizados.
Margen superior: 2VW

Margen derecho: 15 VW
Agregue la estructura de la fila # 2 de la columna Después de haber terminado de cambiar la primera fila y todos sus módulos, puede continuar y agregar una nueva fila utilizando la siguiente estructura de la columna:
Dimensión sin agregar módulos, abra la configuración de la fila y realice algunos cambios en la configuración del tamaño.

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: el daño de la canaleta: 1
El espacio elimina y todos los rellenos predeterminados de la configuración de espaciado de fila.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Visibilidad por último, pero no menos importante, esconde esta fila en la tableta y el teléfono.
Agregue un módulo de texto a la columna Agregar contenido La única forma en que necesitamos en esta fila es un módulo de texto. Agregue el contenido H3 y un enlace.
Color de fondo predeterminado luego, acceda a la configuración de fondo y agregue un color de fondo al módulo de texto.


Color de fondo: # E0E0E0

Coloque el cursor en el color de fondo Cambiar este color de fondo al cursor.

Color de fondo: RGBA (255,255,255.0)
Configuración de texto predeterminada Luego, acceda a la configuración del texto y realice algunos cambios.

Fuente de enlace: Didact Gothic
Estilo de enlace de fuente: subrayado

Enlace subrayado de estilo: sólido
Enlace de color de texto: #ffffff
Tamaño del enlace de texto: 0 PX
Enlace de la carta de espacio: -1 PX
Coloque el cursor en el cambio de configuración de texto y el tamaño del texto del enlace al salir.
Tamaño del enlace de texto: 1.7VW
Configuración predeterminada para el cabezal del encabezado Continúe haciendo algunos cambios en la configuración de texto H3.

3 Fuentes de fuentes: Didact Gothic
Título 3 Fuente de peso: Bold

Rúbrica 3 Color de texto: # 000000
Rúbrica 3 Dimensión de texto: 12VW
Rúbrica 3 Spaction of Letters: -0.8VW
Coloque el cursor en la configuración del texto del encabezado Cambie algunas de las configuraciones de texto H3.
Frup 3 color de texto: #ffffff
Rúbrica 3 Dimensión de texto: 4VW

Rúbrica 3 Spaction of Letters: -0.2VW
Extienda luego, acceda a la configuración de espaciado y agregue algunos valores de margen y llenado personalizados.
Margen superior: -34.3VW
Margen inferior: -5vwcăptuștere: 10VW

Revestimiento inferior: 10 VW
Junta izquierda: 26.5VW
Distancia con el mouse cambia los valores de espaciado al cursor.
Margen superior: -34.1VW
Margen inferior: -5VW
Revestimiento superior: 12VW

Revestimiento inferior: 12VW
Revelaje izquierdo: 11.5VW
Aumento de las transiciones y el tiempo de transición del módulo de texto.
Duración de la transición: 400 ms
La sección de clonación después de que se complete la primera sección, continúe y clone toda la sección tantas veces como desee. En la siguiente parte del tutorial, le mostraremos los cambios que debe hacer en cada duplicado.
Cambie la sección Coloque el cursor en el fondo del color Lo primero que tendrá que cambiar es el color de fondo del cursor de sección.

Color de fondo: # FF5B79
Cambie el fondo de gradiente de fila 1 Cambio y el fondo de gradiente de fila # 1.

Color 1: # 000000

Cambie el color del texto y copie con el color del texto y toda la copia.
El encabezado 3 Color de texto: # FF5B79

Cambie el espacio del módulo de texto no menos importante, cambie el relleno izquierdo del módulo de texto a su vez # 2. La cantidad restante de llenado que tendrá que usar depende de la longitud del contenido que use.
Junta izquierda: 21 VW

Descargue el aspecto gratuito para poner sus manos en el look, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil
Pensamientos finales En esta publicación, te mostré cómo revelar un contenido oculto en una fila. El resultado que creé se obtiene solo utilizando las opciones incrustadas del DIV. También compartimos el archivo JSON al final del tutorial, que, con suerte, lo ayudará a crear sus propios modelos alternativos. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.