Cómo alternar o cambiar entre tablas de precios (mensual - anual) mediante un toggle en divi
Вставка
- Опубліковано 19 вер 2024
- En este tutorial gratuito te mostraré cómo crear un tabla de precios que cambie o alterne entre mensual / anual mediante un toggle en divi y sin plugins.
➡️ Enlace al post del blog: ovdivi.com/com...
💥 Suscribete a los tutoriales exclusivos: academia.ovdiv...
🚨 Nuevo curso de divi 2020: academia.ovdiv...
✅ Academia OV Divi: academia.ovdiv...
🔥 Suscripción a Divi de Elegant Themes con 20% de descuento: bit.ly/2HlLVeI
💎 Comunidad de Facebook: / ovdivi
#Divi #alternarPrecios #ovdivi
--------
S Í G U E M E
--------
Web: ovdivi.com/
Facebook: / ovdivi
---------
P E R S O N A L
---------
Twitter: / oscarviedmaweb
Web: oscarviedma.com/
Si quieres alternar entre tres o más tablas de precios aquí tengo otro tutorial (premium) dónde logramos dicha funcionalidad: ovdivi.com/como-alternar-o-cambiar-entre-tres-tablas-de-precios-mensual-semestral-anual-en-divi-y-sin-plugins/
Maravilloso, solemne, grandioso, muchas gracias Oscar.
Muchas gracias también a ti Francisco :)
Me amanecí y lo logrè gracias
Excelente Gustavo, de eso se trata de implementarlo para entenderlo :)
Excelente como siempre mi estimado Oscar 👏👏👏👏👏.
Muchas gracias por compartir tus conocimientos, saludos :-)
Un abrazo Manfred. Seguiremos compartiendo tutoriales para toda la comunidad :)
Excelente tutorial, explicaciones claras y concretas, gracias !!
Gracias Humberto, un abrazo :)
Muy buen contenido. Muchas gracias por esta gran información me ha ayudado muchísimo
Excelente Aurielys, me alegra saber que te ha servido este tutorial, de eso se trata. Te mando un abrazo.
Siempre espectacular oscar! Bien hecho!!!
Gracias Tomás, seguiremos así! :)
Bien hecho compi, muchas gracias
Un abrazo amigo. Saludos.
Hola Oscar, Primero que nada te agradezco mucho el contenido publico aqui en youtube, te sigo desde hace algunos meses y recientemente me hice suscriptor de la academia. Me gustaria preguntar si hay algun limitante con este tutorial, por que yo hice mis propios tablas de precios, no me gustan las predeteerminadas, obviamente loas hice juntando varios modulos. y las clases para que funcione el toogle pues se las puse a las filas y no me esta funcionado. Tienes algun consejo?
Hola qué tal, muchas gracias por unirte. Escríbeme por el soporte premium de la página de tu cuenta desde la academia y te ayudo con eso :)
NECESITABA ESTO!
Genial José, espero te sirva mucho. Saludos :)
Gracias!! Realmente genial :)
Muchas gracias Gabriel :) ¡Saludos!
hola, muy buen video, si en dado caso quiero modificar los texto de la tabla que ocultamos, como haria?
Solamente borra por un momento el CSS:
.ocultar-plan {
display: none;
}
genial como siempre
Gracias Aventec. ¡Saludos!
Genial bro.. Muy interesante. Sigue así.
Gracias Javier. Espero te sea útil. Un abrazo.
Muy interesante! Se podrá aplicar a botones en lugar de el clásico toogle? es decir tener dos botones y al clickear uno oculte el contenido del otro y al revés? una especie de tabs pero aplicado a una sección completa donde se muestra y oculta.
Hola Santiago si se puede solamente que llevaría otra lógica. Creo necesito un tutorial para explicarlo. Seguro lo hago más adelante. Saludos.
Igual si tienes ejemplos bienvenidos :) Compártelos abajo para inspirarme. Un abrazo.
@@OVDIVI Aquí he encontrado n ejemplo: 10web.io/ Donde dice "Pricing Plans
". Gracias!
Gracias!
¡Saludos Ramiro!
Gracias! Muy bien explicado! Yo necesito alternar entre mensual; trimestral, semestral y anual. Es posible Oscar?!
Es posible pero debe ser un poquito diferente, haremos un tutorial al respecto más adelante.
Pero de hecho con este tutorial premium lo puedes lograr amigo: ovdivi.com/como-crear-una-navegacion-por-pasos-mediante-tabs-o-pestanas-en-divi-y-sin-plugins/
Hola Óscar, como de costumbre un tutorial enorme!!!, le he realizado y no he sido capaz de hacerlo responsive para las medidas de tablet, podrías darme un poco de luz?
Hola Javier, en el ejercicio solo importamos la sección de los precios de un layout de divi para ahorrarnos tiempo. Si estás construyendo tu propio diseño deberías también trabajarlo para responsive. ¿Cual es la url de tu sitio? Quiero darle un vistazo. Saludos.
@@OVDIVI Genial!!! Es appagam.com/home/
@@Javier.Amador Excelente sitio Javier, me gustó mucho. Las tablas de precios si te hace falta trabajar para móvil, veo que no dejas espacio izquierdo ni derecho, esto lo puedes solucionar con un relleno o margen, es cosa de probar.
@@OVDIVI Gracias!!!!, el sitio está hecho exclusivamente con tus tutoriales ;-)
Hola oscar como siempre impresionandome con tus tutoriales, sabes un curso que me gustaría que hicieras bueno, yo e tratado de buscar y no e encontrado de como implementar un audio de fondo automatico sin pausar 😥
Hola Kevin, muchas gracias. Para implementar un audio de fondo en una web no es posible porque los navegadores lo bloquean, está penalizado hacer eso y es una muy mala práctica. Si lees la documentación de google chrome por ejemplo, verás que no está permitido. Saludos.
muy bueno!
Gracias Eva :)
Muy buen video, pero me gustaria alternar entre 2 secciones, pasa que ya tengo unos botones que alternan entre mes y año, pero ademas quiero este switch para alternar entre usuarios, alguna idea?
Hola Luis qué tal, no comprendo del todo lo que deseas lograr. ¿Quieres alternar entre secciones en lugar de entre tablas? o quieres tener dos veces esta funcionalidad en tu web? es decir en secciones diferentes?
@@OVDIVI Hola, si, tengo que alternar entre 4 tablas de precios, dos para distintos usuarios y 2 para el mes o año, a su vez estos últimos deben de afectar también a las tablas de usuarios:c
@@luisrocavelasquez1601 si estás suscrito en los tutoriales premium me puedes escribir por el soporte y te puedo apoyar de forma más directa, esto al ser una característica específica que si requiere de varios ajustes :)
Me encantó tu tutorial, me fue de mucha ayuda! Sólo una pregunta, ¿hay forma de que las tarjetas de la lista de precios se vean en slider en lugar de una bajo la otra? He buscado por todos lados y no encuentro nada :(
Hola Paco, podrías combinar tutoriales e implementar el slider tal y cómo lo hacemos aquí: ua-cam.com/video/l19_D7fekfk/v-deo.html
qque tal hermano, sabes como hacerlo responsive? porque en mobile se achica mucho
Hola Pablo, el ejercicio es responsive, todo se ajusta a una columna
Saludos amigo, muchas gracias por el tutorial
También estaba viendo Cómo agregar tooltips, pero ahora surge mi duda,
quiero ponerle un tooltip a cada elemento de la tabla de precios, pero quiero ponerle con un ícono de "i" información a la derecha y que el tool tip aparezca ahí con un clic
Eh buscado en todo lado pero no logro poner el ícono a la derecha, tienes algun tutorial o consejo para poder hacerlo ?
Hola qué tal, el icono lo puedes agregar con un módulo icono o un módulo imagen, para posicionarlo a un costado puedes usar posiciones absolutas.
Un tutorial especifico para lo que deseas no tengo, pero puedes seguir el consejo que te he dado.
como podrias aplicar a otras opciones? es decir que de un listado con los meses cambie el contenido con respecto al mes?
Hola Javier, no logro entender bien. ¿Tienes un ejemplo? Seguro vemos una alternativa.
Un abrazo.
Saludos Oscar, como siempre un crack explicando, hice este proyecto pero solo funciona en mobil, en escritorio me sigen apareciendo las dos filas , incluso no se oculta la tabla de precios anual cuando le escribo en la clase CCS "ov-plan ocultar-plan" que podria estar sucediendo? alguna idea? NOTA: en mobil si funcional, pero en escritorio aparecen las dos tablas y al darle al toogle se ocultan las dos jejejje, gracias de antemano!
Yo tengo un error parecido, no consigo que el toggle funcione. Pero tampoco en móvil.
Hola Mario, comparteme la url de tu sitio para inspeccionar que sucede. Seguro es un detallito.
@@joseangelprofesional7607 Compárteme la url y vemos que pasa :D
@@OVDIVI hola Oscar, mi problema se soluciono, pensé que lo había posteado que al quitarle la opción de mantener las columnas del mismo tamaño en el componente de DiVi se arreglo, todo funciona bien! Gracias de todas maneras para quien quiera ver el url es: www.pealmasignal.com
@@mariocaricola Excelente Mario, gracias por compartir tu solución, seguramente ayudará a más de uno. He revisado el toggle y funciona excelente, felicidades 🔥
Se puede hacer que al clickear haga un estilo de difuminado hacia los otros precios?
Podrías probar en el jQuery en lugar de esta línea:
$( ".ov-plan" ).toggle();
Reemplazarla por esta:
$( ".ov-plan" ).fadeToggle();
Hola Oscar, estoy buscando algún plug para q en este tipo de tablas puedan tener también un contador de unidades para que el precio suba o baje. ¿Sabes cómo lo puedo hacer?
Hola, la verdad no sabría decirte de uno. Es algo que no tengo resuelto. ¿Tienes un ejemplo?
Oscar, sabes como colocar múltiples monedas para los precios ? tipo un switch pero de dolar, peso, atc
Se puede hacer con un plugin. Hay algunos que puedes probar:
es.wordpress.org/plugins/woo-multi-currency/
es.wordpress.org/plugins/wc-multi-currency/
@@OVDIVI Pero digo sin usar Woo Commerce, que sea tipo un switch como en este video pero solo para cambiar la moneda y ver la suscripción en otra
@@wembii909 Entonces debería ser la misma lógica que este tutorial pero en lugar de usar tablas de precios usar un módulo texto o cualquier otro módulo que se adapte a lo que deseas.
Se puede comprar el plan anual y actualizar con el el plan difinitivo?
Hola Maritza esto solamente es un ejercicio para mostrar e intercambiar entre planes de precios. Si quieres implementar una membresía en tu sitio web debes optar por un plugin de membership para wordpress.
como hacer para tener esas figuras(marcas de agua) atrás?
Son formas que creas anteriormente en una aplicación de diseño cómo photoshop. Y las colocas cómo fondo de sección o como imagen con una posición absoluta en tu diseño. También puedes jugar con la opacidad o transparencia para hacer más bonita la presentación :D
@@OVDIVI ¡muchas gracias!
Hola, tu trabajo me parece super genial, quisiera saber si tengo una pagina con divi y vendo un producto digital con el precio en dolares, hay alguna forma de hacer que se identifique de que pais es el usuario y asi mostrar el precio en la moneda local? te agradesco el si o el no gracias crack
Hola Elkin, si estás trabajando con woocommerce puedes probar con algunos plugins:
es.wordpress.org/plugins/woo-multi-currency/
es.wordpress.org/plugins/currency-exchange-for-woocommerce/
woocommerce.com/products/multi-currency/
Tan fácil que es hacerlo con cualquier addon en Elementor
Sí, aunque a mi en lo personal no me gusta usar plugins de más cuándo lo puedo hacer con código, igual de forma muy fácil. Un plugin menos, me ahorro tiempos de carga, me ahorra un costo extra, evito tediosas actualizaciones periódicas, etc. Son muchas las ventajas. Si usara elementor también lo haría con este método y sin addons.
Un abrazo Joel :)