Cómo crear cálculos automáticos de precios con Divi (usando JQuery)

Algunas personas dudan en mostrar los precios de sus servicios en su sitio web. Pero por mucho que pueda asustar a algunos visitantes, también muestra confianza y experiencia. Ser transparente con sus precios lo ayuda a atraer a los clientes correctos con un presupuesto con el que puede trabajar. En el tutorial de hoy, le mostraremos cómo crear un impresionante diseño de cálculo de precios que puede usar para su próximo proyecto Divi . ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño de cálculos de precios GRATIS

Para poner sus manos en el diseño de cálculos de precios gratuitos, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

¡No olvide agregar el código JQuery a su sitio web también! Puede encontrar el código al final de este tutorial.

¡Empecemos a Recrear!

Añadir Sección #1

Color de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo.

  • Color de fondo: #f8c5ac

Divisor inferior

Agregue un divisor inferior a la siguiente sección.

  • Estilo de divisor: Buscar en la lista
  • Voltear el divisor: Vertical

Espaciado

Agregue un poco de relleno inferior también.

  • Relleno inferior: 130px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Agregue el módulo de texto n. ° 1 a la columna

Agregar contenido H2

Agregue el primer módulo de texto a su columna e inserte algún contenido H2 de su elección.

Configuración de texto H2

Pase a la pestaña de diseño y cambie la configuración de texto H2 en consecuencia:

  • Título 2 Fuente: Montserrat
  • Encabezado 2 Peso de fuente: semi negrita
  • Encabezado 2 Alineación de texto: Centro
  • Título 2 Color del texto: #0f1c4d
  • Título 2 Tamaño del texto: 57 px (escritorio), 35 px (tableta), 30 px (teléfono)
  • Encabezado 2 Espaciado entre letras: -2px

Agregue el Módulo de Texto #2 a la Columna

Agregar contenido

Agregue otro módulo de texto justo debajo del anterior e inserte algún contenido de su elección.

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:

  • Fuente del texto: Montserrat
  • Alineación de texto: Centro
  • Color del texto: #0f1c4d
  • Tamaño del texto: 22 px (escritorio), 18 px (tableta), 16 px (teléfono)

Agregar módulo divisor a columna

Visibilidad

El siguiente y último módulo necesario en esta columna es un módulo divisor. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

  • Mostrar divisor: Sí

Línea

Pase a la pestaña de diseño y cambie el color de la línea a blanco.

  • Color de línea: #ffffff

Dimensionamiento

Modifique también el ancho del divisor.

  • Ancho: 12%

Añadir Sección #2

Color de fondo

¡A la siguiente parte del diseño! Agregue una nueva sección y cambie el color de fondo.

  • Color de fondo: #0f1c4d

Espaciado

Agregue un poco de relleno superior e inferior personalizado a continuación.

  • Relleno superior: 70px
  • Relleno inferior: 130px

Añadir Fila #1

Estructura de la columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el ancho en tamaños de pantalla más pequeños.

  • Ancho: 80 % (escritorio), 90 % (tableta y teléfono)

Espaciado

Agregue un poco de relleno inferior personalizado a continuación.

  • Relleno inferior: 70 px (escritorio), 20 px (tableta), 0 px (teléfono)

Borde

Agregue un borde inferior a la fila también.

  • Ancho del borde inferior: 1px
  • Color del borde inferior: #ffffff

Mostrar

Y, por último, para asegurarnos de que todas las columnas se muestren una al lado de la otra, agregaremos una línea de código CSS al elemento principal de la fila.

01
display: flex;

Agregue el módulo Blurb a la columna 1

Seleccionar icono

¡Es hora de comenzar a agregar módulos! Agregue un módulo de Blurb a la columna 1 y seleccione un icono de su elección.

Configuración de iconos predeterminada

Pase a la pestaña de diseño y cambie la configuración del icono en consecuencia:

  • Color del icono: #f7f7f7
  • Icono de círculo: Sí
  • Icono de círculo: #f8c5ac
  • Ubicación del icono: superior
  • Usar tamaño de fuente de icono: Sí
  • Tamaño de fuente del icono: 96 px (escritorio), 20 px (tableta y teléfono)

Configuración del icono de desplazamiento

Modifique el color del icono al pasar el mouse.

  • Color del icono: #000000

ID de CSS

Inserte también una ID de CSS.

  • ID de CSS: precio-artículo-clic-1

Agregue el Módulo de Texto #1 a la Columna 2

Agregar contenido H3

¡A por la segunda columna! Agregue el primer módulo de texto e inserte algo de contenido H3.

Configuración de texto H3

Pase a la pestaña de diseño y cambie la configuración de texto H3 en consecuencia:

  • Título 3 Fuente: Montserrat
  • Encabezado 3 Peso de fuente: semi negrita
  • Título 3 Color del texto: #f8c5ac
  • Título 3 Tamaño del texto: 40 px (Escritorio), 25 px (Tableta), 18 px (Teléfono)
  • Encabezado 3 Espaciado entre letras: -1px
  • Encabezado 3 Altura de línea: 1,1 em

Agregue el Módulo de Texto #2 a la Columna 2

Agregar contenido

