Cómo hacer que el contenido oculto de la fila aparezca al pasar el mouse con Divi (¡Descarga gratuita!)

Agregar interacciones sutiles a su sitio web realmente puede mejorar la experiencia general del usuario que tienen los visitantes. Una de las cosas que hará que su sitio web se vea más elegante, sin dejar de respetar la facilidad de uso, es hacer que el contenido de la fila aparezca al pasar el mouse. Este es un gran enfoque para mostrar servicios, productos, funciones y más.

En este tutorial, le mostraremos cómo crear un diseño específico de la A a la 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 compartiremos el archivo JSON de este diseño que puede descargar GRATIS y usar sin restricciones.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

¡Empecemos a crear!

Agregar nueva sección

Color de fondo predeterminado

Comience 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

Colocar el cursor sobre el color de fondo

Modifica este color de fondo al pasar el mouse.

• Color de fondo: # 000000

Espaciado

Vaya a la pestaña de diseño y agregue algunos valores de espaciado personalizados. Para que este tutorial funcione, solo usaremos unidades de visualización. Esto ayudará a asegurar que todo permanezca en su lugar, sin importar el tamaño de la pantalla.

• Margen superior: 5vw
• Margen inferior: 5vw
• Margen izquierdo: 3vw
• Margen derecho: 3vw
• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un fondo degradado.

• Color 1: # ff5b79
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 15%
• Posición final: 15%

Dimensionamiento

Realice también algunos cambios en la configuración de tamaño de la fila.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Y agregue algunos valores de relleno personalizados en la configuración de espaciado.

• Acolchado superior: 9vw
• Acolchado inferior: 9vw
• Columna 1 Relleno izquierdo: 5vw
• Columna 1 Relleno derecho: 5vw
• Columna 2 Relleno izquierdo: 5vw
• Columna 2 Relleno derecho: 5vw

Agregar módulo de texto a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar los módulos! El primer módulo que necesitaremos es un módulo de texto en la columna 1. Agregue contenido H3 y un enlace.

Configuración del texto del enlace

Luego, vaya a la configuración del texto del enlace y realice algunos cambios en la apariencia del enlace.

• Fuente del enlace: Didact Gothic
• Estilo de fuente de enlace: subrayado
• Estilo de subrayado de enlace: sólido
• Color del texto del enlace: #ffffff
• Tamaño del texto del enlace: 20px

Configuración del texto del encabezado

Modifique también la configuración del texto H3.

• Fuente del encabezado 3: Didact Gothic
• Color del texto del encabezado 3: #ffffff
• Tamaño del texto del encabezado 3: 50px

Visibilidad

Por último, pero no menos importante, desactive el módulo en el escritorio. Solo necesitamos que este módulo aparezca en pantallas de menor tamaño.

Agregar módulo divisor a la columna 2

Visibilidad

El segundo y último módulo necesario en la columna 1 es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Color

Luego, cambie el color del divisor.

• Color: #ffffff

Espaciado

Agregue también algunos valores de margen personalizados al módulo divisor.

• Margen superior: 11vw (escritorio), 80px (tableta),
• Margen inferior: 50 px (tableta y teléfono)

Agregue el módulo de texto n. ° 1 a la columna 2

Agregar contenido

¡A la segunda columna! Agregue un módulo de texto con algún contenido H4 de su elección.

Configuración del texto del encabezado

Luego, vaya a la configuración de texto H4 y realice algunos cambios.

• Fuente del encabezado 4: Didact Gothic
• Peso de fuente del encabezado 4: Negrita
• Color del texto del título 4: #ffffff
• Encabezado 4 Tamaño del texto: 2vw (escritorio), 40px (tableta), 30px (teléfono)

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido

Justo debajo del módulo de texto anterior, continúe y agregue otro con algún contenido de párrafo de su elección.

Configuración de texto

Vaya a la configuración de texto a continuación y realice algunos cambios.

• Fuente de texto: Didact Gothic
• Color del texto: #ffffff
• Tamaño del texto: 0.9vw (escritorio), 18px (tableta y teléfono)
• Altura de la línea de texto: 2em

Espaciado

