Como criar um layout de fluxograma em Divi
Publicados: 2021-07-14Saber como criar um layout de fluxograma no Divi abre muitas oportunidades para a comunicação de processos e ideias em um site. Em alguns casos, os fluxogramas podem ser usados para explicar ideias extremamente complexas envolvendo um grande número de itens. Em um site, no entanto, esses fluxogramas mais complexos podem ser difíceis de alcançar, especialmente se você quiser que eles sejam responsivos.
Neste tutorial, mostraremos como criar um layout de fluxograma prático que você pode usar em seu site que seja simples, eficaz e responsivo. Basicamente, vamos ser criativos com bordas Divi, divisores, sinopses e opções de transformação para criar um layout de fluxograma que você pode personalizar facilmente para suas próprias necessidades. Além disso, usaremos apenas as opções integradas do Divi para criá-lo, então você não precisa se preocupar em adicionar código personalizado ou plug-ins.
Vamos começar!
Espiada
Aqui está uma rápida olhada no design do fluxograma que construiremos neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, 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!
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Como criar um layout de fluxograma em Divi
Etapa 1: Criando uma linha com um Blurb centralizado
Para começar a criar o layout do fluxograma no Divi, começaremos criando uma linha que contém uma sinopse centralizada. Este será o primeiro item do fluxograma.
O Padding da Seção
Primeiro, abra as configurações de seção para a seção padrão e defina o preenchimento inferior para 0px.
A fila
Dentro da seção, adicione uma linha de uma coluna.
Abra as configurações de linha e atualize as seguintes configurações de design:
- Largura da calha: 1
- Preenchimento: 0 px superior, 0 px inferior
Essas duas configurações de design serão usadas para todas as linhas neste layout de fluxograma para garantir que nenhum espaço extra seja adicionado entre os módulos e as linhas.
O Design do Módulo Blurb
Para criar nosso primeiro item de fluxograma, vamos usar um módulo de blurb.
Adicione um novo módulo blurb à linha.
Configurações do Blurb
Abra as configurações do blurb. Na guia de conteúdo, você pode manter o texto padrão do Título e do Corpo.
Em seguida, atualize a imagem com um pequeno ícone ou use um dos Divi Icons integrados. Para este tutorial, usarei ícones do Crowdfunding Layout Pack.
Em seguida, dê à sinopse uma cor de fundo:
- Cor de fundo: # f8f8f8
Na guia de design, atualize o seguinte:
- Alinhamento de Texto: Centro
- Largura máxima: 400 px (desktop e tablet), 90% (telefone)
- Alinhamento do Módulo: Centro
- Preenchimento: 6% superior, 6% inferior, 3% esquerdo, 3% direito
NOTA: Este tamanho de sinopse será compartilhado por todas as sinopses no layout do fluxograma. Este tamanho funciona para este layout porque o fluxograma nunca terá mais do que duas notas adjacentes (lado a lado). Isso nos permite manter o design responsivo e ter uma ótima aparência no tablet e no telefone.
Em seguida, dê à sinopse uma borda da seguinte maneira:
- Largura da borda: 2px
Etapa 2: Criando a linha do conector com linha vertical e seta
Para a próxima parte de nosso layout de fluxograma, vamos criar uma linha de conector que tem uma linha vertical centralizada e uma seta. Esta linha será usada para conectar linhas de conteúdo do fluxograma que precisam continuar descendo a página.
Neste caso, queremos iniciar o fluxograma adicionando uma linha e uma seta abaixo da linha anterior com o módulo de sinopse centralizado.
Criar nova linha e copiar / colar estilos de linha da linha anterior
Para fazer isso, adicione uma nova linha de uma coluna na linha anterior.
Usando o menu “Mais opções” (ou opções de clique com o botão direito), copie os estilos de linha da linha anterior acima e cole-os na nova linha.
Criação de um divisor de linha vertical
Para criar o divisor de linha vertical, adicione um novo módulo divisor à linha.
Nas configurações do divisor, atualize as configurações de design da seguinte maneira:
- Cor da linha: # 333333
- Posição da linha: inferior
- Peso do divisor: 150px
- Largura: 2 px
- Alinhamento do Módulo: Centro
- Margem: -1px inferior
Na guia avançada, oculte o estouro da seguinte forma:
- Excesso horizontal: oculto
- Estouro vertical: oculto
Criando uma seta com um módulo Blurb
Em seguida, vamos criar um ícone de seta para sentar no topo da linha divisória usando um módulo de sinopse.
Para criar a seta, adicione um novo módulo blurb sob o divisor.
Configurações de seta
Nas configurações de sinopse, retire o título padrão e o texto do corpo e clique para usar o ícone de seta inferior (veja a captura de tela).
Na guia de design, atualize o seguinte:
- Cor do ícone: #bbbbbb
- Alinhamento de imagem / ícone: centro
- Tamanho da fonte do ícone: 50 px (desktop), 40 px (tablet e telefone)
- Largura máxima: 50%
- Alinhamento do Módulo: centro
- Altura: 50 px (desktop), 40 px (tablet e telefone)
Na guia avançada, adicione o seguinte CSS à imagem do Blurb:
margin-bottom: 0px; background: #ffffff;
Isso removerá a margem padrão da sinopse e adicionará um fundo branco para criar a aparência de espaço entre o ícone e a linha, uma vez que posicionamos o ícone no topo da linha.
Para posicionar a seta no topo da linha, atualize o seguinte:
- Posição: Absoluta
- Localização: Centro
- Índice Z: 10
Etapa 3: criando uma linha com sinais e setas adjacentes do fluxograma
Assim que a linha do conector for concluída, adicionaremos outra linha de várias sinopses adjacentes para continuar o design do fluxograma.
Para adicionar a linha, simplesmente copie e cole a primeira linha (a linha com uma sinopse centralizada que criamos na parte superior do layout) sob a linha do conector.
Abra as configurações de linha e atualize o seguinte:
- Largura máxima: 50%
- Largura da borda: 2px
A largura máxima de 50% é importante para que o layout funcione de forma responsiva. Isso garantirá que as sinopses que estão transbordando à direita e à esquerda da linha não excedam a largura do navegador.
Criação de um fluxograma sinopse na linha da borda esquerda
Agora que nossa borda foi adicionada à linha, vamos posicionar a sinopse no topo da linha da borda esquerda.
Para fazer isso, atualize as seguintes configurações de design:
- Alinhamento do Módulo: Esquerda
- Margem: 70px superior, 70px inferior
- Transformar Traduzir Eixo X: -50%
Esta é a chave para fazer a sinopse ficar centralizada horizontalmente no topo da linha de fronteira.
Criação de um fluxograma adjacente Blurb na linha da borda direita
Para adicionar outra sinopse na linha da borda direita, duplique a sinopse existente.
Para posicionar a sinopse na linha da borda direita, vá para a guia avançada e dê a ela uma posição absoluta:
- Posição: Absoluta
- Localização: Centro Direito
Em seguida, atualize as opções de conversão de margem e transformação da seguinte forma:
- Margem: nenhuma
- Transformar o eixo Y da tradução: -50%
- Transformar Traduzir eixo X: 50%
Adicionando sinais de seta aos cantos de cada linha de fronteira
Para tornar o fluxograma mais claro sobre a direção em que as linhas estão progredindo, adicionaremos ícones de seta adicionais nas linhas de borda da linha.
Seta superior esquerda
Para adicionar uma seta à linha da borda esquerda superior, duplique a sinopse de seta que criamos na linha do conector e arraste-a para a linha que contém as sinopses adjacentes.
Abra a sinopse da seta duplicada e mude o ícone para uma seta para a esquerda.
Em seguida, atualize a localização da posição da sinopse da seta:
- Localização: Superior Esquerdo
Finalmente, atualize a opção de conversão de transformação da seguinte maneira:
- Transformar o eixo Y da tradução: -50%
Seta superior direita
Para criar uma seta que fica na linha da borda superior direita, duplique a seta “superior esquerda” que acabamos de criar. Em seguida, abra as configurações e altere o local da posição:
- Localização: Cima direita
Além disso, atualize o ícone de seta com uma seta para a direita.
Seta Inferior Esquerda
Para criar uma seta que fica na linha da borda esquerda inferior, duplique a seta “superior direita” que acabamos de criar.
Em seguida, abra as configurações e altere o local da posição:
- Localização: Inferior Esquerdo
Em seguida, atualize a opção de tradução de transformação:
- Transformar traduzir eixo Y: 50%
Seta inferior direita
Para criar uma seta que fica na linha da borda inferior direita, duplique a seta “inferior esquerda” que acabamos de criar.
Em seguida, abra as configurações e altere o local da posição:
- Localização: Inferior Direito
Além disso, atualize o ícone de seta com uma seta para a esquerda.
Uma vez que todas as setas foram colocadas, você pode atualizar os rótulos de cada uma usando a visualização de camadas.
Etapa 4: adicionar outra linha de conector
Depois de concluir a linha com as duas sinopses do fluxograma adjacentes e todas as setas, podemos continuar o fluxograma adicionando outra linha de conector.
Para fazer isso, duplique a linha do conector que criamos acima e cole-a abaixo da linha que contém as notas do fluxograma adjacentes.
Etapa 5: personalizar o fluxo com um conector de linha de borda direita
No design de fluxograma existente, o fluxo começa com o item superior e então se ramifica para os itens adjacentes direito e esquerdo e, em seguida, volta para o meio e prossegue para o próximo item centralizado. Para personalizar o fluxo, vamos duplicar a seção para que possamos personalizar o fluxograma para parar no (s) item (ns) de sincronia adjacente (s) à esquerda e continuar a partir do item de sincronia à direita.
Seção duplicada
Para fazer isso, primeiro duplique toda a seção do conteúdo do fluxograma.
Adicionar outro item do Blurb à esquerda
Na seção duplicada (inferior), localize a sinopse à esquerda na linha que contém as duas sinopses adjacentes. Em seguida, duplique a sinopse à esquerda para criar uma nova diretamente abaixo dela.
Excluir Setas Inferiores e Bordas
Em seguida, exclua as sinopses de seta inferior esquerda e seta inferior direita.
Abra as configurações de linha para a linha que contém as várias sinopses e retire a borda inferior:
- Largura da borda inferior: 0 px
Crie uma linha com um conector de linha de borda direita
Agora, queremos personalizar o design do fluxograma com um conector da linha da borda direita que conectará a linha da borda direita da linha com a linha do conector abaixo.
Para fazer isso, vamos criar outra linha e adicionar uma linha divisória personalizada e uma sinopse de seta no lado direito.
Adicione uma nova linha de uma coluna abaixo da linha existente com as três sinopses.
Atualize as configurações de design da linha da seguinte maneira:
- Largura da calha: 1
- Largura máxima: 50%
- Preenchimento: 0 px superior, 0 px inferior
Em seguida, adicione uma borda direita à linha.
- Largura da borda direita: 2 px
Em seguida, adicione um módulo divisor à linha.
Atualize as configurações do divisor da seguinte forma:
- Cor da linha: # 333333
- Posição da linha: inferior
- Peso do divisor: 2px
- Largura: 50%
- Margem: -2px inferior
Na guia avançada, atualize a posição do divisor:
- Posição: Absoluta
- Localização: Inferior Direito
Assim que o divisor estiver no lugar, copie a sinopse da seta inferior direita da terceira linha na primeira seção e cole-o na linha com a linha divisória direita.
Abra as configurações do símbolo de seta que você acabou de duplicar e mover e atualize o seguinte:
- Posição: padrão
- Alinhamento do Módulo: direito
Interrompendo o fluxo da linha da borda esquerda
No momento, há parte da linha da borda esquerda exposta sob a sinopse inferior esquerda. Para ocultá-lo, simplesmente retire a margem inferior dessa descrição inferior.
Etapa 6: Atualizando a linha com um conector de linha de borda esquerda
Seu fluxograma também pode precisar de um conector de linha de borda esquerda. Para criá-lo, podemos atualizar a linha com o conector da linha da borda direita da seguinte maneira:
- Largura da borda esquerda: 2 px
- Largura da borda direita: 0
Atualize o divisor dentro da linha com um novo local:
- Localização: Inferior Esquerdo
Em seguida, atualize o alinhamento da sinopse da seta:
- Alinhamento do Módulo: Esquerda
E mude o ícone para uma seta para a direita.
Resultado final
Confira o resultado final. Eu fui em frente e dupliquei a segunda seção e adicionei o conector da linha de borda esquerda a ela para que você pudesse ver ambos.
Pensamentos finais
Neste tutorial, criamos um layout de fluxograma útil que qualquer pessoa pode usar para comunicar processos e ideias aos visitantes com um design responsivo impressionante. Use-o para mostrar o processo de serviços ou design, criar um infográfico ou conduzir os clientes através do conteúdo de uma nova maneira. Esperançosamente, será útil para seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!