Criação de designs de FAQ de coluna exclusivos com Divi

Publicados: 2019-10-04

Cada site que se comunica regularmente com os clientes pode se beneficiar de uma seção de perguntas frequentes. Ao criar seu site com Divi, há muitas maneiras de projetar sua seção de perguntas frequentes. Agora, nesta postagem, criaremos uma seção de perguntas frequentes divertida que se concentra em combinar a coluna e o contêiner de módulo para criar um design bonito. 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 projeto da coluna FAQ GRATUITAMENTE

Para colocar as mãos no design de FAQ de coluna gratuita, 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!

Inscreva-se no nosso canal no Youtube

Vamos começar a recriar

Adicionar nova seção

Fundo

Comece adicionando uma nova seção regular à página em que você está trabalhando. Antes de adicionar uma linha, ajuste o fundo da seção.

  • Fundo: Gradiente
  • Cor um: Dark Aqua # 50aebf
  • Cor dois: Aqua claro # 6bf2ff
  • Direção: 180 graus
  • Posição inicial: 21%

Espaçamento

Modifique os valores de preenchimento da seção também.

  • Enchimento superior:
    • Desktop: 4vw
    • Tablet: 15vw
    • Telefone: 24vw
  • Preenchimento inferior: 2vw

Adicionar nova linha

Estrutura da Coluna

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

Configurações de coluna

Espaçamento

Abra as configurações da coluna 1 e adicione alguns preenchimentos à esquerda e à direita.

  • Preenchimento esquerdo e direito:
    • Desktop: 1vw
    • Tablet + Telefone: 3vw

Adicionar Módulo de Texto

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um novo módulo de texto com algum conteúdo H2 e parágrafo de sua escolha.

Texto

Vá para a guia de design e estilize o texto do parágrafo.

  • Fonte do Texto: Ator
  • Cor do texto: branco sujo ## f6f6f6
  • Tamanho do texto:
    • Desktop + Tablet: 1.5vw
    • Telefone: 3.8vw
  • Espaçamento entre letras do texto: 1px
  • Alinhamento de Texto: Centro

Texto do Título

Em seguida, defina o estilo do texto do título.

  • Nível do texto do título: H2
  • Fonte H2: Verdana
  • Peso da fonte H2: Semi-negrito
  • Cor da fonte H2: branco: # f6f6f6
  • Tamanho da fonte H2:
    • Desktop: 3vw
    • Tablet: 5vw
    • Telefone: 6vw
  • Espaçamento entre letras H2: 7px
  • Altura da linha H2:
    • Desktop: 1.8em
    • Tablet: 1.6em
    • Telefone: 1,5 em

Dimensionamento

Além disso, ajuste o dimensionamento.

  • Largura: 100%

Espaçamento

Finalmente, ajuste o espaçamento.

  • Margem superior:
    • Desktop + Tablet: 1.5vw
  • Margem inferior:
    • Telefone: -5vw
  • Preenchimento inferior: 0vw
  • Preenchimento esquerdo + direito: 7vw

Adicionar Módulo Divisor

Linha

Abaixo do texto, adicione um módulo divisor e deixe-o amarelo.

  • Cor da linha: Amarelo # ffe100

Dimensionamento

Em seguida, ajuste o peso e a largura.

  • Peso do divisor: 4px
  • Largura: 12%
  • Alinhamento do Módulo: Centro

Espaçamento

Finalmente, ajuste o espaçamento.

  • Margem superior:
    • Desktop + Tablet: -1vw
    • Telefone: 10vw

Adicionar nova linha

Estrutura da Coluna

Continue adicionando um novo usando a seguinte estrutura de coluna:

Dimensionamento

Antes de mais nada, ajuste o dimensionamento.

  • Largura da calha: 1
  • Largura: 100%
  • Largura máxima: 100%

Espaçamento

Em seguida, ajuste o espaçamento.

  • Margem superior: 3vw
  • Margem inferior: 11vw
  • Margem esquerda e direita: automática
  • Enchimento superior: 0vw
  • Preenchimento inferior: 11vw
  • Preenchimento esquerdo e direito: 5vw

Configurações da coluna 1

Plano de fundo em pairar

Antes de adicionar as outras colunas, estilize o plano de fundo da coluna 1 da seguinte maneira:

  • Hover Background: Gradient
  • Cor um: amarelo # ffe100
  • Cor Dois: Transparente
  • Tipo de gradiente: radial
  • Direção radial: canto superior esquerdo
  • Posição inicial e final: 19%

Espaçamento

Adicione alguns valores de espaçamento à próxima coluna.

  • Preenchimento inferior:
    • Desktop + Tablet: 0vw
    • Telefone: 4vw
  • Preenchimento esquerdo e direito:
    • Desktop: 1vw
    • Tablet + Telefone: 3vw

Fronteira

