Cómo crear una diapositiva de acordeón otorgada en div en

Una diapositiva de acordeón es una forma divertida y cautivadora de mostrar contenido en un espacio pequeño. Los controles deslizantes para el acordeón generalmente están formados por varios elementos (o paneles) apilados horizontalmente como pliegues de una cortina. Y cuando pasa por encima de uno de los paneles, se extiende para revelar el contenido a medida que los otros paneles de acordeón se contraen. Desde aquí obtenemos el efecto de la expansión y el acordeón de contratación. En este tutorial, le mostraré cómo crear una diapositiva receptiva de acordeón en la división usando algo más que CSS. Para hacer esto, utilizaremos varios módulos Divi para servir como paneles de acordeón. Se podría usar cualquier módulo, pero para este ejemplo, utilizaremos módulos de blurbs de una manera muy creativa para construir una hermosa diapositiva de acordeón que se vea excelente tanto en escritorio como en dispositivos móviles.
¡Échale un vistazo! Tire del ojo aquí hay un vistazo rápido a lo que construiremos en este tutorial. Escritorio

Tableta y teléfono

Descargue el Spripsive Accorion Sprior Grisior para poner sus manos en el control deslizante de acordeón diseñado en este tutorial, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en el constructor. Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de la Divica Instalado (o el creador de Divi Plugin si no usa el tema Div).
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Cargue aproximadamente 5 imágenes simuladas diferentes en la biblioteca de medios para usar para las imágenes de fondo necesarias en el tutorial.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Creando una diapositiva de acordeón otorgada en la creación de la fila para comenzar, agregue una fila con una columna a la sección habitual.
Luego abra la configuración de la fila y actualice lo siguiente:

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 800 PX
Altura: 400 PX (escritorio); 700 PX (tableta y teléfono)
Los valores del ancho y el ancho máximos se pueden cambiar en lo que necesite. El acordeón escala y trabajará en cualquier ancho común. También es muy importante establecer una altura fija para que funcione el diseño. Los elementos de los niños (columna y módulos) tendrán una altura del 100%, por lo que si no establece la altura fija de la fila, los elementos infantiles no tendrán una altura. Configuración de columna ahora que tenemos una altura establecida para una fila, abierta la configuración de la columna y agregue el siguiente CSS al elemento principal: Display de escritorio: Flex;
Dirección flexible: fila;
Alinine-Ritams: Centro;
Altura: 100%;
Tableta de visualización: Flex;
Dirección flexible: columna;

Alinine-Ritams: Centro;
Altura: 100%;
La propiedad flexible alineará los paneles de acordeón horizontales en el escritorio y vertical en la tableta y el teléfono. La altura del 100% permitirá los módulos que agregaremos para usar el valor del 100% de altura. Creación del panel de acordeón con módulos de propaganda El portaobjetos 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 servir como nuestro panel de acordeón. Pero para este diseño, usaremos módulos de propaganda.
Comience agregando un módulo de propaganda en una fila.
Diseño del módulo de propaganda Abra la configuración del módulo de la propaganda y actualice lo siguiente: Mantenga el título simulado y el contenido del cuerpo. Siempre podemos cambiar esto más tarde. Luego actualice el icono de la propaganda de la siguiente manera:

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

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

Antecedentes luego dale a la propaganda una imagen de fondo y una superposición de gradiente en el paso de la siguiente manera: Agregue una imagen de fondo con un ancho de al menos 1000 PX

Posición de la imagen de fondo: centro izquierdo

Luego agregue una superposición de fondo de gradiente al cursor. altísimo
Color izquierdo del gradiente de fondo (flotante): # 3E215B
Color derecho del gradiente de fondo (flotante): RGBA (0.0,0,0)

Dirección de gradiente: 90 grados
Coloque el gradiente sobre la imagen de fondo: sí
ICONO
Icono de color: #ffffff
Colocación de la imagen / icono: izquierda

Luego pase a la pestaña de diseño y actualice lo siguiente: Título y texto del cuerpo
Título de la fuente: Poppins
Fuente de peso del título: semi audaz

Color de texto del título: Transparent (Desktop), #FFFFFF (Hover)
Título Tamaño del texto: 22 PX
Color del texto del cuerpo: transparente (escritorio), #ffffff (flotante)
La altura y la sombra de la caja después de la estilización del texto, le dé al módulo una altura del 100% y una caja de la caja de la siguiente manera:
Altura: 100%
Box Shadow: Ver captura de pantalla

Posición horizontal de la sombra de la caja: -12px
Box Shadow Posición vertical: 0px
CSS de propaganda personalizada Para hacer que nuestros paneles de acordeón (o módulo de propaganda) se expandan y se contraen con el resto de los módulos, debemos agregar algunos CSS personalizados para cambiar el tamaño del módulo Flex-Grow. Como tendremos un total de 5 módulos que componen el acordeón, agregue “Flex: 1” para el estado predeterminado y luego cambíe a “Flex: 5” en el estado de desplazamiento.
En la pestaña Avanzada, agregue el siguiente elemento principal personalizado de la propaganda CSS: Desktop Flex: 1;
Posición: relativo! Importante;

Transición: Flex 800 ms! Importante;
Tableta flexible: 5;
Luego agregue el siguiente CSS personalizado al contenido de la propaganda CSS: Desktop Posición: Absoluto! Importante; Ancho: 280px;
Relleno: 20px;
Transición: color 400 ms;

Posición comprimida: relativa! Importante;
Ancho: 100%;
Altura: 100%;
Relleno: 20px;

Transición: color 400 ms;
Desbordamiento y transición
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Duración de la transición: 400 ms

Curva de velocidad de transición: lineal
¡Bueno! Esta fue una seria personalización de un módulo de propaganda. La buena noticia es que todo lo que tenemos que hacer es duplicarlos para crear los paneles de acordeón restantes.
La duplicación de borrones para varios paneles de acordeón pasan con el mouse sobre el módulo de la propaganda y haga clic en el icono duplicado cuatro veces para crear un total de cinco paneles de acordeón (o módulos). Luego actualice las imágenes de fondo para cada una de las nuevas borrachas que duplica.
Escritorio de resultados finales
Tableta y teléfono

Pensamientos finales Esta diapositiva receptiva de acordeón tiene algunos elementos únicos que lo hacen divertido. Los paneles de acordeón se extienden y se contraen sin problemas, sin tener ningún problema inesperado. Y los íconos de la propaganda cambian en el flotador y el móvil para aumentar UX. Esperamos que este diseño sea útil para su próximo proyecto. Espero tener noticias suyas en los comentarios. ¡Suerte!