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 el 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 puede usar cualquier módulo, pero para este ejemplo, vamos a usar módulos publicitarios de una manera muy creativa para construir un hermoso control deslizante de acordeón que se ve (y funciona) muy bien tanto en el escritorio como en el móvil.

¡Échale un vistazo!

Vistazo

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

Escritorio

Tableta y teléfono

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

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 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!

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 a 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 la parte delantera (constructor visual).
  3. Cargue alrededor de 5 imágenes simuladas diferentes en la biblioteca de medios para usarlas como imágenes de fondo necesarias en el tutorial.

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

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

Crear 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 del canalón: 1
  • Ancho: 100%
  • Ancho máximo: 800px
  • Altura: 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 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 ninguna altura.

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

01
02
03
04
display:flex;
flex-direction: row;
align-items:center;
height: 100%;

Tableta

01
02
03
04
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 agregaremos también usen el valor de altura del 100 %.

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

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

Diseño del módulo de 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 icono de publicidad de la siguiente manera:

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

  • Icono (hover): 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, proporcione a la publicidad 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

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

Flotar

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

Icono

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

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

Título y cuerpo del texto

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

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%
  • Sombra de cuadro: 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 publicidad) 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. Dado que 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 al elemento principal de Blurb:

Escritorio

01
02
03
flex:1;
position: relative !important;
transition: flex 800ms !important;

Tableta

01
flex:5;

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

Escritorio

01
02
03
04
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

Tableta

01
02
03
04
05
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

¡Está 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.

Duplicación de los Blurbs para más paneles de acordeón

Pase el cursor 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 uno de los nuevos anuncios publicitarios que duplicó.

Resultado final

Escritorio

Tableta y teléfono

Pensamientos finales

Este control deslizante de acordeón receptivo realmente tiene algunos elementos únicos que lo hacen divertido de usar. Los paneles de acordeón se expanden y se contraen sin problemas al pasar el mouse sin fallas inesperadas. Y los íconos publicitarios cambian al pasar el mouse por encima y en el móvil para mejorar la experiencia de usuario. Con suerte, este diseño será útil para su próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!