Si te gusta crear sitios web con la interacción del usuario en mente, te encantará este tutorial de diseño de Divi . Hoy, le mostraremos cómo crear una cuadrícula flotante perfecta. El diseño es inicialmente simple y limpio. Tan pronto como alguien pasa el cursor sobre uno de los elementos, se revela la imagen de fondo y los estilos del módulo cambian junto con ella. Esto da como resultado una hermosa experiencia de vuelo estacionario. En este tutorial, lo guiaremos paso a paso a través del proceso de creación. ¡También podrá descargar el archivo JSON del diseño de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño GRATIS
Para poner sus manos en el diseño gratuito, primero deberá descargarlos 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!
¡Empecemos a Recrear!
Agregar nueva sección
Color de fondo
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y aplique un color de fondo blanco.
- Color de fondo: #ffffff
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Borde
E incluya un borde superior e inferior.
- Ancho del borde superior e inferior: 1px
- Color del borde superior e inferior: #d3d3d3
Configuración de la columna 1
Fondo degradado flotante
A continuación, tenemos la configuración de la columna 1. Aplique un fondo degradado al pasar el mouse.
- Color 1: rgba(255.255.255,0)
- Color 2: #000000
- Tipo de gradiente: lineal
- Posición inicial: 30%
Imagen de fondo flotante
Cargue una imagen de fondo al pasar el mouse también.
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: Centro
Clase CSS
Y complete la configuración de la columna asignando la siguiente clase CSS en la pestaña avanzada:
- Clase CSS: columna flotante
Agregue el módulo de texto n.º 1 a la columna 1
Agregar contenido H3
Es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Use algún contenido H3 de su elección.
Configuración de texto H3
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H3 de la siguiente manera:
- Encabezado 3 Fuente: Oswald
- Encabezado 3 Peso de fuente: ultraligero
- Título 3 Estilo de fuente: Mayúsculas
- Título 3 Color del texto: #0a0a0a
- Título 3 Tamaño del texto:
- Escritorio: 3vw
- tableta: 7vw
- Teléfono: 14vw
- Encabezado 3 Espaciado entre letras: -2px
Dimensionamiento
Modifique el ancho en diferentes tamaños de pantalla en la configuración de tamaño.
- Ancho:
- Escritorio: 44%
- Tableta: 48%
- Teléfono: 50%
Espaciado
También estamos usando algunos márgenes personalizados y valores de relleno.
- Margen inferior: 25vh
- Acolchado superior: 5%
- Acolchado inferior: 5%
- Relleno izquierdo: 7%
- Relleno derecho: 7%
Borde
A continuación, agregaremos algunos bordes derecho e inferior.
- Ancho del borde derecho e inferior: 1px
- Ancho del borde derecho e inferior: 1px
- Color del borde derecho e inferior: #d3d3d3
Clase CSS
Y completaremos la configuración del módulo asignando la siguiente clase CSS al módulo de texto:
- Clase CSS: título flotante
Agregue el Módulo de Texto #2 a la Columna 2
Agregar contenido
Agregue otro módulo de texto justo debajo del anterior con algún contenido descriptivo de su elección.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente del texto: Karla
- Color del texto: #ffffff
- Tamano del texto:
- Escritorio: 0.8vw
- Tableta: 2vw
- Teléfono: 3.6vw
- Altura de línea de texto: 2,2 em
Espaciado
Aplique también algunos valores de relleno personalizados.
- Acolchado inferior: 10%
- Relleno izquierdo: 9%
- Relleno derecho: 9%
Clase CSS
Y complete la configuración del módulo utilizando la siguiente clase CSS para el módulo:
- Clase CSS: texto flotante
Agregar copia
El siguiente y último módulo que necesitamos es un módulo de botones. Agregue alguna copia de su elección.
Configuración de botones
Modifique la configuración de los botones del módulo de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón:
- Escritorio: 1vw
- Tableta: 2.5vw
- Teléfono: 4vw
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Fuente del botón: Karla
- Mostrar icono de botón: Sí
- Ubicación del icono del botón: Izquierda
- Solo mostrar icono al pasar el mouse sobre el botón: No
Espaciado
Agregue también algunos valores de espaciado personalizados.
- Margen inferior: 8%
- Margen Izquierdo: 9%
- Margen Derecho: 9%
- Acolchado inferior: 5%
- Relleno Derecho: 20%
Sombra de la caja
Luego, aplica una sombra de caja.
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 2px
- Color de sombra: #000000
Clase CSS
Y complete la configuración del módulo asignando la siguiente clase CSS al botón:
- Clase CSS: botón flotante
Reutilizar la columna 1
Eliminar las columnas 2, 3 y 4
Ahora que hemos construido la primera columna, podemos reutilizarla. Lo primero que haremos será eliminar las columnas vacías de nuestra fila.
Clonar columna 1 tres veces
Reutilizaremos la columna 1 clonándola tres veces.
Cambiar las imágenes de fondo de la columna duplicada
Cambie las imágenes de fondo de la columna duplicada en cada columna duplicada.
Cambiar contenido duplicado
Junto con el contenido del módulo en cada columna duplicada.
Bordes de columna únicos
columna 1
Tendremos que aplicar algunas configuraciones de borde únicas a cada columna, comenzando con la columna 1.
- Ancho del borde derecho:
- Escritorio: 1px
- tableta: 1px
- Teléfono: 0px
- Color del borde derecho: #d3d3d3
- Ancho del borde inferior:
- Escritorio: 0px
- tableta: 1px
- Teléfono: 1px
- Color del borde inferior: #d3d3d3
columna 2
A continuación, tenemos la columna 2.
- Ancho del borde derecho:
- Escritorio: 1px
- Tableta: 0px
- Teléfono: 0px
- Color del borde derecho: #d3d3d3
- Ancho del borde inferior:
- Escritorio: 0px
- tableta: 1px
- Teléfono: 1px
- Color del borde inferior: #d3d3d3
columna 3
Y usaremos la siguiente configuración de borde para la columna 3:
- Ancho del borde derecho:
- Escritorio: 1px
- tableta: 1px
- Teléfono: 0px
- Color del borde derecho: #d3d3d3
- Ancho del borde inferior:
- Escritorio: 0px
- Tableta: 0px
- Teléfono: 1px
- Color del borde inferior: #d3d3d3
Agregar código CSS personalizado a la configuración de la página
Configuración de la página abierta
Ahora que tenemos todo el diseño en su lugar, lo único que queda por hacer es agregar un código CSS personalizado para ayudar a activar los efectos de desplazamiento en los elementos secundarios (los módulos). Para hacer eso, abra la configuración de la página.
Agregar código CSS
Y copie y pegue las siguientes líneas de código CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
.hover-column:hover .hover-title {background-color: #000000;}.hover-column:hover .hover-title h3 {color: white !important;}.hover-button {color: black;}.hover-column:hover .hover-button {color: white !important;box-shadow: 0px 2px 0px 0px #ffffff;}.hover-column:before {position: absolute;content: "";top: 0;right: 0;bottom: 0;left: 0;background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);z-index: -1;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;-ms-transition: all 0.8s ease;transition: all 0.8s ease;opacity: 1;}.hover-column:hover::before {opacity: 0;} |
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 crear un hermoso diseño flotante. Más específicamente, hemos creado una cuadrícula de columna que comienza de manera simple y limpia. Tan pronto como los visitantes pasan el cursor sobre un elemento en particular en la cuadrícula, se revela la imagen de fondo y los estilos del módulo cambian. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.