Cómo crear un control deslizante de acordeón receptivo en Divi

Un control deslizante de acordeón es una forma divertida y atractiva de mostrar contenido en un espacio pequeño. Los controles deslizantes de acordeón generalmente consisten en múltiples elementos (o paneles) apilados horizontalmente como los pliegues de una cortina. Y cuando pasa el cursor sobre uno de los paneles, se expande para revelar contenido a medida que los otros paneles de acordeón se contraen. Aquí es donde obtenemos el efecto tipo acordeón de expandirse y contraerse.

En este tutorial, le mostraré cómo crear un control deslizante de acordeón receptivo en Divi usando nada más que CSS. Para hacer esto, usaremos múltiples módulos Divi para que sirvan como paneles de acordeón. Se podría usar cualquier módulo, pero para este ejemplo, vamos a usar módulos de propaganda de una manera muy creativa para construir un hermoso control deslizante de acordeón que se ve (y funciona) muy bien tanto en computadoras de escritorio como en dispositivos móviles.

¡Echale un vistazo!

Vistazo

Aquí hay un vistazo rápido a lo que construiremos en este tutorial.

Escritorio

Tableta y teléfono

Descargue el diseño del control deslizante de acordeón receptivo de Divi GRATIS

Para poner sus manos en el control deslizante de acordeón diseñado en 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.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

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?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active el tema Divi instalado (o el complemento Divi Builder si no usa el tema Divi).
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Cargue alrededor de 5 imágenes simuladas diferentes a la biblioteca de medios para usarlas en las imágenes de fondo necesarias en el tutorial.

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

Creación de un control deslizante de acordeón receptivo en Divi

Creando la Fila

Para comenzar, agregue una fila de una columna a la sección normal.

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

• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 800px
• Alto: 400px (escritorio); 700px (tableta y teléfono)

Los valores de ancho y ancho máximo se pueden cambiar a lo que necesite. El acordeón se escalará y funcionará dentro de cualquier ancho de fila. Además, es muy importante establecer una altura fija para que funcione el diseño. Los elementos secundarios (columna y módulos) tendrán una altura del 100%, por lo que si no establece la altura fija de la fila, los elementos secundarios no tendrán altura en absoluto.

Configuración de columna

Ahora que tenemos una altura establecida para la fila, abra la configuración de la columna y agregue el siguiente CSS al elemento principal:
Escritorio

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

Tableta

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

La propiedad flexible alineará los paneles de acordeón horizontalmente en el escritorio y verticalmente en la tableta y el teléfono. La altura del 100% permitirá que los módulos que agreguemos utilicen también el valor de altura del 100%.

Creación del panel de acordeón con módulos Blurb

El control deslizante de acordeón se puede construir utilizando cualquier tipo de módulo (s). Si quisiéramos, podríamos usar una combinación de diferentes módulos para que sirvan como nuestro panel de acordeón. Pero para este diseño, usaremos módulos de propaganda.

Comience agregando un módulo de propaganda a la fila.

Diseño del módulo Blurb

Abra la configuración del módulo de propaganda y actualice lo siguiente:

Mantenga el título y el cuerpo simulados. Siempre podemos cambiar eso más tarde.

Luego actualice el ícono de propaganda de la siguiente manera:

• Icono (escritorio): icono de línea de flecha horizontal (ver captura de pantalla)

• Icono (desplazamiento): icono de verificación (ver captura de pantalla)

• Icono (tableta y teléfono): icono de línea de flecha vertical (ver captura de pantalla)

Fondo

Luego, dale a la propaganda una imagen de fondo y una superposición de degradado al pasar el mouse de la siguiente manera:

• Agrega una imagen de fondo de al menos 1000 px de ancho
• Posición de la imagen de fondo: centro izquierda

Luego agregue una superposición de fondo degradado al pasar el mouse.

Flotar

• Color de degradado de fondo a la izquierda (desplazamiento): # 3e215b
• Color de degradado de fondo a la derecha (desplazamiento): rgba (0,0,0,0)
• Dirección del gradiente: 90 grados
• Colocar degradado sobre la imagen de fondo: SÍ

Icono

• Color del icono: #ffffff
• Ubicación de la imagen / icono: Izquierda

A continuación, vaya a la pestaña de diseño y actualice lo siguiente:

Título y texto del cuerpo

• Fuente del título: Poppins
• Peso de la fuente del título: Semi negrita
• Color del texto del título: transparente (escritorio), #ffffff (desplazarse)
• Tamaño del texto del título: 22px
• Color del texto del cuerpo: transparente (escritorio), #ffffff (desplazarse)

Altura y sombra de caja

Después de aplicar estilo al texto, asigne al módulo una altura del 100% y una sombra de cuadro de la siguiente manera:

• Altura: 100%
• Box Shadow: ver captura de pantalla
• Posición horizontal de la sombra del cuadro: -12px
• Posición vertical de la sombra del cuadro: 0px

CSS personalizado de Blurb

Para que nuestros paneles de acordeón (o módulo de propaganda) se expandan y contraigan con el resto de los módulos, necesitamos agregar algunos CSS personalizados para cambiar el tamaño del módulo con flex-grow. Como vamos a tener un total de 5 módulos que componen el acordeón, agregamos "flex: 1" para el estado predeterminado y luego lo cambiamos a "flex: 5" en el estado de desplazamiento.

En la pestaña avanzada, agregue el siguiente CSS personalizado, el elemento principal de Blurb:

Escritorio

flex:1;
position: relative !important;
transition: flex 800ms !important;

Tableta

flex:5;

Luego, agregue el siguiente CSS personalizado al CSS de contenido de Blurb:

Escritorio

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

Tableta

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;

Desbordamiento y transición

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto
• Duración de la transición: 400 ms
• Curva de velocidad de transición: lineal

¡Bien! Esa fue una personalización seria para un módulo de propaganda. Pero la buena noticia es que todo lo que tenemos que hacer es duplicarlos para crear los paneles de acordeón restantes.

Duplicar los desenfoques para obtener más paneles de acordeón

Desplácese sobre el módulo de propaganda y haga clic en el icono duplicado cuatro veces para crear un total de cinco paneles (o módulos) en acordeón.

Luego, actualice las imágenes de fondo para cada uno de los nuevos borrones que duplicó.

Resultado final

Escritorio

Tableta y teléfono

Pensamientos finales

Este control deslizante de acordeón sensible realmente tiene algunos elementos únicos que lo hacen divertido de usar. Los paneles de acordeón se expanden y contraen sin problemas al pasar el mouse sin ningún problema técnico inesperado. Y los íconos de propaganda cambian al pasar el mouse y en el móvil para impulsar la UX. Con suerte, este diseño será útil para su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!