Agregue también algunos valores de margen personalizados.

• Margen superior: 2vw
• Margen derecho: 15vw

Agregar fila n. ° 2

Estructura de la columna

Una vez que haya terminado de modificar la primera fila y todos sus módulos, puede continuar y agregar una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y realice algunos cambios en la configuración de Tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Elimine también todo el relleno predeterminado en la configuración de espaciado de filas.

• Relleno superior: 0px
• Acolchado inferior: 0px

Visibilidad

Por último, pero no menos importante, oculte esta fila en la tableta y el teléfono.

Agregar módulo de texto a la columna

Agregar contenido

El único módulo que necesitamos en esta fila es un módulo de texto. Agregue algo de contenido H3 y un enlace.

Color de fondo predeterminado

Luego, vaya a la configuración de fondo y agregue un color de fondo al Módulo de texto.

• Color de fondo: # e0e0e0

Colocar el cursor sobre el color de fondo

Modifica este color de fondo al pasar el mouse.

• Color de fondo: rgba (255,255,255,0)

Configuración de texto predeterminada

A continuación, vaya a la configuración de texto y realice algunos cambios.

• Fuente de enlace: Didact Gothic
• Estilo de fuente de enlace: subrayado
• Estilo de subrayado de enlace: sólido
• Color del texto del enlace: #ffffff
• Tamaño del texto del enlace: 0px
• Espaciado entre letras del enlace: -1px

Configuración de texto del enlace flotante

Modifique también el tamaño del texto del enlace al pasar el mouse.

• Tamaño del texto del enlace: 1.7vw

Configuración predeterminada del texto del encabezado

Continúe realizando algunos cambios en la configuración de texto H3.

• Fuente del encabezado 3: Didact Gothic
• Peso de fuente del encabezado 3: Negrita
• Título 3 Color del texto: # 000000
• Encabezado 3 Tamaño del texto: 12vw
• Espacio entre letras del encabezado 3: -0,8 vw

Configuración del texto del encabezado de desplazamiento

Modifique algunas de las configuraciones de texto H3 al pasar el mouse.

• Color del texto del encabezado 3: #ffffff
• Encabezado 3 Tamaño del texto: 4vw
• Espacio entre letras del encabezado 3: -0,2 vw

Espaciado

Luego, vaya a la configuración de espaciado y agregue algunos valores de margen y relleno personalizados.

• Margen superior: -34,3vw
• Margen inferior: -5vw
• Acolchado superior: 10vw
• Acolchado inferior: 10vw
• Acolchado izquierdo: 26.5vw

Espaciado de desplazamiento

Modifique los valores de espaciado al pasar el mouse.

• Margen superior: -34.1vw
• Margen inferior: -5vw
• Acolchado superior: 12vw
• Acolchado inferior: 12vw
• Acolchado izquierdo: 11.5vw

Transiciones

Aumente también la duración de la transición del módulo de texto.

• Duración de la transición: 400 ms

Sección de clonación

Una vez que haya completado su 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 realizar en cada duplicado.

Cambiar el color de fondo del desplazamiento del cursor de la sección

Lo primero que deberá modificar es el color de fondo de la sección al pasar el mouse.

• Color de fondo: # ff5b79

Cambiar el fondo degradado de la fila n. ° 1

Cambie también el fondo degradado de la fila n. ° 1.

• Color 1: # 000000

Cambiar el color del texto y copiar

Junto con el color del texto y toda la copia.

• Color del texto del encabezado 3: # ff5b79

Cambiar el espaciado del módulo de texto

Por último, pero no menos importante, cambie el relleno izquierdo del Módulo de texto en la fila # 2. La cantidad de relleno izquierdo que necesitará usar depende de la longitud del contenido que esté usando.

• Acolchado izquierdo: 21vw

Descarga The Layout GRATIS

Para poner sus manos en el diseño, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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 revelar el contenido de la fila oculta al pasar el mouse. El resultado que hemos creado se crea utilizando solo las opciones integradas de Divi. También hemos compartido el archivo JSON al final del tutorial que, con suerte, también le ayudará a crear sus propios diseños alternativos. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!