¿Le gustaría presentar sus funcionalidades o productos en forma de ficha? Divi con efecto hover?
¿Está buscando nuevas formas creativas de mostrar características y/o productos en sus páginas web?
Si es así, siga leyendo porque en este artículo, le mostraremos cómo mostrar funciones en pestañas al pasar el mouse usando solo las opciones integradas de Divi. Las posibilidades que tienes con este enfoque son infinitas y seguramente te permitirán comprender Divi a un nivel más profundo.
El efecto de desplazamiento de pestaña solo se producirá en el escritorio. En tamaños de pantalla más pequeños, aparecerán en sus formas normales.
¡Vamos!
vista
Antes de sumergirnos en este tutorial, echemos un vistazo al resultado que queremos lograr.
Comencemos el proceso de creación con Divi.
Añadir una nueva sección
Fondo degradado
Agregue una nueva página o abra una página existente y agregue una nueva sección. Abra la configuración de la sección y agregue un fondo degradado a la sección.
- Color izquierdo: #f2f2f2
- Color correcto: #ffffff
- Dirección del gradiente: 87 grados
- Posición izquierda: 20%
- Posición derecha: 80%
espaciamiento
A continuación, cambie la siguiente configuración de espaciado:
- Relleno (superior e inferior): 0px
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Color de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo.
- Color de fondo: #ffffff
Dimensionamiento y Alineación
En la pestaña Diseño, despliegue la opción Guía de Tallas y cambie la siguiente configuración:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 400px
- Alineación de filas: Izquierda
Tamaño flotante
Cambiar opción Ancho Mínimo en la configuración de tamaño flotante. Esto permitirá que la línea se expanda cuando se desplace.
- Ancho (Hover): 2 píxeles
espaciamiento
Luego vaya a la configuración de espaciado en la opción Distanciamiento
- Relleno (superior e inferior): 0px
Borde (Escritorio)
Agregue '20px' a la esquina superior derecha de la línea y también agregue un borde izquierdo a la línea.
- Esquinas redondeadas (escritorio): 20px (esquina superior derecha)
- Ancho del borde izquierdo: 20px
- Color del borde izquierdo: #6d44ff
Borde al pasar el mouse
Elimine la esquina superior derecha redondeada de '20px' al pasar el mouse agregando '0px' en su lugar.
Sombra de caja (escritorio)
Finalmente, agrega una sombra sutil.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -10px
- Color de sombra: rgba (0,0,0,0.11)
Sombra flotante
Y cambie el color de la sombra a un color completamente transparente al pasar el mouse.
- Sombra de caja: rgba(255,255,255,0)
Agregar módulo de Blurb a la fila
Agregar contenido
Ahora que hemos terminado de cambiar todas las configuraciones de fila, podemos continuar y agregar un módulo de Blurb a la columna. Siéntase libre de usar cualquier otro módulo de su elección.
Una vez que haya agregado el módulo, agregue algunos contenido De tu elección
Seleccione el icono
A continuación, seleccione un icono de su elección.
Configuración de iconos
Y cambie la apariencia del ícono en la configuración del ícono. Ir a la pestaña Diseño
- Color del icono: #5323ff
- Colocación de imagen/icono: Arriba
- Ancho de imagen/icono: 50px
Configuración de títulos de texto (escritorio)
Luego cambie la configuración del título.
- Fuente del título: Poppins
- Alineación de texto: centrado
- Color del texto del título: #5323ff
- Tamaño del texto del título: 25px
- Espaciado entre letras: -1px
- Altura de la línea: 1 cm
Configuración del título del texto flotante
Y cambie la altura de la fila de título al pasar el mouse.
- Altura de la línea del título: 1,5 cm
Configuración del texto del cuerpo (escritorio)
A continuación, vaya a la configuración del texto del cuerpo y realice algunos cambios. Esto incluye cambiar el tamaño del texto a '0px'. Esto nos ayudará a hacer que el cuerpo del texto aparezca solo al pasar el mouse sobre él.
- Fuente del cuerpo: Poppins
- Peso de la fuente del cuerpo: ligero
- Alineación de texto: centrado
- Color del cuerpo del texto: #000000
- Tamaño del texto del cuerpo: 0 px (escritorio), 15 px (tableta y teléfono)
- Altura de la línea: 2,2 cm
Configuración del texto del cuerpo al pasar el mouse
Para asegurarse de que el texto del cuerpo aparezca al pasar el mouse, cambie el tamaño del texto flotante.
- Tamaño del cuerpo del texto: 15px
Espaciado (Escritorio)
Para darle algo de espacio al módulo, modificamos los siguientes parámetros de espaciado:
- Relleno (superior e inferior): 80px
Espaciado de desplazamiento
Vamos a cambiar la configuración de espaciado de desplazamiento.
- Relleno (superior e inferior): 80px
- Acolchado (izquierdo y derecho): 20vw
Clonar fila 3 veces
Una vez que haya terminado de editar la primera fila y su módulo Blurb, puede continuar y clonar la fila tantas veces como desee.
Editar Línea y Módulo Blurb #2
Cambiar el color del borde de la línea
Comencemos cambiando el color del borde izquierdo de la línea.
- Color del borde izquierdo: #00ffcc
Editar contenido e ícono de Blurb
A continuación, abra la configuración del módulo Blurb y cambie el icono.
Cambiar el color del icono del módulo Blurb
Con color de icono.
- Color del icono: #00eda6
Cambiar el color del título
Y el color del texto del título.
- Color del texto del título: #00eda6
Editar línea y módulo Burb #3
Color del borde de la línea
Cambiemos el color del borde de la línea izquierda.
- Color del borde izquierdo: #afebff
Editar contenido e ícono de Blurb
Cambiemos también el icono y contenido del texto de presentación.
Cambiar el color del icono del módulo Blurb
También cambie el color del icono.
- Color del icono: #68d9ff
Cambiar el color del texto del título
Y el color del texto del título también.
- Color del texto del título: #68d9ff
Editar Línea y Módulo Blurb #4
Cambiar el color del borde de la línea
En el siguiente y último módulo, cambie también el color del borde izquierdo de la línea.
- Color del borde izquierdo: #dd87cf
Editar contenido e ícono de Blurb
Abra el módulo de Blurb en la fila y cambie el ícono y el contenido du módulo.
Cambiar el color del icono del módulo Blurb
Con color de icono.
- Color del icono: #dd6aca
Cambiar el color del texto del título
Y el color del texto del título también.
- Color del texto del título: #dd6aca
vista
Ahora que hemos seguido el tutorial, echemos un último vistazo al resultado.
¡¡¡Descarga DIVI ahora!!!
Conclusión
En este artículo, le mostramos cómo usar las opciones integradas de Divi solo para crear pestañas disponibles al pasar el mouse.
Este enfoque lo ayudará a compartir contenido sobre características o productos de forma interactiva.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
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.
...
