Cómo hacer una calculadora de estimación de costos usando Elementor y Element Pack
Publicado: 2022-01-11Hacer una calculadora de estimación de costos usando Elementor puede ser muy útil para su sitio web, especialmente si está ejecutando un sitio de negocios de WooCommerce o un sitio web de planificación de paquetes con muchas combinaciones de productos.
Hemos visto sitios web de tecnología, telas, cosméticos, supermercados y bancos que ofrecen una calculadora de estimación de costos en su página de inicio para ayudar a los visitantes. Es muy útil para fijar rápidamente su presupuesto y elegir lo que está comprando en la tienda.
Ahora, no es una tarea difícil construir su propia calculadora de estimación de costos utilizando Elementor ya que tiene instalado nuestro complemento Element Pack Pro. Tenemos un complemento de calculadora especial que hace que sea aún más fácil diseñar su propia calculadora con personalizaciones completas.
En este artículo, le mostraremos cómo hacerlo. ¡Vamos a empezar!
¿Tiene algún valor la Calculadora de Estimación de Costos?
Para un sitio web típico de WooCommerce, las personas suelen pasar una buena cantidad de tiempo comprando.
Más de una vez, encuentran los productos que buscan y quieren ver cuánto costarían, incluido el IVA y el envío.
A menos que tenga algo como una calculadora de estimación de costos usando Elementor, afectará a los usuarios que no encontraron una forma adecuada de estimar los precios de los productos.
Entonces, para mejorar su experiencia de usuario, puede usar nuestro complemento de calculadora de estimación de costos personalizado que le ofrece Element Pack Pro.
Entonces, para hacer la calculadora de estimación de costos, debe tener:
- Un sitio de WordPress con el generador de páginas Elementor instalado
- Complemento Element Pack Pro
- Widget de calculadora avanzada (habilitado desde el tablero)
Si todos los preparativos están hechos, podemos avanzar hacia el objetivo principal.
Haga una calculadora de estimación de costos usando Elementor y Element Pack
Diseñemos la calculadora manualmente usando el widget de Element Pack. Este será un proceso paso a paso, por lo que se recomienda seguirlo.
Ahora, comencemos-
Paso 1: Inserte la calculadora avanzada y configure los campos de la calculadora
Para hacer la calculadora de estimación de costos usando Elementor, lo primero que tenemos que hacer es obtener el widget Calculadora avanzada dentro de la página de destino.
Ante todo
Simplemente, escriba el nombre de nuestro widget en el menú de widgets dentro del editor de páginas de Elementor y arrástrelo dentro de la página. Como puede ver, primero creamos una sección para mostrar la calculadora de manera agradable en la página.
Después
Construyamos los campos de la calculadora uno por uno. Primero vienen los Productos. Haga clic en el botón Agregar elemento y comience a personalizar el campo.
Aquí, elegimos el tipo de campo "Seleccionar", establecemos una etiqueta como "Nombre del producto" e insertamos nuestros productos en el campo de opciones.
Tenga en cuenta que cada nueva línea significa una nueva opción aquí y debe usar el "|" firme antes del valor para agregarlo al cálculo.
Tome esto como el primer campo de la calculadora de estimación de costos usando Elementor.
entonces de manera similar
Iremos con exactamente la misma configuración para los campos 2 y 3. El tipo va "Seleccionar" y pondremos diferentes etiquetas para ellos con diferentes conjuntos de valores.
Estamos configurando el ancho de la columna al 33% para que quepan 3 campos en 1 fila.
para el siguiente
Hemos tomado 3 campos más a continuación para cumplir con nuestros requisitos para la calculadora de estimación de costos usando Elementor.
Aquí, el campo de cantidad es el campo de tipo Número que requiere que elija un número para la cantidad de producto que desea comprar.
Nuevamente, el campo IVA es un campo de calculadora de tipo Deshabilitado que no acepta entradas de terceros. Eso significa que es un costo fijo que se agrega al costo final del producto.
Solo tendrás que ir a la subsección Avanzado para insertar un valor predeterminado que será fijo para esta parte de la calculadora.
no te olvides de
Vaya a la pestaña de contenido del widget Calculadora avanzada y configure la alineación para el contenido. Lo mantenemos alineado a la izquierda para una mejor vista clásica.
Paso 2: fórmula para la calculadora de estimación de costos usando Elementor
Éste es el paso más importante.
Desde el comienzo de la creación de los campos del formulario hasta este paso aquí, la calculadora aún no está lista para funcionar a menos que incluyamos una fórmula.
La fórmula puede ser cualquier ecuación lógica de una amplia gama de selección. Aquí hay una lista de las fórmulas disponibles con las que puede trabajar.
De todos modos.
Hemos insertado la fórmula de trabajo para la calculadora de estimación de costos que acabamos de diseñar. Una vez que inserte la fórmula, funcionará de inmediato.
Paso 3: Otras personalizaciones a la calculadora de estimación de costos
Nuestro objetivo principal ya está logrado. Pero, la calculadora se ve simple y aburrida sin ningún tipo de color.
Entonces, ahora personalizaremos la apariencia de la calculadora usando muchas variables.
Por ahora
Haga clic en la sección Resultado y seleccione la opción " Al cambiar " para la opción Mostrar resultado . Esto significa que el resultado se formará simplemente usando la calculadora, sin necesidad de presionar ningún botón.
Luego, mostraremos el resultado en la parte inferior con la alineación del lado izquierdo y un texto personalizado para ello.
Después
Pondremos un texto en el campo inferior para mostrar en caso de error. El error puede ocurrir debido a una fórmula incorrecta o una entrada incorrecta.
Ahora hemos llegado a la última parte de la creación de un complemento de calculadora de costos usando Elementor.
Paso 4: agreguemos colores
Ahora todo lo que tiene que hacer es pasar a la parte de estilo del widget y comenzar a realizar cambios en la apariencia de acuerdo con sus necesidades.
Ante todo
Cambiaremos los parámetros de la sección Estilo de formulario ajustando el espacio de campo y el espacio de columna.
Después
Podemos cambiar el color de la etiqueta y la tipografía desde la siguiente sección para la calculadora de estimación de costos usando Elementor.
Aquí, puede optar por una fuente única para las etiquetas para hacer las cosas diferentes del resto del mercado.
en el siguiente paso
Personalizamos los campos de entrada usando un color de texto brillante, un color de fondo muy delgado, un borde delgado y algo de relleno.
También cambiamos la fuente usando la opción de tipografía para la calculadora de estimación de costos usando Elementor.
Entonces otra vez
Realizamos cambios en el texto resultante aplicando un tono de color similar para el texto y la tipografía.
Parece bastante suave hasta ahora, ¿verdad?
Y por último
El texto de error ahora tiene un nuevo color de etiqueta y está pintado en rojo para el banner.
Agregamos algo de relleno alrededor de los textos y cambiamos un poco la fuente para que coincida con el resto.
Ahora, su calculadora de estimación de costos con Elementor está lista para mostrarse.
Conclusión
Este blog tiene como objetivo permitirle usar el complemento del creador de páginas de Elementor y el Paquete de elementos para crear complementos de calculadora decentes según sus requisitos.
Con suerte, usted aprendió todo el asunto.
Gracias por acompañarnos hasta la meta.
Este blog es presentado por BdThemes.