Como alternar trechos de postagem de blog ao passar o mouse em Divi

Publicados: 2021-08-02

Alternar trechos de postagem de blog ao passar o mouse pode ser uma maneira eficaz de manter um layout de grade compacto para suas postagens de blog sem abandonar esses trechos por completo. A ideia é ocultar os trechos inicialmente e, em seguida, alternar sua visibilidade ao passar o mouse sobre um item de postagem na grade. Isso permite que os usuários vejam mais postagens na janela de visualização do navegador, enquanto fornece ao usuário a opção de ver trechos de postagens em que estão interessados ​​passando o mouse sobre a postagem.

Neste tutorial, mostraremos como alternar trechos de postagem de blog ao pairar no Divi. Para fazer isso, adicionaremos alguns trechos de CSS customizado que alternarão os trechos do item de postagem de um módulo de blog ao passar o mouse (não é necessário JQuery). Depois que o código estiver pronto, você pode definir o estilo do módulo de blog da maneira que quiser usando as configurações integradas do Divi.

Vamos começar!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

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.

Baixe os arquivos
Download de graça

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 da seção para sua biblioteca Divi, navegue até a biblioteca Divi.

Clique no botão Importar.

No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

caixa de notificação divi

Feito isso, o layout da seção estará disponível no Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

expandindo guias de canto

Para começar, você precisará fazer o seguinte:

  1. Se ainda não o fez, instale e ative o Divi Theme.
  2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
  3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Como alternar trechos de postagem de blog ao passar o mouse em Divi

Criando o Layout do Módulo de Blog

Primeiro, precisamos criar um layout básico para as postagens de nosso blog. Para este exemplo, vamos adicionar uma linha de uma coluna com um módulo de blog dentro dela.

Criar linha

Adicione uma linha de uma coluna à seção.

Largura da linha

No modal de configurações de linha, atualize as seguintes configurações de design para ajustar a largura.

  • Largura: 95%
  • Largura máxima: 1200 px

Adicionar Módulo de Blog

Dentro da coluna da linha, adicione um novo módulo de blog.

Configurações do módulo de blog

Em seguida, atualize as configurações de conteúdo do módulo de blog selecionando para mostrar o botão ler mais.

Na guia de design, selecione o layout de grade para o blog.

Na guia avançada, adicione a seguinte classe CSS:

  • Classe CSS: toggle-blog-excerpt

Usaremos essa classe como um seletor para nosso código CSS personalizado na próxima etapa.

Adicionar CSS personalizado com módulo de código

Neste ponto, temos um layout de grade básico para nossas postagens de blog com uma classe CSS personalizada adicionada ao módulo de blog. Usaremos esse seletor de classe CSS para direcionar este módulo de blog específico e adicionar um efeito de alternância ao passar o mouse para a parte do trecho da postagem do item da postagem.

Para adicionar o CSS, vamos usar um módulo de código. Adicione um novo módulo de código abaixo do módulo de blog.

Cole o seguinte CSS personalizado necessário para o efeito de alternância do trecho posterior. Certifique-se de envolver o CSS nas tags de estilo necessárias. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Vamos conferir o resultado até agora na página ao vivo.

Resultado

Examinaremos o código um pouco mais detalhadamente no final do artigo. Mas, por enquanto, vamos verificar o resultado até agora.

Adicione um estilo adicional ao módulo do blog com o Divi Builder

Agora que o CSS está pronto para nos dar o efeito de alternância para os trechos das postagens do nosso blog, podemos adicionar qualquer estilo adicional ao módulo do blog usando o Divi Builder.

Para este exemplo, faremos ajustes mínimos no estilo, mas fique à vontade para explorar seu próprio estilo também.

Estilo do título da postagem

  • Peso da fonte do título: negrito
  • Cor do texto do título: # 6d6a7e
  • Tamanho do texto do título: 20px
  • Altura da linha do título: 1,3em

Estilo Leia Mais Texto

  • Leia mais Peso da fonte: Negrito
  • Leia mais Estilo da fonte: TT
  • Leia mais Cor do texto: # 6d6a7e
  • Leia mais Espaçamento entre letras: 1px
  • Leia mais Altura da linha: 3,5em

Paginação de estilo

  • Peso da fonte de paginação: negrito
  • Estilo de fonte de paginação: TT
  • Cor do texto de paginação: # 6d6a7e
  • Espaçamento entre letras de paginação: 1px

Remover borda

  • Largura da borda do layout da grade: 0 px

Sombra de caixa de estilo ao pairar

  • Sombra da caixa: Veja a captura de tela
  • Posição vertical da sombra da caixa: 0 px
  • Força do desfoque de sombra da caixa: 38px
  • Cor da sombra (desktop): transparente
  • Cor da sombra (pairar): rgba (109,106,126,0,25)

Resultado final

Sobre o código CSS

Se você estiver interessado na análise do CSS personalizado adicionado ao módulo de código anteriormente, aqui está.

Primeiro, precisamos envolver todo o CSS em uma consulta de mídia que só aplicará o CSS a navegadores de desktop. 

@media all and (min-width: 981px) {

}

Em segundo lugar, precisamos adicionar uma transição com uma duração de 500ms ao conteúdo / trecho da postagem para as mudanças de estilo que ocorrerão ao passar o mouse sobre o item da postagem.

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

Terceiro, precisamos ter certeza de que o conteúdo / trecho da postagem permanece visível ao usar o construtor visual para que possamos fazer edições.

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

Quarto, precisamos ocultar o conteúdo / trecho da postagem por padrão quando a página é carregada. Para fazer isso, usamos visibilidade: oculto para ocultar o conteúdo. Em seguida, adicionamos opacity: 0 para que possamos obter um efeito de transição fade in e fade out quando adicionamos opacity: 1 ao estado de foco. Também usamos max-height: 0px para obter o efeito de alternância deslizante quando adicionamos max-height: 500px ao estado de foco.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

Quinto, mostramos o conteúdo / trecho da postagem quando o item da postagem (.et_pb_post) está no estado de foco. Para fazer isso, alteramos a visibilidade para visível, a opacidade para 1 e a altura máxima para 500px.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

Para o trecho final, podemos dar a todos os itens de postagem a mesma altura mínima para um layout de grade alinhado verticalmente mais limpo.

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

Aqui está mais uma olhada no código final. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Pensamentos finais

Conforme mostrado neste tutorial, adicionar alguns trechos de CSS pode fornecer a funcionalidade necessária para alternar trechos de postagem de blog com um bom efeito de foco. A melhor parte sobre esse método é que podemos desenvolver essa funcionalidade adicionando qualquer estilo adicional que quisermos ao módulo de blog usando as opções integradas do Divi. Isso permitirá que você adicione um estilo mais avançado aos itens de postagem, incluindo mais efeitos de foco. Esperançosamente, isso ajudará a dar ao blog do seu site Divi um impulso adicional em design e funcionalidade.

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

Saúde!