En este tutorial gratuito de OV DIVI aprenderás a agregar un icono en cada uno de los toggle del módulo acordeón en divi, y no solo eso, sino que también aprenderás a reemplazar una imagen de otra columna al hacer click en cada toggle.
La verdad que es un ejercicio super interesante y nada complejo de realizar. Solamente vamos a necesitar de unos cuantos fragmentos de código css para agregar los iconos y un pequeño fragmento de código jquery para agregar la funcionalidad de cambiar la imagen de otra columna por una correspondiente a cada toggle al hacer click en el conmutador.
Este tipo de ejercicio lo puedes aplicar en cualquier proyecto dónde desees destacar las características de un servicio, un proyecto, una app, en fin, ya va a depender de tu creatividad el uso que le quieras dar.
A continuación te dejo todos los fragmentos que necesitamos para este tutorial, ya sabes que solo tienes que copiar y pegar:
Código CSS para agregar un icono al inicio de cada título del toggle del módulo acordeón:
content: url(ENLACE_IMG_AQUI); position: absolute; top: 8px; left: 12px;
Código jQuery base para reemplazar las imágenes correspondientes a cada conmutador del acordeón:
<script>
jQuery(document).ready(function($){
$('.ov-acordeon .et_pb_accordion_item_0 .et_pb_toggle_title').on({
'click': function(){
$('#cambiarIMG img').attr('src','URL_IMAGEN');
$('#cambiarIMG img').attr('srcset','URL_IMAGEN');
}
});
});
</script>
Y por último aquí te dejo las imágenes de ejemplo para que puedas realizar este ejercicio: Descargar imágenes.
Genial ¡ahora sí! Dale play al video…
Está increíble este tutorial!! Pero ya debrayando, estaba pensando si sería posible cambiar la imagen de la derecha al hacer hover sobre la imagen como para darle otra capa de interacción. Muchas gracias Óscar.
Hola Fer muchas gracias, ¿Probaste con la opción hover de la imagen? No lo he intentado pero estoy seguro que es posible.
Aplausos múltiples!!! Divi ya era un gran theme y con los cursos de OV DIVI= máximo exponencial!!! 😀
Millones de Gracias por tus aportes tan valiosos para la comunidad internacional fan de Divi!
Muchas gracias Adriana por todo el apoyo 🙂
Te mando un abrazo y prometo seguir mejorando.
Hola Oscar…
Estoy intentando hacer el efecto y funciona.
Te dejo la url para ver si quizás me puedas ayudar.
https://transvelcon.com/247-2/
Saludos.
Hola Carlos, creo que el problema lo estás teniendo con el tamaño de tus iconos y del celular. Debes ajustar el tamaño.
Oscar buenas noche, he implementado el acordeon en una pagina para un cliente pero nose que error he cometido, porque lo he realizado varias veces y copiado el csc y no me cambia la imagen. por favor me puedes hechar una mano a ver que estoy haciendo mal. revisa mi pagina http://www.fundacooedumag.org
Oscar este es el enalece https://www.fundacooedumag.org/nosotros/#
Hola Alexander, hasta ahora ando leyendo tu comentario. He entrado a la página y veo que el acordeón funciona correctamente, quizá ya lograste solucionarlo 🙂
Hola Oscar. Excelente tutorial!
Te hago consulta. Será posible ponerle un enlace a cada imagen que se carga? Por ejemplo yo quiero mostrar una imagen de un mapa y que al hacer click los lleve al mapana de google maps. Graciass
Probablemente sea posible con un código personalizado 🙂
Hola Oscar! Excelente tutorial!
Una consulta, hay alguna posibilidad de que se le agregue un link a cada imagen que se muestra? Yo quiero poner unas direcciones y que por cada dirección salga una imagen de un un mapa y que al hacer click lo lleve al maps.
Graciass
Hola Oscar! Muchas gracias por el tutorial!
Tengo una duda, es posible que en lugar de una imagen se coloque un mapa? si es así en vez del link de la imagen que debería colocar en el código?
Gracias!!
Hola Geral, sí es posible pero se necesita otra lógica en el código. Tengo este otro tutorial premium que te puede servir excelente para lo que necesitas. 😀
Saludos se podria hacer esto pero que sea una imagen y un video, osea tenga 3 imagenes por ejemplo y al hacer clic en la imagen me cambie el video que quiero mostrar
Sí sí claro que es posible Jerry, para realizar esa funcionalidad que deseas guíate de este otro tutorial. Creo que con eso lo logras, de todas formas cualquier duda me escribes.
Saludos 🙂
Buenas noches Oscar. Está genial el tutorial!!! He probado a hacer este efecto de acordeón en mi página y lo he seguido paso a paso y no sé en qué he fallado. Te dejo el enlace de mi página, y si puedes te agradecería que me dijeses cual es el fallo que he cometido.
https://segurosjimenezortiz.com/coberturas-hogar
P.D: la numeración de los acordeones están cambiadas correctamente.
Hola David, seguro es una tema de Divi Performance… Dirígete a Divi > Opciones del tema > General > Performance y deshabilita: Defer jQuery And jQuery Migrate.
Espero esto ayude.
Hola Oscar, gracias por tu respuesta a mi pregunta. He probado como me has dicho a deshabilitar Defer jQuery And jQuery Migrate, pero me sigue dando el mismo error, no me cambia la imagen a la hora de cambiar de conmutador, si hubiera otro error o algo parecido con solución, me gustaría que me lo dijeras para poder resolver este problema.
Un saludo y gracias.
David, no sé como vayas con este problema. He estado un tiempo ausente de los comentarios del blog porque mi tiempo se lo estoy dedicando a los tutoriales premium.
Quizá lo que te ocurría es que las clases de los conmutadores cambiaron en tu caso. Es algo que ya había respondido anteriormente en los comentarios del tutorial de youtube me parece.
Veo que ya no tienes el ejercicio en el enlace que me compartiste. Pero si algún día lo vuelves a implementar me dices para apoyarte.
Saludos.
Hola Oscar!
Estoy practicando con el contenido de este tutorial en una web que he diseñado. La cuestión es que he insertado dos módulos acordeón en una misma página. En la primera funciona bien pero en la segunda no y no consigo configurarlo correctamente. Agradecería saber si existe algo que impida que haya dos módulos iguales en la misma página. Gracias por compartir tu sabiduría.
Por otro lado, trabajo como diseñador gráfico freelance y busco alguien que me pueda asesorar técnicamente o incluso colaborar con esta persona en la construcción de las webs que diseño. Divi está bien pero hay veces que necesito ir más allá o hay temas informáticos que no entiendo y de momento solo encuentro alguna solución en tutoriales de youtube. No soy programador y siento que en lugar de estar centrado en cuestiones que me aportan valor como diseñador estoy perdiendo el tiempo buscando en tutoriales y pegándome con aspectos técnicos que no controlo. Quisiera saber si ofreces este tipo de servicio o si conoces a alguien que cumpliera con este perfil y con quien pudiera contactar.
Muchas gracias, un saludo!
Unai
Hola Unai!
Para que funcione con dos módulos acordeón tienes que duplicar el código jQuery pero ahora la clases van a cambiar, me refiero a esto «.ov-acordeon .et_pb_accordion_item_0 .et_pb_toggle_title»… Se deben inspeccionar con el inspector de google para saber que clases tienen los nuevos módulos acordeón.
Sobre tu otra pregunta, por ahora no estoy trabajando para clientes, mi enfoque está 100% en crear contenido de divi y no me da mi tiempo para tomar proyectos personalizados. No sé de alguien pero puedes unirte al grupo de facebook que tenemos y hacer la pregunta por ahí para ver si hay alguien que cumpla con lo que necesitas.
Saludos!
Hola, muchas gracias por la info. Tengo un problema con el codigo, lo inserto y pongo la imagen del icono nuevo, pero esta se despliega en tamaño grande y por fuera de los rectangulos del acordeon. Como puedo hacer que se inserte antes del titulo como se ve en el video tutorial? Gracias de antemano
Hola Federico perdona, ¿Si lograste solucionarlo? Aún tienes ese problema? Me gustaría ayudarte.
Quedo atento…
Hola, no 🙁 aun no he podido resolver el problema, intente dejar el link por youtube pero no me ingresa el comentario. Aquí esta el link https://convergenciasocial.cl/230155-2/ Gracias de antemano
Estuve inspeccionando tu sitio y no veo que la imagen se agrande 🤔
Quizá ya lo resolviste