Como criar um bloco de layout Divi reutilizável para postagens do blog de Gutenberg

O Divi Layout Block continua a ser uma atualização útil para o tema Divi, permitindo-nos adicionar qualquer Divi Layout a uma postagem de blog no editor de Gutenberg. Podemos até converter um Divi Layout Block em um bloco reutilizável em Gutenberg, assim como qualquer outro bloco WordPress. Isso abre a porta para agilizar alguns designs úteis do Divi Layout no fluxo normal de escrever uma postagem em Gutenberg.

Neste tutorial, vamos demonstrar como criar um Divi Layout Block reutilizável para as postagens do blog de Gutenberg. Para ilustrar isso, construiremos um divisor de seção para nosso exemplo de bloco de layout Divi reutilizável para este post. Mas, podemos facilmente aplicar essa mesma técnica para criar um bloco de layout Divi reutilizável para praticamente qualquer coisa do construtor Divi.

Vamos começar.

Criando um Divi Layout Block para uma postagem no blog de Gutenberg

Criar ou editar uma postagem no blog

Para começar, precisamos criar uma nova postagem no blog ou editar uma existente. Para este exemplo, vamos adicionar algum conteúdo simulado ao título e corpo do post usando alguns blocos de título e parágrafo. Em seguida, adicione uma imagem em destaque e escolha “Sem barra lateral” para o Layout da página nas Configurações da página Divi.

Adicionar Bloco de Layout Divi Inline

Depois de criar a maior parte da postagem, tudo o que precisamos fazer é adicionar um novo Bloco de Layout Divi em qualquer lugar que quisermos na área de conteúdo da postagem.

Para adicioná-lo, passe o mouse sobre a área em que deseja adicionar o optin de e-mail. Em seguida, clique no ícone de mais azul para adicionar um novo bloco. Na lista de blocos pop-up, selecione o bloco Divi Layout.

Construir novo layout dentro do bloco de layout Divi

Uma vez que o Divi Layout Block foi selecionado, teremos a opção de “Construir Novo Layout” ou “Carregar da Biblioteca”. Como precisamos construir um novo divisor para nosso exemplo, escolha a opção “Construir Novo Layout”.

Projetar um layout usando o Divi Layout Block Editor

Depois de selecionar o botão Build New Layout, podemos projetar nosso layout Divi dentro do editor de blocos de layout.

Para este exemplo, construiremos um separador ou divisor personalizado usando divisores de forma de seção Divi e um fundo gradiente. Este é um elemento de design que poderemos transformar em um bloco de layout reutilizável para uma maneira conveniente de adicionar divisores de seção em um posto de Gutenberg.

Para criar o design do divisor de seção, abra as configurações da seção e atualize o seguinte:

• Cor esquerda do fundo gradiente: # ddd6f3
• Cor certa do fundo gradiente: # faaca8
• Direção do gradiente: 90 graus
• Posição inicial: 30%

• Estilo do divisor superior: veja a captura de tela
• Cor do divisor superior: #ffffff
• Altura do divisor superior: 50 px

• Estilo do divisor inferior: veja a captura de tela
• Cor do divisor inferior: #ffffff
• Altura do divisor inferior: 50 px
• Virar divisor inferior: horizontal

• Altura: 100px
• Preenchimento: 0 px superior, 0 px inferior

Assim que o design estiver concluído, certifique-se de salvar o bloco de layout Divi.

Agora, o divisor de seção Divi Layout Block aparecerá dentro do editor de postagem do WordPress.

Tenha em mente que o espaçamento acima e abaixo do layout Divi do bloco de layout pode ser maior no backend do que no frontend.

Agora estamos prontos para converter este bloco de layout Divi em um bloco de layout reutilizável para facilitar a adição desse mesmo divisor de seção em postagens futuras.

Mas antes de fazermos isso, pode ajudar saber o que é um bloco reutilizável no WordPress.

O que é um bloco de layout reutilizável

Um bloco de layout reutilizável no Editor de Bloco padrão do WordPress (Gutenberg) é muito parecido com um elemento global em Divi. O bloco pode ser usado várias vezes, mas o conteúdo e a aparência permanecem exatamente os mesmos para todas as instâncias. E quando editamos o bloco de layout reutilizável, a alteração é aplicada a todas as instâncias do bloco de layout em todo o site. Assim que um bloco de layout for reutilizado no WordPress, o bloco ficará disponível na lista de blocos ao escrever a postagem. Isso torna muito conveniente adicionar o mesmo bloco de layout várias vezes em várias postagens de blog.

Transformando o Divi Layout Block em um Reutilizável Layout Block

Para tornar nosso Divi Layout Block um bloco reutilizável, passe o mouse sobre o bloco de layout e abra o menu de configurações clicando no ícone de três pontos. Em seguida, na lista, selecione a opção “Adicionar aos blocos reutilizáveis”.

Em seguida, dê um nome ao bloco reutilizável e clique no botão Salvar para salvar o bloco como um bloco reutilizável.

Agora, quando adicionamos um novo bloco dentro da postagem do blog, podemos encontrar nosso novo bloco de layout reutilizável na lista (na alternância de categoria Reutilizável). Simplesmente clique no bloco de layout reutilizável e ele será adicionado à postagem.

Agora, se olharmos para a postagem ao vivo, podemos ver duas instâncias do mesmo divisor de seção exato.

Depois de usarmos o bloco reutilizável várias vezes em todo o post ou site, podemos editar uma das instâncias do bloco de layout reutilizável e essas alterações serão aplicadas a todas as instâncias do bloco em todo o site.

Para editar o bloco de layout reutilizável, passe o mouse sobre o bloco e clique no botão editar na parte superior direita do bloco.

Em seguida, selecione (clique em) o layout dentro do bloco reutilizável e clique no ícone de edição no menu superior que aparece. Também podemos clicar no link editar layout na guia de bloco na barra lateral direita.

Em seguida, altere o design do layout como quisermos. Para este exemplo, podemos alterar as cores usadas para o fundo gradiente.

Depois de salvar o layout, certifique-se de clicar no botão Salvar no canto superior direito do bloco de layout reutilizável. Em seguida, atualize a postagem e veja as mudanças no site ao vivo.

Você notará que as alterações de design são atualizadas para todas as instâncias do layout reutilizável.

Dica: usando um bloco de layout reutilizável como modelo

Há momentos em que queremos usar uma versão modificada do bloco de layout reutilizável em nossa postagem. Isso nos permite adicionar um bloco de layout reutilizável ao post como um modelo inicial para que possamos personalizar o bloco de layout para uma instância específica sem afetar o bloco reutilizável em todo o site.

Para usar um bloco de layout reutilizável como modelo, primeiro adicione o bloco reutilizável à postagem.

Em seguida, abra o menu do bloco e selecione a opção “converter para bloco regular”.

Agora podemos editar o layout de um design específico para esta instância sem afetar os outros blocos reutilizáveis.

Pensamentos finais

A criação de blocos de layout Divi reutilizáveis ​​pode ser útil, especialmente para elementos de design Divi, como um divisor de seção. Isso nos permite usar o divisor repetidamente em nossas postagens. Isso não apenas simplifica o processo de escrever uma postagem, mas também nos dá o poder de atualizar o design do bloco em todo o site com muito mais facilidade. Neste post, mostramos como adicionar um divisor de seção como um bloco reutilizável, mas essa mesma técnica pode ser usada para criar infinitos blocos de layout Divi reutilizáveis ​​por inúmeras outras razões.

Você pode identificar maneiras úteis de incorporar Blocos de Layout Divi reutilizáveis ​​em suas próprias postagens de blog?

Estou ansioso para ouvir de você nos comentários.

Saúde!