Cerrar video

Cómo crear una tabla de precios que cambie entre mensual/anual mediante un toggle en divi

por | Dic 9, 2020 | Tutorial gratuito | 18 Comentarios

En este tutorial gratuito te mostraré cómo crear una tabla de precios que cambie o alterne entre mensual/anual mediante un toggle en divi y sin plugins.

Existen sitios web en donde debemos mostrar los paquetes o planes de los servicios, pero muchas veces tenemos varios paquetes y se vuelve un poco complejo mostrar estas tablas de precios de forma ordenada. Es aquí dónde entra la importancia de un conmutador que nos ayude a cambiar entre precios mediante un solo click o tap de forma muy sencilla y fácil.

Cómo crear una tabla de precios que cambie entre mensual/anual mediante un toggle en divi

Esta funcionalidad no viene con divi por defecto así que fiel al estilo de OV DIVI he preparado algunos fragmentos de código para poder agregar esta característica de forma muy sencilla, solamente copiando y pegando.

El primer código que necesitamos insertar es la estructura del conmutador o toggle. Esta la vamos a insertar mediante el siguiente código HTML:

<div class="ov-toggle">
  <span class="titulo">Mensual</span>
  <label class="switch">
    <input type="checkbox">
    <span class="slider round ov-toggle-alternar"></span>
  </label>
  <span class="titulo">Anual</span>
</div>

Ya hemos insertado la estructura pero todavía le hacen falta los estilos. Por lo tanto, ahora en el CSS Personalizado debemos pegar el siguiente fragmento CSS:

.ocultar-plan {
  display: none;
}

.ov-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ov-toggle .titulo {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.ov-toggle .switch {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 34px;
  margin-right: 12px;
  margin-left: 12px;
  border-radius: 34px;
}

.ov-toggle .switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.ov-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #262A47;
  -webkit-transition: .4s;
  transition: .4s;
}

.ov-toggle .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.ov-toggle input:checked + .slider {
  background-color: #01c799;
}

.ov-toggle input:focus + .slider {
  box-shadow: 0 0 1px #01c799;
}

.ov-toggle input:checked + .slider:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

.ov-toggle .slider.round {
  border-radius: 34px;
}

.ov-toggle .slider.round:before {
  border-radius: 50%;
}

Genial, vamos muy bien. Ya por último necesitamos agregar la funcionalidad mediante el siguiente código jQuery:

<script>
jQuery(document).ready(function($){
	$('.ov-toggle-alternar').on({
     'click': function(){
      	$( ".ov-plan" ).toggle();
     }
 	});
});
</script>

Excelente, prácticamente ya tenemos todo hecho, solamente nos falta agregar unas clases a nuestras tablas de precios para que estas se oculten y se muestren correctamente, pero eso lo explico en el video, así que dale play para que aprendas cómo aplicar todos estos códigos.

¿Te ha gustado este tutorial? 🚀

¡Los Tutoriales Premium te van a encantar! Desde solo $10 USD al mes accede a más de 200 (¡y contando!) tutoriales únicos y exclusivos sobre Divi y WordPress. ¡Únete ahora y aumenta al 200% tus habilidades de diseño web con Divi!

Tutoriales Relacionados

18 Comentarios

  1. José Ángel

    ¡Buenas Oscar!

    Genial el tutorial, como siempre. Sin embargo estoy teniendo un fallo: Quería usar el toggle para alternar precios entre euros y dólares (mi web no tiene woocomerce instalado). Consigo ocultar la segunda tabla pero al accionar el toggle no se reproduce la segunda.

    ¿Alguna idea de qué puede estar pasando? Te dejo un enlace para que veas como lo estoy haciendo:
    https://elchicodelmarketing.com/?page_id=861

    Responder
    • Oscar Viedma

      Hola José Ángel, he inspeccionado el sitio y creo que estás colocando mal tus clases. Revisa bien el paso por paso porque con una clase o código que coloques mal puede romper toda la funcionalidad.

      Responder
  2. Gustavo

    Oscar, excelente el tutorial, solo una pregunta. Como esito ese plan que esta oculto? ya no lo veo en el cosntructor visual
    Gracias

    Responder
    • Oscar Viedma

      Hola Gustavo, para editarlo hay que hacerlo desde la vista wireframe o bien, quitar por un momento este fragmento del código CSS:

      .ocultar-plan {
        display: none;
      }
      
      Responder
      • Gustavo

        Gracias Oscar…. eso es lo que hice, quitar el display:none, pero crei que habia otra solucion. Saludos Cordiales

        Responder
  3. Gustavo

    Hola Oscar, nuevamente te molesto con una consulta
    El toggle funciona perfecto, pero es posible agrgar un slider a la tabla de precios? Necesito que sean 6 columnas
    Pensaba en hacerlo con ununcios en lugar de tabla de precios, pero le coloco la clase al row que contiene los anuncios y si bien logor ocultar la segunda tabla ya no funciona el toggle
    https://ayeluya.com/stage/planes-2022/
    Muchas gracias

    Responder
    • Oscar Viedma

      Hola Gustavo, ¿Cómo insertaste el carrusel? ¿Te funcionaba con las tablas nada más?

      Responder
      • Gustavo

        Oscar, gracias por tu respuesta
        Finalmente pude ubicar las 6 columnas en ancho completo
        https://ayeluya.com/stage/planes-y-precios/
        Ahora lo que intento hacer es que en el cel se vean los planes en linea y no uno debajo del otro, es muy largo asi
        Abrazo grande

        PD: puedo molestarte con un otro codigo para que veas por que no funciona? no logro entender que estoy poniendo mal

        Responder
        • Oscar Viedma

          Para que salgan en línea en móvil, puedes usar el siguiente código CSS:

          @media only screen and (max-width: 768px) {
          .et_pb_pricing_table_wrap {
              display: flex;
              flex-wrap: nowrap !important;
          }
          }
          

          Si quieres un carrusel debes integrar una librería, yo te recomiendo flickity js, que es la librería que utilizamos en este tutorial.

          Responder
  4. Frank

    Me funciono bien en el modo de computadora, pero en movil tengo un error cuando tocas una superficie de los lados fuera de los precios, estos desaparecen https://yambo.es/2677-2/

    Responder
    • Oscar Viedma

      Hola Frank, revisé el link de tu página y el toggle funciona bien, no veo lo que comentas que desaparecen los precios.

      Responder
  5. Hache

    Hola! Antes de nada me gustaría darte las gracias porque me estaba volviendo un poco loco y necesitaba un toogle para Divi, realmente te lo agradezco. Comentarte que todo fue perfecto excepto un error que me gustaría saber si se puede solucionar.
    El error en cuestión es que cuando activas el toogle (circulito a la dcha) y después haces clic en cualquier enlace de la pagina que lleve a otra pagina al volver atrás el tootgle vuelve a su posición original, sin embargo no vuelve la tabla, es decir se queda el toogle a la izquierda con el resultado de cuando está a la derecha. No se si me he explicado bien, ¿Cómo podría solucionarlo?
    Nuevamente muchas gracias

    Responder
    • Oscar Viedma

      Hola Hache, la verdad desconocía ese detalle que me comentas. ¿Tienes tu ejercicio en línea para ver el comportamiento?

      Responder
      • Hache

        Hola!
        Claro, puedo enviartelo de alguna forma privada? te agradezco mucho tu ayuda

        Responder
  6. Micaela Bertola

    Muchas gracias por el tutorial, tengo un problema que me queda oculto los 2 o se ven los 2, sabes que puede ser? Gracias de antemano

    Responder
    • Oscar Viedma

      Hola Micaela, puede ser por algún error con una clase.

      Compárteme la url de tu ejercicio para inspeccionarlo y descubrir que sucede

      Responder

Trackbacks/Pingbacks

  1. Cómo alternar o cambiar entre tres tablas de precios (mensual/semestral/anual) en divi y sin plugins - OV DIVI - […] ya he realizado un tutorial gratuito dónde alternamos entre dos tipos de tablas de precios, lo puedes ver aquí.…
  2. Cómo hacer un increíble efecto de alternar entre tablas de precios con un efecto animado en divi sin plugins - OV DIVI - […] ya hemos hecho dos ejercicios (tutorial 1, tutorial 2) dónde alternamos unas tablas de precios pero esté será un…

Enviar un comentario

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

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$10 USD / mes

Pin It on Pinterest