¿Quieres crear pestañas con efecto de desplazamiento de filas con Divi ?

Las pestañas son definitivamente útiles para hacer que la información importante esté disponible en un área concisa de su Sitio web. Esto reduce la necesidad de que el usuario se desplace por la contenido de una página larga. El módulo de pestañas de Divi es fácil de usar e ideal para navegar por contenido sencillo en un clic.

Pero en este tutorial te mostraremos cómo convertir filas. Divi tabulados y aparecen al pasar el mouse. 

También le mostraremos cómo crear pestañas horizontales y verticales. Esto desbloqueará el poder de Divi para crear diseños completos con múltiples módulos para cada área de contenido pestaña. 

¡No se necesitan complementos!

Vamos a empezar.

vista

Aquí hay una descripción general de las pestañas que crearemos juntos en este tutorial.

¡¡¡Descarga DIVI ahora!!!

Crear una nueva página con Divi Builder

Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.

Divi líneas convertidas en pestañas

Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder

A continuación, haga clic Empezar a construir (Construir desde cero)

Divi líneas convertidas en pestañas

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Creación de pestañas flotantes horizontales usando "Filas divididas"

En la sección predeterminada presente, agregue una fila de dos columnas.

Fondo de línea, relleno de cuadro y sombra

Antes de agregar nuestros módulos, primero personalicemos un poco la configuración de fila. Abra Configuración de línea y actualice lo siguiente:

  • Color de degradado izquierdo: #284f91
  • Color de degradado derecho: #4646c4
  • Relleno: 50 px (superior e inferior), 50 px (izquierda y derecha)
  • Sombra de cuadro: ver captura de pantalla
  • Color de sombra de cuadro: rgba (70,70,196,0.66)

Agregar contenido a la fila

Ahora agregaremos contenido de marcador de posición a nuestra fila. En la columna 1, agregue una imagen de su elección con un módulo Imagen. Aquí usamos una imagen del paquete de diseño. « Paquete de diseño de conferencias de diseño« .

En la columna de la derecha, agregue un módulo Llamada a la Acción y actualiza lo siguiente:

  • URL del enlace del botón: # (solo para mostrar el botón por ahora)
  • Usar color de fondo: NO
  • Alineación de texto: izquierda
  • Fuente del título: Lato
  • Tamaño del texto del título: 60 px (escritorio), 50 px (teléfono)

Creación de la ficha

Para crear la pestaña real sobre la que los usuarios se desplazarán para revelar el contenido de esa fila, debemos crear un módulo de texto y colocarlo en la parte superior derecha con algún CSS personalizado.

Continúe y agregue un nuevo módulo de texto debajo de la imagen en la columna 1 y actualice lo siguiente:

  • Cuerpo: "Pestaña 1"
  • Fondo: #284f91 (esto debería coincidir con el color degradado izquierdo de la línea)
  • Alineación de texto: centrado
  • Color del texto: #ffffff
  • Ancho: 100px
  • Altura: 50px
  • Margen: -100px (superior), -50px (izquierda)
  • Relleno: 14px (superior)

Finalmente, agregue el siguiente css personalizado al elemento principal para darle una posición absoluta en la parte superior de la línea.

position: absolute !important;
top: 0;

Altura y espaciado de la sección

Por ahora, abra la sección de configuración y actualice lo siguiente:

  • Altura mínima: 500 px (escritorio), 900 px (tableta), 750 px (teléfono)
  • Margen: 100px (superior e inferior)
  • Relleno: 0px (superior e inferior)

Creación de la segunda línea.

Para crear la segunda fila, duplique la fila que creó anteriormente. Mueva el módulo de texto a la columna 1 y la imagen a la columna 2. Luego actualice la imagen con una nueva. Esto lo ayudará a tener una idea de cómo se ve el contenido diferente en cada pestaña.

A continuación, abra el texto de configuración del módulo utilizado para crear la pestaña en la columna 1 y mueva la pestaña hacia la derecha para que donde esta fila se superponga a la fila de arriba pueda ver la pestaña directamente a la derecha de la pestaña de la primera línea.

  • Margen: 50px (izquierda)