Adicione alguns cantos arredondados à coluna também.

  • Cantos arredondados: 1vw todos os quatro cantos

Transformar

Por fim, aplique um valor de conversão de transformação personalizado à coluna.

  • Transform Translate: 4vw eixo y (desktop), 0vw (Hover, tablet e telefone)

Duplicar coluna 1 quatro vezes

Agora, duplique a primeira coluna quatro vezes.

Configurações da coluna 2

Transformar

Em seguida, ajuste os valores de transformação. Primeiro, coluna 2.

  • Transform Translate: eixo y 2vw (desktop), 0vw (Hover, tablet e telefone)

Configurações da coluna 3

Transformar

Em seguida, redefina o valor da transformação na coluna 3.

  • Transformar a tradução: redefinir

Configurações da coluna 4

Transformar

Além disso, ajuste o valor de transformação na coluna 4.

  • Transform Translate: eixo y 2vw (desktop), 0vw (Hover, tablet e telefone)

Configurações da coluna 5

Transformar

Finalmente, revise os valores de transformação na coluna 5.

  • Transform Translate: 4vw eixo y (desktop), 0vw (Hover, tablet e telefone)

Adicionar Módulo de Alternância à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um módulo de alternância à primeira coluna com algum conteúdo de sua escolha.

  • Título
  • Corpo

Estado

Em seguida, selecione 'Fechar' como o estado do módulo.

  • Estado: Fechado

Fundo

E adicione uma imagem transparente de um ponto de interrogação como plano de fundo.

  • Imagem de fundo
  • Mistura de imagem de fundo: luz suave

Ícone

Na guia de design, defina o estilo do ícone.

  • Cor do ícone: amarelo # ffe100
  • Tamanho do ícone:
    • Desktop: 34px
    • Tablet + telefone: 20px

Alternancia

Em seguida, defina o estilo dos fundos de alternância para estático e pairar.

  • Abrir Alternar Cor de Fundo: Azul-petróleo # 0092af
  • Cor de fundo de alternância fechada: Branco sujo: # f7f7f7
    • Hover: Teal # 0092af

Texto do Título

Continue estilizando o texto do título.

  • Cor do texto do título aberto: branco: # f7f7f7
  • Cor do texto do título: cinza muito escuro # 3a3a3a
    • Hover: Off White: # f7f7f7
  • Nível do título do título: H5
  • Fonte H5: Ator
  • Alinhamento H5: Esquerda
  • Tamanho do texto H5:
    • Desktop: 1,5 vw
    • Comprimido: 3 vw
    • Telefone: 4,5 vw

Texto do Título Fechado

Defina também o estilo do texto fechado.

  • Cor do texto do título fechado: Cinza muito escuro # 3a3a3a
  • Fonte do título fechado: Ator
  • Alinhamento: Esquerda
  • Tamanho do texto fechado:
    • Desktop: 1.5vw
    • Tablet: 3vw
    • Telefone: 4.5vw

Texto de corpo

Não se esqueça do corpo do texto.

  • Fonte do corpo: Ator
  • Alinhamento do corpo do texto: esquerda
  • Cor do corpo do texto: branco: # f7f7f7
  • Tamanho do corpo do texto:
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Telefone: 3vw
  • Altura da linha corporal: 1,8em

Espaçamento

Após o estilo do texto, adicione alguns valores de espaçamento.

  • Margem superior:
    • Desktop + Tablet: 1vw
  • Preenchimento superior + inferior:
    • Desktop: 2vw
    • Tablet: 3vw
    • Telefone: 5vw
  • Preenchimento esquerdo:
    • Desktop: 2vw
    • Tablet: 4vw
    • Telefone: 5vw
  • Preenchimento direito:
    • Desktop: 2vw
    • Tablet: 3vw
    • Telefone: 4vw

Fronteira

Adicione alguns cantos arredondados e remova a borda padrão de 1 px.

  • Cantos arredondados: 1vw todos os quatro cantos
  • Borda: 0px

Sombra da caixa

Finalmente, adicione uma sombra de caixa interna.

  • Sombra da caixa: 6ª opção
  • Força do borrão da sombra da caixa:
    • Desktop + Tablet: 18 px
    • Telefone: 9px
  • Força de propagação da sombra da caixa: -4px
  • Cor da sombra: rgba (0,0,0,0.21)

Módulo de alternância duplicado 4 vezes

Duplique o módulo de alternância estilizado quatro vezes e arraste os novos para as colunas vazias.

Editar Conteúdo

Edite as perguntas e respostas nos módulos de alternância duplicados e pronto!

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

Conclusão

Nesta postagem, mostramos como criar um design de FAQ de coluna exclusivo. Adicionamos algumas opções de foco para dar ao design um efeito de canto amarelo interessante. Esperamos que este design inspire você a criar designs de FAQ interessantes como parte de seus projetos Divi. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo!