Como projetar um layout de postagens recentes por categoria com efeitos Cool Hover na Divi
Publicados: 2019-12-18Estamos todos acostumados a ver postagens recentes sendo exibidas em um site. Eles geralmente são gerados usando o widget Postagem recente do WordPress ou um plug-in para mostrar os artigos publicados mais recentemente no blog. E geralmente aparecem na página do blog, na parte inferior das postagens, nas barras laterais ou como uma seção de destaque de uma página de destino (algo assim).
Para este tutorial, mostraremos como exibir postagens recentes por categoria. Usando apenas o Divi Builder (e alguns módulos de blog), vamos criar uma seção que exibe as últimas postagens de quatro categorias diferentes. Esta seção de postagens recentes por categoria incluirá tags de categoria exclusivas, animações e efeitos de foco - tudo sem um plug-in.
Confira!
Espiada
Aqui está uma rápida olhada no design e na funcionalidade do Layout de Postagens Recentes por Categoria que construiremos juntos.
Baixe as postagens recentes por layout de categoria 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á faz parte da lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será inscrito ou 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 para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi 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.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Além disso, a funcionalidade da seção de postagens recentes depende de ter postagens de blog reais em seu site com categorias atribuídas a elas. Portanto, certifique-se de ter algumas postagens de blog simuladas configuradas se estiver usando um site de teste.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Criando as postagens recentes por seção de categoria na Divi
Crie uma linha de 4 colunas
Para começar no Divi Builder, crie uma linha de 4 colunas.
Criando Módulo 1 de Blog
Cada uma das quatro colunas conterá um módulo de blog separado. Adicione o primeiro módulo de blog à coluna 1.
Cada um dos módulos do blog exibirá a postagem mais recente do seu site por padrão. Tudo o que vamos fazer é selecionar uma categoria específica para incluir nesse módulo de blog específico. Em seguida, limitaremos a contagem de postagens a 1 para que apenas uma postagem seja exibida. Isso nos dará a última postagem do blog para essa categoria de forma dinâmica.
Conteúdo do blog
Atualize as opções de conteúdo do blog da seguinte maneira:
- Tipo de postagem: postagens
- Post Count: 1
- Categorias incluídas: Notícias (ou uma das suas)
- Use pós-excertos: NÃO
- Comprimento do trecho: 120
Opções de elemento
Em seguida, atualize as opções dos elementos da seguinte forma:
- Mostrar categorias: NÃO
- Mostrar trecho: NÃO (desktop), SIM (Hover e Tablet)
- Mostrar paginação: NÃO
Design de Blog
Em seguida, atualize o design da seguinte forma:
- Cor de fundo (desktop): #ffffff
- Cor de fundo (foco): # 8ac829
- Peso da fonte do título: Semi negrito
- Estilo da fonte do título: TT
- Tamanho do texto do título: 24px
- Espaçamento entre letras de título: 1px
- Altura da linha de título: 1,4em
- Cor do corpo do texto: #ffffff
- Meta Font Weight: Light
- Meta espaçamento entre letras: 3px
- Altura mínima: 450 px (desktop), auto (tablet)
- Preenchimento: 5% superior, 5% inferior, 5% esquerdo, 5% direito
- Sombra da caixa: Veja a captura de tela
- Estilo de Animação: Zoom
Isso cuida do design do nosso primeiro módulo de blog. Agora precisamos criar nossa tag de categoria personalizada.
Criando Tag de Categoria 1
Para criar a tag, adicione um novo módulo de texto no módulo de blog e arraste-o acima do módulo de blog.
Conteúdo de Texto
Atualize o conteúdo do corpo com o nome da categoria que você escolheu para o módulo de blog. No meu exemplo, estou exibindo a postagem recente da categoria Notícias, portanto, adicionarei a palavra “Notícias” ao conteúdo do corpo.
Projetando a Tag de Categoria
Nas configurações de design de texto, atualize o seguinte:
- Cor de fundo: # 8ac829
- Peso da fonte do texto: ultra negrito
- Cor do texto do texto: #ffffff
- Alinhamento de texto: centro
- Largura: 120px
- Margem: 80px superior, -80px inferior
- Preenchimento: 10px superior, 10px inferior
- Estilo de animação: Fade
- Atraso de animação: 1000 ms
- Índice Z: 1
Como estamos usando margem negativa para soltar a tag sobre o cartão do blog, precisaremos definir o índice z como 1 para que a tag fique acima do módulo do blog.
Agora que terminamos uma postagem, podemos implantar o modo de visualização wireframe e copiar esses módulos para as outras colunas.
Copie o módulo de texto e blog na coluna 1 e cole-os nas colunas 2,3 e 4 para que você tenha exatamente os mesmos módulos em cada coluna.
Para cada módulo de blog duplicado, precisamos dar a ele uma nova categoria de blog e cor de fundo flutuante. E para cada tag de categoria duplicada, precisamos atualizar o nome da categoria para corresponder à categoria selecionada para o módulo de blog e, em seguida, atualizar a cor de fundo para coincidir com a cor de fundo flutuante do módulo de blog.
Módulos de atualização na coluna 2
Permanecendo na visualização wireframe, abra as configurações do módulo de blog na coluna 2 e atualize o seguinte:
- Categorias incluídas: Negócios (ou suas próprias)
- Cor de fundo (foco): # f64937
Em seguida, atualize as configurações para o módulo de texto na coluna 2 da seguinte forma:
- Corpo: “Business”
- Cor de fundo: # f64937
Módulos de atualização na coluna 3
Em seguida, abra as configurações do módulo de blog na coluna 3 e atualize o seguinte:
- Categorias incluídas: dinheiro (ou seu próprio)
- Cor de fundo (pairar): # 6529c7
Em seguida, atualize as configurações para o módulo de texto na coluna 3 da seguinte forma:
- Corpo: “Dinheiro”
- Cor de fundo: # 6529c7
Módulos de atualização na coluna 4
Em seguida, abra as configurações do módulo de blog na coluna 4 e atualize o seguinte:
- Categorias incluídas: Coaching (ou seu próprio)
- Cor de fundo (foco): # f17809
Em seguida, atualize as configurações para o módulo de texto na coluna 4 da seguinte forma:
- Corpo: “Coaching”
- Cor de fundo: # f17809
Atualizando as configurações de linha
Existem alguns ajustes que precisamos fazer em nossa linha, incluindo uma altura definida e largura de medianiz personalizada. Atualize as seguintes configurações de linha:
- Usar largura de calha personalizada: SIM
- Largura da calha: 2
- Largura: 94%
- Largura máxima: 1400 px
- Altura: 540 px (desktop), automático (tablet)
- Preenchimento: 0 px superior, 0 px inferior
Estamos definindo a altura da linha para 540 px no desktop para evitar que a linha se expanda e mova outro conteúdo na página ao passar o mouse sobre um cartão de blog. Certifique-se de definir a altura como automática no tablet para que você não oculte nenhum conteúdo.
Atualizando as configurações de cada coluna
Para dar às postagens recentes do blog um efeito de foco que é aplicado a ambos os módulos simultaneamente, podemos adicionar o efeito de foco à coluna que contém os dois módulos que compõem a postagem do blog. Abra as configurações de cada uma das colunas e atualize o seguinte:
- Escala de transformação (Hover): 115%
Em seguida, adicione o seguinte CSS personalizado ao elemento principal apenas na tela do tablet:
transform: none !important
Este pequeno snippet desativará o efeito de foco da escala de transformação para dispositivos móveis.
Agora, sempre que as postagens recentes estão todas definidas com uma tag de categoria correspondente e uma cor de fundo correspondente que aparece ao passar o mouse sobre o cartão. Além disso, o cartão ficará maior e mostrará o trecho ao passar o mouse também.
Atualizando as configurações da seção
Para a seção, vamos dar um novo gradiente de fundo e algum preenchimento. Abra as configurações da seção e atualize o seguinte:
- Cor do gradiente de fundo à esquerda: # 6529c7
- Cor certa do gradiente de fundo: # f64937
- Direção do gradiente: 270 graus
- Preenchimento: 10vw superior, 10vw inferior
Resultado final
É isso! Vamos conferir o resultado final. Esta imagem inclui um título que pode ser facilmente adicionado para completar o design.
E aqui estão os efeitos de animação e foco.
Pensamentos finais
Criar um layout de posts recentes por categoria é realmente um processo fácil, uma vez que você pensa um pouco fora da caixa. Tudo o que você realmente precisa fazer é criar um módulo de blog para cada categoria que deseja exibir. Em seguida, limite esse módulo para exibir apenas a postagem mais recente para uma determinada categoria. Depois disso, você tem o poder da Divi ao seu lado para cuidar do design.
Este layout pode ser usado em qualquer lugar do seu site, incluindo os modelos Theme Builder. Portanto, sinta-se à vontade para importá-los para qualquer lugar que precisar usando as opções de portabilidade. Espero que seja útil para o seu próximo projeto ou, pelo menos, dê a você um pouco de inspiração para fazer as rodas girarem e criar designs Divi ainda melhores.
Estou ansioso para ouvir de você nos comentários.
Saúde!