5 dicas para organizar o conteúdo da página do blog na Divi
Publicados: 2019-12-21O conteúdo da página do seu blog pode ser organizado de várias maneiras. Por ser uma página de blog, a maior parte do conteúdo consistirá em um feed de postagens recentes do blog. Saber como organizar esse conteúdo pode ser uma ótima maneira de quebrar a monotonia e abrir a porta para designs de páginas de blog mais exclusivos.
Neste tutorial, compartilharemos com você 5 dicas úteis para organizar o conteúdo da página do blog no Divi que o ajudarão a aprender o seguinte:
- Como criar um layout de duas colunas
- Como usar postagens fixas
- Como usar post offsets
- Como usar vários módulos de blog para criar um layout personalizado para postagens de blog
- Como exibir postagens recentes por categoria
Espiada
Aqui está uma olhada em algumas maneiras de organizar o conteúdo da página do blog no Divi.
Usando um Layout de Duas Colunas
Uma seção de postagem em destaque acima do feed principal do blog
Um controle deslizante de postagem de largura total acima do feed principal do blog
Usando vários módulos de blog para um layout e design exclusivos
Apresentando postagens recentes por categoria
O que você precisa para começar
Se ainda não o fez, instale e ative o Divi Theme.
Para este tutorial, estarei usando o segundo modelo de página de categoria do pacote do construtor de tema. Se desejar usá-lo para acompanhar, baixe o pacote e importe o arquivo divi-theme-builder-pack-2-category-page-template.json para o construtor de tema usando as opções de portabilidade. 
Por padrão, o modelo importado será atribuído a “Todas as páginas de categoria”. Abra as configurações do modelo e atribua-o ao Blog.
Agora você está pronto para iniciar o processo de organização do conteúdo da página do blog dentro do modelo. Para começar, clique no ícone de edição na área do corpo do modelo.
Agora você pode usar o editor de layout para modificar o layout.
5 dicas para organizar o modelo de página de blog na Divi
Neste modelo, temos um módulo de blog que está em uma linha de uma coluna que exibe as postagens (em três colunas na área de trabalho) da página atual. Esta é uma configuração padrão para modelos de páginas de blog e arquivo. No entanto, não precisamos manter esse layout padrão para a exibição de postagens. Aqui estão algumas dicas úteis para organizar o conteúdo da página do blog no Divi.
# 1 Crie um layout de duas colunas
O módulo de blog (se configurado para layout de grade) exibirá as postagens em uma estrutura de três colunas se o módulo for adicionado a uma linha de uma coluna (assim como em nosso modelo).
Se você deseja alterar o layout para exibir postagens em um layout de duas colunas, aqui está algo que você pode fazer.
Primeiro, altere o layout da coluna da linha para um layout de dois terços e um terço. Isso exibirá as postagens do blog em duas colunas na coluna esquerda da linha.
Em seguida, abra as configurações da coluna 1 (aquela que contém o módulo de blog) e adicione o seguinte CSS personalizado ao elemento principal:
width: 100% !important;
Isso fará com que a coluna ocupe toda a largura da linha.
Agora tudo o que precisamos fazer é ocultar a coluna à direita. Abra as configurações da coluna 2 (a vazia) e desative a visibilidade da coluna em todos os dispositivos.
Agora você pode organizar o conteúdo da página do blog com duas colunas na área de trabalho, em vez de três, se desejar.
# 2 Use postagens fixas
Se você está familiarizado com o WordPress, talvez já conheça este. Cada postagem criada em Divi (ou WordPress) pode se tornar pegajosa. Quando você torna uma postagem fixa, ela é exibida automaticamente no início do feed do blog na página do blog, mesmo antes da postagem publicada mais recentemente. Essa é uma ótima maneira de destacar postagens que você sabe que seu público vai querer (ou precisar) ver.
Para tornar uma postagem fixa, basta editar uma postagem no Divi e marcar a opção “Fixar no topo do blog” na barra lateral direita.
Cada postagem fixada será marcada como “Fixa” ao visualizar todas as postagens no backend.
Agora, quando você visita a página do blog, pode ver que as postagens fixas saltaram para a frente do feed de postagens do blog.
Nota: Postagens fixas podem não funcionar como esperado ao usar offsets de postagem no Módulo de Blog. Por exemplo, se você definir o módulo de blog para exibir 3 postagens com um deslocamento de postagem de 3, suas postagens fixas ainda serão exibidas antes (e além) das 3 postagens.
Antes de passar para a próxima dica, sugiro que você se livre das postagens fixas.
# 3 Use Post Offsets para organizar o conteúdo da página do blog em seções separadas
Cada módulo de blog tem uma opção para inserir um Número de postagem oficial. Isso instrui o módulo de blog a pular um certo número de postagens recentes antes de exibir o feed do blog. Essa opção é útil sempre que você quiser misturar um pouco o layout da página do seu blog, usando vários módulos de blog para exibir suas postagens. Isso dá a você mais flexibilidade com o design do layout, porque você pode criar cada módulo de blog de maneira diferente.
Apresentando as postagens mais recentes com um módulo de blog separado usando o deslocamento de postagem
Uma maneira de organizar o conteúdo da página do blog em seu layout de modelo é adicionar uma seção de postagem de blog em destaque na parte superior da página. Esta é uma maneira de destacar as três principais postagens mais recentes de uma maneira única. Aqui está agora para fazer isso.
Adicione uma nova seção regular ao layout.
Em seguida, adicione uma linha de uma coluna.
Copie o módulo de blog que acompanha o modelo e cole-o na nova linha.
Atualize as configurações do blog da seguinte maneira:
- Post Count: 3
- Mostrar botão Leia mais: NÃO
- Mostrar categorias: NÃO
- Mostrar contagem de comentários: NÃO
- Mostrar trecho: NÃO
- Mostrar paginação: NÃO
Teremos as três postagens mais recentes exibidas na seção superior da página.
Agora precisamos adicionar um número de deslocamento de postagem ao módulo de blog original para que ele ignore as três primeiras postagens que já estão sendo exibidas acima.
Abra as configurações de blog para o módulo de blog original e atualize o seguinte:
- Número pós-deslocamento: 3
Agora, o feed do blog começará com a postagem 4.
Para destacar a seção em destaque na parte superior da página, você pode adicionar um gradiente de fundo.
Aqui está um exemplo de como seria.
Adicionando um controle deslizante de postagem de largura total acima do feed principal do blog
Muito parecido com a seção de destaque acima, também podemos organizar o conteúdo da postagem do blog, adicionando um controle deslizante de postagem de largura total na parte superior da página do blog. Este é um design popular para páginas de blog e você pode usá-lo em combinação com um módulo de blog que possui um deslocamento de postagem.
Veja como fazer.
Primeiro, adicione uma seção de largura total ao layout.
Em seguida, adicione um módulo deslizante de postagem de largura total à seção.
Em seguida, atualize as seguintes configurações:
- Postagens para a página atual: SIM
- Post Count: 3
Em seguida, atualize o design do controle deslizante de postagem para corresponder ao layout da seguinte maneira:
- Fonte do título: Lato
- Peso da fonte do título: negrito
- Tamanho do texto do título: 40px
- Tamanho do corpo do texto: 16px
- Tamanho do texto do botão: 14 px
- Cor do texto do botão: # ff0071
- Cor de fundo do botão: #ffffff
- Largura da borda do botão: 0 px
- Fonte do botão: Lato
- Peso da fonte do botão: negrito
- Estilo da fonte do botão: TT
Certifique-se de que o módulo de blog exiba o feed principal com um número de deslocamento de postagem ainda definido como 3 para acomodar as 3 postagens do controle deslizante de postagem.
Em seguida, verifique o resultado.
Parece bom até agora.
Agora, vamos levar a ideia de usar um módulo de blog separado um passo adiante com esta próxima dica.
# 4 Adicionar vários módulos de blog, cada um com uma única postagem
Não precisamos parar em apenas adicionar um módulo de blog extra a um layout de modelo. Na verdade, podemos usar quantos módulos de blog precisarmos. Podemos até escolher exibir apenas uma postagem por módulo de blog para dar um design exclusivo a um único cartão postal de blog. Em seguida, usando post offsets, podemos criar um layout totalmente exclusivo de postagens de blog de exibição dinâmica.
Veja como fazer.
Primeiro, adicione uma nova linha de meia coluna acima da linha que contém o módulo principal do blog.
Copie o módulo do blog original abaixo e cole-o na coluna esquerda da nova linha. Em seguida, atualize o seguinte:
- Post Count: 1
- Número pós-deslocamento: 0
- Mostrar paginação: NÃO
Em seguida, copie o módulo de blog que você acabou de criar e cole uma cópia na coluna certa.
Em seguida, atualize o seguinte:
- Número pós-deslocamento: 1
- Mostrar imagem em destaque: NÃO
- Mostrar contagem de comentários: NÃO
- Mostrar trecho: NÃO
Certifique-se de definir o número de deslocamento do post para 1 para pular o primeiro na coluna da esquerda.
Agora continue esse processo criando outro módulo de blog e aumentando o número de deslocamento da postagem em 1 a cada vez.
Duplique o módulo de blog na coluna da direita.
Em seguida, altere o número do deslocamento posterior para 2.
Duplique o módulo de blog mais uma vez e altere o número de deslocamento da postagem para 3.
Agora você pode ter liberdade para personalizar o design de cada um dos módulos do blog individualmente. Por exemplo, você pode adicionar uma cor de fundo diferente para cada um.
Aqui está o resultado.
Se você pretende manter o feed do blog principal abaixo, certifique-se de atualizar o número de deslocamento da postagem para 4 a fim de acomodar as 4 postagens na linha acima.
Você também pode ver essa mesma técnica sendo usada em alguns de nossos modelos de página de categoria do Theme Builder. Confira nosso tutorial sobre como criar um modelo de página de categoria usando o mesmo conceito.
Nº 5 Exibir postagens recentes por categoria na página do blog
Além do feed do blog principal no modelo de página do blog, você também pode exibir suas postagens recentes por categoria. Esta é uma ótima maneira de organizar o conteúdo da página do blog dividindo um pouco o layout e destacando diferentes categorias ao mesmo tempo.
Veja como fazer.
Primeiro, adicione uma nova linha de uma coluna sob a linha que contém o módulo principal do blog.
Em seguida, atualize as configurações do blog da seguinte maneira:
- Postagens para a página atual: NÃO
- Tipo de postagem: postagens
- Post Count: 3
- Categorias incluídas: negócios (ou uma das suas)
Isso exibirá as três postagens mais recentes da categoria Negócios.
Em seguida, adicione um módulo de texto acima do módulo de blog com um título de categoria correspondente.
E assim você tem uma seção de categorias em destaque na página do seu blog - uma ótima maneira de organizar o conteúdo da página do blog!
Você pode até adicionar várias seções de categorias em destaque, cada uma com um design exclusivo.
Essas seções de categorias apresentadas se encaixam bem na parte inferior do modelo da página do blog.
Pensamentos finais
Essas dicas devem ajudá-lo a organizar o conteúdo da página do blog em todos os tipos de maneiras exclusivas. E essas mesmas dicas funcionariam para muitos outros tipos de modelos (como modelos de página de arquivo / categoria) que usam o módulo de blog para exibir conteúdo. Sinta-se à vontade para explorar essas dicas e usá-las em seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!