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

Algunas personas dudan en incluir 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 adecuados 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álculo de precios GRATIS

Para tener en sus manos el diseño de cálculo de precios gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡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!

Agregar la sección 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
• Flip divisor: Vertical

Espaciado

Agrega un poco de relleno en la parte inferior también.

• Acolchado inferior: 130px

Agregar nueva fila

Estructura de la columna

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

Agregar 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

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

• Fuente del encabezado 2: Montserrat
• Peso de fuente del encabezado 2: Semi negrita
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: # 0f1c4d
• Tamaño del texto del encabezado 2: 57 px (escritorio), 35 px (tableta), 30 px (teléfono)
• Espacio entre letras del encabezado 2: -2px

Agregar el módulo de texto n. ° 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

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

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

Agregar módulo divisor a la 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%

Agregar sección 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

A continuación, agregue un poco de relleno personalizado en la parte superior e inferior.

• Acolchado superior: 70px
• Acolchado inferior: 130px

Agregar fila n. ° 1

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de 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 acolchado inferior personalizado a continuación.

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

Frontera

Agrega un borde inferior a la fila también.

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

Monitor

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.

display: flex;

Agregar módulo Blurb a la columna 1

Seleccionar icono

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

Configuración de iconos predeterminada

Vaya 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: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 96 px (escritorio), 20 px (tableta y teléfono)

Configuración del icono de desplazamiento

Modifica 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 n. ° 1 a la columna 2

Agregar contenido H3

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

Configuración de texto H3

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

• Fuente del encabezado 3: Montserrat
• Peso de fuente del encabezado 3: Semi negrita
• Color del texto del título 3: # f8c5ac
• Tamaño del texto del encabezado 3: 40 px (escritorio), 25 px (tableta), 18 px (teléfono)
• Espacio entre letras del encabezado 3: -1px
• Altura de la línea del título 3: 1.1em

Agregue el módulo de texto n. ° 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

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

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

Agregar módulo de texto a la columna 3

Añadir precio al cuadro de contenido

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

Configuración de texto

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

• Fuente de texto: Montserrat
• Peso de la fuente del 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

Vaya 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 las ID CSS del módulo Blurb duplicadas

Cambie la ID de CSS de cada nuevo módulo de Blurb en consecuencia:

• Módulo Blurb 1: precio-artículo-clic-1
• Módulo Blurb 2: precio-artículo-clic-2
• Módulo Blurb 3: 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

Agregue otra fila a su sección usando la siguiente estructura de columnas:

Dimensionamiento

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

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

Monitor

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

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:

<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 de texto: Montserrat
• Peso de la fuente del texto: ultraligero
• Color del texto: # f8c5ac
• Tamaño del texto: 23px (escritorio), 18px (tableta), 14px (teléfono)
• Espaciado de letras de texto: -1px
• Altura de la línea de texto: 1.1em

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

Dejar el cuadro de contenido vacío

A 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

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

• Fuente de texto: Montserrat
• Peso de la fuente del 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

Agregar JQuery a las opciones del tema Divi

Ir a la pestaña de integración

Ahora que hemos completado el diseño, es hora de hacer que la funcionalidad funcione usando algo de 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 etiquetas de encabezado

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

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 diseño de cálculo de precios impresionante 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 utilizar 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.