Como Fazer Uma Calculadora Para Um Site Sem Programador. Parte 1: Construtor De Calculadora

Índice:

Como Fazer Uma Calculadora Para Um Site Sem Programador. Parte 1: Construtor De Calculadora
Como Fazer Uma Calculadora Para Um Site Sem Programador. Parte 1: Construtor De Calculadora

Vídeo: Como Fazer Uma Calculadora Para Um Site Sem Programador. Parte 1: Construtor De Calculadora

Vídeo: Como Fazer Uma Calculadora Para Um Site Sem Programador. Parte 1: Construtor De Calculadora
Vídeo: Como Criar uma SIMPLES CALCULADORA com HTML, CSS e JAVASCRIPT 2024, Maio
Anonim

Normalmente, a criação de um widget de calculadora para um site requer um programador pago e um orçamento de suporte técnico. Recentemente, no entanto, surgiram pelo menos três opções sobre como economizar tempo e dinheiro na criação e manutenção de uma calculadora: vamos começar com a mais simples e acessível - um criador de calculadora gratuito que o ajudará a montar uma calculadora visualmente - assim como preencher um perfil em uma rede social.

Um exemplo de calculadora criada sem conhecimento de tecnologia e contratação de programadores
Um exemplo de calculadora criada sem conhecimento de tecnologia e contratação de programadores

É necessário

Laptop ou computador, qualquer navegador, 10-30 minutos, caixa de correio ou conta de rede social (Facebook, Vkontakte, Google+, UID), além de uma compreensão de como sua calculadora deve ser

Instruções

Passo 1

Para começar a montar e futuramente administrar sua calculadora, nos registramos no serviço uCalc.pro via correio ou uma das populares redes sociais.

Após o registro, você receberá um e-mail com conselhos sobre o design da calculadora por correio
Após o registro, você receberá um e-mail com conselhos sobre o design da calculadora por correio

Passo 2

Após o cadastro, você será direcionado para sua conta pessoal, onde suas calculadoras serão armazenadas. Aqui você pode escolher um modelo pronto ou começar a montar a calculadora do zero.

Ao clicar no ícone
Ao clicar no ícone

etapa 3

Depois de escolher a favor de um modelo ou automontagem, um editor visual abrirá na sua frente: arrastando itens - uma lista, controle deslizante, marca de seleção, caixa de seleção, campos de contato ou um botão - da coluna à esquerda, você pode montar uma calculadora.

Os elementos podem ser colocados lado a lado (vários em uma fileira) ou uns sob os outros
Os elementos podem ser colocados lado a lado (vários em uma fileira) ou uns sob os outros

Passo 4

Passe o mouse sobre qualquer elemento com o mouse e você verá ícones de configuração - neles você pode definir tamanhos, tornar um elemento obrigatório, definir os nomes dos campos da lista e alterar seus locais. E clicando no quadro verde claro que aparece ao redor do elemento, você pode reorganizá-lo acima ou abaixo do resto das peças da calculadora.

Opcionalmente, você pode excluir qualquer item clicando nele e pressionando
Opcionalmente, você pode excluir qualquer item clicando nele e pressionando

Etapa 5

Você pode alterar a cor e o tamanho dos rótulos simplesmente destacando o trecho de texto desejado. É melhor acrescentar explicações aos textos: se estamos falando de largura, acrescente "metros" ou "mm", sobre preços "rublos", "rublos por metro" e assim por diante.

Para mudar a cor do texto, clique no círculo cinza e selecione uma cor da paleta
Para mudar a cor do texto, clique no círculo cinza e selecione uma cor da paleta

Etapa 6

Para alterar a cor de fundo ou alterar a cor do controle deslizante e da marca de seleção, use os ícones acima da calculadora. O ícone da esquerda é responsável pela cor de fundo - é melhor pintá-lo com as cores da página do seu site. O ícone do meio são as cores dos elementos: você pode escolher entre 10 esquemas prontos.