Efecto de desplazamiento agregado

Abra la configuración de la fila y agregue el siguiente filtro:

  • Opacidad: 70 % (predeterminado), 100 % (desplazamiento)

A continuación, agregue una duración de transición y una curva de velocidad para el efecto de desplazamiento del filtro de opacidad.

  • Tiempo de transición: 500 ms
  • Curva de velocidad de transición: lineal

Creación de la tercera pestaña

Ahora podemos agregar nuestra última pestaña. Para hacer esto, duplique la segunda línea que acaba de crear. Luego mueva el módulo de texto a la columna 1 y la imagen a la columna 2. Y actualice el módulo de imagen con una nueva imagen.

Actualice la configuración de línea con un nuevo degradado de fondo.

  • Color degradado de fondo izquierdo: #333333
  • Color degradado de fondo derecho: #4646c4

A continuación, abra la configuración del módulo de texto utilizada para crear la pestaña en la columna 1 y actualice el color y el margen.

  • Fondo: #333333
  • Margen: 150px (izquierda)

Este es el aspecto que debería tener su página antes de colocar nuestras líneas para que se superpongan.

Líneas superpuestas con posicionamiento absoluto

Para superponer nuestras líneas, necesitamos usar un posicionamiento absoluto. Primero, actualice la altura de las tres filas al 100%.

  • Altura: 100%

Luego agregue el siguiente CSS personalizado al elemento principal de las tres líneas:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

Así es como se ven nuestras pestañas en este momento.

Cambiar el orden de las filas al pasar el mouse con el índice Z

En este momento habrás notado que la tercera fila/pestaña está en primer plano. Por lo tanto, debemos reorganizar las filas usando el Índice Z para que la primera pestaña se muestre primero hasta que pase el cursor sobre otra pestaña.

Lea también: Cómo crear superposiciones de imágenes personalizadas en Divi

Para hacer esto, abra la configuración de la primera fila y actualice el índice z de la siguiente manera:

Índice Z: 10

Luego coloque el índice Z de las otras dos líneas en el aire.

Índice Z: 11 (flotar)

Está hecho ! Veamos el resultado final.

Resultado final

¡¡¡Descarga DIVI ahora!!!

Crear pestañas verticales

Si desea agregar pestañas verticales a las filas, esto es lo que debe hacer.

Continúe y duplique la sección que contiene las pestañas flotantes que acabamos de crear para que tenga un nuevo diseño con el que trabajar.

Luego abra la configuración de la sección y actualice lo siguiente:

  • Relleno: 10% (Izquierda y Derecha)

Actualice la siguiente configuración para las tres líneas de la sección duplicada con lo siguiente:

  • Ancho: 70 % (escritorio), 70 % (tableta), 80 % (teléfono)
  • Ancho máximo: 980px

A continuación, actualice la dirección del degradado a 90 grados para las tres líneas.

  • Dirección del gradiente: 90 grados

Ahora es el momento de colocar las pestañas de nuestro módulo de texto a la izquierda de nuestras filas para obtener las pestañas verticales deseadas.

Ver también: Cómo crear un menú de rueda giratoria al pasar el mouse en Divi

Abra la configuración de la pestaña del módulo de texto en la primera línea y actualice lo siguiente:

  • Margen (Escritorio): -50px (Superior), -150px (Izquierda)

A continuación, abra la configuración de la pestaña del módulo Texto de segunda línea de la sección y actualice lo siguiente:

  • Margen (Escritorio): 0px (Superior), -150px (Izquierda)

Y para la última pestaña de la tercera fila, actualice lo siguiente:

  • Margen (escritorio): 50 px arriba, -150 px a la izquierda
Divi

Resultado final

Ahora veamos el resultado final.

¡¡¡Descarga DIVI ahora!!!

Conclusión

Con un poco de creatividad y el poder de Divi, puedes crear algunas pestañas personalizadas geniales usando líneas Divi. Hay algunas limitaciones a lo que puede mostrar. 

Por ejemplo, con esta configuración, todas las filas deben tener la misma altura que la sección. Pero, para no necesitar usar un complemento, esta es una gran solución. 

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.

...