Como dar às suas páginas de arquivo Divi um layout de alvenaria
Publicados: 2021-09-15Para dar às suas páginas de arquivo um layout de alvenaria personalizado, podemos usar o criador de temas Divi para projetar um modelo de página de arquivo dinâmico personalizado. Na Divi, antes dos dias do Divi Theme Builder, os desenvolvedores tinham que personalizar manualmente o código PHP em um arquivo de arquivo de tema de modelo de página e, em seguida, estilizar o modelo de página puramente com CSS externo. Isso tornou a criação de um layout de alvenaria muito mais difícil. 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 arquivo que exibe dinamicamente o título da página de arquivo, o subtítulo e as postagens do blog. E, usando o módulo de postagem do blog, podemos facilmente exibir nosso arquivo de postagens em um layout de grade de alvenaria.
Vamos começar!
Espiada
Aqui está uma rápida olhada no modelo de página de arquivo que iremos projetar juntos neste tutorial. Nesta imagem, ele está sendo usado para exibir todos os posts com a categoria “WordPress”.
Baixe o modelo de página de arquivo GRATUITAMENTE
Para colocar suas mãos no modelo deste tutorial, primeiro você precisa baixá-lo 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 arquivo, você precisará ter algumas postagens de blog já criadas em seu site com autores, categorias e / ou tags atribuídos a eles se quiser ver os resultados.
Depois disso, você está pronto para ir.
Compreendendo os módulos e o conteúdo dinâmico disponíveis para modelos de página de arquivo
Ao construir um modelo de página de arquivo para um site 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 arquivo, estamos mais interessados em exibir as postagens da página atual sempre que um usuário visita uma página de arquivo. 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 simples a exibição de conteúdo dinâmico em um modelo.
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 Arquivo. Isso ocorre porque tem 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. Portanto, com a opção definida para exibir “Postagens para a página atual”, o usuário será capaz de visualizar uma página de arquivo e ter as postagens para essa página atual exibidas corretamente.
Postagem / Título do arquivo (conteúdo dinâmico)
Uma maneira mais fácil de exibir o título da página de postagem / arquivo é 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 arquivo, vamos começar e criar um juntos.
Como criar um modelo de página de arquivo Divi com um layout de alvenaria
Para criar um modelo de página de arquivo com um layout de alvenaria, tudo o que você realmente precisa fazer é projetar um novo modelo para todas as páginas de arquivo usando o criador de temas.
Criação e atribuição de um modelo personalizado para todas as páginas de arquivo
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 do arquivo.
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, atualize as configurações de seção padrão com uma cor de fundo.
- Cor de fundo: #eeeeee
Em seguida, 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:
</h1>
Precisamos envolver o título em uma tag H1 para fins de SEO.
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 cabeçalho: Mulish
- Fonte do cabeçalho: Peso: Pesado
- Alinhamento do texto do título: Centro
- Cor do texto do título: # 3a405a
- Tamanho do texto do título: 70 px (desktop), 40 px (tablet e telefone)
Adicionar texto de subtítulo de arquivo dinâmico
Como podemos envolver o título da página de arquivo dinâmico com HTML personalizado, podemos adicionar uma legenda que puxa o título da página de arquivo dinâmico dentro do texto da legenda.
Para fazer isso, crie um novo módulo de texto sob o módulo de texto anterior com o título.
Exclua o texto do corpo padrão e adicione o conteúdo dinâmico do título da postagem / arquivo ao corpo (assim como fizemos anteriormente).
Abra as configurações de post / archive title e adicione o seguinte antes e depois do conteúdo.
Antes:
<h3>Here are the articles on
Depois de:
</h3>
Agora, o título será exibido em linha com a linha de texto anterior.
Estilo de Título de Arquivo Dinâmico
Assim que o conteúdo dinâmico estiver no lugar, podemos estilizar atualizando as seguintes configurações H3:
- Fonte do Título 3: Mulish
- Alinhamento de texto do título 3: Centro
Usando o módulo de blog para exibir postagens para a página atual dinamicamente
Com o título da página de arquivo dinâmico definido, precisamos adicionar o módulo de blog para exibir as postagens da página de arquivo atual.
Adicionar nova seção
Antes de adicionarmos o módulo de blog, vamos adicionar uma nova seção à página.
Adicionar nova linha de uma coluna
Em seguida, adicione uma nova linha de uma coluna à nova seção.
Em seguida, abra as configurações de linha e atualize o seguinte:
- Usar largura de calha personalizada: SIM
- Largura da calha: 2;
- Largura: 95%
Adicionar módulo de blog para exibir postagens para a página atual dinamicamente
Agora precisamos adicionar um módulo de blog à linha.
Lembre-se de que devemos nos certificar de que as postagens da página atual estejam habilitadas para que a página do arquivo extraia o arquivo de postagens correto. Atualize as opções de conteúdo da seguinte forma:
- Postagens para a página atual: SIM
Módulo de Blog de Design
Com as configurações de conteúdo no lugar, vamos fazer algumas alterações no design. Na guia de design, atualize o layout da seguinte maneira:
- Layout: Grade
Agora volte para a guia de conteúdo e adicione a seguinte cor de fundo aos itens da grade:
- Cor de fundo: # 3a405a
Atualizar estilos de texto de título
- Fonte do título: Mulish
- Peso da fonte do título: negrito
- Cor do texto do título: #eee
- Tamanho do texto do título: 34 px
- Altura da linha do título: 1,3em
Atualizar estilos de corpo de texto
- Fonte do corpo: Montserrat
- Cor do corpo do texto: #ffffff
- Altura da linha corporal: 2em
Atualizar estilos de meta-texto
- Meta Fonte: Montserrat
- Meta Cor do Texto: # ffb100
Atualizar estilos de paginação
- Peso da fonte de paginação: negrito
- Cor do texto de paginação: # 3a405a
Neste ponto, temos nosso modelo de página de arquivo instalado e funcionando, completo com o título da página e as postagens do blog (em um layout de alvenaria) que exibirão as postagens da página de arquivo atual dinamicamente.
Resultado final
Para testar os resultados, visite os diferentes tipos de páginas de arquivo em seu site.
Aqui está um exemplo de um modelo de página de arquivo de categoria mostrando todas as postagens da categoria “WordPress”.
Aqui está um modelo de página de arquivo do autor exibindo todas as postagens de um autor específico.
Aqui está uma página de arquivo de tags exibindo todas as postagens com a tag “Notícias”.
E aqui está um modelo de página de arquivo de data exibindo todas as postagens do mês de outubro de 2019.
Pensamentos finais
Depois de saber como criar um novo modelo de arquivo com o criador de temas Divi, é fácil adicionar um layout de alvenaria para os postes. O truque é usar as opções integradas do Divi para exibir o título da página do arquivo como conteúdo dinâmico e, em seguida, usar o módulo de blog para exibir dinamicamente a postagem da página atual em um layout de grade de alvenaria. Esperançosamente, isso ajudará a impulsionar o design geral do seu site, direcionando as páginas de arquivo que podem ser facilmente esquecidas.
Estou ansioso para ouvir de você nos comentários.
Saúde!