Como usar predefinições globais com blocos de layout Divi para agilizar o design de postagens em blogs
Publicados: 2020-08-19Criar conteúdo para o seu blog é difícil o suficiente sem ter que se preocupar com o design. É por isso que é importante que o seu site tenha os elementos de design prontamente disponíveis (ou pré-concebidos) para que você possa se concentrar mais na criação de conteúdo incrível. Claro, um tema filho tradicional do WordPress pode lidar com isso, mas, na maioria dos casos, você está preso a um design que não é facilmente alterado.
Com o Divi, temos mais controle sobre a experiência de design de uma postagem de blog. As predefinições globais da Divi permitem que você crie um design para todo o site (como um tema filho) para elementos em todo o seu site com a conveniência adicional de poder ajustar o design da maneira que quiser com apenas alguns cliques. Além disso, se você está acostumado a criar conteúdo no editor padrão do WordPress Block, você pode aproveitar o poder do Divi Layout Block para puxar esses elementos predefinidos globais rapidamente dentro do conteúdo da postagem. Isso permitirá que você adicione novos elementos de design em uma postagem de blog que corresponda ao modelo e ao restante do site.
Neste tutorial, vamos mostrar como usar predefinições globais com blocos Divi Layout para agilizar o processo de criação de uma postagem de blog. Para fazer isso, mostraremos como usar as Predefinições globais para criar um novo conteúdo de postagem de blog de forma rápida e eficiente. Isso ajudará a criar uma experiência de blog que não comprometa a marca geral do seu site.
Vamos começar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Uma rápida visão geral das predefinições globais
A beleza do Divi é que ele oferece controle total sobre o design do seu site, usando uma ampla gama de configurações de design que você pode usar para personalizar a aparência de qualquer elemento ou módulo.
O novo sistema Divi Presets permite que você crie uma aparência personalizada para um elemento Divi (como um módulo de botão) e salve-o como um preset. Todas as alterações de projeto feitas são salvas na predefinição. Ao adicionar um novo módulo à sua página, você pode navegar pelas predefinições salvas e aplicá-las rapidamente.
Uma vez que uma predefinição tenha sido aplicada, o design padrão do módulo é controlado pela predefinição. Se você atualizar o estilo de uma predefinição, todos os módulos que usam essa predefinição também serão atualizados. Isso permite que você controle o design de todo o seu site usando uma pequena coleção de predefinições salvas. Além disso, ele economiza muito tempo ao adicionar novos módulos à sua página, já que você não precisa projetar cada novo módulo do zero, mas pode selecionar rapidamente uma aparência na biblioteca Divi Presets.
Guias de estilo predefinidos globais
Guias de estilo predefinidos globais (como o que usaremos neste tutorial) podem ser criados para iniciar o design de elementos durante o design de seu site. Esses guias de estilo contêm uma coleção de módulos com diferentes predefinições que correspondem ao design do seu site. Ter as predefinições disponíveis no início simplificará o processo de design, eliminando o trabalho enfadonho de atualizar as configurações de design para cada novo módulo. Temos até uma estrutura de guia de estilo para quem deseja construir o seu próprio.
Uma rápida visão geral dos blocos de layout Divi
O Divi Layout Block permite aos usuários 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.
Como predefinições globais e blocos de layout funcionam juntos
Como uma predefinição global é “global”, os estilos dessa predefinição afetam todas as instâncias da predefinição em todo o site. Isso significa que você pode usar predefinições globais ao projetar um elemento no editor de blocos de layout e essas predefinições também serão atualizadas de acordo. Portanto, se você deseja adicionar um CTA ao conteúdo da postagem do seu blog usando o Divi Layout Block, você pode construir o CTA adicionando módulos com Predefinições globais da mesma forma que faria com uma página ou postagem normal. Isso permite que você adicione elementos de design correspondentes em sua postagem de forma rápida e eficiente.
Uso de predefinições globais com blocos de layout Divi para agilizar o design de postagens em blogs
Carregando o Guia de Estilos de Predefinições Globais
Para este tutorial, daremos um passo à frente na criação de Predefinições globais usando o Layout de guia de estilo de predefinições globais para o layout de agência da web. Depois de enviar o guia de estilo, teremos algumas predefinições globais disponíveis para usar ao adicionar elementos de design a uma postagem de blog usando o Divi Layout Block.
Para baixar as predefinições globais, vá para a postagem do blog. Role para baixo até a seção intitulada “Baixe o Guia de Estilos de Predefinições Globais”. Em seguida, digite seu endereço de e-mail e clique para receber o download.
Depois de baixar o arquivo zip para o seu computador, descompacte o arquivo e volte para o painel do WordPress.
Para importar o arquivo JSON do guia de estilo para a Biblioteca Divi…
- navegue até Divi> Biblioteca Divi.
- Clique no botão Importar e exportar.
- No pop-up de portabilidade, selecione a guia de importação.
- Escolha o arquivo JSON do guia de estilo global da agência da web.
- Certifique-se de selecionar Importar predefinições.
- Em seguida, clique no botão importar.
Agora, todas essas predefinições globais estão disponíveis no Divi Builder.
Carregando o modelo de postagem
Agora que o guia de estilo está pronto, vamos dar um salto no design do modelo de postagem do blog, importando o modelo de postagem do blog da agência da web que já corresponde aos elementos do guia de estilo.
Para baixar o modelo, vá para a postagem do blog, digite seu endereço de e-mail e clique para baixar os arquivos.
Para importar o modelo de postagem…
- navegue até Divi> Theme Builder.
- Em seguida, clique no ícone de portabilidade.
- No modal de portabilidade, selecione a guia de importação.
- Escolha o arquivo JSON do modelo de postagem que você baixou.
- Em seguida, clique no botão importar.
Usando predefinições para atualizar / projetar o modelo de postagem
Depois de definir o modelo de postagem personalizado, clique para editar o modelo de corpo personalizado. Lá você também pode ver o design do modelo de postagem e fazer ajustes usando as predefinições globais que estão disponíveis no guia de estilo importado. Se você estiver criando seu próprio modelo de postagem do zero, poderá usar as predefinições globais para ajudar a combinar o design do modelo de postagem com os outros elementos do site. Por exemplo, você pode usar a predefinição “WALP - H1 - 1” no título do post da seguinte maneira:
Ou você pode usar o módulo de sinopse “WALP - Blurb 2” predefinido na sinopse que contém as informações dinâmicas do autor.
O módulo de conteúdo da postagem é a área onde o conteúdo da postagem do seu blog será gerado na página. É por isso que é importante combinar as configurações de design do módulo de conteúdo da postagem com os outros elementos de texto usados em seu site.
Se você estiver criando o modelo de postagem do zero, poderá copiar e colar as configurações de texto de vários módulos de texto do site. Ou, se você criou um guia de estilo predefinido global para o seu site com antecedência, pode copiar os elementos de design desses módulos no guia de estilo.
Por exemplo, você pode copiar os estilos de texto do título para a predefinição global feita para todos os estilos de texto em um módulo de texto.
Em seguida, cole esses estilos de texto de título no módulo de conteúdo da postagem para o modelo de postagem. Isso ajudará a garantir que todos os cabeçalhos usados no conteúdo de sua postagem correspondam ao estilo do site.
O importante aqui é que você tenha um modelo de postagem que corresponda ao estilo do seu site. O uso de predefinições globais pode ajudar tremendamente nesse processo se você estiver projetando o modelo do zero.
Usando Predefinições Globais com Blocos de Layout Divi
Uma vez que o modelo foi projetado, estamos prontos para começar a usar as predefinições globais com blocos Divi Layout para criar elementos de conteúdo de postagem adicionais usando o editor de bloco padrão do WordPress.
Para fazer isso, edite (ou crie) uma postagem no blog. Em seguida, certifique-se de ter algum conteúdo simulado (como alguns títulos e parágrafos e uma imagem em destaque).
Agora, se você olhou para a postagem no front end, ele terá o conteúdo da postagem exibido dentro do modelo de postagem e o conteúdo (cabeçalhos, corpo do texto, etc ...) está herdando o estilo das configurações do módulo de conteúdo da postagem.
O módulo de conteúdo de postagem tratará apenas do estilo do conteúdo textual básico. Se você quiser adicionar elementos adicionais ao longo de sua postagem usando o editor de blocos do WordPress padrão, o estilo desses elementos precisará ser alterado por meio de CSS personalizado em um tema filho. Isso é, a menos que você use Divi Layout Blocks.
Para adicionar conteúdo adicional que você deseja que corresponda ao seu modelo de postagem e site, você pode usar blocos de Layout Divi. Isso permitirá que você adicione qualquer conteúdo que desejar e estilize-o usando o Divi Builder. E, como também podemos usar predefinições globais, podemos otimizar ainda mais o design do conteúdo das postagens de nosso blog imediatamente.
Design # 1: Construindo um CTA de blog com predefinições globais e um bloco de layout Divi
Neste primeiro exemplo, vamos criar um CTA de blog personalizado que corresponda ao modelo de postagem e ao design do site.
Para fazer isso, adicione um Bloco de Layout Divi ao conteúdo da postagem.
Em seguida, clique em Construir Novo Layout.
Isso abrirá o editor de blocos de layout, que é basicamente o Divi Builder, como de costume. Dê à seção padrão uma linha de uma coluna.
Abra seu Global Presets Layout em um navegador diferente, certificando-se de clicar para construir no front end para que possa ver os elementos. Dessa forma, você tem o editor de layout aberto em um navegador e o guia de estilo aberto no outro.
Se você não tem um guia de estilo, pode abrir um layout da página em seu site para acessar quaisquer elementos de design que deseja trazer.
Copiar plano de fundo do guia de estilo
Para este CTA, usaremos o fundo azul royal do guia de estilo. Abra as configurações do módulo de texto e copie o fundo.
Em seguida, abra as configurações da seção no editor de layout e cole o plano de fundo na seção.
Adicionar Módulo de Texto com Predefinição H3
Em seguida, adicione um novo módulo de texto à linha.
Em seguida, abra as configurações e atualize o seguinte:
Adicione um título H3 para o CTA, colando o seguinte HTML no corpo:
<h3>Learn How One Client Increased Revenue by 500%</h3>
Abra a lista suspensa Global Presents e selecione a predefinição para o título H3 (WALP - H3 - 1)
Atualizar Design
Em seguida, atualize a cor do texto para branco e centralize o alinhamento.
Adicionar botão com predefinição global
No módulo de texto, adicione um novo botão.
Em seguida, atualize o texto do botão e selecione um dos designs de botão predefinidos globais. Para este exemplo, vamos usar “WALP - Botão 3”.
Salvar alterações
Quando terminar, clique em Salvar e sair.
Agora você pode ver o elemento exibido no Editor de bloco do WordPress.
Projeto 2: Construindo uma citação de blog com predefinições globais e um bloco de layout Divi
Para este próximo elemento de design, vamos adicionar uma citação à postagem do blog.
Adicionar Bloco de Layout Divi
Para começar, adicione Divi Layout Block onde deseja que a citação seja exibida.
Em seguida, clique em Construir Novo Layout.
Copiar e colar o plano de fundo do guia de estilo
Copie o fundo azul escuro do guia de estilo.
Em seguida, cole-o na seção padrão do editor de layout.
Adicionar linha
Em seguida, adicione uma linha de uma coluna à seção.
Adicionar Módulo de Testemunho com Predefinição
Em seguida, adicione um módulo de testemunho à coluna. Em seguida, selecione a predefinição global “WALP - Testemunho 2”.
Isso lhe dará um ótimo começo no design da citação para a postagem do blog.
Atualizar design
Na guia de design, ajuste as configurações de design da seguinte maneira:
- Cor do ícone da citação:
- Peso da fonte do corpo: leve
- Estilo da fonte do corpo: itálico
- Alinhamento do corpo do texto: esquerda
- Cor do corpo do texto: #ffffff
- Fonte do autor: Ubuntu
- Tamanho do texto do autor: 16px
Adicionar nova predefinição global
Como fizemos alterações significativas nesta predefinição de depoimento, faz sentido criar uma nova neste momento para ser usada em futuras postagens.
Para criar um novo, clique no botão “Criar novo preset a partir dos estilos atuais”. Em seguida, dê um nome à nova predefinição (“citação de postagem do blog”) e salve-a. A predefinição global agora está pronta para ser usada daqui para frente.
Salve o layout e você o verá dentro do conteúdo da postagem.
Design # 1: Adicionando Blurbs a uma postagem de blog com predefinições globais e um bloco de layout Divi
Para este próximo exemplo, vamos adicionar algumas sinopses ao post.
Adicionar Novo Bloco de Layout Divi
Adicione outro Divi Layout Block e clique no botão Build New Layout.
No Layout Editor, adicione uma linha de duas colunas ao layout.
Adicionar Módulo Blurb com Predefinições
Na coluna da esquerda, adicione um módulo de sinopse.
Adicione uma nova imagem de ícone à sinopse. Em seguida, abra a lista suspensa de predefinições e selecione a predefinição de blurb “WALP - Blurb 4”.
Adicionar segunda sinopse
Em seguida, copie a sinopse e cole-a na coluna 2 e atualize a imagem.
Salve o layout e você o verá no conteúdo da postagem.
Resultado final
Agora abra a postagem na frente para ver o resultado final.
Blocos reutilizáveis com predefinições globais
Se você quiser aproveitar as vantagens dos blocos reutilizáveis com blocos de layout Divi, é bom saber que eles funcionarão com predefinições globais. Portanto, se quiser salvar o CTA do blog que criamos anteriormente como um bloco reutilizável, você terá um bloco conveniente que pode usar para adicionar CTAs ao criar suas postagens. E, como o CTA está usando um botão e um texto com uma predefinição global, atualizar a predefinição global para esse elemento também atualizará o elemento no bloco reutilizável.
Pensamentos finais
Global Presets é uma de nossas ferramentas de design mais poderosas disponíveis no Divi. Depois de adicionar predefinições globais aos módulos usados em todo o site, você pode realmente aproveitar as vantagens de um processo simplificado de criação de modelos e conteúdo de postagem de blog usando blocos de layout.
Estou ansioso para ouvir de você nos comentários.
Saúde!