Como adicionar citações em destaque construídas em Divi ao longo de sua postagem no Gutenberg

Ao escrever uma postagem em um blog, você frequentemente desejará citar alguém ou destacar uma frase usada em um parágrafo normal. Agora, no editor de Gutenberg, você pode adicionar um bloco de citação imediatamente, mas isso não fornece a liberdade de design que você potencialmente gostaria. Com os blocos de layout do Divi, isso não é mais um problema. Você pode construir facilmente um determinado bloco com Divi enquanto mantém o ambiente de Gutenberg em outro lugar. Neste tutorial, mostraremos como adicionar citações destacadas embutidas em suas postagens de blog usando Divi. 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.

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Baixe os layouts de citações em destaque Divi-Built GRATUITAMENTE

Para colocar as suas mãos sobre os layouts de cotações realçados construídos em Divi gratuitos, primeiro você precisa baixá-los 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!

https://youtu.be/zScpa4-I7-8

Inscreva-se no nosso canal no Youtube

Importando o Layout Block JSON

Carregar Layout para Biblioteca Divi

Para importar o arquivo JSON que você conseguiu baixar acima, vá para a Biblioteca Divi no backend do painel do WordPress e clique em 'Importar e Exportar'.

Em seguida, selecione o arquivo JSON dentro da pasta de download e clique em 'Import Divi Builder Layouts'.

Adicionar novo bloco Divi dentro do Gutenberg Post

Uma vez que seu layout foi importado, você pode ir ao seu posto de Gutenberg e adicionar um novo bloco de layout Divi.

Importar arquivo JSON de layouts salvos

Em seguida, clique em 'Carregar da biblioteca', navegue até 'Seus layouts salvos' e selecione o layout para importar o layout das citações destacadas para a postagem do seu blog. É isso!

Passos Gerais

Use um modelo de postagem de blog simples e amigável para UX

Baixar modelo

Para definir o estilo deste tutorial, usaremos um modelo de postagem de uma postagem anterior. Vá para essa postagem e baixe o modelo.

Vá para Divi Theme Builder

Em seguida, vá para o Divi Theme Builder.

Carregar modelo de postagem

Clique no ícone no canto superior direito, vá para a guia de importação e importe o modelo de postagem que você baixou na primeira etapa deste tutorial.

Abra uma postagem existente do Gutenberg ou crie uma nova

Depois de definir um modelo de postagem, você pode criar uma nova postagem Gutenberg ou abrir uma existente.

Adicionar Novo Bloco Divi Inline

Adicione um novo bloco Divi em algum lugar dentro de sua postagem.

Construir Novo Layout Dentro do Bloco Divi

Depois de adicionar o bloco, você terá duas opções. Escolha aquele que diz 'Construir Novo Layout'.

Recriar o Exemplo # 1

Configurações da seção

Espaçamento

Uma vez dentro do editor de blocos de layout Divi, você notará uma seção. Para recriar o primeiro projeto de exemplo, abra as configurações da seção e modifique os valores de margem de acordo:

• Margem superior: 50px
• Margem inferior: 50px
• Margem esquerda: -5%
• Margem direita: -5%

Fronteira

Adicione uma borda esquerda à próxima seção.

• Largura da borda esquerda: 2 px
• Cor da borda esquerda: # 000000

Animação

E use as seguintes configurações de animação:

• Estilo de animação: slide
• Direção da animação: baixo
• Duração da animação: 1500ms
• Intensidade de animação: 200%
• Opacidade inicial da animação: 100%
• Curva de velocidade de animação: Ease-In-Out

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento de acordo:

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

Animação

Conclua as configurações de linha alterando as configurações de animação da seguinte forma:

• Estilo de animação: Fade
• Atraso de animação: 1500ms
• Curva de velocidade de animação: Ease-In-Out

Adicionar Módulo de Texto à Coluna

Inserir conteúdo H3

O único módulo de que precisamos é um Módulo de Texto. Insira o conteúdo da citação H3 destacado.

Configurações de texto H3

Conclua as configurações do módulo, modificando as configurações de texto H3 da seguinte forma:

• Estilo da fonte H3: itálico
• Tamanho do texto H3: 2.1 rem (desktop), 1.5 rem (tablet), 1.3 rem (telefone)
• Altura da linha H3: 1,5em

Recriar o Exemplo # 2

Configurações da seção

Espaçamento

Quer recriar o segundo exemplo de design em vez disso? Abra as configurações da seção e modifique os valores de espaçamento da seguinte forma:

• Margem superior: 50px
• Margem inferior: 50px
• Margem esquerda: -5%
• Margem direita: -5%
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar nova linha

Estrutura da Coluna

Em seguida, adicione uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

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

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

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo

É hora de adicionar módulos, começando com um primeiro Módulo de Texto. Adicione uma citação à caixa de conteúdo.

Configurações de texto

Vá para a guia de design e altere as configurações de texto da seguinte forma:

• Fonte do texto: Playfair Display
• Cor do Texto: #eaeaea
• Tamanho do texto: 500px
• Altura da linha de texto: 0em

Espaçamento

Estamos adicionando alguma margem superior também.

• Margem superior: 150px

Animação

Em seguida, vamos alterar as configurações de animação.

• Estilo de animação: Flip
• Direção da Animação: Centro
• Atraso de animação: 500ms
• Intensidade de animação: 200%
• Curva de velocidade de animação: Ease-In-Out

Posição

Vamos nos certificar de que a citação seja colocada no canto superior esquerdo do contêiner de linha, modificando também as configurações de posição.

• Posição: Absoluta
• Localização: Superior Esquerdo

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo H3

Passe para o próximo Módulo de Texto. Adicione o conteúdo da citação destacada H3 à caixa de conteúdo.

Configurações de texto H3

Vá para a guia de design do módulo e altere as configurações de texto H3 da seguinte forma:

• Estilo da fonte do título 3: itálico
• Tamanho do texto do título 3: 2.6 rem (desktop), 1.7 rem (tablet), 1.3 rem (telefone)
• Altura da linha do título 3: 1,4em

Espaçamento

Adicione alguns valores de margem personalizados em diferentes tamanhos de tela também.

• Margem superior: 150px
• Margem inferior: 150px
• Margem esquerda: 150 px (desktop), 70 px (tablet), 30 px (telefone)
• Margem direita: 150 px (desktop), 70 px (tablet), 30 px (telefone)

Animação

E conclua as configurações do módulo alterando as configurações de animação da seguinte forma:

• Estilo de animação: Fade
• Atraso de animação: 2.000 ms
• Curva de velocidade de animação: Ease-In-Out

Adicionar Módulo de Texto # 3 à Coluna

Adicionar conteúdo

Passe para o próximo e último módulo, que é outro Módulo de Texto. Adicione um símbolo de citação à caixa de conteúdo.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto.

• Fonte do texto: Playfair Display
• Cor do Texto: #eaeaea
• Tamanho do texto: 500px
• Altura da linha de texto: 0em
• Alinhamento de Texto: Direito

Animação

Use as seguintes configurações de animação:

• Estilo de animação: Flip
• Direção da Animação: Centro
• Atraso de animação: 1000 ms
• Intensidade de animação: 200%
• Curva de velocidade de animação: Ease-In-Out

Posição

E certifique-se de que a citação seja colocada no canto direito inferior do contêiner de linha.

• Posição: Absoluta
• Localização: Inferior Direito

Salvar layouts de cotação na biblioteca Divi para reutilização

Depois de concluir o layout de cotação de sua escolha, certifique-se de salvá-lo em sua biblioteca Divi para que possa usá-lo em postagens futuras também!

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos como ser criativo com os blocos de layout do Divi. Mais especificamente, mostramos como adicionar citações animadas destacadas em toda a postagem do seu blog Gutenberg. As possibilidades de design são infinitas, mas fornecemos dois exemplos pelos quais você pode começar. Você também pode baixar os arquivos JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário 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.