¿Le gustaría crear una cuadrícula con Divi ser fluido en vuelo estacionario?
Si le encanta crear sitios web con la interacción del usuario en mente, le encantará este tutorial.
Hoy le mostraremos cómo crear una cuadrícula transparente cuya imagen de fondo se revela tan pronto como alguien pasa el mouse sobre uno de los elementos. El diseño es inicialmente simple y limpio. Esto da como resultado una agradable experiencia de vuelo estacionario.
En este tutorial, lo guiaremos a través del proceso de creación paso a paso.
Vamos.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
oficina
Móvil
Empecemos el proceso de creación en Divi
Agregar una nueva sección
Color de fondo
Agregue una nueva sección a la página en la que está trabajando.
Ver también: Divi: Cómo crear un pie de página personalizado
Primero abra la configuración de la sección y aplique un color de fondo blanco.
- Fondo: #ffffff
Agregar línea #1
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo todavía, abra la configuración de línea, vaya a la pestaña Diseño, despliegue la opción Guía de Tallas y modifique los parámetros de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: SÍ
- Canalón con : 1
- Ancho: 100%
- Ancho máximo: 100%
espaciamiento
Luego despliega la opción Distanciamiento y cambie la siguiente configuración:
- Relleno (superior e inferior): 0px
frontera
En la opción Borde, también realice los siguientes cambios:
- Estilos de borde (superior e inferior): 1px
- Color del borde (superior e inferior): #d3d3d3
Configuración de columna 1
Fondo flotante
A continuación, personalicemos la configuración de la columna 1. Aplique un fondo degradado al desplazamiento.
- Color 1: rgba (255,255,255,0)
- Color 2: #000000
- Tipo de gradiente: lineal
- Posición Color 1: 30%
- Colocar degradado encima de la imagen de degradado: SÍ
Imagen de fondo al pasar el mouse
Cargue también una imagen de fondo que aparecerá al pasar el mouse.
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: Centro
Clase de CSS
Y complete la configuración de la columna asignando la siguiente clase CSS en la pestaña Avanzado :
- Clase CSS: columna flotante
Agregue el módulo Text #1 a la columna 1
Agregar texto de tamaño H3 (Título 3)
Es hora de agregar módulos, comenzando con un primer módulo de Texto en la columna 1. Inserte un texto de su elección.
Configuración de texto H3
Luego cambie a la pestaña Diseño del módulo y modifique los parámetros de texto H3 de la siguiente manera:
- Fuente: Osvaldo
- Peso de fuente Peso de fuente: ultra ligero
- Título 3 Estilo de fuente: TT
- Color del texto: #0a0a0a
- Título 3 Tamaño del texto:
- Escritorio: 3vw
- tableta: 7vw
- Teléfono: 14vw
- Encabezado 3 Espaciado entre letras: -2px
apresto
Cambie el ancho en diferentes tamaños de pantalla en la configuración de tamaño.
- Ancho:
- Escritorio: 44%
- Tabletas: 48%
- Teléfono: 50%
espaciamiento
También cambiemos los siguientes parámetros en la opción Distanciamiento.
- Margen (inferior): 25vh
- Relleno (Superior e Inferior): 5%
- Relleno (izquierdo y derecho): 4%
frontera
A continuación, agregaremos bordes a la derecha y abajo.
- Ancho del borde (derecho e inferior): 1px
- Color del borde (derecho e inferior): #d3d3d3
Clase de CSS
Y también completaremos la configuración del módulo asignando la siguiente clase CSS al módulo Texto:
- Clase CSS: título flotante
Agregue el módulo Text #2 a la columna 1
Agregar contenido
Agregue otro módulo de Texto justo debajo del anterior con el contenido descripción de su elección.
Configuraciones de texto
Cambiar a pestaña Diseño del módulo y modifique los parámetros de texto en consecuencia:
- Fuente del texto: Karla
- Color del texto: #ffffff
- Tamaño:
- Escritorio: 0,8 vw
- tableta: 2vw
- Teléfono: 3.6vw
- Altura de la línea: 2,2 cm
espaciamiento
Aplique también valores de margen personalizados.
- Relleno (parte inferior): 10%
- Relleno (izquierdo y derecho): 9%
Clase de CSS
Y complete los parámetros del módulo usando la siguiente clase CSS para el módulo:
- Clase CSS: texto flotante
Agregue un módulo "Botón" a la columna 1
Añadir una descripción
El siguiente y último módulo que necesitamos es un módulo Botón. Introduzca una descripción de su elección.
Configuraciones de botones
Modifique los parámetros 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,5 vw
- Teléfono: 4vw
- Ancho del borde del botón: 0px
- Radio del borde: 0px
- Fuente del botón: Karla
- Mostrar icono de botón: SÍ
- Ubicación del icono del botón: Derecha
- Mostrar solo el icono sobre el botón: NO
espaciamiento
También agregue valores de espaciado personalizados.
- Margen (Inferior): 8%
- Margen (izquierdo y derecho): 9%
- Relleno (parte inferior): 5%
- Relleno (Derecho): 20%
sombra de la caja
A continuación, aplique una sombra de cuadro.
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 2px
- Color de sombra: #000000
Clase de 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 vamos a hacer es eliminar las columnas vacías de nuestra fila.
Clonar la columna 1 tres veces
Reutilizaremos la columna 1 clonándola tres veces.
Cambie las imágenes de fondo al pasar el mouse sobre columnas duplicadas
Luego cambie las imágenes de fondo de la columna duplicada en cada columna duplicada.
Editar contenido duplicado
También cambia el contenido del módulo en cada columna duplicada.
Bordes de columna únicos
Columna 1
Tendremos que aplicar configuraciones de borde únicas a cada columna, comenzando con la columna 1.
- Ancho del borde (derecha):
- Escritorio: 1px
- Tableta: 1px
- Teléfono: 0px
- Color (Derecha): #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 (derecha):
- Escritorio: 1px
- Tableta: 1px
- Teléfono: 0px
Color (Derecha): #d3d3d3Ancho 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 (derecha):
- Escritorio: 1px
- Tableta: 1px
- Teléfono: 0px
- Color (Derecha): #d3d3d3
- Ancho del borde (inferior):
- Escritorio: 0px
- Tableta: 1px
- Teléfono: 1px
- Color del borde (inferior): #d3d3d3
Agregar CSS personalizado a la configuración de la página
Configuración de la página abierta
Ahora que todo el diseño está en su lugar, todo lo que queda es agregar un código CSS personalizado para ayudar a activar los efectos de desplazamiento en los módulos. Para hacer esto, abra la configuración de la página.
Lea también nuestra guía sobre: Divi: Cómo crear un pie de página fijo con efecto "Revelar"
Agregar código CSS
Y copie y pegue las siguientes líneas de código CSS:
.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;
}
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
oficina
Móvil
¡¡¡Descarga DIVI ahora!!!
Conclusión
En este artículo, le mostramos cómo crear un hermoso diseño flotante.
Específicamente, hemos creado una cuadrícula de columnas que comienza simple y limpia. Tan pronto como visitantes Pase el cursor sobre un elemento de la cuadrícula en particular, se revela la imagen de fondo y los estilos del módulo cambian.
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
