Hola qué en este tutorial aprenderás a crear un acordeón slider responsive con un efecto hover con divi.
Este tutorial lo ha realizado originalmente el equipo de elegant themes pero muchos de ustedes en la Comunidad OV Divi me han pedido que lo replicara al estilo OV Divi. Por supuesto que he aceptado el reto y en este video te enseñaré como hacerlo.
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 consisten en múltiples elementos (o paneles) apilados horizontalmente como los pliegues de una cortina. Y cuando pasa el mouse sobre uno de los paneles, se expande para revelar contenido a medida que se contraen los otros paneles de acordeón. Aquí es donde obtenemos el efecto tipo acordeón de expandirse y contraerse.
En este tutorial te mostraré cómo crear este efecto de control deslizante de acordeón responsive en Divi basándonos en el post original de elegant themes.
Gracias, usted es un crack muy bueno en enseñar, he seguido paso a paso cada tutorial y siempre da los resultados esperados
Gracias Keifer, es un placer ayudarte. Te mando un abrazo y nunca dejes de seguirme jaja. Saludos
Gracias, Óscar, ya me suscribí a tus cursos porque lo haces muy claro y sencillo, y sobre todo sin errores, quedando la página como se espera. Sin embargo sobre este trabajo del acordeón slider tengo un problema: cuando lo veo en tablet o móvil no me aplica el 100% de ancho, si no que aparece mas bien como una pirámide, las imágenes de arriba más pequeñas, las del medio un poco mas grandes y las inferiores casi al 100%. Y no sé como arreglarlo. Muchas gracias.
Hola Sebastián muchas gracias por se parte de OV DIVI. En cuanto al problema que me comentas me podrías compartir la URL de tu sitio por fa, para inspeccionar que sucede y así puedo ayudarte de mejor manera. 🙂
Hola Oscar! ya sabes que me encantan cada uno de tus videos y la paciencia que aplicas a cada tutorial. En ésta oportunidad, te quería consultar si es posible hacer esto: El acorden yo lo quiero utilizar para la descripción de diferentes personas. Es decir; cada imagen es una persona. Entonces, se me ocurre que el nombre de la persona (titulo de anuncio) cuando el acordeon está cerrado se vea en vertical (como si fuera debajo de las flechitas), para saber que pestaña quiero abrir. No sé si lo ves posible con alguno de tus truquitos.
La idea seria que debajo de la flechita y en vertical esté el nombre de la persona y al abrir se vea tal cual tu video y ese texto vertical desaparezca.
Bueno. OJalá tengas una solución a mi idea.
Saludos y Gracias por toda tu magia
Maria Laura, hola! Disculpa he estado ocupadísimo y te prometí en el grupo de facebook que te ayudaría con eso. Voy a intentarlo, pero por fa me puedes escribir por messenger facebook para que me des acceso a tu sitio y lo implemente desde allí.
Muchas gracias por seguir pendiente a pesar de estar ocupado!! ya te he pasado toda la info
Hola Óscar! lo primero, gracias por el tutorial, como siempre, genial explicado. Una duda, ¿Cómo podría hacer para que al desplegar lo que apareciera de fondo fuera un vídeo en vez de una imagen? Es que si en el fondo del anuncio, en la opción de hover le pongo un video me sale el fondo blanco y no se ve el video.
Muchísimas gracias!!
Hola Irene 🙂
Pues en teoría debe ser así como lo estás intentando hacer, debes colocar el video cómo fondo. Recuerda que el video debe ser en los dos formatos que te pide para que funcione bien en los diferentes navegadores. 🙂
Hola,
Tuve un problema al crear este slider en una página,seguí el tuto, la cerré para visualizarla y al abrirla había desaparecido la página entera. ¿Te imaginas que pasó por favor? Creo que cogeré tu curso ya que tus explicaciones pintan bien. Saludos
Hola Chuso, quizá el error que tuviste se debió a un bug de divi. Siempre es importante tener la versión más reciente porque luego suelen suceder ese tipo de cosas extrañas :/
Un abrazo Chuso!
Hola Oscar, estupenda clase! de verdad gracias por compartirlo! ya pague para ver tus tutoriales exclusivos y estan muy buenos. esta practica la hice, pero quiero preguntarte algo, como hago para que el scroll interno de la imagen que ayuda a ver el resto del texto en cada imagen se vea como el tuyo, traslucido tono negro y delgado. a mi me sale a lo cavernicola, blanco, y enorme. me puedes ayudar con eso por favor.
Hola Andrew, por lo regular el diseño de la barra de desplazamineto depende del navegador, pero existen ciertos estilos CSS para cambiar la apariencia.
En la página Divi Snippets encuentras un código para personalizar la barra de desplazamiento.
Hola Oscar, estupenda clase!, nueva mente yo… oye, hay alguna manera o codigo que ayude que ya abierto el modulo anuncio, se pueda cerrar nuevamente dando click o en moviles selecionando nuevamente el modulo nada mas?
Muchas gracias Andrew! Como el efecto funciona al hacer hover entonces no será posible cerrarlo mientras nos encontremos posicionados sobre la pestaña amigo. Debemos salir del área del acordeón para que este se cierre.
buenos dias Oscar, soy suscriptora de tus tutoriales. Todo perfecto con mi carrusel. El problema que mi ultimo modulo,cuando paso cursor no se me amplia. y no se que hacer. podrias ayudarme?
Enhorabuena por tu trabajo. Me encantan tus tutoriales.
Saludos
Hola Pepi, ¿Cuál es la url de tu ejercicio?
Buenas tardes desde España.
Le agradezco la respuesta
Esta seria:
https://seguraxtri.com/
En movil es donde me da el problema.
Hola Pepi, parece que el hover lo tienes sobre el icono y no sobre todo el módulo. Si borras ese módulo y duplicas el tercero te sigue ocurriendo?
Hola, le acabo de enviar un correo con mis datos.
Saludos y gracias
Hola de nuevo, si Me sigue ocurroindo. Gracias
Envíame tus datos de acceso a [email protected] a tu wordpress y le doy un vistazo 👀
hola Oscar, te felicito por tus cursos muy buenos y he seguido varios para complementar mi pagina, y en este tuto me sale un error, el contenido del carrusel no se visualiza en el teléfono y en la pc si, creo que tiene algún conflicto con este código:
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
si quito esto : flex-direction: column; se visualiza en el teléfono pero no se despliega hacia abajo.
crees que me puedas ayudar por favor, saludos a todos
Hola Luis Alberto, muchas gracias.
Sobre el problema que me comentas, ¿Me puedes compartir la url donde aplicaste el ejercicio? Necesito inspeccionar tu página para saber que sucede…
Hola soy Paola, el slider me sale perfecto en pc, pero en tablet y celular me sale plano y tengo que hacer clic para que aparezcan las letras, hice algo mal? Como lo soluciono?
Hola Paola. ¿Cuál es la url de tu ejercico?