Como criar cálculos automáticos de preços com Divi (usando JQuery)

Publicados: 2019-10-03

Algumas pessoas hesitam em apresentar os preços dos serviços em seus sites. Mas por mais que assuste alguns visitantes, também mostra confiança e expertise. Ser transparente com seus preços ajuda a atrair os clientes certos com um orçamento com o qual você pode trabalhar. No tutorial de hoje, mostraremos como criar um design de cálculo de preço impressionante que você pode usar em seu próximo projeto Divi. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

cálculos de preços

Móvel

cálculos de preços

Baixe o Layout de Cálculos de Preço GRATUITAMENTE

Para colocar as mãos no layout de cálculo de preço gratuito, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos
Download de graça

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Não se esqueça de adicionar o código JQuery ao seu site também! Você pode encontrar o código no final deste tutorial.

Vamos começar a recriar!

Adicionar Seção # 1

Cor de fundo

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e altere a cor de fundo.

  • Cor de fundo: # f8c5ac

cálculos de preços

Divisória Inferior

Adicione uma divisória inferior à seção seguinte.

  • Estilo do divisor: Encontrar na lista
  • Divider Flip: Vertical

cálculos de preços

Espaçamento

Adicione um pouco de preenchimento inferior também.

  • Preenchimento inferior: 130px

cálculos de preços

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

cálculos de preços

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo H2

Adicione o primeiro Módulo de Texto à sua coluna e insira algum conteúdo H2 de sua escolha.

cálculos de preços

Configurações de texto H2

Vá para a guia de design e altere as configurações de texto H2 de acordo:

  • Fonte do título 2: Montserrat
  • Cabeçalho 2 Peso da fonte: Semi negrito
  • Alinhamento de Texto do Título 2: Centro
  • Cor do texto do título 2: # 0f1c4d
  • Tamanho do texto do título 2: 57 px (desktop), 35 px (tablet), 30 px (telefone)
  • Cabeçalho 2 espaçamento entre letras: -2 px

cálculos de preços

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo

Adicione outro Módulo de Texto logo abaixo do anterior e insira algum conteúdo de sua escolha.

cálculos de preços

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

  • Fonte do texto: Montserrat
  • Alinhamento de Texto: Centro
  • Cor do texto: # 0f1c4d
  • Tamanho do texto: 22 px (desktop), 18 px (tablet), 16 px (telefone)

cálculos de preços

Adicionar Módulo Divisor à Coluna

Visibilidade

O próximo e último módulo necessário nesta coluna é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

  • Mostrar divisor: Sim

cálculos de preços

Linha

Vá para a guia de design e mude a cor da linha para branco.

  • Cor da linha: #ffffff

cálculos de preços

Dimensionamento

Modifique a largura do divisor também.

  • Largura: 12%

cálculos de preços

Adicionar Seção # 2

Cor de fundo

Vamos para a próxima parte do design! Adicione uma nova seção e altere a cor de fundo.

  • Cor de fundo: # 0f1c4d

cálculos de preços

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior a seguir.

  • Enchimento superior: 70 px
  • Preenchimento inferior: 130px

cálculos de preços

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

cálculos de preços

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a largura em tamanhos de tela menores.

  • Largura: 80% (desktop), 90% (tablet e telefone)

cálculos de preços

Espaçamento

Adicione um pouco de preenchimento inferior personalizado a seguir.

  • Preenchimento inferior: 70 px (desktop), 20 px (tablet), 0 px (telefone)

cálculos de preços

Fronteira

Adicione uma borda inferior à linha também.

  • Largura da borda inferior: 1 px
  • Cor da borda inferior: #ffffff

cálculos de preços

Exibição

E, por último, para garantir que todas as colunas sejam exibidas uma ao lado da outra, vamos adicionar uma linha de código CSS ao elemento principal da linha. 

display: flex;

cálculos de preços

Adicionar Módulo Blurb à Coluna 1

Selecione o ícone

É hora de começar a adicionar módulos! Adicione um Módulo Blurb à coluna 1 e selecione um ícone de sua escolha.

cálculos de preços

Configurações de ícone padrão

Vá para a guia de design e altere as configurações do ícone de acordo:

  • Cor do ícone: # f7f7f7
  • Ícone de círculo: Sim
  • Ícone de círculo: # f8c5ac
  • Posicionamento do ícone: topo
  • Use o tamanho da fonte do ícone: Sim
  • Tamanho da fonte do ícone: 96 px (área de trabalho), 20 px (tablet e telefone)

cálculos de preços

Configurações do ícone de pairar

Modifique a cor do ícone ao passar o mouse.

  • Cor do ícone: # 000000

cálculos de preços

ID CSS

Insira um ID CSS também.

  • ID CSS: preço-item-clique-1

cálculos de preços

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar conteúdo H3

Vamos para a segunda coluna! Adicione o primeiro Módulo de Texto e insira algum conteúdo H3.

cálculos de preços

Configurações de texto H3

Vá para a guia de design e altere as configurações de texto H3 de acordo:

  • Fonte do título 3: Montserrat
  • Cabeçalho 3 Peso da fonte: Semi negrito
  • Cor do texto do título 3: # f8c5ac
  • Tamanho do texto do título 3: 40 px (desktop), 25 px (tablet), 18 px (telefone)
  • Cabeçalho 3 espaçamento entre letras: -1 px
  • Altura da linha do título 3: 1.1em

cálculos de preços

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

Adicione outro Módulo de Texto à coluna 2 com algum conteúdo de sua escolha.

cálculos de preços

Configurações de texto

