Quando você tem um monte de informações para compartilhar com seus visitantes, e você deseja que eles vejam a imagem maior, é altamente recomendável o uso de infografia. Eles tornam a informação absorvente um pouco mais fácil por causa de sua estrutura e interatividade. A primeira coisa que se mostra em mente ao precisar de uma infografia é usar o Photoshop para criar uma e adicioná-la a um Módulo de Imagem posteriormente. No entanto, isso nos limita. Isso, por exemplo, tira a possibilidade de os visitantes copiar e colar uma certa parte de sua infografia.

Por sorte, você pode fazer todo o tipo de coisas com o Divi Builder e criar uma infografia Blurb é uma delas. Nesta publicação, vamos mostrar-lhe como criar tal infografia de forma fácil e rápida.

Resultado

Antes de mergulhar no tutorial, vamos dar uma olhada na infografia de Blurb que mostraremos você como recriar, passo a passo.

On Desktop

 infographic

On Tablet

 infographic

On Mobile

 infographic

Como Criar um Blurb Infographic com Divi

Inscreva-se no nosso canal do Youtube

Baixe a ilustração gratuita deste tutorial

Para ajudá-lo a trazer este tutorial para um bom final , vamos fornecer-lhe a ilustração que está sendo usada neste tutorial gratuitamente. A ilustração que lhe oferecemos é realmente do nosso Design Agency Layout Pack . Quando você baixar os recursos da imagem abaixo, você pode descompactar a pasta e localizar a imagem chamada escritor-ilustração_content-strategy.png para acompanhar.

Faça o download da Ilustração gratuita

Adicionar uma Nova seção padrão

Fundo de gradiente

Comece adicionando uma nova seção padrão a uma página existente ou a uma nova página. Em seguida, abra as configurações de seção e adicione o seguinte fundo de gradiente:

  • Primeira cor: rgba (45,45,45,0,3)
  • Segunda cor: rgba (45,0,11,0,81)
  • Tipo de gradiente : Radial
  • Direção radial: Centro
  • Posição inicial: 24%
  • Posição final: 23%

 infográfico

Imagem de fundo

Mude para a guia de imagem de fundo, adicione a ilustração que você baixou no início desta postagem e use as seguintes configurações:

  • Tamanho da imagem de fundo: Tamanho real
  • Posição da imagem de fundo: Centro
  • Repetir imagem de fundo: sem repetição
  • Blend de imagem de plano de fundo: Hue

 infographic

Visibilidade

Por fim, desative a seção no telefone e no tablet. Mais tarde, nesta publicação, criaremos uma seção que também combina tabletes e celulares.

 infográfico

Adicione 5 linhas padrão com diferentes estruturas de colunas

Precisamos de 5 diferentes linhas padrão dentro da seção padrão. Nós examinaremos cada um separadamente.

Fila # 1

Estrutura da coluna

A primeira linha que você adiciona precisa apenas de uma coluna.

 infográfico

Espaçamento

Dentro do Espaçamento subcategoria da linha que você acabou de criar, verifique se todas as opções de preenchimento personalizadas estão configuradas para '0px'. Isso garantirá que não haja espaço entre nossas linhas.

 infográfico

Fila # 2

Estrutura da coluna

A segunda linha precisa de três colunas iguais. Seremos apenas usando duas colunas mais abaixo nesta publicação.

 infográfico

Espaçamento

Novamente, certifique-se de adicionar '0px' a todas as opções de preenchimento personalizadas.

[19459042″ width=”880″ height=”431″ />

Fila # 3

Estrutura da coluna

A terceira linha que vamos adicionar também precisa de três colunas iguais.

 infográfico

Dimensionamento

Ao contrário do segunda fileira, vamos habilitar a opção "Make This Row Fullwidth" na subcategoria Sizing.

 infographic

Espaçamento

Esta linha precisa de '0px' para todas as opções de preenchimento personalizadas como bem.

 infográfico

Fila # 4

Estrutura da coluna

A quarta linha é a mesma que a segunda linha e precisa de três colunas iguais.

 infográfico [19659066] Espaçamento </h4>
<p> Mais uma vez, verifique se o preenchimento superior, direito, inferior e esquerdo está configurado para '0px'. </p>
<p> <img class=

Fila # 5

Estrutura da coluna

Por último, mas não menos importante, teremos a mesma estrutura de coluna que fizemos para a primeira linha; uma coluna.

 infográfico

Espaçamento

E um preenchimento personalizado de '0px' para todas as opções.

 infográfico

Adicionar Blurb Module

Escolha um ícone

Recriaremos o módulo blurb uma vez e o clonaremos depois. Isso economiza um monte de tempo e permite que você faça modificações rápidas. Comece adicionando um Blurb Module à primeira linha, ative a opção 'Use Icon' dentro da guia Content e selecione um ícone de eleição.

 infographic

Configurações de ícones

Em seguida, avance para o Guia de design, selecione uma cor de ícone de escolha e use as seguintes configurações, juntamente com ela:

  • Posicionamento de imagem / ícone: Topo
  • Tamanho de fonte do ícone de uso: Sim
  • Tamanho da fonte do ícone: 27px

 infográfico [19659086] Configurações de texto </h4>
<p> Em seguida, abra a subcategoria Texto, use uma cor de texto 'Light' e ative a orientação central do texto. </p>
<p> <img class=

Título do texto

Mova-se para a subcategoria Title Text e faça Utilização das seguintes configurações a seguir:

  • Título Fonte: Padrão
  • Título Peso da fonte: Regular
  • Title Text Alignment: Center
  • Tamanho do texto do título: 18px
  • Título Cor: #FFFFFF
  • Título Altura da linha: 1em

 infográfico

Desça a mesma subcategoria e adicione alguma sombra de texto a s bem:

  • Título Texto Sombra Comprimento Horizontal: 0em
  • Título Texto Sombra Vertical Comprimento: 0em
  • Texto Texto Sombra Blur Força: 0.6em
  • Título Texto Shadow Blur Strength: rgba (255,255,255,0.94) [19659103] Infographic ” width=”880″ height=”425″ />

    Body Text

    Então, abra a subcategoria Body Text e use as seguintes configurações para ela:

    • Corpo Fonte: Padrão
    • Peso da fonte do corpo: Regular
    • Tamanho do texto do corpo: 14px [19659020] Cor do corpo: #cccccc
    • Altura da linha do corpo: 1.7em

     infographic

    Dimensionamento

    Por fim, abra a subcategoria Sizing e aplique uma largura de conteúdo de '282px'.

     Infographic

    Clone Blurb Module 7 Times

    Coloque nas seguintes colunas

    Depois de terminar de modificar o Blurb Module, você pode seguir em frente, cloná-lo 7 vezes e colocá-lo nas colunas marcadas no Imprima a tela abaixo.

     infográfico

    Ícone de mudança

    Obviamente, você quer fazer cada um dos Os Módulos Blurb são únicos. Vá em frente, mude o conteúdo e escolha outro ícone dentro da guia Conteúdo.

     infographic

    Alterar cor do ícone

    Alterar a cor do ícone na guia Design de acordo com suas necessidades para cada um dos módulos Blurb também

     infographic

    Seção de clones para celular e tableta

    Remova a imagem de fundo e fundo de gradiente

    Sua versão de desktop está concluída. Agora é hora de começar a criar a versão do tablet e do telefone. Comece por clonar a seção que você criou, abra as configurações da seção e remova o fundo do gradiente juntamente com a imagem de fundo.

     infográfico

    Adicionar cor de fundo

    Enquanto você está no Subcategoria de fundo, adicione 'rgba (45,0,11,0.81)' como sua cor de fundo.

     infográfico

    Adicionar módulo de imagem

    Em seguida, você precisará adicionar a ilustração , que você baixou no início desta publicação, para um Módulo de Imagem.

     infográfico

     infográfico

    Visibilidade da Mudança

    Por último, mas não menos importante , desative a seção na área de trabalho em vez de no telefone e no tablet.

     infographic

    Resultado

    Estamos finalizados! Vamos dar uma olhada na infografia de blurb que mostramos como se recriar dentro desta postagem de blog.

    On Desktop

     infographic

    On Tablet

     infographic

    On Mobile

     infographic

    Pensamentos finais

    Nesta publicação, mostramos como criar uma infografia de blurb usando as opções embutidas do Divi e uma infografia gratuita que você pode baixar no início desta publicação . Criar uma infografia infundível pode ser útil se você precisar compartilhar um monte de conteúdo sobre um tópico específico e você ainda quer que ele permaneça interativo e divertido. Se você tiver alguma dúvida ou sugestão; Certifique-se de deixar um comentário na seção de comentários abaixo!



Source link