Cómo crear un control deslizante de acordeón sensible 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 mouse sobre uno de los paneles, se expande para revelar contenido a medida que se contraen los otros paneles de acordeón. 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, utilizaremos múltiples módulos Divi para servir como paneles de acordeón. Se podría usar cualquier módulo, pero para este ejemplo, vamos a usar módulos blurb de una manera muy creativa para construir un hermoso control deslizante de acordeón que se vea (y funcione) 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

control deslizante de acordeón divi responsive

Tableta y teléfono

control deslizante de acordeón divi responsive

Descargue el diseño del control deslizante de acordeón Divi Responsive 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "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?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme 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 (visual builder).
  3. Cargue alrededor de 5 imágenes simuladas diferentes en la biblioteca de medios para usarlas para 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.

Crear un control deslizante de acordeón sensible en Divi

Creando la fila

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

control deslizante de acordeón divi responsive

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

  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 800px
  • Altura: 400 px (escritorio); 700 px (tableta y teléfono)

Los valores de ancho y ancho máximo se pueden cambiar a lo que necesite. El acordeón escalará y funcionará dentro de cualquier ancho de fila. Además, es muy importante establecer una altura fija para que el diseño funcione. 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 una altura en absoluto.

Configuraciones 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%;

control deslizante de acordeón divi responsive

Tableta

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

La propiedad flex 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 usen también el valor de la altura del 100%.

Crear el 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 servir como nuestro panel de acordeón. Pero para este diseño, vamos a utilizar módulos blurb.

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

control deslizante de acordeón divi responsive

Diseñando el Módulo Blurb

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

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

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

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

control deslizante de acordeón divi responsive

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

control deslizante de acordeón divi responsive

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

control deslizante de acordeón divi responsive

Antecedentes

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

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

control deslizante de acordeón divi responsive

Luego, agregue una superposición de fondo degradado al pasar el mouse sobre él.

Flotar

  • Gradiente de fondo Color izquierdo (desplazamiento): # 3e215b
  • Gradiente de fondo Color derecho (desplazamiento): rgba (0,0,0,0)
  • Dirección de degradado: 90 grados
  • Coloque el gradiente sobre la imagen de fondo: SÍ

control deslizante de acordeón divi responsive

Icono

  • Color del icono: #ffffff
  • Colocación de imagen / icono: izquierda

control deslizante de acordeón divi responsive

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 Bold
  • Color del texto del título: transparente (escritorio), #ffffff (pasar el mouse)
  • Tamaño del texto del título: 22 px
  • Color del texto del cuerpo: transparente (escritorio), #ffffff (pasar el mouse)

control deslizante de acordeón divi responsive

Altura y sombra de caja

Después de diseñar el texto, dele 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 de la caja: -12px
  • Posición vertical de la sombra de la caja: 0px

control deslizante de acordeón divi responsive

Blurb CSS personalizado

Para que nuestros paneles de acordeón (o módulo blurb) 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;

control deslizante de acordeón divi responsive

A continuación, agregue el siguiente CSS personalizado al contenido de Blurb CSS:

Escritorio

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

control deslizante de acordeón divi responsive

Tableta

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

control deslizante de acordeón divi responsive

Desbordamiento y Transición

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

control deslizante de acordeón divi responsive

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

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

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

Luego actualice las imágenes de fondo para cada una de las nuevas imágenes borrosas que duplicó.

control deslizante de acordeón divi responsive

Resultado final

Escritorio

control deslizante de acordeón divi responsive

Tableta y teléfono

control deslizante de acordeón divi responsive

Pensamientos finales

Este deslizador 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 fallas inesperadas. Y los íconos de publicidad cambian al pasar el mouse y en el móvil para impulsar UX. Con suerte, este diseño será útil para su próximo proyecto.

Espero tener noticias suyas en los comentarios.

¡Salud!