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 | 0 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;
}

.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.

0 comentarios

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.

$6 USD / mes

Pin It on Pinterest