Como usar o recurso de conteúdo dinâmico da Divi para projetar um layout de postagem dinâmico

O novo recurso de Conteúdo Dinâmico da Divi nos dá a capacidade de construir layouts dinâmicos para postagens de blog (e muito mais). E há boas razões para você considerar fazer isso. Um dos motivos é o design. Você pode projetar alguns layouts de postagem incríveis com Divi usando o construtor visual, especialmente quando você usa os layouts predefinidos disponíveis como ponto de partida. Outro motivo é a conveniência. Uma vez que o layout da postagem é projetado com todos os elementos de conteúdo dinâmico no lugar (como categorias, imagens em destaque, tags de postagem, campos personalizados, etc.), o processo de criação e atualização de postagens do blog é bastante simplificado. Além do conteúdo real da postagem, todos os outros dados da postagem podem ser atualizados sem a necessidade de implantar o construtor visual.

Neste tutorial, vou mostrar como construir um layout de postagem dinâmico no Divi. Começando com um layout predefinido, vou orientá-lo no processo de adição de conteúdo dinâmico em todo o layout e, em seguida, projetar esse conteúdo para corresponder. Vou até apresentar uma maneira simples de usar campos personalizados como conteúdo dinâmico.

Vamos começar.

Espiada

O que você precisa para começar

Para este tutorial, você precisará do seguinte:

• Divi Theme
• Pacote de Layout do Personal Trainer. Este pacote de layout pode ser acessado no Divi Builder. Estaremos usando o Layout da Página de Serviço do Personal Trainer para iniciar o design do nosso layout de postagem.

Também mostrarei como aproveitar as vantagens dos campos personalizados para criar uma seção de treino em destaque usando a funcionalidade de tipo de postagem personalizada. Os campos personalizados são integrados ao WordPress e não requerem plug-ins adicionais nem nada. Então você já tem o que precisa.

Parte 1: Adicionando o Layout Premade ao Post

Para começar, vá em frente e crie uma nova postagem (não uma página), dê um título à sua postagem e clique no botão Usar Divi Builder. Não implante o construtor visual ainda porque primeiro precisamos personalizar nossas configurações de postagem na tela padrão do editor do WordPress.

Uma vez que queremos adicionar nosso layout predefinido para obter nossas imagens do layout (precisamos dele para nossa imagem em destaque). Clique no botão Load Layout localizado no menu Divi Builder.

No pop-up Carregar da biblioteca, selecione o Layout da página de serviço do Personal Trainer e implante-o em sua postagem clicando no botão “Usar este layout”.

Em seguida, publique sua postagem para salvar suas configurações.

Parte 2: Atualizando as configurações da página Divi, postar metadados e imagens em destaque

Configurações da página Divi

É importante que atualizemos as configurações da página Divi para que nosso novo layout se ajuste ao design. Também precisamos ocultar a exibição padrão do título do post, pois usaremos o módulo do título do post.

No canto superior direito da página, localize a caixa Configurações da página Divi e atualize o seguinte:

Layout da página: largura total
Mostrar título da postagem: Ocultar

Se você não vir as Configurações da página Divi, provavelmente não tem o Divi Builder ativado, portanto, certifique-se de fazer isso primeiro.

Adicionar categorias

Abaixo da caixa de categorias, adicione uma nova categoria chamada “Treinamento de Força” e certifique-se de que é a única categoria selecionada.

Adicionar Tags

Na caixa de marcas, adicione as três marcas a seguir: Velocidade, Treinamento e Exercícios.

Imagem em destaque

Em seguida, adicione uma imagem em destaque que corresponda à imagem de fundo usada no cabeçalho do layout, conforme mostrado na captura de tela abaixo.

Parte 3: Adicionando campos personalizados para o conteúdo de treino dinâmico

Os campos personalizados são integrados ao WordPress. Eles permitem que os autores das postagens adicionem informações extras (chamados de metadados) a uma postagem, além dos metadados padrão, como categorias, autor da postagem, data da postagem, etc. Em um nível básico, os campos personalizados podem ser usados ​​para exibir o clima ou o humor do autor ao escrever uma postagem. Mas existem muitas maneiras diferentes de usar campos personalizados para criar conteúdo dinâmico para seu site. Sinta-se à vontade para ler mais sobre como adicionar campos personalizados ao seu site. Mas, para este caso de uso, acho que você entenderá o conceito básico de campos personalizados criando alguns para si mesmo.

Para este exemplo, vou mostrar como adicionar alguns campos personalizados que podem ser usados ​​para adicionar conteúdo dinâmico à sua postagem. O conteúdo dinâmico para este exemplo é um treino em destaque. Uma vez que os campos personalizados estão em vigor, tudo o que o autor da postagem precisa fazer é preencher os valores dos campos personalizados e o conteúdo será atualizado (dinamicamente) para a postagem sem nunca ter que carregar o Construtor Visual.

