Cómo mostrar funciones en pestañas flotantes con Divi

¿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!

Avance

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!