Vuoi sapere come visualizzare frammenti di articolo al passaggio del mouse Divi ?
L'anteprima dei frammenti di post del blog al passaggio del mouse può essere un modo efficace per mantenere un layout a griglia compatto per i post del tuo blog senza abbandonare del tutto quei frammenti.
Quindi, l'idea è di nascondere inizialmente gli snippet e poi mostrarli quando passi il mouse su un post nella griglia. Pertanto, consente ai lettori di vedere più post dando loro anche la possibilità di vedere frammenti dei post che li interessano.
Quindi, in questo tutorial, ti mostreremo come creare questo frammento di post del blog per attivare l'effetto al passaggio del mouse Divi.
Cominciamo!
Panoramica
Innanzitutto, ecco una panoramica di ciò che creeremo in questo tutorial.
Creazione del layout del modulo blog
Innanzitutto, dobbiamo creare un layout di base per i nostri post sul blog. Per questo tutorial, aggiungeremo una riga a una colonna e inseriremo un modulo Blog al suo interno.
Crea una linea
Per iniziare, inserisci una riga di una colonna nella sezione
larghezza della linea
Quindi vai alle impostazioni della linea. quindi, nella scheda Stile, in Ridimensionamento, modificare le larghezze come segue:
- Larghezza massima: 90%
- Larghezza massima: 1200px
Aggiungi un modulo blog
Quindi, inserisci un modulo Blog nella colonna della riga precedentemente creata.
Impostazioni del modulo blog
Successivamente, vai alle impostazioni del modulo Blog, nella scheda Contenuto, in Elementi, imposta l'opzione "Mostra pulsante Leggi altro" su "Sì"
Ora vai alla scheda Stile, sotto Modello, seleziona il modello "Griglia" come layout per il blog.
Infine, vai alla scheda Avanzate e aggiungi la seguente classe CSS:
Classe CSS: toggle-blog-extract
Successivamente, utilizzeremo questa classe come selettore per il nostro codice CSS personalizzato nel passaggio successivo.
Aggiungi CSS personalizzato con il modulo Codice.
A questo punto, i nostri post sul blog sono disposti in una griglia e una classe CSS personalizzata è stata aggiunta al menu Blog. Quindi useremo questo selettore di classe CSS per indirizzare in modo specifico questo modulo Blog e aggiungere un effetto di attivazione quando passi il mouse su un articolo.
Per aggiungere CSS, useremo il modulo Codice. Per fare ciò, aggiungi un modulo Codice sotto il modulo Blog.
Successivamente, incolla il CSS personalizzato di seguito necessario per creare l'effetto di attivazione/disattivazione dello snippet di articolo al passaggio del mouse. Soprattutto, assicurati di incollare il codice CSS tra i tag di stile necessari.
@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;}}
Vediamo il risultato ottenuto finora.
Risultato
Aggiungiamo uno stile extra al modulo Blog con il builder Divi
Ora che il CSS è pronto per darci l'effetto di attivazione/disattivazione per gli snippet dei post del nostro blog, possiamo aggiungere qualsiasi stile aggiuntivo al modulo del blog utilizzando il costruttore Divi.
Per questo esempio, apporteremo modifiche minime allo stile, ma sentiti libero di esplorare anche il tuo stile.
Stile del titolo dell'articolo
- Titolo in penombra: testo in grassetto
- Colore del testo del titolo: #6D6A7E
- Dimensione del testo del titolo: 20px
- Altezza della riga del titolo: 1.3 em
Stile del testo "Leggi di più"
- Leggi di più Luce fioca: testo in grassetto
- Leggi di più Stile di copia: TT
- Colore del testo Per saperne di più: #6D6A7E
- Spaziatura delle lettere Per saperne di più: 1px
- Altezza della linea Per saperne di più: 3.5 em
Modifica la visualizzazione dell'impaginazione del testo
- Mostra paginazione Luce fioca: testo in grassetto
- Colore del testo Mostra impaginazione: #6D6A7E
- Spaziatura lettere Mostra impaginazione: 1px
- Mostra impaginazione Stile copia: TT
Rimuovi bordo
- Larghezza bordo layout griglia: 0px
Passa il mouse su Stile casella ombra
- Casella ombra: vedi screenshot
- Posizione di partenza: 0px
- Intensità sfocatura ombra scatola: 38px
- Colore del carattere dei sottotitoli: rgba (109,106,126,0.25)
Risultato finale
Conclusione
In conclusione, come mostrato in questo tutorial, l'aggiunta di alcuni snippet CSS può darti le funzionalità necessarie per creare frammenti di post di blog con un piacevole effetto al passaggio del mouse.
La cosa più importante di questo metodo è che possiamo aggiungere uno stile aggiuntivo come desideriamo al modulo blog utilizzando le opzioni integrate di Divi. Inoltre, ti consentirà di personalizzare gli elementi del post, inclusa l'aggiunta di più effetti al passaggio del mouse.
Spero che questo aiuterà a dare al blog il tuo sito web Divi una spinta in più in termini di design e funzionalità . Raccontaci le tue esperienze nei commenti.
