En una de las últimas publicaciones de Divi , le mostramos cómo hacer que el contenido de la fila oculta aparezca al pasar el mouse . Hoy, le mostraremos cómo usar el mismo tipo de enfoque para revelar el contenido de la columna. El enfoque que manejaremos es similar y le permitirá crear todo tipo de diseños que tengan un agradable efecto de desplazamiento en el escritorio, pero que también funcionen bien para tamaños de pantalla más pequeños sin opciones de desplazamiento.
¡Esperamos que este tutorial lo inspire a crear todo tipo de diseños interactivos para los sitios web que crea! Al final de la publicación, podrá descargar el archivo JSON y ajustarlo según sus necesidades.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Como puede notar en el GIF a continuación, tenemos una transición de desplazamiento suave que revela el contenido de la columna al pasar el mouse.
Móvil
En tamaños de pantalla más pequeños, por otro lado, el contenido de la columna ya se mostrará sin necesidad de pasar el mouse.
¡Empecemos a Recrear!
Suscríbete a nuestro canal de Youtube
Agregar nueva sección regular
Espaciado
Abra una página nueva o existente y agréguele una sección regular. Abra la configuración de la sección y agregue un relleno personalizado superior e inferior en la configuración de espaciado.
- Acolchado superior: 10vw
- Acolchado inferior: 15vw
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y realice algunos cambios en la configuración de tamaño. Esta configuración permitirá que la fila ocupe todo el ancho de la pantalla y también ayudará a eliminar todo el espacio entre las columnas.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Vaya a la configuración de espaciado de la fila siguiente. Aquí, vamos a sustituir el espacio que eliminamos en el paso anterior agregando valores de relleno personalizados.
- Acolchado izquierdo: 8vw
- Acolchado derecho: 8vw
- Columna 1 Relleno derecho: 2vw
- Relleno izquierdo de la columna 2: 1vw
- Columna 2 Relleno derecho: 1vw
- Columna 3 Relleno izquierdo: 2vw
Agregue el módulo de texto n.º 1 a la columna 1
Agregar contenido
¡Es hora de comenzar a agregar módulos! Comience con un módulo de texto en la columna 1. Agregue contenido H3 de su elección.
Configuración de texto H3
Luego, vaya a la configuración del texto del encabezado y realice algunos cambios en la apariencia del contenido H3.
- Título 3 Fuente: Didact Gothic
- Encabezado 3 Peso de fuente: Negrita
- Encabezado 3 Alineación de texto: Centro
- Título 3 Color del texto: #3567ff
- Título 3 Tamaño del texto: 1.2vw (escritorio), 20px (tableta y teléfono)
Espaciado
Agregue algunos valores de espaciado personalizados al módulo de texto a continuación.
- Margen inferior: 4vw
- Acolchado superior: 4vw
- Acolchado inferior: 4vw
Sombra de la caja
Y dale al módulo una sutil sombra de caja.
- Posición vertical de la sombra del cuadro: 36px
- Fuerza de desenfoque de sombra de cuadro: 60px
- Color de sombra: rgba(0,0,0,0.06)
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido
Continúe agregando otro módulo de texto justo debajo del anterior. Agregue algún contenido de párrafo de su elección.
Configuración de texto
Luego, vaya a la pestaña de diseño y realice algunos cambios en la configuración del texto.
- Fuente de texto: Open Sans
- Tamaño del texto: 0.8vw (escritorio), 14px (tableta y teléfono)
- Espaciado entre letras de texto: -0.05vw
- Altura de línea de texto: 2,2 em
- Orientación del texto: Justificado
- Color del texto: oscuro
Espaciado
Juega con los márgenes personalizados y los valores de relleno en la configuración de espaciado también.
- Margen inferior: 3vw
- Acolchado superior: 2vw
- Acolchado inferior: 2vw
- Acolchado izquierdo: 4vw
- Acolchado Derecho: 4vw
Borde
Y agregue un borde izquierdo y derecho al módulo usando la siguiente configuración:
- Ancho del borde derecho: 1px
- Color del borde derecho: #e5e5e5
Agregar copia
El siguiente módulo que necesitamos en la primera columna es un módulo de botones. Agregue alguna copia de su elección.
Alineación
Luego, vaya a la pestaña de diseño y cambie la alineación del botón al centro.
- Alineación de botones: Centro
Configuración de botones
Continúe abriendo la configuración del botón y cambie la apariencia del botón para que coincida con el diseño general que pretendemos lograr.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1vw (escritorio), 15px (tableta y teléfono)
- Color del texto del botón: #000000
- Ancho del borde del botón: 1px
- Color del borde del botón: #dddddd
- Radio del borde del botón: 0px
- Espaciado entre letras de botones: -0.05vw
- Peso de fuente: Negrita
- Estilo de fuente: Mayúsculas
Espaciado
Juega con los valores de espaciado del módulo de botones también.
- Margen inferior: 100 px (tableta y teléfono)
- Relleno superior: 0.8vw (escritorio), 10px (tableta y teléfono)
- Relleno inferior: 0.8vw (escritorio), 10px (tableta y teléfono)
- Relleno izquierdo: 3.5vw (escritorio), 50px (tableta y teléfono)
- Relleno derecho: 3.5vw (escritorio), 50px (tableta y teléfono)
Clonar módulos en la columna 1 dos veces y colocar duplicados en las columnas restantes
Una vez que haya terminado de agregar los tres módulos diferentes a la columna 1, puede continuar y clonar cada uno de los módulos dos veces. Coloca los duplicados en las dos columnas restantes para lograr el mismo diseño en cada una de las columnas.
Cambiar el color del texto del módulo de texto n. ° 1 en la columna 2
Abra el primer módulo de texto en la columna 2 y cambie el color del texto.
- Título 3 Color del texto: #6d28c1
Cambiar el color del texto del módulo de texto n. ° 1 en la columna 3
Haga lo mismo para el primer módulo de texto en la tercera columna.
- Título 3 Color del texto: #15668e
Agregar módulo de texto superpuesto a la columna 1
Agregar contenido
Ahora que tenemos todo el contenido de la columna que necesitamos, podemos agregar el elemento superpuesto que ocultará el contenido antes de pasar el mouse. Para lograr esto, vamos a utilizar otro módulo de texto. Continúe y agregue otro a la primera columna. Asegúrese de que este sea el último módulo de la columna. Agregue algún contenido de su elección.
Fondo degradado
Continúe agregando un fondo degradado al módulo.
- Color 1: #6a30ff
- Color 2: #3567ff
- Dirección del gradiente: 124 grados
Configuración de texto
Cambie la configuración de texto a continuación.
- Fuente del texto: didáctica gótica
- Color del texto: #ffffff
- Tamaño del texto: 2vw
- Orientación del texto: Centro
Espaciado
Y cree una forma a partir del módulo agregando algunos valores de relleno personalizados. También estamos agregando un margen superior negativo para crear la superposición entre este módulo y el contenido de la columna. No se podrá hacer clic en el contenido que oculte detrás del módulo de texto. Por eso es importante mantener la llamada a la acción, como el botón de nuestro ejemplo, visible sin pasar el cursor.
- Margen superior: -38vw
- Acolchado superior: 15vw
- Acolchado inferior: 15vw
Borde
Agregue algunas esquinas redondeadas al módulo de texto a continuación.
Sombra de la caja
Junto con una sombra de caja sutil.
- Fuerza de desenfoque de sombra de cuadro: 40px
- Color de sombra: rgba (0,0,0,0,16)
Filtros predeterminados
Luego, vaya a la configuración de filtros y asegúrese de que la opacidad sea ‘100%’ por defecto.
- Opacidad: 100%
Filtros de desplazamiento
Cambie la opacidad al pasar el mouse a ‘0%’. Esto hará que el módulo desaparezca y permitirá que aparezca todo el contenido de la columna en su lugar.
- Opacidad: 0%
CSS personalizado
Para asegurarse de que el Módulo de texto permanezca encima de todo el contenido de la columna, agregue dos líneas de código CSS en la pestaña avanzada del Módulo de texto.
|
01
02
|
z-index: 99;position: relative |
Visibilidad
Y oculte todo el módulo en la tableta y el teléfono. Como se mencionó al principio de esta publicación, mostramos todo el contenido de la columna en pantallas más pequeñas para asegurarnos de que la experiencia de usuario que tienen los visitantes sea buena.
Clonar módulo de texto superpuesto dos veces y colocar duplicados en las columnas restantes
Una vez que haya terminado de modificar el módulo de texto superpuesto, continúe y clónelo dos veces. Coloque cada uno de los duplicados en las dos columnas restantes.
Cambiar el fondo degradado del módulo de texto superpuesto en la columna 2
Cambia el color de fondo degradado del primer duplicado.
- Color 1: #d530ff
- Color 2: #6d28c1
Cambiar el fondo degradado del módulo de texto superpuesto en la columna 3
Y haz lo mismo con el segundo duplicado también.
- Color 1: #41ff30
- Color 2: #15668e
Descarga La Sección GRATIS
Para poner sus manos en la sección de revelación de la columna, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Avance
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo revelar el contenido de la columna al pasar el mouse. Puede usar este enfoque para cualquier tipo de sitio web que cree para agregar un nivel adicional de interacción. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!