Agregue otro módulo de texto a la columna 2 con algún contenido de su elección.

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto.

  • Fuente del texto: Montserrat
  • Peso de fuente de texto: ultraligero
  • Color del texto: #f8c5ac
  • Tamaño del texto: 23 px (escritorio), 18 px (tableta), 14 px (teléfono)
  • Espaciado entre letras de texto: -1px
  • Altura de línea de texto: 1,1 em

Agregar módulo de texto a la columna 3

Agregar precio al cuadro de contenido

¡A por la tercera columna! Agregue un módulo de texto y coloque el precio en el cuadro de contenido.

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:

  • Fuente del texto: Montserrat
  • Peso de fuente de texto: Pesado
  • Alineación de texto: Centro
  • Color del texto: #ffffff
  • Tamaño del texto: 40 px (escritorio), 25 px (tableta), 18 px (teléfono)

ID y clase de CSS

Pase a la pestaña avanzada y agregue una ID de CSS y una clase de CSS.

  • ID de CSS: precio-1
  • Clase CSS: precio-ocultar-primero

Clonar fila tantas veces como sea necesario

Una vez que haya completado la fila y todos los módulos que contiene, puede clonar la fila tantas veces como desee.

Cambiar los ID de CSS del módulo de Blurb duplicados

Cambie la ID de CSS de cada nuevo módulo de Blurb según corresponda:

  • Módulo 1 de Blurb: precio-artículo-clic-1
  • Módulo 2 de Blurb: precio-artículo-clic-2
  • Módulo 3 de Blurb: precio-artículo-clic-3
  • …

Cambiar el precio del módulo de texto duplicado y las ID de CSS

Haga lo mismo con el módulo de texto de precios en la tercera columna de cada fila.

  • Precio 1: precio-1
  • Precio 2: precio-2
  • Precio 3: precio-3
  • …

Agregar nueva fila

Estructura de la columna

Agrega otra fila a tu sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el ancho en tamaños de pantalla más pequeños.

  • Ancho: 80 % (escritorio), 90 % (tableta y teléfono)

Mostrar

Para asegurarnos de que todas las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños, también agregaremos una sola línea de código CSS al elemento principal de la fila.

01
display: flex;

Agregar módulo de código a la columna 1

Insertar código CSS

Continúe agregando un módulo de código a la primera columna de la fila e inserte las siguientes líneas de código CSS:

01
02
03
04
05
06
07
08
09
<style>
.price-hide-first {
display: none;
}
 
.price-item-active .et-pb-icon {
color: black !important;
}
</style>

Agregar módulo de texto a la columna 2

Agregar contenido

Pase a la segunda columna y agregue un nuevo módulo de texto con algún contenido de su elección.

Configuración de texto

Cambie la configuración de texto en consecuencia:

  • Fuente del texto: Montserrat
  • Peso de fuente de texto: ultraligero
  • Color del texto: #f8c5ac
  • Tamaño del texto: 23 px (escritorio), 18 px (tableta), 14 px (teléfono)
  • Espaciado entre letras de texto: -1px
  • Altura de línea de texto: 1,1 em

Agregar módulo de texto vacío a la columna 3

Dejar el cuadro de contenido vacío

En la siguiente y última columna. Agregue un módulo de texto y asegúrese de que el cuadro de contenido permanezca vacío.

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:

  • Fuente del texto: Montserrat
  • Peso de fuente de texto: Pesado
  • Alineación de texto: Centro
  • Color del texto: #ffffff
  • Tamaño del texto: 40 px (escritorio), 25 px (tableta), 18 px (teléfono)

ID de CSS

Complete la configuración del módulo agregando una ID de CSS.

  • ID de CSS: total-price-cal

Agregue JQuery a las opciones del tema Divi

Ir a la pestaña Integración

Ahora que hemos completado el diseño, es hora de hacer que la funcionalidad funcione usando algún código JQuery. Si desea agregar los cálculos de precios a una sola página, puede colocar el código en un módulo de código. Sin embargo, si lo está utilizando en varias páginas, vaya a sus Opciones de tema Divi y seleccione la pestaña de integración.

Agregar código JQuery a las etiquetas de encabezado

Inserte las siguientes líneas de código JQuery entre las etiquetas de script y listo:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
jQuery(function($){
  $('[id*="price-item-click"]').click(function() {
    var selector = $(this).attr('id').replace('-item-click', '');
    var $price   = $('#' + selector);
    var sum = 0;
    $price.toggle();
    $price.toggleClass('price-active');
    $(this).toggleClass('price-item-active');
    $('.price-active').each(function(){
    sum += parseFloat($(this).text().replace(/D/g,''));
    });
    if (sum > 0){
    $("#total-price-cal").show();
        $("#total-price-cal").text("$" + sum + "k");
    }
    else {
    $("#total-price-cal").hide();
    }
  });
});

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear un impresionante diseño de cálculo de precios con Divi. Esta es una excelente manera de mostrar a sus visitantes a qué precio comienzan sus servicios y lo ayuda a atraer a la audiencia adecuada. ¡Puede usar este enfoque en cualquier diseño de cálculo de precios que cree para su próximo proyecto Divi! Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.

Publicaciones relacionadas:

  1. Cómo crear capítulos de sección usando las nuevas opciones de diseño de Divi
  2. Cómo crear hermosos bordes de imagen usando las nuevas opciones de Divi
  3. Cómo crear una encuesta elegante usando Typeform y agregarla a su sitio web Divi
  4. Cómo crear impresionantes testimonios de galería con Divi