Como criar uma árvore genealógica com as configurações de transformação do Divi

Já tentou criar uma árvore genealógica para o seu site, mas não sabia exatamente como abordá-la? Bem, no tutorial Divi de hoje, vamos mostrar exatamente como fazer isso. Além de criar a árvore genealógica, também estamos garantindo que ela continue responsiva em todos os tamanhos de tela. Depois de criar a árvore genealógica, você sempre poderá modificar as imagens, o texto e o design de acordo com sua preferência e deixá-los prontos para serem publicados! Quer começar com este design de árvore genealógica imediatamente? Você poderá baixar o arquivo JSON gratuitamente e adicioná-lo a qualquer site que estiver criando!

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 da Árvore Genealógica GRATUITAMENTE

Para colocar suas mãos no layout gratuito da árvore genealógica, 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!

Inscreva-se no nosso canal no Youtube

Posicionando Membros da Família

Adicionar nova seção

Espaçamento

Vamos começar a criar! A primeira coisa que precisamos fazer é adicionar uma nova seção regular à página em que estamos trabalhando. Abra as configurações de seção e adicione algum preenchimento personalizado superior e inferior usando a largura da janela de visualização.

• Acolchoamento superior: 8vw
• Preenchimento inferior: 8vw

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando a primeira linha à sua seção usando a seguinte estrutura de colunas:

Dimensionamento

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

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

Espaçamento

Para adicionar espaços em branco à esquerda e à direita da linha na área de trabalho, adicionaremos alguns preenchimentos personalizados à esquerda e à direita usando a unidade de largura da janela de visualização.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 15vw (desktop), 0vw (tablet e telefone)
• Preenchimento direito: 15vw (desktop), 0vw (tablet e telefone)

Adicionar Módulo de Imagem à Coluna

Enviar Imagem

É hora de começar a adicionar módulos! O primeiro de que precisamos é um Módulo de Imagem. Faça upload de uma imagem com largura e altura de '180px'.

Alinhamento

Em seguida, vá para a guia de design e altere o alinhamento da imagem.

• Alinhamento de imagem: centro

Dimensionamento

Modifique as configurações de dimensionamento a seguir.

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

Fronteira

E transforme a imagem em um círculo adicionando um valor alto a cada um dos cantos nas configurações de borda. Estamos usando '20vw', mas você pode usar qualquer número alto que desejar.

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo

Passe para o próximo módulo, que é um Módulo de Texto. Adicione o nome do membro da família aqui.

Cor de fundo

Em seguida, vá para as configurações de fundo e mude a cor de fundo para branco.

• Cor de fundo: #ffffff

Configurações de texto

Modifique as configurações de texto a seguir. Se você quiser criar uma outra aparência para a árvore genealógica, sinta-se à vontade para brincar com essas configurações.

• Fonte do texto: Open Sans
• Cor do texto: # 000000
• Tamanho do texto: 0.8vw (desktop), 1.2vw (tablet), 1.9vw (telefone)
• Altura da linha de texto: 0,4em
• Orientação do Texto: Centro

Espaçamento

Passe para as configurações de espaçamento e adicione alguns valores de margem e preenchimento personalizados. Esses valores nos ajudarão a moldar o Módulo de Texto e torná-lo um pouco sobreposto ao Módulo de Imagem.

• Margem superior: -0,5vw
• Margem esquerda: 1vw
• Margem direita: 1vw
• Preenchimento superior: 2vw (desktop), 4vw (tablet), 5vw (telefone)
• Preenchimento inferior: 2vw (desktop), 4vw (tablet), 5vw (telefone)

Fronteira

Passe para as configurações de borda e adicione uma borda superior também.

• Largura da borda superior: 5 px
• Cor da borda superior: # 000000

Sombra da caixa

Junto com um Box Shadow para criar profundidade na página.

• Posição vertical da sombra da caixa: 10 px
• Força do desfoque de sombra da caixa: 50 px
• Cor da sombra: rgba (0,0,0,0.17)

Índice Z

Para garantir que o Módulo de Texto permaneça no topo do Módulo de Imagem, aumentaremos o índice Z nas configurações de visibilidade do Módulo de Texto.

• Índice Z: 2

Clone Row Três Vezes

Depois de criar a primeira linha e modificar todos os módulos nela, você pode prosseguir e clonar a linha três vezes. Isso nos ajudará a economizar tempo nas próximas etapas do tutorial. Cada uma dessas linhas será usada para criar um nível diferente na árvore genealógica.

Personalizar linha # 1

Clone os dois módulos 7 vezes

Vamos começar a personalizar o primeiro nível da árvore genealógica! Alterne para o modo wireframe e clone os dois módulos em sua linha 7 vezes. Quando terminar, o back-end de sua linha deve ser semelhante a este:

CSS do elemento principal da coluna

Estamos transformando a coluna inteira em uma grade. No total, deve haver 16 módulos em sua coluna. Vamos colocar esses 16 módulos em 8 colunas de grade. Isso significa que cada uma das 8 colunas da grade conterá 2 módulos; um Módulo de Imagem e um Módulo de Texto. Abra as configurações de linha da primeira linha e adicione as seguintes linhas de código CSS ao elemento principal da coluna:

display: grid;
grid-template-columns: repeat(8, 12.5%);

Personalizar linha # 2

Clone os dois módulos 3 vezes

Para a segunda fila! Aqui, vamos clonar os dois módulos 3 vezes.

Elemento Principal da Coluna

Estamos transformando a coluna em uma grade com 4 colunas de grade, adicionando as seguintes linhas de código CSS ao elemento principal da coluna da linha:

display: grid;
grid-template-columns: repeat(4, 25%);

A razão pela qual estamos usando essa abordagem, em vez de apenas escolher uma estrutura de coluna de linha existente com 4 colunas, é que queremos que tudo permaneça 100% responsivo em tamanhos de tela menores.

Personalizar linha # 3

Clonar Ambos os Módulos

Para a terceira fila! Clone cada um dos módulos uma vez.

Elemento Principal da Coluna

Em seguida, adicione as seguintes linhas de código CSS ao elemento principal da coluna:

display: grid;
grid-template-columns: repeat(2, 50%);

Personalizar linha # 4

Espaçamento entre linhas

Passe para a próxima e última linha! Aqui, a única coisa que precisamos fazer é modificar os valores de preenchimento de linha.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 31vw
• Preenchimento direito: 31vw

Conectando membros da família usando módulos de imagem

Adicionar linha # 1

Estrutura da Coluna

Agora que alinhamos todos os membros da família, podemos começar a conectá-los! Para fazer isso, adicione uma nova linha entre a primeira e a segunda linha.

Dimensionamento

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

• Largura: 100%
• Largura máxima: 100%

Espaçamento

Vá para as configurações de espaçamento a seguir e adicione alguns valores de preenchimento personalizados.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 15vw (desktop), 0vw (tablet e telefone)
• Preenchimento direito: 15vw (desktop), 0vw (tablet e telefone)

Adicionar Módulo de Imagem à Coluna

Carregar ilustração

Então, adicione um Módulo de Imagem e carregue a ilustração que você encontra na pasta que você baixou no início deste post.

Dimensionamento

Vá para as configurações de dimensionamento do Módulo de imagem e habilite a opção 'Forçar largura total'.

• Forçar largura total: Sim

Espaçamento

Certifique-se de desativar a opção 'Mostrar espaço abaixo da imagem' nas configurações de espaçamento.

• Mostrar espaço abaixo da imagem: Não

Clone a linha duas vezes e mude sua posição

Quando terminar de modificar a linha e o Módulo de imagem nela, vá em frente e clone-a duas vezes. Coloque as duplicatas de acordo:

Personalizar linha # 1

Clonar Módulo de Imagem Três Vezes

Volte para a primeira linha e clone o módulo 3 vezes.

Elemento Principal da Coluna

Coloque esses módulos de imagem em uma grade com 4 colunas de grade, adicionando as seguintes linhas de código CSS ao elemento principal da coluna da linha:

display: grid;
grid-template-columns: repeat(4, 25%);

Personalizar linha # 2

Módulo de imagem clone

Passe para a segunda linha e clone o Módulo de imagem uma vez.

Elemento Principal da Coluna

Coloque os dois módulos em uma grade com duas colunas de grade, adicionando as seguintes linhas de código CSS ao elemento principal da coluna da linha:

display: grid;
grid-template-columns: repeat(2, 50%);

Personalizar linha # 3

Alterar espaçamento

Para a próxima e última duplicata. Aqui, a única coisa que você precisa fazer é alterar os valores de preenchimento personalizados e pronto!

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 27vw
• Preenchimento direito: 27vw

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 criar uma árvore genealógica moderna com o Divi! A árvore genealógica que recriamos parece ótima em todos os tamanhos de tela. No início deste tutorial, você também conseguiu baixar o arquivo JSON gratuitamente e começar a usá-lo imediatamente. Se você tiver alguma dúvida ou sugestão, deixe um comentário na seção de comentários abaixo!