Nuestras promociones de aniversario se acaban en:  

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Seleccionar página

Tutorial Divi: Crear acordeón con imágenes dinámicas en Divi

En este tutorial de Divi les enseñaré cómo crear un acordeón informativo con imágenes dinámicas en Divi. Veamos de que se trata.

Por Jefferson M.

Mar 9, 2021

Accede a más de 500 recursos siendo PREMIUM

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

¡Hola DivilFans! en este tutorial de Divi les enseñaré cómo crear un acordeón informativo con imágenes dinámicas en Divi. Veamos de que se trata.

Tiempo de lectura estimado: 4 minutos

En este vídeo tutorial resolveremos crearemos un acordeón que hará aparecer imágenes de manera dinámica en función de la necesidad del usuario. Al usuario dar clic en el módulo, aparecerá desplegada la información del texto y las imágenes correspondientes a esa sección de manera dinámica.

Pero mira tu mismo el ejemplo de lo que vamos a lograr:

¿Te ha gustado? Bien, veamos los pasos a seguir.

Paso 1: Crea una nueva sección para nuestro acordeón con imágenes dinámicas

Lo primero es crear una nueva sección, en este caso te recomiendo crear una sección especial (naranja) pues con esta sección podrás aplicar las clases CSS de manera ordenada para que todo funcioné bien.

Paso 2: Crea las imágenes y las filas

Ahora, crea 3 imágenes en la parte derecha de tu nueva sección y crea 3 filas en la parte izquierda. Las imágenes son a tu elección, lo que yo te recomiendo es que sean todas del mismo tamaño para que la transición sea de manera correcta.

Aprende a crear una barra de progreso personalizada para tu blog.

Dentro de las 3 filas colocarás el contenido al que vas a aplicar las clases CSS, en este caso yo he escogido el contenido del módulo de anuncio para los títulos, y el módulo de texto para colocar el texto que aparecerá de forma dinámica cuando el usuario clique el titulo.

Paso 3: Aplicamos un poco de CSS y clases CSS

Ahora vamos a aplicar las siguientes Clases CSS:

Para las imágenes aplicaremos cada una de estas clases (image-1 para la primera imagen y así sucesivamente):

imagen-1, image-2, image-3

Para los títulos con el módulo de anuncio aplicaremos cada una de estas clases (blurn-1 para el primer titulo y así sucesivamente):

blurn-1, blurn-2, blurn-3

Para los textos con el módulo de texto aplicaremos cada una de estas clases (text-1 para el primer titulo y así sucesivamente):

text-1, text-2, text-3

Ahora, en las opciones de cada una de las filas nos vamos a avanzado, CSS Personalizado, y en elemento principal colocaremos el siguiente código:

cursor:pointer;
transition:all .3s ease;

Le vamos a dar los estilos que queramos a esas cajetillas para que luzcan tal como queremos.

Cambia el orden de las columnas de Divi en Móvil de una manera sencilla con nuestro tutorial

Paso 4: Insertamos el Script para la funcionalidad y un poco más de CSS

Ahora colocaremos el Script que nos dará la funcionalidad de dinamismo de las imágenes. Para esto creamos una nueva fila, y en ella creamos un módulo de código. Dentro del módulo insertaremos el siguiente script:

<script type="text/javascript">
  // Acordeon principal
 jQuery(document).ready(function() {
jQuery('.blurn-1').click(function(e){
e.preventDefault();jQuery(".text-1").show(300);
});
});
   jQuery(document).ready(function() {
// Acordeon 2
jQuery('.text-2').hide();
jQuery('.blurn-2').click(function(e){
e.preventDefault();jQuery(".text-2").show(300);
});
});
   jQuery(document).ready(function() {
// aconrdeon 3
jQuery('.text-3').hide();
jQuery('.blurn-3').click(function(e){
e.preventDefault();jQuery(".text-3").show(300);
});
});

 // Función para ocultar los textos no visibles
// Texto de acordión 2
jQuery(document).ready(function() {
        jQuery('.blurn-2').on('click', function(event) {
            jQuery('.text-1, .text-3').hide(300);
        });
    });
// Texto de acordión 1
jQuery(document).ready(function() {
    jQuery('.blurn-1').on('click', function(event) {
        jQuery('.text-2, .text-3').hide(300);
    });
});
// Texto de acordión 3
jQuery(document).ready(function() {
    jQuery('.blurn-3').on('click', function(event) {
        jQuery('.text-1, .text-2').hide(300);
    });
});  
</script>


 // Función para las imagenes
<script type="text/javascript">
 jQuery(document).ready(function() {

// Texto de acordión 1
jQuery('.blurn-1').click(function(e){
  e.preventDefault();jQuery(".image-1").show(300);
});
});
   jQuery(document).ready(function() {
// Texto de acordión 2
jQuery('.image-2').hide();
jQuery('.blurn-2').click(function(e){
e.preventDefault();jQuery(".image-2").show(300);
});
});
   jQuery(document).ready(function() {
// Texto de acordión 3
jQuery('.image-3').hide();
jQuery('.blurn-3').click(function(e){
e.preventDefault();jQuery(".image-3").show(300);
});
});
  
   // Función para ocultar imagenes no visibles
// Imagen 2
jQuery(document).ready(function() {
        jQuery('.blurn-2').on('click', function(event) {
            jQuery('.image-1, .image-3').hide(300);
        });
    });
// Imagen 1
jQuery(document).ready(function() {
    jQuery('.blurn-1').on('click', function(event) {
        jQuery('.image-2, .image-3').hide(300);
    });
});
// Imagen 3
jQuery(document).ready(function() {
    jQuery('.blurn-3').on('click', function(event) {
        jQuery('.image-1, .image-2').hide(300);
    });
});
</script>

Recuerda que si quieres aplicar más cantidad de acordeones se debe modificar este código como se explica en el video.

Antes de terminar, vamos a aplicar algo de CSS adicional. Crea otro módulo de código y dentro insertar el siguiente CSS:

<style>
.column-1{
  width:30% !Important;
}
.column-2{
  width:60% !Important;;
}
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.column-1{
  width:100% !Important;
}
.column-2{
  width:100% !Important;;
}
}
@media only screen and ( max-width: 479px ) {
.column-1{
  width:100% !Important;
}
.column-2{
  width:100% !Important;;
}
}
</style>

¡Y listo! Con esto tendrás este excelente resultado.

¡Muchas gracias! ¡No olvides compartir este contenido en tus redes sociales!

Nos vemos el el proximo video tutorial.

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos