Cómo agregar una calculadora de pago y una oferta por tiempo limitado a su sitio Divi

Si está tratando de vender productos en su sitio web, hay ciertos elementos que puede agregar para aumentar las conversiones. Esto es especialmente cierto para artículos costosos como un automóvil.

Seamos realistas, no todos tenemos el dinero (o la disciplina) para gastar 30k en efectivo para un automóvil. Es por eso que cuando busca comprar un automóvil nuevo, las calculadoras de pago en línea pueden desempeñar un papel clave en el proceso de compra. Además de la magia matemática que funciona entre bastidores, las calculadoras de pago ayudan al comprador con una herramienta conveniente allí mismo en su sitio web que realmente puede impulsar las conversiones para el vendedor.

Otra forma de incentivar a un usuario para que haga clic en un botón es agregar un temporizador de cuenta regresiva en una oferta destacada para que sea más obvio para el usuario que la oferta vencerá pronto.

En este tutorial de caso de uso, le mostraré cómo agregar una calculadora de pago y una oferta por tiempo limitado a su sitio web. Para agregar la calculadora de pagos, usaré el complemento Formulario de campos calculados y personalizaré el diseño con Visual Builder para que coincida con el diseño de la página de financiamiento del concesionario de automóviles. También le mostraré cómo puede usar elementos del diseño de la página de listados de concesionarios de automóviles y combinarlos con un temporizador de cuenta regresiva para crear una oferta destacada por tiempo limitado.

¡Empecemos!

Vistazo

Aquí hay un adelanto de la calculadora de pago y la oferta destacada por tiempo limitado que crearemos:

Lo que necesitas para este tutorial

Para este tutorial de caso de uso, necesitará:

  • El tema Divi
  • Se puede acceder al paquete de diseño del concesionario de automóviles (la página de financiación y el diseño de la página de listados) desde Visual Builder.
  • El complemento de formulario de campos calculados

Explorando la funcionalidad del complemento

El complemento de formulario de campos calculados es una herramienta poderosa para crear cualquier tipo de cálculo que pueda soñar si sabe lo que está haciendo. Pero si desea hacer su vida más fácil (me refiero a los no matemáticos), debe buscar las versiones profesionales del complemento para una implementación más fácil. Por ejemplo, las versiones Developer o Platinum incluyen un módulo financiero que facilita mucho la implementación de ecuaciones financieras.

Afortunadamente, la versión gratuita ofrece algunos formularios prediseñados útiles para que pueda comenzar a trabajar, incluido un Formulario de calculadora de arrendamiento.

Echemos un vistazo a cómo se construyen estos formularios. Haga clic para ver la configuración del Formulario de calculadora de arrendamiento. Allí verá el Generador de formularios donde puede agregar nuevos campos y editar la configuración de campos y formularios.

Para editar un campo en particular, simplemente coloque el cursor sobre el campo en el generador de formularios a la derecha y la configuración del campo aparecerá a la izquierda.

Este formulario de Calculadora de arrendamiento tiene tres campos calculados que calculan el pago mensual, el pago total y el monto de interés. Estos campos calculados especiales generarán nuevos cálculos basados ​​en lo que el usuario ingresa para los campos de entrada de números (Cantidad del préstamo, % de la tasa de interés, etc.).

Haga clic en el Campo calculado de pago mensual para ver cómo se utiliza la ecuación para generar ese campo.

Sin entrar en demasiados detalles sobre las matemáticas detrás de esta ecuación (no podría aunque quisiera), quiero señalar las diferentes variables de nombre de campo que se usan en la ecuación. Las diferentes variables se correlacionan con ciertos campos en el formulario. Y esas variables se reemplazan con números reales una vez que se ingresan los campos del formulario, lo que permite que la ecuación escupa el campo calculado (en este caso, el pago mensual). No dude en consultar los diferentes formatos de ecuación utilizados para este formulario.

Agregar el código abreviado de la calculadora de pago a su página

Para agregar el código abreviado del formulario de la calculadora de arrendamiento a su página, primero regrese a la lista de formularios y copie el código abreviado junto al formulario de la calculadora de arrendamiento.

