Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

¿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 a Divi en 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.

Pestaña Divi con efecto de desplazamiento

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 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.

Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

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 el contenido de su 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
pestañas flotantes

Espaciado (Escritorio)

¿Quieres vender tus productos en internet?

Descarga WooCommerce gratis, los mejores plugins de comercio electrónico para vender tus productos físicos y digitales en WordPress y crea fácilmente tu tienda online. Perfecto para principiantes.

Para darle algo de espacio al módulo, modificamos los siguientes parámetros de espaciado:

  • Relleno (superior e inferior): 80px
pestañas flotantes

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

También cambiemos el icono y el contenido de la publicidad.

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 línea y edite el icono y el contenido del 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
Pestaña Divi con efecto de desplazamiento

vista

Ahora que hemos seguido el tutorial, echemos un último vistazo al resultado.

Pestaña Divi con efecto de desplazamiento

¡¡¡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.

...

%d bloggers les gusta esta página: