Transformando colunas em planos de preços com Divi
Publicados: 2019-08-01As novas opções de coluna do Divi trouxeram inúmeras novas possibilidades de design para nossos fluxos de trabalho. Eles ajudam a unir vários módulos sem ter que tocar em nenhuma linha de código CSS. Neste post, vamos transformar as colunas em planos de preços usando apenas as opções integradas do Divi. Também vamos brincar com as opções de transformação de foco de coluna para obter alguns efeitos de foco impressionantes. Você também poderá baixar o 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 Layout dos Planos de Preços da Coluna GRATUITAMENTE
Para colocar as mãos no layout dos planos de preços de coluna gratuitos, 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.
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!
Vamos começar a recriar!
Inscreva-se no nosso canal no Youtube
Adicionar nova seção
Fundo Gradiente
Adicione uma nova seção regular à página em que está trabalhando e abra as configurações da seção. Vá para as configurações de fundo e adicione um fundo gradiente linear:
- Cor 1: #ededed
- Cor 2: #ffffff
- Posição inicial: 30%
- Posição final: 30%
Espaçamento
Também estamos adicionando algum preenchimento superior e inferior à seção.
- Preenchimento superior: 200px
- Preenchimento inferior: 200 px
Adicionar nova linha
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, vá para a guia avançada e altere as configurações de dimensionamento de acordo:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 80% (desktop e tablet), 90% (telefone)
- Largura máxima: 1400 px (desktop), 90% (tablet), 100% (telefone)
Configurações da coluna 1
Também precisaremos modificar as configurações da coluna, começando pela primeira. Abra as configurações da coluna 1.
Fundo Gradiente
Aplique o seguinte fundo gradiente à coluna 1:
- Cor 1: # f7f7f7
- Cor 2: #ffffff
- Tipo de gradiente: radial
- Direção radial: inferior
- Posição inicial: 31%
- Posição final: 31%
Fronteira
Adicione um raio de borda de '20px' à coluna também.
Sombra da caixa
E para criar alguma profundidade na página, vamos adicionar uma sombra de caixa sutil também.
- Força do desfoque de sombra da caixa: 80 px
- Cor da sombra: rgba (0,0,0,0.11)
Escala de transformação padrão
Como você pode notar na prévia deste post, as colunas estão ligeiramente transformadas. Vá para as configurações de transformação e certifique-se de que a opção de escala de transformação permaneça '100%' em seu estado padrão.
- Inferior: 100%
- Certo: 100%
Escala de Transformação Hover
Modifique os valores da escala de transformação ao passar o mouse.
- Inferior: 120%
- Certo: 120%
Tradução de transformação padrão
Também estamos empurrando ligeiramente a coluna para a direita na área de trabalho usando as configurações de transformação de tradução. Adicione as seguintes entradas:
- Parte inferior: 34 px (desktop), 0 px (tablet e telefone)
- Certo: 0px
Hover Transform Translate
Traga os valores de conversão de transformação de volta ao normal ao passar o mouse.
- Inferior: 0px
- Certo: 0px
Rotação de transformação padrão
Passe para as configurações de rotação de transformação e adicione o seguinte valor à esquerda:
- Esquerda: 352deg (desktop), 0deg (tablet e telefone)
Girar Transformar Girar
Traga de volta o valor para '0deg' ao pairar.
- Esquerda: 0deg
Transbordamentos
Posteriormente nesta postagem, adicionaremos um botão na parte inferior da coluna. Esse botão irá se sobrepor à borda inferior da coluna. Para tornar isso possível, precisaremos tornar visíveis os overflows de nossa coluna.
- Excesso horizontal: visível
- Estouro vertical: visível
Índice Z padrão
Altere o índice z da coluna em diferentes tamanhos de tela a seguir. Isso nos ajudará a manter o empilhamento em ordem.
- Índice Z: 9 (desktop), 11 (tablet e telefone)
Hover Z Index
Ao passar o mouse, queremos que a coluna apareça acima das outras. Para que isso aconteça, aumentaremos o índice z ao passar o mouse.
- Índice Z: 11
Transições
Também estamos criando uma transição suave, aumentando a duração da transição nas configurações de transição.
- Duração da transição: 500ms
Configurações da coluna 2
Vamos para a segunda coluna! Vá em frente e abra as configurações da coluna.
Fundo Gradiente
Aplique as seguintes configurações de fundo gradiente:
- Cor 1: # fff200
- Cor 2: #ffffff
- Tipo de gradiente: radial
- Direção radial: inferior
- Posição inicial: 31%
- Posição final: 31%
Fronteira
Adicione '20px' do raio da borda a seguir.
Sombra da caixa
Junto com uma sombra de caixa sublte.
- Força do desfoque de sombra da caixa: 50 px
- Cor da sombra: rgba (0,0,0,0.14)
Escala de transformação padrão
A segunda coluna é nosso plano de preços em destaque. Para garantir que isso não passe despercebido, aumentaremos o tamanho da coluna nas configurações de escala de transformação.
- Parte inferior: 112% (desktop), 100% (tablet e telefone)
- À direita: 112% (desktop), 100% (tablet e telefone)
Escala de Transformação Hover
Modifique os valores da escala de transformação ao passar o mouse.
- Inferior: 120%
- Certo: 120%
Transbordamentos
Altere os transbordamentos horizontais e verticais a seguir.
- Excesso horizontal: visível
- Estouro vertical: visível
Índice Z padrão
Em seguida, vá para as configurações de visibilidade e aumente o índice z da coluna.
- Índice Z: 10
Hover Z Index
Modifique o índice z ao passar o mouse.
- Índice Z: 12
Transições
E aumente a duração da transição nas configurações de transição.
- Duração da transição: 500ms
Configurações da coluna 3
Vamos para a terceira e última coluna! Abra as configurações da coluna.
Fundo Gradiente
Vá para as configurações de fundo e adicione o seguinte fundo gradiente:
- Cor 1: # f7f7f7
- Cor 2: #ffffff
- Tipo de gradiente: radial
- Direção radial: inferior
- Posição inicial: 31%
- Posição final: 31%
Fronteira
Adicione o raio da borda de '20px' a seguir.
Sombra da caixa
Junto com uma sombra de caixa sutil.
- Força do desfoque de sombra da caixa: 80 px
- Cor da sombra: rgba (0,0,0,0.11)
Escala de transformação padrão
É hora de transformar a coluna! Certifique-se de que os valores da escala de transformação padrão permaneçam '100%'.
- Inferior: 100%
- Certo: 100%
Escala de Transformação Hover
Modifique esses valores ao passar o mouse.
- Inferior: 120%
- Certo: 120%
Tradução de transformação padrão
Também estamos empurrando a coluna para a esquerda na área de trabalho, aplicando alguns valores de conversão de transformação personalizados.
- Parte inferior: -34px (Desktop), 0px (Tablet e Telefone)
- Certo: 0px
Hover Transform Translate
Traga de volta os valores para '0px' ao passar o mouse.
- Inferior: 0px
- Certo: 0px
Rotação de transformação padrão
Continue girando a coluna em seu estado padrão.
- Esquerda: 8deg (desktop), 0deg (tablet e telefone)
Girar Transformar Girar
Altere o valor de rotação da transformação à esquerda de volta para '0px' ao passar o mouse.
- Esquerda: 0deg
Transbordamentos
Certifique-se de que os transbordamentos sejam visíveis a seguir.
- Excesso horizontal: visível
- Estouro vertical: visível
Índice Z padrão
Em seguida, vá para as configurações de visibilidade e certifique-se de que o índice z padrão é 9.
- Índice Z: 9
Hover Z Index
Modifique o índice z ao passar o mouse.
- Índice Z: 11
Transições
E aumente a duração da transição nas configurações de transição.
- Duração da transição: 500ms
Adicionar Módulo Blurb à Coluna 1
Adicionar Título
É hora de começar a adicionar módulos à primeira coluna! Adicione um novo módulo do Blurb e insira um título.
Selecione o ícone
Selecione um ícone a seguir.
Configurações de ícone
Vá para a guia de design e altere as configurações do ícone de acordo:
- Cor do ícone: # 000000
- Posicionamento do ícone: topo
- Use o tamanho da fonte do ícone: Sim
- Tamanho da fonte do ícone: 50px
Configurações de título
Altere as configurações de texto do título a seguir.
- Fonte do título: Poppins
- Alinhamento do Texto do Título: Centro
- Cor do texto do título: # 000000
- Tamanho do texto do título: 27 px
Espaçamento
E adicione alguma margem superior também.
- Margem superior: 80px
Adicionar Módulo Divisor à Coluna 1
Visibilidade
Passe para o segundo módulo, que é um módulo divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.
- Mostrar divisor: Sim
Linha
Vá para a guia de design e mude a cor do divisor para preto.
- Cor da linha: # 000000
Dimensionamento
Modifique também as configurações de dimensionamento.
- Peso do divisor: 6px
- Largura: 14%
- Alinhamento do Módulo: Centro
- Altura: 0 px
Espaçamento
Por último, adicione alguma margem superior.
- Margem superior: 50px
Adicione o Módulo de Texto # 1 à Coluna 1
Adicionar conteúdo
Continue adicionando um Módulo de Texto logo abaixo do Módulo Divisor 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: Poppins
- Peso da fonte do texto: leve
- Alinhamento de Texto: Centro
- Cor do texto: # 4f4f4f
- Altura da linha de texto: 2.3em
Espaçamento
Adicione algumas margens personalizadas e valores de preenchimento também.
- Margem superior: 50px
- Enchimento superior: 10 px
- Preenchimento inferior: 10 px
Adicione o Módulo de Texto # 2 à Coluna 1
Adicionar conteúdo
Logo abaixo do Módulo de Texto anterior, precisaremos de outro 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 de acordo:
- Fonte do texto: Poppins
- Peso da fonte do texto: pesado
- Alinhamento de Texto: Centro
- Cor do texto: # 000000
- Tamanho do texto: 47px
- Altura da linha de texto: 1em
Espaçamento
Adicione algumas margens superior e inferior personalizadas também.
- Margem superior: 50px
- Margem inferior: 80px
Adicionar Módulo de Botão à Coluna 1
Adicionar cópia
O próximo e último módulo de que precisamos na coluna 1 é um Módulo de Botão. Insira alguma cópia de sua escolha.
Alinhamento
Vá para a guia de design e altere o alinhamento do botão para o centro.
- Alinhamento do botão: Centro
Configurações de botão
Defina também o estilo do botão.
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 17 px
- Cor do texto do botão: # 000000
- Cor de fundo do botão: #FFFFFF
- Largura da borda do botão: 0 px
- Raio da borda do botão: 100 px
- Fonte do botão: Poppins
- Peso da fonte do botão: negrito
Espaçamento
Também adicionaremos alguns valores de margem e preenchimento personalizados.
- Margem superior: 50px
- Margem inferior: -40px
- Enchimento superior: 23px
- Preenchimento inferior: 23 px
- Preenchimento esquerdo: 70 px
- Preenchimento direito: 70 px
Sombra da caixa
E vamos finalizar dando ao Módulo de Botão uma sombra de caixa sutil.
- Força do desfoque de sombra da caixa: 50 px
- Cor da sombra: rgba (0,0,0,0.3)
Clonar todos os módulos duas vezes e colocar duplicatas nas colunas restantes
Depois de concluir todos os módulos na coluna 1, você pode cloná-los duas vezes e colocar as duplicatas nas duas colunas restantes da linha.
Alterar ícones e títulos do Blurb
Certifique-se de alterar os ícones e títulos de blurb para cada duplicata.
Alterar o conteúdo do módulo de texto
Junto com o conteúdo do módulo de texto.
Botão de mudança # 2
Por último, mas não menos importante, abra o botão na coluna 2 e altere as configurações do botão. Depois de concluir esta etapa, você está pronto!
- Cor do texto do botão: #FFFFFF
- Cor de fundo do botão: # 8300E9
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
Neste post, mostramos como transformar colunas em planos de preços usando as novas opções de coluna do Divi. Você pode personalizar os planos de preços sem ter que tocar em uma única linha de código CSS! Este tutorial serve apenas para mostrar como as novas opções de coluna ajudam a unir diferentes módulos em um belo design. Se você tiver dúvidas ou sugestões, fique à vontade para deixá-las 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.