¿Le gustaría crear un control deslizante de acordeón? Divi ¿sensible?
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 se componen de 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 obtenemos el efecto tipo acordeón de expansión y contracción.
En este tutorial, le mostraremos 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.
vista
Aquí hay una descripción general rápida de lo que lograremos en este tutorial.
¡¡¡Descarga DIVI ahora!!!
Creando una nueva página con Divi Builder
Para comenzar, deberá hacer lo siguiente:
- Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
- Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
- A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Creación del control deslizante de acordeón receptivo en Divi
Creación de la línea
Para comenzar, agregue una fila de una columna a la sección normal.
Luego abra la configuración de línea y actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- 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 para satisfacer sus necesidades. El acordeón encajará y funcionará en cualquier ancho de línea.
Parámetros de la columna
Ahora que tenemos una altura definida para la fila, abra la configuración de la columna y agregue el siguiente CSS al elemento principal:
Ordenador de sobremesa
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
tableta
display:flex;
flex-direction: column;
align-items:center;
height: 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 actuar como un panel de acordeón. Pero para este diseño, vamos a usar módulos de Blurb.
Comience agregando un módulo de Blurb a la línea.
Diseño de Mod Blurb
Abra la configuración del módulo de presentación y actualice lo siguiente:
Mantenga el título ficticio y contenido del cuerpo. Siempre podemos cambiar esto más tarde.
A continuación, actualice el icono de presentación de la siguiente manera:
- Icono (Escritorio): Icono de línea de flecha horizontal (ver captura de pantalla)
- Icono (Hover): (ver captura de pantalla)
- Icono (tableta y teléfono): (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.
Flotar
- Degradado de fondo a la izquierda (desplazamiento): #3e215b
- Gradiente de fondo derecho (desplazamiento): rgba (0,0,0,0)
- Dirección del gradiente: 90 grados
- Gradiente cuadrado sobre la imagen de fondo: SÍ
icono
- Color del icono: #ffffff
- Colocación de imagen/icono: Derecha
A continuación, cambie a la pestaña Diseño y actualice lo siguiente:
Título y cuerpo del texto.
- Fuente del título: Poppins
- Peso de fuente: semi-negrita
- Color del texto del título: transparente (Escritorio), #ffffff (Hover)
- Tamaño del texto del título: 22px
- Color del cuerpo del texto: transparente (Escritorio), #ffffff (Hover)
Altura y sombra de la caja
Una vez que se personaliza el texto, dale al módulo una altura del 100 % y una sombra de cuadro de la siguiente manera:
- Altura: 100%
- Sombra de caja: Ver captura de pantalla
- Posición horizontal: -12px
- Posición Vertical: 0px
CSS personalizado
Para que nuestros paneles de acordeón (o módulo Blurb) crezcan y se contraigan con el resto de los módulos, debemos agregar CSS personalizado 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 flotante.
En la pestaña Avanzado, agregue el siguiente CSS personalizado al elemento principal de Blurb:
oficina
flex:1;
position: relative !important;
transition: flex 800ms !important;
En vuelo estacionario
flex:5;
position: relative !important;
transition: flex 800ms !important;
Luego agregue el siguiente CSS personalizado al CSS de contenido de Blurb:
oficina
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: 400ms
- Curva de velocidad de transición: lineal
¡Muy bien! Fue una personalización seria de un módulo de Blurb. Pero la buena noticia es que todo lo que tenemos que hacer es duplicarlos para crear los paneles de acordeón restantes.
Diseños duplicados para más paneles de acordeón
Pase el cursor sobre el módulo de presentación y haga clic en el icono duplicado cuatro veces para crear un total de cinco paneles (o módulos) de acordeón.
A continuación, actualice las imágenes de fondo para cada uno de los nuevos anuncios publicitarios que duplicó.
Resultado final
Ahora que hemos seguido todos los pasos, veamos el resultado final.
¡¡¡Descarga DIVI ahora!!!
Conclusión
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 contraen sin problemas al pasar el mouse sin fallas inesperadas.
Y los iconos de presentación cambian al pasar el mouse por encima y en el móvil para mejorar la experiencia de usuario. Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