Luego vaya a su página con el diseño de página de financiación de concesionarios de automóviles. Si aún no tiene uno, cree una nueva página e importe el diseño usando Divi Builder.

Busque la sección justo debajo de la sección titulada «Recursos». Esta sección tiene una fila de dos columnas con un formulario de contacto a la derecha y un módulo de texto a la izquierda. Mueva el módulo de texto en la columna izquierda a la parte superior de la columna derecha justo encima del formulario de contacto.

Ahora podemos agregar nuestra calculadora a la columna de la izquierda usando nuestro shortcode. Continúe y agregue un nuevo módulo de texto y pegue el código abreviado en el cuadro de contenido.

Personalización del diseño de la calculadora de pago

Antes de diseñar nuestro formulario para que coincida con el diseño, quiero señalar que el complemento incluye algunas plantillas prediseñadas que puede usar para darle a su formulario una apariencia personalizada. Puede acceder a esta opción desde la configuración del formulario.

Pero tenga en cuenta que esto limita su capacidad para anular el css de la plantilla en la configuración del módulo de texto. Por lo tanto, creo que es mejor mantener el formulario en la plantilla predeterminada y agregar estilo con Divi Builder tanto como sea posible.

Vaya a su módulo de texto con su shortcode y cambie el color del texto a claro.

Una forma rápida de hacer coincidir el resto del texto con su diseño es ir al módulo de publicidad en la columna derecha y copiar el estilo de texto del cuerpo que se está utilizando.

Luego haga clic con el botón derecho en el módulo de texto en la columna izquierda y pegue los estilos de texto del cuerpo en el módulo.

Esto actualizará la configuración del texto para que coincida con el diseño.

Ahora regrese al módulo de publicidad y copie los Estilos de texto del título.

Luego péguelos en el módulo de texto. Esto actualizará el texto del encabezado de su formulario de calculadora para que coincida con su diseño.

Ahora que el texto de su formulario coincide con su diseño, necesitará un toque final de CSS personalizado para diseñar los campos del formulario. Puede encontrar las ID y las clases de CSS utilizadas por el complemento para apuntar a diferentes elementos en el formulario en la página de preguntas frecuentes .

Dado que queremos apuntar a todos los campos de entrada, vaya a Personalizador de temas > CSS adicional e ingrese el siguiente CSS:

01
02
03
04
05
06
07
#fbuilder input,
#fbuilder textarea,
#fbuilder select {
border: none;
padding: 0.5em 0.2em 0.5em 1em;
font-size: 16px;
}

Todo lo que hace este css es proporcionar más relleno a nuestros campos de entrada, elimina el borde feo y aumenta el tamaño de la fuente.

¡Ahora su formulario está listo para funcionar!

Crear una oferta por tiempo limitado

Con nuestra calculadora de pago en su lugar, estamos listos para crear una oferta destacada por tiempo limitado. Para hacer esto, vamos a usar una lista de autos del diseño de la Página de Listas de Concesionarios de Autos para dar un salto en los elementos de diseño que necesitamos. Luego agregaremos un módulo de tabla de precios para obtener el diseño de texto de precio que estamos buscando junto con un temporizador de cuenta regresiva para crear el incentivo por tiempo limitado.

Uso de la lista de autos para impulsar el diseño

Primero vaya al diseño de página de listados de concesionarios de automóviles e implemente el generador visual. Ubique la primera fila con la lista destacada y guarde la fila en su biblioteca Divi haciendo clic en el ícono «Agregar a la biblioteca» en el menú de su fila. Asigne un nombre a su diseño y haga clic en «Guardar en la biblioteca».

Ahora regrese a su página con el diseño de página de financiación y agregue una nueva sección normal debajo de la sección del encabezado superior. Luego agregue la fila que guardó a su biblioteca divi haciendo clic en el icono de círculo de inserción de fila, haciendo clic en la pestaña Agregar desde la biblioteca y luego seleccionando su fila guardada de la lista.

Actualice la configuración de su sección de la siguiente manera:

Insertar imagen de fondo

Color de degradado de fondo izquierdo: rgba(0,0,0,0.8)


Color de degradado de fondo derecho: #ffffff


Colocar degradado sobre la imagen de fondo: SÍ

