Un control deslizante de acordeón es una forma divertida y atractiva de mostrar contenido en un espacio restringido. Los controles deslizantes en forma de acordeón suelen estar formados por varios elementos (o paneles) apilados horizontalmente, como los pliegues de una cortina. Y cuando pasas el cursor sobre uno de los paneles, se expande para revelar el contenido mientras que los otros paneles de acordeón se contraen. Aquí es donde se consigue el efecto acordeón de expansión y contracción.
En este tutorial, le mostraré cómo crear un control deslizante de acordeón receptivo en Divi usando solo CSS. Para ello, utilizaremos varios módulos. Divi para servir 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 crear un hermoso control deslizante de acordeón que se ve (y funciona) muy bien tanto en el escritorio como en el móvil.
Echa un vistazo!
vista
Aquí hay una descripción general de lo que construiremos en este tutorial.
Comencemos el tutorial
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active el Tema divi instalado (o el complemento Divi Builder si no está utilizando el Tema divi).
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Descargue sobre 5 diferentes imágenes en la biblioteca para usarlas como imágenes de fondo necesarias para el tutorial.
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Crea un control deslizante con un acordeón sensible en Divi
Creación de la línea
Para comenzar, agregue una fila de una columna a la sección regular.
Luego abra la configuración de la línea y actualice lo siguiente:
- Ancho de canal: 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 según sus necesidades. El acordeón se escalará y funcionará en cualquier ancho de fila. Además, establecer una altura fija es muy importante para que el diseño funcione. Los elementos secundarios (columna y módulos) tendrán una altura del 100%. Por lo tanto, si no establece la altura fija de la fila, los elementos secundarios no tendrán una altura.
Parámetros de la columna
Ahora que la altura de la fila está configurada, abra la configuración de la columna y agregue el siguiente código CSS al elemento principal:
oficina
display:flex;flex-direction: row;align-items:center;height: 100%;
tableta
flex-direction: column;
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 vamos a agregar usen también el valor de altura del 100%.
Crear el panel de acordeón con los módulos Resumen
El control deslizante de acordeón se puede construir utilizando cualquier tipo de módulo. Si quisiéramos, podríamos usar una combinación de diferentes módulos para que sirvan como panel de acordeón. Pero para este diseño, usaremos Blurb Mods.
Comience agregando un módulo de presentación a la línea.
Diseño de módulo abstracto
Abra la configuración del módulo de resumen y actualice lo siguiente:
Mantenga el título ficticio y contenido del cuerpo. Siempre podemos cambiar esto más tarde.
Luego actualice el icono de presentación de la siguiente manera:
- Icono (escritorio): icono que representa una 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 que representa una línea de flecha vertical (ver captura de pantalla)
contexto
Luego, proporcione a la propaganda una imagen de fondo y una superposición de degradado de la siguiente manera:
- Agregue una imagen de fondo que tenga al menos 1000 píxeles de ancho
- Posición de la imagen de fondo: centro izquierda
Luego agregue una superposición de fondo degradado.
Flotar
- Fondo degradado izquierdo (desplazamiento): # 3e215b
- Gradiente de fondo a la derecha Color (desplazamiento): rgba (0,0,0,0)
- Dirección de degradado: 90deg
- Coloque el degradado sobre la imagen de fondo: SÍ
icono
- Color del icono: #ffffff
- Imagen / ubicación de los iconos: izquierda
Luego vaya a la pestaña Diseño y actualice lo siguiente:
Título y cuerpo del texto.
- Fuente del título: Poppins
- Título de fuente: Semi Bold
- Color del título del texto: transparente (escritorio), #ffffff (pasar el mouse)
- Tamaño del título del texto: 23px
- Color del texto del cuerpo: transparente (escritorio), #ffffff (pasar el mouse)
Altura y sombra de caja
Una vez que el texto es elegante, asigne al módulo una altura de 100% y un cuadro sombreado de la siguiente manera:
- Altura: 100%
- Box Shadow: ver captura de pantalla
- Sombra de la caja Posición horizontal: -12px
- Sombra de la caja Posición vertical: 0px
Blurb CSS personalizado
Para que nuestros paneles de acordeón (o módulo de presentación) se expandan y contraigan con el resto de los módulos, necesitamos agregar CSS personalizado 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, luego lo cambiamos a "flex: 5" en el estado de desplazamiento.
En la pestaña Avanzado, agregue el siguiente CSS personalizado, el elemento principal de Blurb:
oficina
flex:1;position: relative !important;transition: flex 800ms !important;
tableta
flex:5;
Luego agregue el siguiente CSS personalizado al contenido de CSS Blurb:
oficina
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tableta
width: 100%;height: 100%;position: relative !important;
Desbordamiento y transición
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
- Duración de la transición: 400ms
- Curva de velocidad de transición: lineal
¡Bien! Fue una personalización seria de un módulo de presentación. Pero la buena noticia es que todo lo que tenemos que hacer es duplicarlos para crear los paneles de acordeón restantes.
Duplica los Blurbs para obtener más paneles de acordeón
Coloca el cursor sobre el módulo de presentación y haz clic en el ícono de duplicar 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 anuncios que duplicó.
Resultado final
Consideraciones 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 mientras se desplazan sin problemas inesperados. Y los íconos de presentación cambian al pasar el mouse y al móvil para mejorar la UX. Espero que este diseño sea útil para su próximo proyecto.
