Baixe GRÁTIS Mensal / Anual de Design de Alternância de Preços para Divi

Quando você decide apresentar planos de preços em seu site, há algumas maneiras de abordar isso. Uma das abordagens mais populares que existe é a criação de uma alternância de preços mensal / anual que permite aos usuários navegar facilmente pelos diferentes planos de preços com base na forma como escolhem o faturamento. No tutorial de hoje, mostraremos como fazer a alternância de preços funcionar com Divi. Vamos recriar um exemplo impressionante do zero e 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

Móvel

Baixe o Design de Alternância de Preços Mensal / Anual GRATUITAMENTE

Para colocar as mãos no design de alternância de preços mensal / anual grátis, 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

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.

DOWNLOAD

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!

Vamos começar a recriar!

Adicionar Seção # 1

Cor de fundo

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

• Cor de fundo: # ffad72

Divisória Inferior

Vá para a guia de design e insira uma divisória inferior a seguir.

• Estilo do divisor: Encontrar na lista
• Altura do divisor: 10vw

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior também.

• Preenchimento superior: 5vw
• Preenchimento inferior: 10vw

ID CSS

E adicione um CSS ID à seção.

• ID CSS: seção de alternância

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 30vw (desktop), 45vw (tablet), 50vw (telefone)
• Largura máxima: 100%

Espaçamento

A seguir, livre-se do preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Fronteira

E modifique as configurações de borda também.

• Cantos arredondados: 50vw (todos os cantos)
• Largura da borda: 1px
• Cor da borda: # e8e8e8

Exibição

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

display: flex;

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! O único módulo de que precisamos na coluna 1 é um Módulo de Texto. Insira algum conteúdo de sua escolha.

Configurações de texto

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

• Fonte do texto: Montserrat
• Tamanho do texto: 1vw (desktop), 1,5vw (tablet), 2vw (telefone)
• Alinhamento de Texto: Centro
• Cor do Texto: Claro

Espaçamento

Modifique os valores de preenchimento superior e inferior em diferentes tamanhos de tela também.

• Preenchimento superior: 2vw (desktop), 3vw (tablet), 4vw (telefone)
• Preenchimento inferior: 2vw (desktop), 3vw (tablet), 4vw (telefone)

CSS ID e classe

E atribua um CSS ID e classe ao módulo de texto.

• ID CSS: pricing-plan-item-1
• Classe CSS: preço-item-cursor

Clonar Módulo de Texto e Colocar Duplicado na Coluna 2

Depois de concluir o Módulo de texto na coluna 1, você pode cloná-lo uma vez e colocar a duplicata na coluna 2.

Mudar o Conteúdo

Certifique-se de alterar o conteúdo.

Alterar ID CSS

E use um código CSS diferente.

• CSS ID: pricing-plan-item-2

Adicionar Seção # 2

Cor de fundo

Para a segunda seção. Adicione a seguinte cor de fundo:

• Cor de fundo: # 6b63dd

Espaçamento

Em seguida, vá para as configurações de espaçamento de seção e adicione alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Enchimento superior: 7vw
• Preenchimento inferior: 15vw
• Preenchimento esquerdo: 21vw (desktop), 10vw (tablet e telefone)
• Preenchimento direito: 21vw (desktop), 10vw (tablet e telefone)

ID CSS

Adicione um CSS ID à seção também.

• ID CSS: preços-1

Adicionar linha # 1

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Fronteira

Em seguida, vá para as configurações de espaçamento e aplique as seguintes configurações de borda:

• Largura da borda direita: 1px
• Largura da borda esquerda: 1px
• Largura da borda superior: 0 px
• Largura da borda inferior: 0 px
• Cor da borda: rgba (255,255,255,0)

Exibição

Certifique-se de que as colunas apareçam lado a lado em tamanhos de tela menores, adicionando uma única linha de código CSS ao elemento principal da linha.

display: flex;

Configurações da coluna 2

Espaçamento

Depois de concluir as configurações gerais de linha, abra as configurações da coluna 2 e adicione algum preenchimento personalizado superior e inferior.

• Enchimento superior: 1vw
• Preenchimento inferior: 4vw

Fronteira

Use uma borda na coluna 2 também.

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

Configurações da coluna 3

Espaçamento

Passe para as configurações da terceira coluna e adicione alguns valores de preenchimento personalizados.

• Enchimento superior: 1vw
• Preenchimento inferior: 4vw

Adicionar divisor à coluna 1

Visibilidade

É hora de começar a adicionar módulos! O primeiro módulo e único que precisamos na coluna 1 é um Módulo Divisor. Certifique-se de desativar a opção 'Mostrar divisor'. Precisamos apenas deste módulo para garantir que o resto do design permaneça intacto.

• Mostrar divisor: Não

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar conteúdo H3

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

Configurações de texto H3

Altere as configurações de texto H3 da seguinte forma:

• Fonte do título 3: Montserrat
• Alinhamento de Texto Título 3: Centro
• Cor do texto do título 3: #ffffff
• Tamanho do texto do título 3: 2vw (desktop), 3vw (tablet), 3,5vw (telefone)
• Cabeçalho 3 espaçamento entre letras: -1 px

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

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

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: ultraleve
• Cor do texto: #ffffff
• Tamanho do texto: 2vw (desktop), 3vw (tablet), 3,5vw (telefone)
• Altura da linha de texto: 1em
• Alinhamento de Texto: Centro

Espaçamento

Adicione alguma margem superior personalizada também.

• Margem superior: 0,5vw

Clonar ambos os módulos e colocar duplicatas na coluna 3

Depois de concluir os módulos na coluna 2, você pode clonar ambos e colocar as duplicatas na coluna 3.

Mudar o Conteúdo

Certifique-se de alterar o conteúdo de cada duplicata.

Adicionar linha # 2

Estrutura da Coluna

Passe para a segunda linha da seção 2! Escolha a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Fronteira

E aplique uma borda.

• Largura da borda superior: 0 px
• Largura da borda direita: 1px
• Largura da borda inferior: 1 px
• Largura da borda esquerda: 1px
• Cor da borda: # 8882dd

Exibição

Certifique-se de que as colunas apareçam lado a lado em tamanhos de tela menores, adicionando uma única linha de código CSS ao elemento principal da linha.

display: flex;

Configurações da coluna 1

Espaçamento

Continue abrindo as configurações da coluna 1 e aplique alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 3vw (desktop), 5vw (tablet e telefone)
• Preenchimento inferior: 3vw (desktop), 5vw (tablet e telefone)

Fronteira

Adicione uma borda direita à coluna também.

• Largura da borda direita: 1px
• Cor da borda direita: # 8882dd

Configurações da coluna 2

Espaçamento

Passe para a segunda coluna e altere as configurações de espaçamento.

• Preenchimento superior: 3vw (desktop), 5vw (tablet e telefone)
• Preenchimento inferior: 3vw (desktop), 5vw (tablet e telefone)

Fronteira

Adicione uma borda direita a seguir.

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

Configurações da coluna 3

Espaçamento

Em seguida, abra as configurações da coluna 3 e adicione alguns valores de preenchimento superior e inferior personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 3vw (desktop), 5vw (tablet e telefone)
• Preenchimento inferior: 3vw (desktop), 5vw (tablet e telefone)

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Depois de concluir as configurações de linha e coluna, é hora de começar a adicionar módulos. Adicione um Módulo de Texto à coluna 1 e insira algum conteúdo de sua escolha.

Configurações de texto

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

• Fonte do texto: Montserrat
• Cor do texto: #ffffff
• Tamanho do texto: 1vw (desktop), 1,5vw (tablet), 2vw (telefone)
• Alinhamento de Texto: Centro

Adicionar Módulo de Texto à Coluna 2

Adicionar símbolo à caixa de conteúdo

Na segunda coluna, precisaremos de outro Módulo de Texto. Adicione o símbolo '✓' à caixa de conteúdo.

Configurações de texto

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

• Cor do texto: # ffad72
• Tamanho do texto: 2vw (desktop), 3vw (tablet), 4vw (telefone)
• Altura da linha de texto: 1em
• Alinhamento de Texto: Centro

Clonar Módulo de Texto e Colocar Duplicado na Coluna 3

Depois de concluir o Módulo de texto na coluna 2, você pode cloná-lo e colocar a duplicata na coluna 3.

Símbolo alternativo e cor do texto

Dependendo do recurso que você está apresentando, você pode querer alterar o símbolo para '✗'. Use uma cor de texto diferente também.

• Cor do texto: #ffffff

Clone Row quantas vezes quiser

Depois de concluir a linha inteira, você pode cloná-la quantas vezes quiser, dependendo de quantos recursos deseja mostrar.

Adicionar linha # 3

Estrutura da Coluna

A última linha que adicionaremos à segunda seção contém a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Fronteira

Adicione uma borda também.

• Largura da borda superior: 0 px
• Largura da borda inferior: 0 px
• Largura da borda direita: 1px
• Largura da borda esquerda: 1px
• Cor da borda: rgba (255,255,255,0)

Exibição

E certifique-se de que as colunas apareçam lado a lado em tamanhos de tela menores, adicionando uma única linha de código CSS ao elemento principal da linha.

display: flex;

Configurações da coluna 2 e 3

Espaçamento

Continue adicionando alguma margem superior às colunas 2 e 3.

• Preenchimento superior: 4vw

Borda da coluna 2

Adicione uma borda direita à coluna 2 também.

• Largura da borda direita: 1px
• Cor da borda direita: #eaeaea

Clone o módulo divisor e coloque-o na coluna 1 da nova linha

Clone o Módulo Divisor que você pode encontrar na primeira linha da seção e coloque a duplicata na primeira coluna de sua nova linha.

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

Continue adicionando um Módulo de Botão à coluna 2 e insira uma cópia de sua escolha.

Alinhamento

Modifique o alinhamento do botão na guia de design.

• Alinhamento do botão: Centro

Configurações de botão

E altere as configurações do botão da seguinte forma:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 1,5vw (tablet), 2vw (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # ffad72
• Largura da borda do botão: 0 px

• Raio da borda do botão: 50vw
• Fonte do botão: Montserrat

Espaçamento

Adicione alguns valores de preenchimento personalizados ao Módulo de botão também.

• Preenchimento superior: 1vw (desktop), 1,5vw (tablet e telefone)
• Preenchimento inferior: 1vw (desktop), 1,5vw (tablet e telefone)
• Preenchimento esquerdo: 4vw (desktop), 6vw (tablet e telefone)
• Preenchimento direito: 4vw (desktop), 6vw (tablet e telefone)

Clonar Módulo de Botão e Colocar Duplicado na Coluna 3

Depois de concluir o Módulo de botão na coluna 2, você pode cloná-lo e colocar a duplicata na coluna 3.

Clone Seção # 2

Continue clonando toda a segunda seção. Certifique-se de alterar os valores de preço nos módulos de texto para que correspondam às opções de faturamento anual. Esta é a seção que aparecerá quando alguém clicar em 'faturamento anual'.

Alterar o ID CSS e adicionar classe CSS

Em seguida, altere o ID CSS da seção e adicione uma classe CSS também.

• ID CSS: preços-2
• Classe CSS: hide-section-2

Adicionar nova linha de uma coluna ao topo da seção # 1

A única coisa que falta fazer é adicionar o código CSS e jQuery para fazer a funcionalidade funcionar. Para fazer isso, adicionaremos uma nova linha no topo da seção 1.

Adicionar Módulo de Código # 1 com Código CSS

Adicione um primeiro Módulo de Código e insira as seguintes linhas de código CSS:

<style>
.pricing-item-cursor {
cursor: pointer;
}

.hide-section-2 {
display: none;
}

.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

Adicione o Módulo de Código 2 com o Código JQuery

Adicione outro Módulo de Código logo abaixo do anterior, insira o código jQuery abaixo entre as tags de script e pronto!

jQuery(function($){
  
$('#pricing-plan-item-1').addClass('active-pricing-plan');

$('[id*="pricing-plan-item"]').click(function() {

var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect  = $('#' + selector);

  
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
  
$pricingselect.show()
  
$('#toggle-section').show();
  
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');

});
});

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

Móvel

Pensamentos finais

Nesta postagem, mostramos como criar um design de alternância de preços mensal / anual com Divi. Essa é uma ótima maneira de adicionar interação aos seus planos de preços. Além de aplicar a técnica de clique, também criamos um belo plano de preços de grade que permite enfatizar quais recursos estão incluídos em quais planos. Você também pode baixar o arquivo JSON gratuitamente. Se você tiver dúvidas ou sugestões, fique à vontade para 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.