Cómo agregar una computadora de pago y una oferta de tiempo limitado en su DIV

Si intenta vender productos en su sitio, hay ciertos artículos que puede agregar para mejorar las conversiones. Esto es especialmente cierto para los artículos de boletos grandes, como un automóvil. Admitamos, no todos tenemos el dinero (o disciplina) para arrojar 30k en efectivo para un automóvil. Por lo tanto, cuando desea comprar un automóvil nuevo, las computadoras de pago en línea pueden desempeñar un papel clave en el proceso de compra. Además de la brujería matemática que funciona detrás de escena, las computadoras de pago ayudan al comprador con una herramienta conveniente en su sitio web, lo que puede aumentar las conversiones para el vendedor.
Otra forma de estimular a un usuario a hacer clic en un botón es agregar un temporizador inverso para una oferta presentada para que el usuario sea más obvio que la oferta caducará pronto. En este tutorial para los casos de uso, le mostraré cómo agregar una computadora de pago y una oferta de tiempo limitado en su sitio web. Para agregar la computadora de pago, utilizaré los campos calculados del formulario del complemento y personalizaré el diseño del constructor visual para que coincida con la página de financiación del distribuidor de automóviles. También mostraré cómo puede usar elementos de la página de los listados de concesionario de automóviles y combinarlos con un temporizador inverso para crear una función limitada.
¡Vamos a empezar! Tire con el ojo aquí hay una breve mirada a la computadora de pago y la oferta limitada que crearemos:


¿Qué necesita para este tutorial para este tutorial de uso? Necesitará:
El tema de Div
El paquete de apariencia del distribuidor de automóviles (página de financiación y el registro de la página de registro) accesible desde Visual Builder.
Explorar la funcionalidad del complemento complemento para los campos calculados de formulario es una herramienta poderosa para crear cualquier tipo de cálculo con el que pueda soñar, si sabe lo que está haciendo. Pero si desea facilitar su vida (hablo no matemáticos), debe buscar en las versiones Pro del complemento para una implementación más fácil. Por ejemplo, los desarrolladores o las versiones de platino incluyen un módulo financiero que facilita la implementación de ecuaciones financieras.
Afortunadamente, la versión gratuita ofrece algunos formularios útiles previamente construidos para ponerlo en funcionamiento, incluido un formulario de computación de arrendamiento.
Echemos un vistazo a cómo se construyen estas formas. Haga clic para ver la configuración del formulario de alquiler. Allí verá formulario de formulario donde puede agregar nuevos campos y editar la configuración del campo y el formulario.

Para editar un cierto campo, simplemente pase con el mouse sobre el campo en la formulación a la derecha, y la configuración del campo aparecerá a la izquierda.

Este formulario de computadora de arrendamiento tiene tres campos calculados que calculan el pago mensual, el pago total y el valor de intereses. Estos campos especialmente calculados generarán nuevos cálculos basados ​​en lo que el usuario introduce para los campos de inserción de números (el monto del préstamo,% de tasa de interés, etc.).

Haga clic en el campo mensual calculado para ver cómo se usa la ecuación para generar ese campo.
Sin ingresar demasiados detalles sobre las matemáticas detrás de esta ecuación (no podría, incluso si quiero), quiero enfatizar las diferentes variables de los nombres de campo utilizados en la ecuación. Las diferentes variables se correlacionan con ciertos campos en la forma. Y esas variables se reemplazan con números reales una vez que la forma del formulario, lo que permite que la ecuación escupa el campo calculado (en este caso el pago mensual). Siéntase libre de verificar los diferentes formatos de ecuaciones utilizadas para este formulario. Ajustar la computadora de página corta en su página para agregar el formulario corto de la arrendamiento en su página, primero regrese a la lista de formularios y copie el código corto cerca del formulario para el formulario para el formulario. Computadora de alquiler. Luego acceda a su página con el punto de la página de financiación del concesionario de automóviles. Si aún no tiene una, cree una nueva página e importe el aspecto con Divi Builder.

Encuentre 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 de mano derecha y un módulo de texto a la izquierda. Mueva el módulo de texto desde la columna izquierda a la parte superior de la columna derecha justo encima del formulario de contacto.
Ahora podemos agregar nuestra computadora a la columna izquierda usando nuestro código corto. Continúe y agregue un nuevo módulo de texto y pegue el código corto al cuadro de contenido.

Personalización del diseño de la computadora de pago antes de comenzar a estilizar nuestro formulario para que coincida con la apariencia, quiero enfatizar que el complemento incluye algunas plantillas predefinidas que puede usar para dar su formulario. Puede acceder a esta opción desde la configuración del formulario. Pero recuerde 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 a la plantilla predeterminada y agregar estilo como sea posible con el Builder Div.
Acceda al módulo de texto con el código corto y cambie el color del texto a la luz.

Una forma rápida de coincidir con el resto del texto con su apariencia es acceder al módulo de la propaganda en la columna derecha y copiar el estilo de texto del cuerpo utilizado.