Vá para a guia de design e altere as configurações de texto.

  • Fonte do texto: Montserrat
  • Peso da fonte do texto: ultraleve
  • Cor do texto: # f8c5ac
  • Tamanho do texto: 23 px (desktop), 18 px (tablet), 14 px (telefone)
  • Espaçamento entre letras do texto: -1px
  • Altura da linha de texto: 1.1em

cálculos de preços

Adicionar Módulo de Texto à Coluna 3

Adicionar preço à caixa de conteúdo

Vamos para a terceira coluna! Adicione um Módulo de Texto e coloque o preço na caixa de conteúdo.

cálculos de preços

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

  • Fonte do texto: Montserrat
  • Peso da fonte do texto: pesado
  • Alinhamento de Texto: Centro
  • Cor do texto: #ffffff
  • Tamanho do texto: 40 px (desktop), 25 px (tablet), 18 px (telefone)

cálculos de preços

CSS ID e classe

Vá para a guia avançada e adicione um ID CSS e uma classe CSS.

  • ID CSS: preço 1
  • Classe CSS: preço-ocultar-primeiro

cálculos de preços

Clone Row quantas vezes forem necessárias

Depois de concluir a linha e todos os módulos nela contidos, você pode clonar a linha quantas vezes desejar.

cálculos de preços

Alterar IDs CSS do Módulo Blurb duplicado

Altere o ID CSS de cada novo Módulo Blurb de acordo:

  • Módulo 1 do Blurb: preço-item-clique-1
  • Módulo 2 do Blurb: preço-item-clique-2
  • Módulo 3 do Blurb: preço-item-clique-3
  • …

cálculos de preços

Alterar preço de módulo de texto duplicado e IDs CSS

Faça o mesmo para o Módulo de texto de preço na terceira coluna de cada linha.

  • Preço 1: preço 1
  • Preço 2: preço 2
  • Preço 3: preço 3
  • …

cálculos de preços

Adicionar nova linha

Estrutura da Coluna

Adicione outra linha à sua seção usando a seguinte estrutura de coluna:

cálculos de preços

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a largura em tamanhos de tela menores.

  • Largura: 80% (desktop), 90% (tablet e telefone)

cálculos de preços

Exibição

Para garantir que todas as colunas apareçam lado a lado em tamanhos de tela menores, também adicionaremos uma única linha de código CSS ao elemento principal da linha. 

display: flex;

cálculos de preços

Adicionar Módulo de Código à Coluna 1

Insira o código CSS

Continue adicionando um Módulo de Código à primeira coluna da linha e insira as seguintes linhas de código CSS: 

<style>
.price-hide-first {
display: none;
}

.price-item-active .et-pb-icon {
color: black !important;
}
</style>

cálculos de preços

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Passe para a segunda coluna e adicione um novo Módulo de Texto com algum conteúdo de sua escolha.

cálculos de preços

Configurações de texto

Altere as configurações de texto de acordo:

  • Fonte do texto: Montserrat
  • Peso da fonte do texto: ultraleve
  • Cor do texto: # f8c5ac
  • Tamanho do texto: 23 px (desktop), 18 px (tablet), 14 px (telefone)
  • Espaçamento entre letras do texto: -1px
  • Altura da linha de texto: 1.1em

cálculos de preços

Adicionar Módulo de Texto Vazio à Coluna 3

Deixe a caixa de conteúdo vazia

Passe para a próxima e última coluna. Adicione um Módulo de Texto e certifique-se de que a caixa de conteúdo permaneça vazia.

cálculos de preços

Configurações de texto

Vá para a guia de design e altere as configurações de texto da seguinte forma:

  • Fonte do texto: Montserrat
  • Peso da fonte do texto: pesado
  • Alinhamento de Texto: Centro
  • Cor do texto: #ffffff
  • Tamanho do texto: 40 px (desktop), 25 px (tablet), 18 px (telefone)

cálculos de preços

ID CSS

Conclua as configurações do módulo adicionando um ID CSS.

  • ID CSS: total-price-cal

cálculos de preços

Adicionar JQuery às opções do tema Divi

Vá para a guia Integração

Agora que completamos o design, é hora de fazer a funcionalidade funcionar usando algum código JQuery. Se você deseja adicionar os cálculos de preço a apenas uma página, você pode colocar o código em um Módulo de Código. Se, no entanto, você estiver usando-o em várias páginas, vá para as Opções do tema Divi e selecione a guia de integração.

cálculos de preços

Adicionar código JQuery a tags de cabeçalho

Insira as seguintes linhas de código JQuery entre as tags de script e pronto: 

jQuery(function($){
  $('[id*="price-item-click"]').click(function() {
    var selector = $(this).attr('id').replace('-item-click', '');
    var $price   = $('#' + selector);
    var sum = 0;
    $price.toggle();
    $price.toggleClass('price-active');
    $(this).toggleClass('price-item-active');
    $('.price-active').each(function(){
    sum += parseFloat($(this).text().replace(/\D/g,''));
    });
    if (sum > 0){
    $("#total-price-cal").show();
        $("#total-price-cal").text("$" + sum + "k");
    }
    else {
    $("#total-price-cal").hide();
    }
  });
});

cálculos de preços

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

cálculos de preços

Móvel

cálculos de preços

Pensamentos finais

Neste post, mostramos como criar um design de cálculo de preço impressionante com Divi. Essa é uma ótima maneira de mostrar aos visitantes a que preço seus serviços começam e ajuda você a atrair o público certo. Você pode usar essa abordagem em qualquer projeto de cálculo de preço que criar para seu próximo projeto Divi! Se você tiver dúvidas ou sugestões, certifique-se de deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.