Ahora mueva el módulo de texto que contiene las especificaciones del vehículo desde la columna central de su fila hasta la parte superior de la columna derecha. Elimine el botón Informe de historial y el módulo de texto con el precio «$ 34000».

Agregar una tabla de precios para crear un texto de precio personalizado

En la columna central vacía, agregue un nuevo módulo de tablas de precios. El uso del módulo de tablas de precios le permitirá usar el diseño de precios para su oferta destacada sin tener que usar html/css personalizado.

En la configuración de las tablas de precios, elimine una de las tablas de precios que se generan de forma predeterminada para que solo quede una tabla. Luego actualice lo siguiente:

Mostrar viñeta: NO

Color de fondo: rgba(255,255,255,0)

Luego actualice la configuración de diseño de la siguiente manera:

Color de fondo del encabezado de la tabla: rgba(0,0,0,0)

Fuente del cuerpo: Teko


Peso de la fuente del cuerpo: Regular


Color del texto del cuerpo: #c10f1b


Altura de la línea del cuerpo: 1,2 em


Moneda y frecuencia Fuente: Teko


Moneda y frecuencia Peso de la fuente: Semi negrita


Color de texto de moneda y frecuencia: rgba(0,0,0,0.63)


Tamaño de texto de moneda y frecuencia: 30px

Fuente de


precio: Teko Fuente de

precio: Peso: Precio regular Color de texto: #c10f1b

Margen personalizado: 5px Ancho del borde inferior

: 0px




Ahora regrese a la pestaña de contenido y haga clic para actualizar la configuración de la tabla de precios específica de la siguiente manera.

Saca el Título y el Subtítulo.

Por: mes


Precio: 199

Y agregue lo siguiente para reemplazar el texto en el cuadro de contenido:

01
02
for 36 Months
$2000 down

En la configuración de diseño, actualice lo siguiente:

Tamaño del texto del cuerpo: 28 px

Altura de la línea del cuerpo: 0,2 em


Relleno personalizado: 20 px arriba, 0 px abajo, 0 px a la izquierda, 0 px a la derecha

Agregar un temporizador de cuenta regresiva a la oferta destacada

Para crear la oferta por tiempo limitado, agregaremos un temporizador de cuenta regresiva sobre la fila con la oferta destacada.

Primero agregue una nueva fila de una columna y agregue un módulo de temporizador de cuenta regresiva a la fila.

Arrastre la nueva fila sobre la fila con la oferta destacada. Retire el relleno superior de la sección y retire el relleno superior e inferior de la nueva fila.

Ahora actualice la configuración del temporizador de cuenta regresiva de la siguiente manera:

Título del temporizador de cuenta regresiva: Oferta que finaliza pronto

Color de fondo: #c10f1b

Fuente del título: Teko

Tamaño del texto del título: 50 px


Fuente de números: Teko


Ancho: 500 px


Alineación del módulo:


Sombra del cuadro central: ver captura de pantalla

Deberá agregar un relleno superior del 5% a la fila debajo de su temporizador de cuenta regresiva para darle a la sombra del cuadro inferior un poco de espacio para respirar.

Ahora mira el resultado final.

Pensamientos finales

El complemento Formulario de campos calculados le permitirá crear formularios para calcular casi cualquier cosa que desee, pero la curva de aprendizaje parece un poco empinada para cálculos avanzados. Afortunadamente, la versión gratuita del complemento viene con una calculadora de arrendamiento que funcionará de inmediato. Y agregarlo a Divi es tan fácil como incrustar un código abreviado y actualizar algunas configuraciones. Si lo prefiere, puede consultar los mejores complementos de formulario de WordPress y ver si sus operaciones matemáticas son lo suficientemente robustas para crear el formulario de calculadora que está imaginando.

Una de las mejores cosas de usar un diseño prediseñado es que no tienes que empezar desde cero para agregar elementos adicionales a tu sitio. Crear la oferta destacada por tiempo limitado fue rápido y fácil, ya que usamos el diseño de una lista de autos para poner todo en marcha.

Espero que esto ayude a suavizar el proceso de agregar los elementos necesarios para impulsar las conversiones en su propio sitio.

Espero escuchar de usted en los comentarios.

¡Salud!