Como fazer a Calculadora de Estimativa de Custos usando Elementor e Element Pack
Publicados: 2022-01-11Fazer uma calculadora de estimativa de custos usando o Elementor pode ser bastante útil para o seu site, especialmente se você estiver executando um site de negócios WooCommerce ou um site de planejamento de pacotes com muitas combinações de produtos.
Vimos sites de tecnologia, roupas, cosméticos, mercearias e bancos oferecendo uma calculadora de estimativa de custo em sua página inicial para ajudar os visitantes. É útil para corrigir rapidamente seu orçamento e escolher o que você está comprando na loja.
Agora, não é uma tarefa difícil criar sua própria calculadora de estimativa de custos usando o Elementor, pois você tem nosso plug-in Element Pack Pro instalado. Temos um plug-in de calculadora especial que torna ainda mais fácil projetar sua própria calculadora com personalizações completas.
Neste artigo, mostraremos como fazê-lo. Vamos começar!
A Calculadora de Estimativa de Custos tem algum valor?
Para um site típico do WooCommerce, as pessoas geralmente gastam uma quantidade razoável de tempo comprando.
Mais de uma vez, eles encontram os produtos que estão procurando e querem ver como custariam, incluindo IVA e frete.
A menos que você tenha algo como uma calculadora de estimativa de custos usando o Elementor, isso afetará os usuários que não encontraram uma maneira adequada de estimar os preços dos produtos.
Portanto, para aumentar a experiência do usuário, você pode usar nosso plug-in de calculadora de estimativa de custo personalizado trazido a você pelo Element Pack Pro.
Então, para fazer a calculadora de estimativa de custos, você deve ter-
- Um site WordPress com o construtor de páginas Elementor instalado
- Plugin Element Pack Pro
- Widget Calculadora avançada (ativado no painel)
Se todos os preparativos forem feitos, podemos avançar em direção ao objetivo principal.
Faça a Calculadora de Estimativa de Custos usando Elementor e Element Pack
Vamos projetar a calculadora manualmente usando o widget do Element Pack. Este será um processo passo-a-passo, portanto, recomendamos que você acompanhe.
Agora, vamos começar-
Etapa 1: Inserir os campos da calculadora avançada e configurar a calculadora
Para fazer a calculadora de estimativa de custos usando o Elementor, a primeira coisa que precisamos fazer é obter o widget Calculadora Avançada dentro da página de destino.
Em primeiro lugar
Simplesmente, digite o nome do nosso widget no menu widget dentro do editor de páginas Elementor e arraste-o para dentro da página. Como você pode ver, fizemos uma seção primeiro para exibir a calculadora bem na página.
Depois disso
Vamos construir os campos da calculadora um por um. Primeiro vem os Produtos. Clique no botão Adicionar Item e comece a personalizar o campo.
Aqui, escolhemos o tipo de campo “Selecionar”, definimos um rótulo como “Nome do produto” e inserimos nossos produtos no campo de opções.
Observe que cada nova linha significa uma nova opção aqui e você deve usar o “|” sinal antes do valor para adicioná-lo ao cálculo.
Tome isso como o primeiro campo da calculadora de estimativa de custos usando o Elementor.
Então Da mesma forma
Estaremos usando exatamente as mesmas configurações para o 2º e 3º campos. O tipo vai “Selecionar” e colocaremos rótulos diferentes para eles com conjuntos de valores diferentes.
Estamos definindo a largura da coluna para 33% para caber 3 campos em 1 linha.
A seguir
Pegamos mais 3 campos abaixo para atender aos nossos requisitos para a calculadora de estimativa de custos usando o Elementor.
Aqui, o campo de quantidade é o campo Tipo de número que exige que você escolha um número para a quantidade de produto que deseja comprar.
Novamente, o campo IVA é um campo de calculadora do tipo Desativado que não aceita entradas de terceiros. Ou seja, é um custo fixo a ser adicionado ao custo final do produto.
Você só terá que ir para a subseção Avançado para inserir um valor padrão que será corrigido para esta parte da calculadora.
Não se esqueça de
Vá para a guia de conteúdo do widget Calculadora avançada e defina o alinhamento do conteúdo. Estamos mantendo-o alinhado à esquerda para uma melhor visão clássica.
Etapa 2: Fórmula para a calculadora de estimativa de custos usando o Elementor
Este e o passo mais importante.
Desde o início da criação dos campos do formulário até esta etapa aqui, a calculadora ainda não está pronta para funcionar, a menos que incluamos uma fórmula.
A fórmula pode ser qualquer equação lógica de uma ampla gama de seleção. Aqui está uma lista da fórmula disponível com a qual você pode trabalhar.
De qualquer forma.
Inserimos a fórmula de trabalho para a calculadora de estimativa de custos que acabamos de projetar. Depois de inserir a fórmula, ela funcionará imediatamente.
Etapa 3: outras personalizações para a calculadora de estimativa de custos
Nosso principal objetivo já foi alcançado. Mas, a calculadora parece simples e sem graça, sem cores.
Então, agora vamos personalizar a aparência da calculadora usando muitas variáveis.
Por enquanto
Clique na seção Result e selecione a opção “ On Change ” para a opção Result Show . Isso significa que o resultado será formado apenas usando a calculadora, sem necessidade de apertar nenhum botão.
Em seguida, mostraremos o resultado na parte inferior com alinhamento do lado esquerdo e um texto personalizado para ele.
Depois disso
Colocaremos algum texto no campo inferior para exibir em caso de erro. O erro pode ocorrer devido à fórmula errada ou entrada errada.
Agora chegamos à última parte da criação de um plugin de calculadora de custos usando o Elementor.
Etapa 4: vamos adicionar cores
Agora tudo o que você precisa fazer é passar para a parte de estilo do widget e começar a fazer alterações na aparência de acordo com suas necessidades.
Em primeiro lugar
Alteraremos os parâmetros da seção Estilo do formulário ajustando o espaço do campo e o espaço da coluna.
Depois disso
Podemos alterar a cor e a tipografia do rótulo da próxima seção para a calculadora de estimativa de custo usando o Elementor.
Aqui, você pode optar por uma fonte exclusiva para os rótulos para tornar as coisas diferentes do resto do mercado.
Na próxima etapa
Personalizamos os campos de entrada usando uma cor de texto brilhante, uma cor de fundo muito fina, uma borda fina e algum preenchimento.
Também alteramos a fonte usando a opção de tipografia para a calculadora de estimativa de custos usando o Elementor.
Então de novo
Fizemos alterações no texto do resultado aplicando um tom de cor semelhante ao texto e à tipografia.
Parece bem suave até agora, certo?
E por fim
O texto do erro agora tem uma nova cor de rótulo e é pintado em vermelho para o banner.
Adicionamos alguns preenchimentos ao redor dos textos e alteramos um pouco a fonte para combinar com o resto.
Agora, sua calculadora de estimativa de custos usando o Elementor está pronta para exibição.
Conclusão
Este blog tem como objetivo permitir que você use o plug-in do construtor de páginas Elementor e o Element Pack para criar plug-ins de calculadora decentes de acordo com seus requisitos.
Espero que você tenha aprendido tudo.
Obrigado por ficar conosco até a linha de chegada.
Este blog é apresentado por BdThemes.