Cómo convertir filas Divi en pestañas flotantes horizontales y verticales


Las pestañas definitivamente son ú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 el contenido de una página larga. El módulo de pestañas de Divi es fácil de usar y excelente para alternar entre contenido simple al hacer clic.

Pero en este tutorial, le mostraré cómo convertir filas Divi completas en pestañas flotantes. También le mostraré cómo crear pestañas horizontales y verticales. Esto desbloqueará el poder de Divi para diseñar diseños de filas completos con múltiples módulos para cada área de contenido de la pestaña. ¡No se necesita plugin!

Empecemos.

Vistazo

Aquí hay un vistazo rápido a las pestañas de desplazamiento horizontal y vertical que crearemos juntos en este tutorial.

Descargue GRATIS el diseño de pestañas flotantes de Divi Rows

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

(incrustar) https://www.youtube.com/watch?v=NZbXhAyoeg0 (/ incrustar)

Suscríbete a nuestro canal de Youtube

Lo que necesitas para empezar

Para comenzar, necesitará tener la siguiente configuración:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en la interfaz (constructor visual)
  3. Tres imágenes para usar como contenido simulado

Después de eso, tendrá un lienzo en blanco para comenzar a construir algunas pestañas flotantes en Divi.

Creación de pestañas flotantes horizontales usando filas Divi

Para comenzar, cree una nueva sección regular con una fila de dos columnas.

Fondo de fila, relleno y sombra de cuadro

Antes de agregar nuestros módulos, primero personalicemos un poco la configuración de las filas. Tendremos que volver a la fila más tarde para colocarla para nuestra funcionalidad de pestaña.

Abra la configuración de la fila y actualice lo siguiente:

Color de degradado de fondo a la izquierda: # 284f91
Gradiente de fondo Color derecho: # 4646c4

Relleno: 50 px arriba, 50 px abajo, 50 px izquierda, 50 px derecha
Box Shadow: ver captura de pantalla
Color de sombra de caja: rgba (70,70,196,0.66)

Agregar contenido a la fila

Ahora vamos a agregar contenido simulado a nuestra fila. Tenga en cuenta que puede agregar cualquier combinación de columnas y módulos para su área de contenido.

En la columna 1, agregue una imagen con un módulo de imagen. Estoy usando uno de Paquete de diseño de conferencias de diseño.

En la columna de la derecha, agregue un módulo de llamado a la acción y actualice 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)

Creando la pestaña

Para crear la pestaña real, los usuarios pasarán el cursor para revelar el contenido de esta fila, necesitamos crear un módulo de texto y colocarlo en la parte superior derecha con un CSS personalizado.

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

Contenido: "Tab One"

Color de fondo: # 284f91 (debe coincidir con el color de degradado izquierdo de la fila)
Alineación del texto del texto: centro
Color del texto del texto: #ffffff
Ancho: 100px
Alto: 50px
Margen: -100px arriba, -50px a la izquierda
Acolchado: 14px superior

Finalmente, agregue el siguiente CSS personalizado al elemento principal para darle una posición absoluta en la parte superior de la fila.

position: absolute !important;
top: 0;

Este CSS más los márgenes personalizados que agregamos asegurarán que la pestaña esté ubicada exactamente en la parte superior izquierda de la fila. Es importante que las pestañas se sitúen sobre la fila para que el usuario pueda desplazarse sobre ella más tarde.

Altura y espaciado de la sección

Ahora, antes de continuar creando las filas y pestañas restantes, démosle a nuestras filas un poco de espacio para respirar agregando algunos márgenes superior e inferior a la sección. Para este diseño, es importante que usemos márgenes para espaciar nuestra sección porque también le daremos a nuestra sección una altura establecida. Necesitamos darle a nuestra sección una altura determinada porque queremos que nuestras filas abarquen la altura completa de nuestra sección. Esto significa que cada una de nuestras filas (el contenido de la pestaña) tendrá la misma altura que nuestra sección. Por lo tanto, es mejor que cada una de las filas tenga una cantidad similar de contenido o habrá un espacio negativo no deseado en algunas de las pestañas de la fila. Esto debería tener más sentido más adelante.

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

Altura: 500 px (escritorio), 900 px (tableta), 750 px (teléfono)
Margen: 100px superior, 100px inferior
Relleno: 0px arriba, 0px abajo

Tenga en cuenta que la altura de la sección deberá ajustarse para tener en cuenta el espacio de contenido más largo cuando las columnas de la fila se apilan en el dispositivo móvil. Por lo tanto, tendrá que ajustar esta altura para sus propias necesidades.

Ahora guarde su configuración y volvamos a agregar esas más filas.

Creación de la segunda fila del contenido de la pestaña

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 le ayudará a tener una idea de cómo se ven los diferentes contenidos en cada pestaña.

Abra la configuración de la segunda fila y cambie los colores del degradado de fondo colocando el cursor sobre el área de vista previa del fondo y haga clic en el pequeño icono de "interruptor".

Luego abra la configuración del módulo de texto utilizado para crear la pestaña en la columna 1 y déle un color que coincida con el nuevo degradado superior.

