Quer saber como exibir trechos de artigos ao passar o mouse em Divi ?
A visualização de 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 totalmente esses trechos.
Portanto, a ideia é inicialmente ocultar os snippets e depois mostrá-los quando você passar o mouse sobre uma postagem na grade. Portanto, permite que os leitores vejam mais postagens, além de permitir que vejam trechos das postagens que lhes interessam.
Portanto, neste tutorial, mostraremos como criar este efeito de alternância de snippets de postagem de blog ao passar o mouse em Divi.
Vamos começar!
Visão geral
Primeiro, aqui está uma visão geral do que criaremos neste tutorial.
Criando o layout do módulo de blog
Primeiro, precisamos criar um layout básico para nossos posts. Para este tutorial, adicionaremos uma linha a uma coluna e inseriremos um módulo Blog nela.
Crie uma linha
Para começar, insira uma linha de uma coluna na seção
espessura da linha
Em seguida, vá para as configurações de linha. em seguida, na guia Estilo, em Dimensionamento, modifique as larguras da seguinte forma:
- Largura máxima: 90%
- Largura máxima: 1200px
Adicionar um módulo de blog
Em seguida, insira um módulo Blog na coluna da linha criada anteriormente.
Configurações do módulo de blog
Em seguida, acesse as configurações do módulo Blog, na aba Conteúdo, em Elementos, defina a opção “Mostrar botão Leia mais” como “Sim”
Agora vá para a guia Estilo, em Modelo, selecione o modelo “Grade” como layout para o blog.
Por fim, vá para a guia Avançado e adicione a seguinte classe CSS:
Classe CSS: toggle-blog-excerpt
Posteriormente, usaremos essa classe como seletor para nosso código CSS personalizado na próxima etapa.
Adicione CSS personalizado com o módulo Code.
Neste ponto, nossas postagens de blog são dispostas em uma grade e uma classe CSS personalizada foi adicionada ao menu Blog. Então, vamos usar este seletor de classe CSS para direcionar especificamente este módulo do Blog e adicionar um efeito de alternância ao passar o mouse sobre um artigo.
Para adicionar CSS, usaremos o módulo Code. Para fazer isso, adicione um módulo de código no módulo Blog.
Em seguida, cole o CSS personalizado abaixo necessário para criar o efeito de alternância do snippet do artigo ao passar o mouse. Acima de tudo, certifique-se de colar o código CSS entre as tags de estilo necessárias.
@mediaalland (min-width:981px) {/* add transition for post content*/.toggle-blog-excerpt .et_pb_post .post-content {-webkit-transition:all500ms!important;transition:all500ms!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 visualizar o resultado obtido até agora.
Resultado
Vamos adicionar um estilo extra ao módulo Blog com o construtor Divi
Agora que o CSS está pronto para nos dar o efeito de alternância para os trechos de postagem do blog, podemos adicionar qualquer estilo adicional ao módulo do blog usando o construtor Divi.
Para este exemplo, faremos ajustes mínimos no estilo, mas sinta-se à vontade para explorar seu próprio estilo também.
Estilo do título do artigo
- Título da penumbra: Texto em negrito
- Cor do texto do título: #6D6A7E
- Tamanho do texto do título: 20px
- Altura da linha de título: 1.3em
Estilo de texto "Leia mais"
- Leia mais Luz fraca: texto em negrito
- Leia mais Estilo de cópia: TT
- Cor do texto Leia mais: #6D6A7E
- Espaçamento entre letras Leia mais: 1px
- Altura da linha Leia mais: 3.5em
Alterar a exibição da paginação de texto
- Mostrar paginação Luz fraca: texto em negrito
- Cor do texto Mostrar paginação: #6D6A7E
- Espaçamento entre letras Mostrar paginação: 1px
- Mostrar paginação Estilo de cópia: TT
Remover borda
- Largura da borda do layout da grade: 0px
Estilo de caixa de sombra suspensa
- Caixa de sombra: veja a captura de tela
- Posição inicial: 0px
- Intensidade do desfoque de sombra da caixa: 38px
- Cor da fonte da legenda: rgba (109,106,126,0.25)
Resultado final
Conclusão
Concluindo, como mostrado neste tutorial, adicionar alguns trechos de CSS pode fornecer a funcionalidade necessária para agitar trechos de postagem de blog com um bom efeito de foco.
A coisa mais importante sobre este método é que podemos adicionar estilos adicionais conforme desejarmos ao módulo de blog usando as opções integradas do Divi. Além disso, permitirá que você personalize os elementos da postagem, incluindo a adição de mais efeitos de foco.
Espero que isso ajude a dar ao blog seu site da Web Divi um impulso extra em termos de design e funcionalidade. Conte-nos sobre suas experiências nos comentários.