Para fazer isso, desça até a parte inferior da postagem e encontre a caixa Campos personalizados. Se por algum motivo ele não for exibido, certifique-se de selecioná-lo nas opções da tela na parte superior da página.

Em seguida, clique na lista suspensa da caixa Campos personalizados (se recolhida) para adicionar um novo campo personalizado e digite o seguinte:

Nome: título do treino
Valor: treino em destaque

Em seguida, clique no botão Adicionar campo personalizado.

O nome é como você identifica o campo personalizado no Divi. O valor é o conteúdo que será adicionado dinamicamente à página usando o recurso de conteúdo dinâmico do Divi (mais sobre isso mais tarde).

Continue este processo para adicionar os seguintes campos personalizados ao seu site.

Nome: aquecimento
Valor: 800m corrida

Nome: duração
Valor: 30min

Nome: levantamento de peso
Valor:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

Nome: esfriar
Valor: 400m de corrida

Observação: esses campos personalizados serão adicionados ao tema Divi e estarão disponíveis em qualquer nova postagem que você criar no futuro. Em outras palavras, não se limita a esta única postagem.

Não se esqueça de atualizar sua postagem!

Parte 4: Adicionando conteúdo dinâmico ao layout de postagem usando o Visual Builder

Agora que temos nossas configurações de postagem e metadados no lugar, é hora de começar a adicionar conteúdo dinâmico à nossa postagem. Para fazer isso, implante o Visual Builder.

Para tornar as coisas um pouco mais fáceis de localizar e editar para este design de layout avançado, abra o menu de configurações e defina o Modo de interação padrão do construtor como Modo de clique.

Na seção do cabeçalho, exclua o módulo do botão (não precisamos dele).

Substituição da imagem de fundo pelo conteúdo dinâmico da imagem em destaque

Para a nossa primeira peça de conteúdo dinâmico, vamos substituir a imagem de fundo usada na coluna 1 da linha da seção de cabeçalho superior pela imagem em destaque usada para a postagem. Para fazer isso, abra as configurações de linha e encontre as configurações de plano de fundo para a coluna 1 e clique na guia da imagem de plano de fundo. Em seguida, exclua a imagem que está lá e passe o mouse sobre a caixa de visualização da imagem de fundo. Você verá o ícone de conteúdo dinâmico no canto superior direito da caixa. Clique nele para abrir as opções de conteúdo dinâmico. Em seguida, selecione a opção de conteúdo dinâmico de Imagem em destaque na lista.

Seu layout será exatamente o mesmo, pois estamos usando a mesma imagem. A única diferença agora é que a imagem de fundo está sendo extraída de qualquer imagem definida como sua imagem de destaque do post. Essa é a beleza do conteúdo dinâmico!

Vamos continuar.

Adicionando o Título da Postagem com um Módulo de Título da Postagem

No módulo de texto que atualmente contém o título da página, adicione um módulo Título da postagem. Também existe a opção de adicionar o título da postagem a um módulo usando conteúdo dinâmico, mas, como o Módulo de título da postagem já funciona como conteúdo dinâmico e preserva a tag de título h1 para SEO, é perfeito para usá-lo em seu layout de postagem personalizado .

Em seguida, atualize as configurações do módulo de título da postagem da seguinte maneira:

Mostrar Meta: NÃO
Mostrar imagem em destaque: NÃO

Agora vá para o módulo de texto acima e copie os estilos de título h2 clicando com o botão direito na guia h2 e selecionando a opção nesta lista.

Em seguida, cole os estilos de título h2 no módulo de título do post clicando com o botão direito do mouse no módulo e selecionando a opção na lista.

Depois disso, volte novamente ao módulo de texto acima, copie os estilos de espaçamento e cole-os no módulo de título do post. Em seguida, altere a cor do texto do título da postagem para claro para obter a cor branca.

Agora o título da sua postagem deve corresponder ao design do título do layout original.

Agora você pode excluir o módulo de texto que contém o título original.

Uso de conteúdo dinâmico para criar uma linha de metadados

Passe para a segunda seção do layout. Em seguida, retire o preenchimento superior da seção arrastando-o no construtor visual ou definindo-o como 0px nas configurações da seção.

Na primeira linha da segunda seção do layout, você notará um módulo de texto (tem o conteúdo “Sobre o Treinamento Pessoal”) com uma divisória abaixo dele. É aqui que vamos construir nossa linha personalizada de metadados usando conteúdo dinâmico.