Color de fondo: # 4646c4

Luego, debemos mover la pestaña hacia la derecha para que cuando esta fila se superponga a la fila de arriba, pueda ver la pestaña directamente a la derecha de la pestaña en la primera fila.

Margen: 50px izquierda

Adición del efecto de desplazamiento del filtro de opacidad para la segunda fila

Para la fila, podemos agregar un efecto de desplazamiento de filtro de opacidad para que haya una agradable transición de desplazamiento al pasar el cursor sobre la pestaña y revelar el contenido de la fila.

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

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

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

Duración de la transición: 500 ms
Curva de velocidad de transición: lineal

Creación de la tercera fila de contenido de la pestaña

Ahora podemos agregar nuestra última fila de contenido de pestaña. Para hacer esto, duplique la segunda fila 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 Fila con un nuevo degradado de fondo.

Color de degradado de fondo a la izquierda: # 333333
Gradiente de fondo Color derecho: # 4646c4

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

Color de fondo: # 333333
Margen: 150 píxeles a la izquierda

Así es como debería verse su página antes de colocar nuestras filas para que se superpongan entre sí.

Superposición de filas con posicionamiento absoluto

Para superponer nuestras filas, necesitamos usar posicionamiento absoluto. Luego usaremos la opción de índice Z para traer cada fila al frente al pasar el cursor sobre las pestañas. Pero como estamos dando a nuestras filas una posición absoluta (y el padre / sección tiene una altura establecida), podemos agregar un 100% de altura a cada una de las filas para que abarquen la altura completa de la sección.

He aquí cómo hacerlo.

Primero, implemente el modo de estructura alámbrica. Luego use la selección múltiple para seleccionar las tres filas y abra la configuración de una de ellas para implementar la configuración del elemento modal. Luego actualice la altura al 100%.

Altura: 100%

Esto establecerá la altura de las tres filas al 100%.

Luego agregue el siguiente CSS personalizado al elemento principal:

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

Ahora implemente el modo de vista de escritorio para ver cómo las filas se superponen bien para crear nuestras pestañas.

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

En este momento, es posible que haya notado que la tercera fila / pestaña está a la vanguardia. Por lo tanto, debemos reordenar las filas usando el índice Z para que la primera pestaña se muestre primero hasta que pase el cursor sobre otra pestaña.

Para hacer esto, vuelva al modo de vista de estructura alámbrica y abra la configuración de la primera fila que creó (con la pestaña uno). Luego actualice el índice z de la siguiente manera:

Índice Z: 10

A continuación, utilice la selección múltiple para seleccionar la segunda y la tercera fila. Luego abra el modal de configuración del elemento y agregue el siguiente índice z al pasar el mouse por ambas filas.

Índice Z: 11 (flotar)

Eso es. Veamos el resultado final.

Resultado final

La razón por la que esto funciona es porque técnicamente cada pestaña (módulo de texto) es parte de cada fila, aunque estén colocadas arriba y fuera de la fila. Es por eso que al pasar el mouse sobre una pestaña se mostrará la fila en la que está contenida.

Y así es como se ve en el móvil.

Creación de pestañas flotantes verticales

Si desea agregar pestañas verticales a las filas, todo lo que realmente necesita hacer es reposicionar los módulos de texto utilizados para crear cada pestaña. También necesitaremos modificar el tamaño de nuestras filas y el espaciado de las secciones para dejar espacio para las pestañas.

Esto es lo que debes 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:

Acolchado: 10% a la izquierda, 10% a la derecha

Luego use la selección múltiple para seleccionar las tres filas y actualice la configuración del elemento con lo siguiente:

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

Luego, actualice la Dirección del degradado a 90 grados para los tres desenfoques para que cuando coloquemos las pestañas a la izquierda, el color del degradado izquierdo se mezcle con el color de fondo de la pestaña.

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

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

Margen (escritorio): -50 px arriba, -150 px izquierda
Margen (teléfono): -100px arriba, -50px a la izquierda

La configuración de margen para el teléfono es volver a colocar la pestaña sobre la fila para mostrar una pestaña horizontal.

A continuación, abra la configuración de la pestaña del módulo de texto en la fila de la sección y actualice lo siguiente:

Margen (escritorio): 0px arriba, -150px a la izquierda
Margen (teléfono): -100 px arriba, 50 px a la izquierda

Y para la pestaña final en la tercera fila, actualice lo siguiente:

Margen (escritorio): 50 px arriba, -150 px izquierda
Margen (teléfono): -100 px arriba, 150 px a la izquierda

Resultado final

Ahora veamos el resultado final.

Y aquí hay una tableta y un teléfono.

Pensamientos finales

Con un poco de pensamiento creativo y el poder de Divi, puede crear algunas pestañas flotantes personalizadas bastante geniales usando filas Divi. Existen algunas limitaciones para 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, creo que esta es una gran solución. Y no olvide que, dado que puede usar filas Divi para su contenido, hay muchas formas en las que puede usar estas pestañas flotantes en su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!