¿Está buscando formas nuevas y creativas de mostrar características y/o productos en sus páginas web? Si es así, sigue leyendo porque en esta publicación te mostraremos cómo mostrar las funciones en las pestañas flotantes usando Divi y sus opciones integradas únicamente. Las posibilidades que tienes con este enfoque son infinitas y seguramente te permitirán comprender a Divi en un nivel más profundo. El efecto de desplazamiento de la pestaña solo se producirá en entornos de escritorio compatibles con el desplazamiento. Cuando las pestañas flotantes se visualizan desde pantallas de menor tamaño, las características se mostrarán en su forma original.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
¡Comencemos a crear!
Suscríbete a nuestro canal de Youtube
Agregar nueva sección
Fondo degradado
Agregue una nueva página o abra una existente y agregue una nueva sección. Abra la configuración de la sección y agregue un fondo degradado a la sección. Usaremos el fondo degradado para cubrir la parte izquierda de las pestañas flotantes, como puede notar en las pantallas de impresión de arriba.
- Color 1: #f2f2f2
- Color 2: #ffffff
- Dirección del gradiente: 87 grados
- Posición inicial: 20%
- Posición final: 20%
Espaciado
Luego, elimine el relleno superior e inferior personalizado de la sección agregando ‘0px’ a ambas opciones.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando 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
Alineación de filas
Modifique también la alineación de las filas.
- Alineación de filas: Izquierda
Tamaño predeterminado
Y cambie la configuración de tamaño también.
- Usar ancho personalizado: Sí
- Unidad: PX
- Ancho personalizado: 400px
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Tamaño flotante
Modifique la opción Ancho personalizado en la configuración de Tamaño al pasar el mouse. Esto permitirá que la fila se expanda cuando se desplaza.
- Ancho personalizado: 2000px
Espaciado
Luego, vaya a la configuración de espaciado y elimine los valores predeterminados de relleno superior e inferior.
- Relleno superior: 0px
- Relleno inferior: 0px
Borde predeterminado
Agregue ’20px’ a la esquina superior derecha de la fila y agregue también un borde izquierdo a la fila.
- Ancho del borde izquierdo: 20px
- Color del borde izquierdo: #6d44ff
Borde flotante
Elimine la esquina superior derecha redondeada ’20px’ al pasar el mouse agregando ‘0px’ en su lugar.
Sombra de cuadro predeterminada
Por último, pero no menos importante, agregue una sombra de cuadro 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 de caja flotante
Y modifique el color de la sombra en un color completamente transparente al pasar el mouse.
- Color de sombra: rgba(255,255,255,0)
Agregar módulo de Blurb a la fila
Agregar contenido
Ahora que hemos terminado de modificar todas las configuraciones de las filas, 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 algún contenido de su elección.
Seleccionar icono
Seleccione un icono de su elección a continuación.
Configuración de iconos
Y cambie la apariencia del ícono en la configuración del ícono.
- Color del icono: #5323ff
- Ubicación del icono: superior
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 54px
Configuración predeterminada del texto del título
Modifique la configuración del texto del título a continuación.
- Fuente del título: Poppins
- Alineación del texto del título: Centro
- Color del texto del título: #5323ff
- Tamaño del texto del título: 25px
- Espaciado entre letras del título: -1px
- Altura de la línea del título: 1em
Configuración del texto del título flotante
Y modifique la altura de la línea de título al pasar el mouse.
- Altura de la línea de título: 1,5 em
Configuración predeterminada del texto del cuerpo
Luego, 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 por encima.
- Fuente del cuerpo: Poppins
- Peso de la fuente del cuerpo: ligero
- Alineación del cuerpo del texto: Centro
- 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 del cuerpo: 2,2 em
Configuración del texto del cuerpo flotante
Para asegurarse de que el texto del cuerpo aparezca al pasar el mouse, cambie el tamaño del texto al pasar el mouse.
- Tamaño del cuerpo del texto: 15px
Espaciado predeterminado
Para darle al módulo algo de espacio para respirar, estamos agregando un relleno superior e inferior personalizado al módulo.
- Relleno superior: 80px
- Relleno inferior: 80px
Espaciado de desplazamiento
Modificaremos la configuración de espaciado al pasar el mouse. No podrá ver el resultado final antes de salir de Visual Builder porque estamos aplicando opciones de desplazamiento tanto a la fila como al módulo de Blurb.
- Relleno superior: 80px
- Relleno inferior: 80px
- Acolchado izquierdo: 20vw
- Acolchado Derecho: 20vw
Clonar fila 3 veces
Una vez que haya terminado de modificar la primera fila y su módulo Blurb, puede continuar y clonar la fila tantas veces como desee.
Cambiar Fila y Módulo de Blurb #2
Cambiar el espacio entre filas
Abra el primer duplicado y agregue un margen izquierdo personalizado. Esto nos permitirá crear el efecto de escalera que puedes notar en la vista previa de esta publicación.
- Margen izquierdo: 6vw
Cambiar color de borde de fila
Cambie también el color del borde izquierdo de la fila.
- Color del borde izquierdo: #00ffcc
Cambiar contenido e icono de Blurb
Luego, abra el módulo de Blurb y cambie el icono.
Cambiar el color del icono del módulo Blurb
Junto con el color del icono.
- Color del icono: #00eda6
Cambiar el color del texto del título
Y el color del texto del título.
- Color del texto del título: #00eda6
Cambiar Fila y Módulo de Blurb #3
Cambiar el espacio entre filas
Agregue un margen izquierdo personalizado al segundo duplicado también.
- Margen izquierdo: 12vw
Cambiar color de borde de fila
Cambia el color del borde de la fila izquierda.
- Color del borde izquierdo: #afebff
Cambiar contenido e icono de Blurb
Junto con el icono y el contenido de la publicidad.
Cambiar el color del icono del módulo Blurb
Modifique el color del icono también.
- 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
Cambiar Fila y Módulo de Blurb #4
Cambiar el espacio entre filas
¡Al próximo y último duplicado! Agregue un margen izquierdo personalizado a la fila.
- Margen izquierdo: 18vw
Cambiar color de borde de fila
Cambie también el color del borde izquierdo de la fila.
- Color del borde izquierdo: #dd87cf
Cambiar contenido e icono de Blurb
Abra el módulo de Blurb en la fila y cambie el icono y el contenido del módulo.
Cambiar el color del icono del módulo Blurb
Junto con el color del 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
Avance
Ahora que hemos seguido el tutorial, 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 usar las opciones integradas de Divi solo para crear pestañas flotantes. Este enfoque lo ayudará a compartir contenido sobre funciones o productos de forma interactiva. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!