Você também pode alterar o estilo da fonte clicando no ícone à direita - atualmente existem 4 opções disponíveis
Você também pode alterar o estilo da fonte clicando no ícone à direita - atualmente existem 4 opções disponíveis

Etapa 7

Para maior clareza, você pode adicionar imagens à calculadora: uma imagem pode ser adicionada ao cabeçalho e a qualquer um dos elementos da calculadora. Para isso, selecione o ícone "Imagem" no painel esquerdo, arraste-o até o local desejado e, em seguida, clicando no elemento, carregue a imagem do seu computador.

Para fazer com que a calculadora carregue mais rápido em seu site, use imagens com o mínimo
Para fazer com que a calculadora carregue mais rápido em seu site, use imagens com o mínimo

Etapa 8

Para especificar uma gama de preços para serviços e quaisquer outros parâmetros numéricos, mude para a guia "Fórmula". Você verá um diagrama da calculadora no qual pode inserir os valores de que precisa.

Qualquer número pode representar a quantidade e o peso ou, por exemplo, a distância
Qualquer número pode representar a quantidade e o peso ou, por exemplo, a distância

Etapa 9

Cada elemento da calculadora no diagrama recebe uma letra. Substituindo letras na caixa de fórmula à esquerda e adicionando sinais matemáticos, você pode criar uma ou mais fórmulas: por exemplo, se você precisa dar um preço com ou sem um desconto, faça duas fórmulas adicionando a multiplicação por um número menor que 1 no segundo (por exemplo, 0,8 significa um desconto de 20% e assim por diante).

A segunda ou terceira fórmula pode ser definida se você quiser mostrar separadamente o preço do material e da obra, e assim por diante
A segunda ou terceira fórmula pode ser definida se você quiser mostrar separadamente o preço do material e da obra, e assim por diante

Etapa 10

Se você deseja receber solicitações de clientes por e-mail ou SMS, volte para a aba "Design", clique no botão de sua calculadora. Você pode especificar nas configurações. Lá você também encontrará as configurações de pagamento - se desejar aceitar pré-pagamento via Yandex. Checkout.

Aqui você também pode definir a aparência do botão (oval, quadrado, etc.) e a cor adicional do botão ao passar o mouse sobre ele
Aqui você também pode definir a aparência do botão (oval, quadrado, etc.) e a cor adicional do botão ao passar o mouse sobre ele

Etapa 11

Para enviar ao cliente o resultado do cálculo ou outras informações (código promocional, link, mensagem “Pedido aceito”), clique em “Notificar cliente” nas configurações do botão e preencha o modelo da carta. Para coletar os contatos do cliente, adicione o elemento "campo" à calculadora e especifique "e-mail", "número de telefone" e assim por diante nas configurações.

Todos os dados pessoais dos clientes são transmitidos via SLL - ou seja, ninguém pode interceptá-los
Todos os dados pessoais dos clientes são transmitidos via SLL - ou seja, ninguém pode interceptá-los

Etapa 12

Então, a calculadora está pronta. Para colocá-lo no site, clique no botão "Salvar" no canto direito - e uma janela com um código de widget pronto aparecerá na sua frente. Copie o código e cole-o em uma página nova ou existente no site.

O código da calculadora não pode ser copiado do seu site e colado no de outra pessoa
O código da calculadora não pode ser copiado do seu site e colado no de outra pessoa

Etapa 13

Se você não está confiante em suas habilidades, use as instruções prontas para adicionar uma calculadora. O site uCalc ilustrou dicas para instalar uma calculadora no CMS Wordpress, Joomla, Drupal, NetCat, construtores de sites uKit, uCoz, Tilda e Wix e outras plataformas conhecidas. Se você não encontrou sua plataforma na lista, abra qualquer descrição e siga a analogia.

As instruções estão na seção de perguntas frequentes
As instruções estão na seção de perguntas frequentes

Etapa 14

Se você decidir mudar alguma coisa depois de instalá-la no site (design, preços, número de elementos, etc.), a calculadora que você criou pode ser editada no construtor e salva. As alterações feitas serão exibidas automaticamente no site.

Recomendado: