Como usar o módulo de alternância da Divi de maneira criativa para apresentar planos de preços

Quando se trata de apresentar planos de preços em seu site, você pode dar várias voltas e criar páginas ou seções de preços absolutamente impressionantes e atraentes. Ao construir um site com Divi, você provavelmente irá para o Módulo de Tabelas de Preços. Este módulo permite adicionar rapidamente tabelas de preços e estilizá-las como quiser. Mas se você deseja adicionar mais interação a esta seção específica da sua página, você também pode usar o Módulo Alternar para mostrar os planos de preços no clique. Essa é uma ótima maneira de destacar um plano de preços específico, mantendo seu estado aberto e fechando os outros dois.

Neste tutorial, mostraremos passo a passo como criar um lindo design de tabela de preços alternada usando o Divi's Toggle Module. Depois de obter a abordagem, você será capaz de criar todos os tipos de planos de preços alternados com um clique para qualquer tipo de site que construir.

Vamos lá!

Antevisão

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

Vamos começar a criar!

Inscreva-se no nosso canal no Youtube

Adicionar nova seção

Espaçamento

Crie uma nova página ou abra uma existente usando o Divi's Visual Builder. Adicione uma nova seção à página, abra as configurações da seção e adicione algum preenchimento personalizado superior e inferior para criar algum espaço na parte superior e inferior da seção.

• Enchimento superior: 160 px
• Preenchimento inferior: 160 px

Adicionar linha # 1

Estrutura da Coluna

Quando terminar de modificar as configurações de espaçamento de seção, você pode prosseguir e adicionar uma nova linha usando a seguinte estrutura de coluna:

Adicionar Módulo de Texto

Adicionar conteúdo

Não há necessidade de fazer alterações na linha, então vá em frente e adicione um Módulo de Texto imediatamente. Insira algum conteúdo H2 de sua escolha na caixa de conteúdo do módulo.

Configurações de texto de título

Continue indo para a guia de design e altere as configurações de texto do título.

• Fonte do título 2: Didact Gothic
• Peso da fonte do cabeçalho 2: regular
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: # 000000
• Tamanho do texto do título 2: 40px
• Cabeçalho 2 espaçamento entre letras: -1 px

Adicionar Módulo Divisor

Visibilidade

Adicione um Módulo divisor logo abaixo do Módulo de texto que você adicionou e modificou nas etapas anteriores. Certifique-se de que a opção 'Mostrar divisor' do Módulo divisor esteja habilitada.

• Mostrar divisor: Sim

Cor

Continue indo para a guia de design e altere a cor do divisor.

• Cor: # 000000

Dimensionamento

Altere a largura do módulo nas configurações de dimensionamento também.

• Largura: 39%
• Alinhamento do Módulo: Centro

Espaçamento

Adicione alguma margem inferior personalizada também.

• Margem inferior: 50px

Adicionar linha # 2

Estrutura da Coluna

Terminamos de modificar a primeira linha e seus módulos. É hora de adicionar uma nova linha usando a seguinte estrutura de coluna:

Fundo Gradiente da Coluna 1

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione um fundo gradiente à coluna 1.

• Cor 1: # 00fff2
• Cor 2: rgba (255,255,255,0)
• Tipo de gradiente da coluna 1: Radial
• Direção radial da coluna 1: parte inferior direita
• Posição inicial da coluna 1: 30%
• Posição final da coluna 1: 30%

Fundo Gradiente da Coluna 2

Faça o mesmo para a segunda coluna.

• Cor 1: # fce96f
• Cor 2: rgba (255,255,255,0)
• Tipo de gradiente da coluna 2: Radial
• Direção radial da coluna 2: Superior direito
• Posição inicial da coluna 2: 40%
• Posição final da coluna 2: 40%

Fundo Gradiente da Coluna 3

Da mesma forma, adicione um fundo gradiente à terceira coluna usando as seguintes configurações:

• Cor 1: # a659ff
• Cor 2: rgba (255,255,255,0)
• Tipo de gradiente da coluna 3: Radial
• Direção radial da coluna 3: inferior
• Posição inicial da coluna 3: 30%
• Posição final da coluna 2: 30%

Dimensionamento

Quando terminar de adicionar o fundo gradiente, vá para a guia de design e altere as configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 2

Adicionar Módulo de Alternância à Coluna 1

Adicionar conteúdo

É hora de começar a criar planos de preços diferentes! Adicione um novo Módulo de Alternância à primeira coluna e insira um título. Para estilizar os diferentes elementos na caixa de conteúdo, usamos algumas tags HTML extras. Vá em frente e copie as seguintes linhas e adicione-as à guia Texto de sua caixa de conteúdo:

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

Estado

Você pode escolher se deseja que o estado do Módulo de Alternância seja aberto ou fechado. Para poder ver todas as mudanças que você fez ao longo do restante do tutorial, recomendo manter o estado 'aberto' até que você termine de modificar todas as configurações de design diferentes.

Cor de fundo

Continue indo para as configurações de fundo do Módulo Alternar e adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Configurações de ícone

Altere a cor do ícone na guia de design a seguir.

• Cor do ícone: # 000000

Alternar configurações

E modificar a cor de fundo de alternância de abertura nas configurações de alternância também.

• Abrir Alternar Cor de Fundo: rgba (255,255,255,0)

Configurações de texto do título

Em seguida, faça algumas alterações nas configurações do texto do título.

• Fonte do título: Didact Gothic
• Peso da fonte do título: negrito
• Cor do texto do título: # 000000
• Tamanho do texto do título: 3,5vw (desktop), 60px (tablet), 40px (telefone)

Configurações do corpo do texto

Modifique as configurações do corpo do texto também.

• Fonte do corpo: Didact Gothic
• Alinhamento do corpo do texto: esquerda
• Cor do corpo do texto: # 000000
• Tamanho do corpo do texto: 18 px
• Altura da linha corporal: 1,5em

Clonar Módulo Alternar Duas Vezes e Posicionar nas Duas Colunas Restantes

Quando terminar de modificar o Módulo de Alternância na coluna 1, você pode cloná-lo duas vezes e colocar as duplicatas nas duas colunas restantes.

Mudar Cópia

Certifique-se de alterar todas as cópias das duplicatas e pronto!

Antevisão

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

Pensamentos finais

Neste tutorial, mostramos uma abordagem criativa ao usar o Divi's Toggle Module para mostrar planos de preços em seu site. Esta é uma ótima maneira de interagir com os visitantes e elevar seu estilo de design. Torna mais fácil destacar um plano de preços específico em sua seção, mantendo aquele aberto e as outras duas opções fechadas. Você pode usar essa abordagem para qualquer tipo de site que estiver construindo. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!