Queremos que o tamanho desta linha corresponda ao tamanho da linha na seção superior. Para fazer isso, abra as configurações de linha da linha na seção superior e copie os estilos de dimensionamento. Em seguida, cole-os na primeira linha da segunda seção. Em seguida, atualize a medianiz de linha com para 2. O novo dimensionamento deve ser semelhante à imagem a seguir.

Você também precisará adicionar o espaçamento personalizado da seguinte forma:

Preenchimento personalizado: 1% esquerdo, 1% direito

Em seguida, salve as configurações de linha.

Agora atualize a estrutura da coluna da linha para um layout de quatro colunas.

Agora estamos prontos para adicionar nosso conteúdo dinâmico. Para fazer isso, abra as configurações do módulo de texto agora na coluna da esquerda e passe o mouse sobre a caixa de conteúdo. Você verá o ícone de conteúdo dinâmico no canto superior direito da caixa. Clique nele para abrir as opções de conteúdo dinâmico.

Em seguida, selecione a opção: Data de publicação.

Em seguida, altere o formato da data de acordo.

Isso adicionará a data de publicação da postagem como conteúdo dinâmico.

Para definir o estilo do módulo de texto com o conteúdo de data dinâmico, copie os estilos do módulo de texto na coluna esquerda da linha diretamente abaixo.

Em seguida, cole os estilos do módulo no módulo de texto com o conteúdo de data dinâmico e altere a cor do texto do texto para branco.

Em seguida, copie o módulo de texto e o divisor abaixo dele e cole-o na coluna 2. Em seguida, altere o conteúdo dinâmico para Categorias de postagem.

Você precisará atualizar a cor do texto do link para branco para combinar com o design do layout.

Agora copie o módulo de texto de categorias de postagem com o divisor para a coluna 3. Em seguida, altere o conteúdo dinâmico para Contagem de comentários de postagem. No pop-up Contagem de comentários de postagem, digite o seguinte na caixa de entrada Antes:

Antes: Comentários:

As caixas de entrada antes e depois disponíveis nos pop-ups de conteúdo dinâmico são uma opção conveniente para adicionar texto antes e / ou depois do conteúdo dinâmico. Isso é útil para adicionar rótulos, símbolos de preço e outros elementos quando necessário.

Agora vamos continuar adicionando nosso conteúdo dinâmico. Copie o módulo de texto e o divisor na coluna 3 e cole na coluna 4. Esta última coluna conterá a miniatura do autor da postagem e o nome do autor. Portanto, altere o conteúdo dinâmico do módulo de texto para Post Author. No pop-up Post Author, atualize o seguinte:

Antes: por:
Formato do nome: nome e sobrenome

Acima do módulo de texto com o conteúdo do autor da postagem, adicione um novo módulo de imagem. Abra as configurações do módulo de imagem e exclua a imagem padrão. Assim como temos feito, clique no ícone de conteúdo dinâmico na caixa de visualização da imagem e adicione a Foto de Perfil do Autor da Publicação como o conteúdo dinâmico.

Em seguida, ajuste as configurações de design para puxar a imagem para cima e dar a ela uma largura personalizada da seguinte maneira:

Largura: 80px
Margem personalizada (desktop): -82px superior
Margem personalizada (tablet): 0px superior

Nota: O nome do autor da postagem mostrará o autor que foi atribuído à postagem atual. E a imagem do perfil do autor da postagem é a que foi definida para o perfil do usuário no painel do WordPress em Usuários> Seu perfil.

Parte 5: Adicionando os campos personalizados como conteúdo dinâmico para adicionar um treino em destaque ao post

Lembra-se de como adicionamos esses campos personalizados no início do tutorial? Agora vamos usar esses campos personalizados como conteúdo para um treino em destaque em nosso post.

Para adicionar nosso conteúdo dinâmico de treino em destaque, primeiro duplique a linha de duas colunas diretamente abaixo da linha de quatro colunas com todos os nossos metadados dinâmicos. Em seguida, exclua os módulos em ambas as colunas e adicione um módulo de sinopse à coluna da esquerda.

Usaremos módulos de blurb para adicionar o conteúdo dinâmico para a seção de treino. Para começar, adicione um novo módulo de blurb à coluna da esquerda.

Para o Título, adicione o campo personalizado denominado “Título do treino” como conteúdo dinâmico. Em seguida, para o conteúdo da sinopse, adicione o campo personalizado denominado “Duração” como o conteúdo dinâmico.

Para manter as coisas rolando, não vou abordar o estilo desses módulos em detalhes. Mas, você precisará adicionar um ícone de sinopse colocado à esquerda do título e atualizar o design para corresponder ao layout.

Em seguida, adicione um segundo módulo de sinopse abaixo. Digite o texto “Aquecimento” como título. Em seguida, adicione o campo personalizado denominado “Aquecimento” como o conteúdo dinâmico.

Adicione um terceiro módulo de sinopse abaixo daquele, com “Levantamento de peso” como título e o campo personalizado “Levantamento de peso” como o conteúdo dinâmico. Como estamos usando html para este valor de campo personalizado, você precisará habilitar o html bruto no pop-up de levantamento de peso.

Adicione um módulo final de sinopse com "Cool Down" como título e o campo personalizado "Cool Down" como conteúdo dinâmico.

Agora você tem uma seção dinâmica para adicionar exercícios à sua postagem!

Tudo o que você precisa fazer é atualizar os valores dos campos personalizados do editor de página padrão no WordPress e esse conteúdo será adicionado ao seu layout de postagem automaticamente, sem ter que ir para o construtor Divi.

Parte 6: Projetando uma seção de “Tópicos Relacionados” usando Conteúdo Dinâmico de Tags Post

Você pode usar conteúdo dinâmico para exibir as tags de postagem e criar uma seção de “tópicos relacionados” de aparência interessante para sua postagem. Para fazer isso, crie uma nova linha de uma coluna e adicione um módulo de texto à linha.

Em seguida, para a caixa de conteúdo, adicione Post Tags como o conteúdo dinâmico. Em seguida, atualize as seguintes opções de Tags de postagem:

Antes: Tópicos Relacionados:
Separador de tags: //

Nota: Você pode usar praticamente qualquer conjunto de caracteres que desejar para o separador de tags, portanto, sinta-se à vontade para experimentar outros diferentes para designs criativos.

Para definir o estilo do conteúdo, atualize as seguintes configurações de design:

Fonte do Texto: Oswald
Peso da fonte do texto: Semi negrito
Cor do texto do texto: # ff4c00
Tamanho do texto do texto: 30px
Fonte do link: Oswald
Peso da fonte do link: Semi negrito
Cor do texto do link: # 262d3f
Tamanho do texto do link: 50px
Espaçamento entre letras de link: 2px
Altura da linha do link: 1,6em

Aqui está o design final.

Parte 7: Adicionando uma biografia do autor e uma seção de comentários

Neste ponto, você está bem equipado para adicionar conteúdo dinâmico e ajustar o design do layout do seu post com bastante facilidade, então não vou entrar em muitos detalhes sobre esses dois últimos elementos.

Adicionando uma seção de biografia do autor usando conteúdo dinâmico

Para adicionar uma seção de biografia do autor na parte inferior do conteúdo da postagem, você pode usar o conteúdo dinâmico do Autor da postagem, Foto do perfil do autor da postagem e Biografia do autor. Como você pode ver na imagem abaixo, criei uma linha de coluna de 1/4 3/4. Em seguida, adicionei a foto do perfil do autor da postagem na coluna da esquerda. Na coluna da direita, adicionei o autor da postagem com a biografia do autor embaixo. Também adicionei o conteúdo dinâmico da imagem em destaque como a imagem de fundo para a seção (e uma sobreposição de gradiente). Aqui está um exemplo de como seria.

Adicionando uma seção de comentário usando o módulo de comentários

Como estamos usando um layout de postagem customizado, é necessário usar um módulo de comentários para que possamos combinar o design da seção de comentários com o layout. Basta adicionar o módulo de comentários a uma nova linha de seção que corresponda aos estilos de botão e fontes com o layout atual. Aqui está um exemplo de como seria.

O Design Final

Aqui está o design final de todo o poste, uma vez que todo o design foi ajustado.

Atualizando o conteúdo da postagem e salvando o layout para postagens futuras

Como estamos usando o Divi Builder para criar o layout da postagem, você ainda precisará atualizar o conteúdo real da postagem usando os módulos Divi. Mas com todo o resto agora dinâmico, isso torna o processo muito mais fácil no futuro. Você precisará salvar o layout da postagem em sua biblioteca para que, ao criar uma nova postagem, tudo o que você precise fazer seja adicionar o layout salvo à postagem e atualizar o conteúdo da postagem.

Pensamentos finais

O Conteúdo Dinâmico da Divi é um recurso poderoso que torna a adição e atualização de dados de postagem muito mais fácil. Portanto, se você deseja criar um layout personalizado para as postagens do seu blog (ou outros tipos de postagem personalizadas, como Projetos) usando o Divi Builder, o conteúdo dinâmico é o caminho a percorrer. Claro, o conteúdo dinâmico não se limita a postagens. Você pode tirar proveito do conteúdo dinâmico e dos campos personalizados em todo o seu site. Espero que esta postagem ajude você a entender algumas das possibilidades e inspire você a usar o conteúdo dinâmico de novas maneiras incríveis.

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

Saúde!