Como criar um modelo de página de categoria para seu blog usando o Divi Theme Builder
Publicados: 2019-10-30Uma página de categoria pode ser extremamente útil para os usuários, fornecendo-lhes uma página inteira cheia de coisas nas quais estão interessados (ou pesquisam). Mas muitas vezes a página da categoria pode sofrer quando se trata de design. Na Divi, antes dos dias do Divi Theme Builder, os desenvolvedores tinham que personalizar manualmente o código php em um arquivo de tema de modelo de página de categoria e, em seguida, estilizar o modelo de página puramente com CSS externo. Mas agora, com o Divi Theme Builder, esse processo se tornou fácil e agradável!
Neste tutorial, mostraremos como criar um modelo de página de categoria para o seu blog completamente do zero usando o Divi Theme Builder. Mostraremos como configurar rapidamente um novo modelo atribuído para postar categorias, bem como projetar o modelo usando os módulos apropriados e conteúdo dinâmico usando o Divi Builder.
Vamos começar!
Espiada
Aqui está uma rápida olhada no modelo de página de categoria que projetaremos juntos neste tutorial. Nesta imagem, ele está sendo usado para exibir todas as postagens da categoria “Negócios”.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download 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.
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.
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!
Para importar o layout do modelo para o seu site, você precisará ir ao Divi Theme Builder e usar a opção de portabilidade para importar o arquivo .json para o tema builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme instalado (ou o Divi Builder Plugin se não estiver usando o Divi Theme).
- Como criaremos um modelo de página de categoria para postagens de blog, você precisará ter postagens já criadas em seu site com categorias atribuídas a elas.
Depois disso, você está pronto para ir.
Módulos e conteúdo dinâmico disponíveis para modelos de página de categoria
Ao construir um modelo de página de categoria para um blog Divi, é importante entender quais ferramentas estão à sua disposição para que você possa construir efetivamente um modelo que exiba dinamicamente as informações corretas. Para um modelo de página de categoria para postagens de blog, estamos mais interessados em exibir postagens da categoria atual sempre que um usuário visita uma página de categoria. Por exemplo, se um usuário clicar no link da categoria “Negócios”, ele deverá ver uma página de arquivo que exibe todas as postagens com a categoria “Negócios”. Alguns módulos Divi têm opções integradas para tornar a exibição de conteúdo dinâmico em um modelo com bastante facilidade.
O Módulo de Blog
O Módulo de blog é o módulo principal que deve ser usado para exibir modelos de página de categoria. Isso ocorre porque possui a opção embutida de exibir Postagens para a Página Atual.
Basicamente, isso diz ao Divi para exibir as postagens que normalmente são geradas sempre que um usuário visita a página. Assim, com a opção definida para exibir “Postagens para a página atual”, o usuário poderá visualizar uma página de categoria e ter as postagens por categoria exibidas corretamente.
Módulo de controle deslizante de postagem e Módulo de título de postagem
Você também pode usar o módulo Post Slider para exibir as postagens da página atual. Isso é útil para criar um controle deslizante de postagem dinâmica que exibe as postagens geradas ao visitar uma página de categoria, da mesma forma que o módulo de blog pode fazer.
O Módulo de Título de Postagem também pode ser usado, mas é bastante limitado à capacidade de exibir o Título da página dinamicamente. A maioria dos outros elementos disponíveis no módulo de título de postagem não são aplicáveis a uma página de arquivo, apenas modelos de postagem específicos.
Postagem / Título do arquivo (conteúdo dinâmico)
Uma maneira mais fácil de exibir o Título da Página de Postagem / Arquivamento é usar um módulo Divi normal e, em seguida, obter o Título da Página de Postagem / Arquivo usando o recurso de conteúdo dinâmico disponível em todos os módulos Divi.
Por exemplo, você pode usar um módulo de texto e adicionar o título da página de postagem / arquivo como conteúdo dinâmico ao conteúdo do corpo. Em seguida, você pode estilizar o título como quiser.
Agora que você entende as ferramentas necessárias para criar um modelo de página de categoria, vamos começar a criar um juntos.
Como criar um modelo de página de categoria para o seu blog
Para este modelo de página de categoria, o objetivo é criar uma área de corpo personalizada para um modelo que é atribuído a todas as páginas de categoria para postagens de blog no Divi. Não criaremos uma área de cabeçalho ou rodapé personalizada para este modelo. Mas você pode usar esse modelo facilmente em seu próprio site com seu próprio cabeçalho e rodapé.
Criação e atribuição de um modelo personalizado para categorias de postagem
Para começar, vá para o painel do WordPress e navegue até Divi> Theme Builder. Em seguida, clique na área da caixa cinza vazia para adicionar um novo modelo.
Em seguida, atribua o modelo a todas as páginas de categoria.
Adicionando Nova Área de Corpo Personalizada ao Modelo
Para construir o corpo personalizado para o modelo, clique na área Adicionar corpo personalizado e selecione “Construir corpo personalizado”.
Em seguida, escolha a opção “Build From Scratch”.
Adicionar Título de Arquivo Dinâmico
No Editor de layout de modelo, crie uma nova linha de uma coluna dentro da seção regular.
Em seguida, adicione um módulo de texto à linha.
Exclua o conteúdo do corpo padrão e clique no ícone “Usar conteúdo dinâmico” e selecione a opção “Post / Título do arquivo.
Assim que o elemento Post / Archive Title estiver no lugar, abra as configurações clicando no ícone de engrenagem.
Em seguida, atualize as áreas de entrada Antes e Depois para envolver o conteúdo em uma tag H1 e adicionar uma parte adicional de conteúdo estático após o título dinâmico da seguinte maneira:
Antes:
<h1>
Depois de:
Articles</h1>
Precisamos envolver o título em uma tag H1 para fins de SEO. A palavra estática “Artigos” é adicionada após o título para que, se um usuário visitar uma página da categoria “Negócios”, o título será “Artigos de Negócios”.
Estilo de Título de Arquivo Dinâmico
Assim que o conteúdo dinâmico estiver pronto, podemos estilizá-lo usando o seguinte:
- Fonte do título: Ubuntu
- Fonte do cabeçalho: Peso: Negrito
- Cor do texto do título: # 192231
- Tamanho do texto do título: 48 px (desktop), 38 px (tablet), 28 px (telefone)
- Altura da linha de direção: 1,2em
Usando o módulo de blog para exibir postagens para a categoria atual dinamicamente
Com o título da página da categoria dinâmica no lugar, precisamos adicionar o módulo de blog para exibir as postagens da página da categoria atual.
Adicionar nova linha
Adicione uma nova linha de uma coluna sob a linha superior atual.
Adicionar Módulo de Blog
Em seguida, adicione um módulo de blog à linha.
Atualize as opções de conteúdo da seguinte forma:
- Postagens para a página atual: SIM
- Postagem: 9
- Mostrar botão Leia mais: SIM
Lembre-se, devemos ter certeza de que Postagens para a página atual está habilitado para a página de categoria para puxar o arquivo de postagens correto.
Módulo de Blog de Design
Com as configurações de conteúdo no lugar, vamos fazer algumas alterações no design da seguinte maneira:
- Layout: Grade
- Fonte do título: Ubuntu
- Peso da fonte do título: negrito
- Cor do texto do título: # 192231
- Meta Font: Ubuntu
- Meta Cor do Texto: # 985e6d
- Tamanho do metatexto: 13px
- Leia mais Fonte: Ubuntu
- Leia mais Peso da fonte: Negrito
- Leia mais Estilo da fonte: Sublinhado
- Leia mais Cor do texto: # 985e6d
- Fonte de paginação: Ubuntu
- Cor do texto de paginação: # 985e6d
- Tamanho do texto de paginação: 18 px
- Altura da linha de paginação: 2em
- Largura da borda do layout da grade: 0 px
- Sombra da caixa: veja a imagem
- Força do desfoque de sombra da caixa: 70 px
- Força de propagação da sombra da caixa: -10px
- Cor da sombra: rgba (25,34,49,0.3)
Neste ponto, temos uma página de categoria básica instalada e funcionando, completa com o título da página e as postagens do blog que serão exibidas corretamente de acordo com a página da categoria atual. No entanto, podemos ser mais criativos adicionando um módulo adicional para exibir a postagem de maneiras criativas.
Crie um controle deslizante de postagem para obter as 4 postagens mais recentes na categoria atual.
Podemos usar um módulo de controle deslizante de postagem para exibir as postagens da página da categoria dinamicamente também. Aqui está como fazer.
Adicionar nova linha
Primeiro, adicione uma nova linha com um layout de coluna 1/3 2/3 sob a linha superior.
Adicionar módulo de controle deslizante de postagem
Na coluna da esquerda, adicione um módulo de controle deslizante de postagem.
Em seguida, atualize as opções de conteúdo do controle deslizante de postagem da seguinte maneira:
- Postagens para a página atual: SIM
- Post Count: 4
- Mostrar meta da postagem: NÃO
Módulo Design Post Slider
Agora que o conteúdo do controle deslizante de postagem está pronto, atualize as configurações de design da seguinte maneira:
- Alinhamento de Texto: Esquerda
- Fonte do título: Ubuntu
- Altura da linha do título: 1,3em
- Use estilos personalizados para botão: SIM
- Tamanho do texto do botão: 16 px
- Cor de fundo do botão: # 985e6d
- Largura da borda do botão: 0 px
- Fonte do botão: Ubuntu
- Sombra da caixa: veja a imagem
- Força do desfoque da sombra da caixa: 70px
- Força de propagação da sombra da caixa: -10px
- Cor da sombra: rgba (25,34,49,0.3)
Crie um Módulo de Blog com layout de largura total
Na coluna certa, podemos adicionar outro módulo de blog com um layout de largura total em vez de um layout de grade. Isso nos permitirá fornecer outra área de exibição exclusiva para as postagens de nossa categoria.
Adicionar Módulo de Blog
Para economizar tempo, vamos copiar o módulo de blog existente na linha inferior e colá-lo na coluna direita ao lado do controle deslizante de postagem.
Atualize as configurações do módulo de blog duplicado
Abra as configurações do módulo de blog duplicadas e atualize o seguinte:
- Postagens para a página atual: SIM
- Post Count: 3
- Comprimento do trecho: 120
- Mostrar imagem em destaque: NÃO (pelo menos por agora)
- Mostrar paginação: NÃO
- Layout: largura total:
- Sombra da caixa: nenhuma
Resultado até agora
Até agora, o resultado é a exibição mínima das três postagens do blog.
Mas se quisermos dar um passo adiante, podemos adicionar algumas pequenas imagens em destaque à esquerda de cada um dos trechos da postagem.
Use CSS customizado para criar imagens menores que flutuam à esquerda do conteúdo do trecho da postagem.
Para adicionar algumas pequenas imagens em destaque à esquerda dos trechos das postagens do blog, precisamos adicionar algum CSS personalizado.
Dê classe CSS personalizada ao módulo de blog
Para começar, precisamos adicionar uma classe CSS personalizada ao módulo Blog. Abra as configurações do blog e, na guia avançada, digite o seguinte:
- Classe CSS: left-blog-image
Adicionar código CSS com um módulo de código
Como estamos apenas adicionando um pequeno snippet CSS a este modelo, podemos usar um módulo de código. Adicione um módulo de código no módulo de blog.
Insira o código CSS
Em seguida, insira o seguinte CSS dentro da área de conteúdo do código:
<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>
Atualize as configurações do módulo de blog para incluir a imagem em destaque
Agora, podemos adicionar a imagem em destaque de volta para que ela seja exibida na nova posição à esquerda, graças ao snippet CSS.
Estilo adicional para o modelo
Antes de encerrarmos as coisas, vamos fazer alguns pequenos retoques no design.
Adicionar e definir o estilo de um divisor sob o título do arquivo
Adicione um módulo divisor diretamente sob o título da página de arquivo na parte superior do modelo.
Em seguida, atualize as configurações do divisor da seguinte forma:
- Cor da linha: # 985e6d
- Peso do divisor: 3px
- Largura máxima: 200px
Adicionar divisor de seção ao layout
Abra as configurações de seção e adicione um divisor de seção da seguinte maneira:
- Estilo do divisor superior: veja a captura de tela
- Cor do divisor superior: rgba (73,78,107,0,07)
- Altura do divisor: 90vw
- Divider Flip: horizontal e vertical
Use Post Offset Number com cada módulo para evitar postagens duplicadas
No momento, todos os nossos módulos estão puxando o mesmo conteúdo de postagem para a página da categoria atual. Para evitar que esses módulos exibam duplicatas, podemos usar a opção Post Offset Number para “pular” um certo número de postagens que exibem o feed de postagens.
Compensação de postagem do módulo de blog de largura total
Como nosso controle deslizante de postagem já está exibindo a primeira (mais recente) postagem da página da categoria atual, podemos compensar essa postagem no módulo de blog adjacente a ela. Abra as configurações do módulo de blog à direita do controle deslizante da postagem e atualize o número de deslocamento da postagem da seguinte forma:
- Número pós-deslocamento: 1
Agora o módulo começará com a segunda postagem mais recente da página da categoria atual.
Compensação de postagem do módulo de blog da grade
Depois que o deslocamento de postagem do primeiro módulo de blog estiver em vigor, precisamos compensar as postagens no módulo de blog principal na parte inferior do modelo. Abra esse módulo de blog e atualize o número de pós-deslocamento da seguinte maneira:
- Número pós-deslocamento: 4
Precisamos definir o número de compensação para 4 para contabilizar os 4 posts que já estão sendo exibidos acima. O módulo agora continuará de onde os outros módulos pararam e começará com a quinta postagem mais recente.
Resultados finais
Para visualizar o resultado final, vá para o painel do WordPress e navegue até Postagens> Categorias. Em seguida, clique para ver uma das categorias existentes.
Aqui está o resultado final.
E aqui está na tela do tablet e do telefone.
Pensamentos finais
Esperançosamente, este post ajudará você a respirar um pouco mais fácil quando enfrentar o desafio de criar um design de página de categoria para seu site. O Divi Theme Builder torna extremamente fácil de fazer, especialmente com o módulo de blog agora tendo a opção de exibir postagens da página atual. E a opção de deslocamento de postagem permite combinar vários módulos de blog (ou mesmo módulos de controle deslizante de postagem) sem nunca ver postagens duplicadas em exibição.
Como o Divi Theme Builder o ajudou a criar páginas de categoria?
Estou ansioso para ouvir de você nos comentários.
Saúde!