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 contenido simple al hacer clic.
Pero en este tutorial, le mostraré cómo convertir filas completas de Divi en pestañas flotantes. También te mostraré cómo crear pestañas tanto horizontales como verticales. Esto desbloqueará el poder de Divi para diseñar diseños de fila completos con múltiples módulos para cada área de contenido de pestaña. ¡No se necesita ningún complemento!
Empecemos.
Aquí hay un vistazo rápido a las pestañas flotantes horizontales y verticales que construiremos juntos en este tutorial.
Descargue el diseño de pestañas flotantes de Divi Rows GRATIS
Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Suscríbete a nuestro canal de Youtube
Lo que necesitas para empezar
Para comenzar, necesitará tener la siguiente configuración:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Tres imágenes que se utilizarán para el contenido simulado
Después de eso, tendrás un lienzo en blanco para comenzar a crear algunas pestañas flotantes en Divi.
Creación de pestañas flotantes horizontales con filas divididas
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 fila. Tendremos que volver a la fila más tarde para posicionarla para nuestra funcionalidad de pestaña.
Abra la configuración de la fila y actualice lo siguiente:
Color de fondo degradado a la izquierda: #284f91
Color de fondo degradado a la derecha: #4646c4
Relleno: 50 px arriba, 50 px abajo, 50 px a la izquierda, 50 px a la 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 vamos a agregar algo de 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 del Design Conference Layout Pack .
En la columna de la derecha, agregue un módulo de llamada 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 del texto: izquierda
Fuente del título: Lato
Tamaño del texto del título: 60 px (escritorio), 50 px (teléfono)
Crear la pestaña
Para crear la pestaña real, los usuarios se desplazarán para revelar el contenido de esta fila, necesitamos 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:
Contenido: «Pestaña uno»
Color de fondo: #284f91 (debe coincidir con el color degradado izquierdo de la fila)
Alineación del texto del texto: centro
Color del texto del texto: #ffffff
Ancho: 100 px
Alto: 50 px
Margen: -100 px arriba, -50 px a la izquierda
Relleno: 14 px arriba
Finalmente, agregue el siguiente css personalizado al elemento principal para darle una posición absoluta en la parte superior de la fila.
|
01
02
|
position: absolute !important;top: 0; |
Este css más los márgenes personalizados que agregamos asegurarán que la pestaña se ubique 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 pasar el cursor sobre ella más tarde.
Altura y espaciado de la sección
Ahora, antes de continuar creando las filas y pestañas restantes, demos a nuestras filas un pequeño respiro agregando un margen 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 establecida porque queremos que nuestras filas abarquen toda la altura 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á espacios negativos no deseados en algunas de las pestañas de las filas. Esto debería tener más sentido más adelante.
Por ahora, abra la sección de configuración y actualice lo siguiente:
Altura: 500 px (escritorio), 900 px (tableta), 750 px (teléfono)
Margen: 100 px arriba, 100 px abajo
Relleno: 0 px arriba, 0 px 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 fila se apilan en dispositivos móviles. Por lo tanto, tendrá que haber algunos ajustes a esta altura para sus propias necesidades.
Ahora guarde su configuración y volvamos a agregar esas filas más.
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 ve el contenido diferente en cada pestaña.
Abra la configuración de la segunda fila y cambie los colores del degradado de fondo pasando el cursor sobre el área de vista previa del fondo y haga clic en el pequeño icono de «cambiar».
Luego abra la configuración del módulo de texto utilizado para crear la pestaña en la columna 1 y asígnele 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
Agregar 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)
A continuación, 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 del contenido de la pestaña
Ahora podemos agregar nuestra fila final 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 fondo degradado a la izquierda: #333333
Color de fondo degradado a la derecha: #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 px a la izquierda
Este es el aspecto que debería tener 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 un posicionamiento absoluto. Luego, usaremos la opción de índice Z para traer cada fila al frente al pasar el mouse sobre las pestañas. Pero dado que le estamos dando a nuestras filas una posición absoluta (y la sección principal tiene una altura establecida), podemos agregar 100 % de altura a cada una de las filas para que abarquen la altura total de la sección.
Aquí está 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 el modo de configuración del elemento. 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:
|
01
02
03
04
|
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á al frente. 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, regrese 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 todo. 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 ubicadas encima y fuera de la fila. Es por eso que al pasar el cursor sobre una pestaña, se mostrará la fila en la que se encuentra.
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 necesita hacer es cambiar la posición de los módulos de texto utilizados para crear cada pestaña. También tendremos que ajustar el tamaño de nuestras filas y el espaciado de las secciones para hacer espacio para las pestañas.
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% 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: 980 px
Luego, actualice la Dirección del degradado a 90 grados para los tres anuncios publicitarios, de modo 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 a la izquierda
Margen (teléfono): -100 px arriba, -50 px a la izquierda
La configuración de margen para el teléfono es volver a colocar la pestaña encima de la fila para una visualización de 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): 0 px arriba, -150 px 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 a la izquierda
Margen (teléfono): -100 px arriba, 150 px a la izquierda
Resultado final
Ahora veamos el resultado final.
Y aquí está 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 muy interesantes utilizando las filas de 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, por no necesitar usar un complemento, creo que esta es una gran solución. Y no se olvide, dado que puede usar las filas Divi para su contenido, hay muchas maneras de usar estas pestañas flotantes en su próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!