Luego, haga clic 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 de texto para que coincida con el aspecto. Ahora vuelva al módulo de la propaganda y copie los estilos de texto del título.

Luego péguelos al módulo de texto. Esto actualizará el texto de la forma de su computadora de su computadora para que se ajuste a su apariencia.

Ahora que el texto del formulario coincide con su apariencia, necesitará un último toque de CSS personalizado para diseñar los campos de formulario. Puede encontrar las clases IDS y CSS utilizadas por el complemento para dirigir diferentes elementos en el formulario en las preguntas frecuentes. Dado que queremos apuntar a todos los campos de entrada, vaya a Customizer de tema> CSS adicional e ingrese el siguiente CSS:

#FBuilder Entrada,

#fbuilder textura,
#fbuilder seleccione {

Borde: ninguno;
Rolador: 0.5em 0.2em 0.5em 1em; Font-Size: 16px;
}
Todo lo que hace CSS es dar a nuestros campos más llenado, elimina el borde feo y aumenta el tamaño de la fuente.
¡Ahora tu formulario está listo para irse!
Creando una oferta de tiempo limitado con nuestra computadora de pago en posición, estamos listos para crear una oferta de tiempo limitado. Para hacer esto, utilizaremos una lista de automóviles desde el aspecto de la página de los registros del concesionario de automóviles para obtener un salto en los elementos de diseño que necesitamos. Luego agregaremos un módulo de tabla de precios para obtener el diseño del texto del precio que estamos buscando, junto con un temporizador inverso para crear el estimulante en un tiempo limitado. Usando la lista de automóviles para comenzar el proyecto, primero acceda a la página. Encuentre la primera fila con el listado presentado y guarde el giro en la biblioteca de la división haciendo clic en el icono “Agregar a la biblioteca” en el menú de fila. Dale un nombre a la apariencia y haga clic en “Guardar en la biblioteca”.
Ahora regrese a su página con la página de financiación y agregue una nueva sección habitual en la sección de encabezado superior. Luego agregue la fila guardada a su biblioteca haciendo clic en el inserto del círculo, haciendo clic en la pestaña Agregar en la biblioteca, luego seleccionando la fila guardada de la lista.

Actualice la configuración de la sección de la siguiente manera: ingrese la imagen de fondo izquierda del gradiente de fondo: RGBA (0.0,0,0,8) Color derecho del gradiente de fondo: #fffff coloca el gradiente sobre la imagen de fondo: Sí
Ahora mueva el módulo de texto que contiene las especificaciones del vehículo en la columna central de su fila en la parte superior de la columna derecha. Elimine el botón de informe histórico y el módulo de texto con el precio “34000 USD”. Admisión de una tabla de precios para crear texto de precio personalizado en el medio Elumed, agregue un nuevo módulo para las tablas de precios. El uso del módulo de tabla de precios le permitirá usar el diseño de precios para su oferta, sin tener que usar HTML / CSS personalizado. En la configuración de la tabla de precios, borre una de las tablas de precios que se generan por defecto para que quede una sola tabla. Luego, actualice lo siguiente: Bullet Show: Sin fondo de fondo: RGBA (255,255,255.0) luego actualice la configuración de diseño de la siguiente manera: Tabla Header Background: RGBA (0.0,0,0) Cuerpo de fuentes: Fuente de peso de Teko: Color regular del texto del cuerpo: # C10F1B Altura de la línea del cuerpo: 1.2EM Fuente de monedas y frecuencia: TEKO Moneda y frecuencia Fuente de peso: Tamaño de texto de la moneda y frecuencia: 30 PX Fuente del precio: TEKO Price Font : peso: texto regular Precio de color: # C10F1B Margen personalizado: 5 PX desde el ancho inferior: 0 PX


Ahora vuelva a la pestaña Contenido y haga clic para actualizar la configuración de configuración especificada, de la siguiente manera. Elimine el título y el subtítulo. PRECIO POR MES: 199 y agregue lo siguiente para reemplazar el texto en el cuadro de contenido: durante 36 meses
$ 2000 inactiva

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.2EM Interweaving personalizado: 20 PX hacia arriba, 0 px izquierda, 0 izquierda, 0 px en la derecha Un temporizador de conteo inverso para crear la oferta de tiempo limitado, We We We Agregará un recuento invertido en la fila con la oferta presentada. Primero agregue una nueva fila con una columna y agregue un módulo de temporizador inverso en una fila.

Tire de la nueva fila sobre la fila con la oferta presentada. Retire el revestimiento superior de la sección y retire el revestimiento superior e inferior de la nueva fila.

Ahora actualice la configuración del temporizador inverso, de la siguiente manera: Título de sincronización con recuento inverso: La transacción pronto termina Color de fondo: # C10F1B

Fuente del título: Teko Título Texto Tamaño: 50 PX Números de fuente: Teko Ancho: 500 PX Alineación del módulo: Box Shadow Center: Ver captura de pantalla
Deberá agregar un relleno superior del 5% en la fila debajo del temporizador para darle a la sombra de la caja inferior un espacio de respiración.

Ahora verifique el resultado final.