Come attivare/disattivare gli estratti dei post del blog al passaggio del mouse in Divi
Pubblicato: 2021-08-02L'attivazione/disattivazione degli estratti dei post del blog al passaggio del mouse può essere un modo efficace per mantenere un layout di griglia compatto per i post del blog senza abbandonare del tutto quegli estratti. L'idea è quella di nascondere inizialmente gli estratti e poi di attivare o disattivare la loro visibilità quando si passa con il mouse su un elemento del post all'interno della griglia. Ciò consente agli utenti di vedere più post all'interno della finestra del browser fornendo allo stesso tempo all'utente la possibilità di vedere estratti dei post a cui sono interessati passando il mouse sopra il post.
In questo tutorial, ti mostreremo come attivare o disattivare gli estratti dei post del blog al passaggio del mouse in Divi. Per fare ciò, aggiungeremo alcuni frammenti di CSS personalizzati che commuteranno gli estratti dell'elemento del post di un modulo del blog al passaggio del mouse (non è necessario JQuery). Una volta che il codice è a posto, puoi modellare il modulo del blog come preferisci utilizzando le impostazioni integrate di Divi.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Come attivare/disattivare gli estratti dei post del blog al passaggio del mouse in Divi
Creazione del layout del modulo blog
Innanzitutto, dobbiamo creare un layout di base per i nostri post sul blog. Per questo esempio, aggiungeremo una riga a una colonna con un modulo blog al suo interno.
Crea riga
Aggiungi una riga a una colonna alla sezione.
Larghezza riga
Nel modale delle impostazioni di riga, aggiorna le seguenti impostazioni di progettazione per regolare la larghezza.
- Larghezza: 95%
- Larghezza massima: 1200 px
Aggiungi modulo blog
All'interno della colonna della riga, aggiungi un nuovo modulo blog.
Impostazioni modulo blog
Successivamente, aggiorna le impostazioni del contenuto del modulo del blog selezionando di mostrare il pulsante Leggi di più.
Nella scheda Design, seleziona il layout Griglia per il blog.
Nella scheda Avanzate, aggiungi la seguente Classe CSS:
- Classe CSS: toggle-blog-excerpt
Useremo questa classe come selettore per il nostro codice CSS personalizzato nel passaggio successivo.
Aggiungi CSS personalizzato con modulo di codice
A questo punto, abbiamo un layout di griglia di base per i nostri post del blog con una classe CSS personalizzata aggiunta al modulo del blog. Useremo questo selettore di classe CSS per indirizzare questo specifico modulo del blog e aggiungere un effetto di attivazione/disattivazione al passaggio del mouse alla parte dell'estratto del post dell'elemento del post.
Per aggiungere il CSS, utilizzeremo un modulo di codice. Aggiungi un nuovo modulo di codice sotto il modulo blog.
Incolla il seguente CSS personalizzato necessario per l'effetto di attivazione/disattivazione del post estratto. Assicurati di racchiudere il CSS nei tag di stile necessari.
@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;
}
}
Controlliamo il risultato finora sulla pagina live.
Risultato
Esamineremo il codice un po' più in dettaglio alla fine dell'articolo. Ma per ora, diamo un'occhiata al risultato finora.
Aggiungi uno stile aggiuntivo al modulo Blog con Divi Builder
Ora che il CSS è a posto per darci l'effetto di attivazione/disattivazione per gli estratti dei nostri post sul blog, possiamo aggiungere qualsiasi stile aggiuntivo al modulo del blog utilizzando Divi Builder.
Per questo esempio, apporteremo modifiche minime allo stile, ma sentiti libero di esplorare anche il tuo stile.
Stile del titolo dell'articolo
- Peso del carattere del titolo: grassetto
- Colore del testo del titolo: #6d6a7e
- Dimensione del testo del titolo: 20px
- Altezza della riga del titolo: 1,3 em
Stile Leggi di più Testo
- Leggi di più Peso del carattere: grassetto
- Leggi di più Stile carattere: TT
- Leggi di più Colore del testo: #6d6a7e
- Leggi di più Spaziatura lettere: 1px
- Leggi di più Altezza della linea: 3.5em
Impaginazione di stile
- Peso del carattere di impaginazione: grassetto
- Stile carattere di impaginazione: TT
- Colore del testo dell'impaginazione: #6d6a7e
- Spaziatura delle lettere di impaginazione: 1px
Rimuovi bordo
- Larghezza bordo layout griglia: 0px
Ombra della casella di stile al passaggio del mouse
- Box Shadow: vedi screenshot
- Posizione verticale dell'ombra del riquadro: 0px
- Forza sfocatura dell'ombra della scatola: 38 px
- Colore ombra (desktop): trasparente
- Colore ombra (al passaggio del mouse): rgba(109,106,126,0.25)
Risultato finale
Informazioni sul codice CSS
Se sei interessato alla suddivisione del CSS personalizzato aggiunto in precedenza al modulo di codice, eccolo qui.
Innanzitutto, dobbiamo racchiudere tutto il CSS in una media query che applicherà il CSS solo ai browser desktop.
@media all and (min-width: 981px) {
}
In secondo luogo, dobbiamo aggiungere una transizione con una durata di 500 ms al contenuto/estratto del post per le modifiche di stile che si verificheranno quando si passa con il mouse sull'elemento del post.
/* add transition for post content*/
.toggle-blog-excerpt .et_pb_post .post-content {
-webkit-transition: all 500ms !important;
transition: all 500ms !important;
}
Terzo, dobbiamo assicurarci che il contenuto/l'estratto del post rimanga visibile quando si utilizza il visual builder in modo da poter apportare modifiche.
/* 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, dobbiamo nascondere il contenuto/estratto del post per impostazione predefinita quando la pagina viene caricata. Per fare questo usiamo visibilità: nascosto per nascondere il contenuto. Quindi aggiungiamo opacità: 0 in modo da poter ottenere un effetto di transizione di dissolvenza in entrata e in uscita quando aggiungiamo opacità:1 allo stato al passaggio del mouse. Usiamo anche max-height: 0px per ottenere l'effetto di attivazione/disattivazione scorrevole quando aggiungiamo max-height: 500px allo stato al passaggio del mouse.
/* hide post content */
.toggle-blog-excerpt .et_pb_post .post-content {
visibility: hidden;
opacity: 0;
max-height:0px;
}
Quinto, mostriamo il contenuto/estratto del post quando l'elemento del post (.et_pb_post) è nello stato al passaggio del mouse. Per fare ciò, cambiamo la visibilità in visibile, l'opacità in 1 e l'altezza massima in 500 px.
/* show post content when hovering over post item */
.toggle-blog-excerpt .et_pb_post:hover .post-content {
visibility: visible;
opacity:1;
max-height: 500px;
}
Per lo snippet finale, possiamo dare a tutti gli elementi del post la stessa altezza minima per un layout di griglia allineato verticalmente più pulito.
/* set min-height for all post items */
.toggle-blog-excerpt .et_pb_post {
min-height: 400px;
}
Ecco un altro sguardo al codice finale.
@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;
}
}
Pensieri finali
Come mostrato in questo tutorial, l'aggiunta di alcuni frammenti di CSS può darti la funzionalità necessaria per alternare estratti di post del blog con un piacevole effetto al passaggio del mouse. La parte migliore di questo metodo è che possiamo basarci su questa funzionalità aggiungendo qualsiasi stile aggiuntivo che desideriamo al modulo blog utilizzando le opzioni integrate di Divi. Ciò ti consentirà di aggiungere uno stile più avanzato agli elementi del post, inclusi più effetti al passaggio del mouse. Si spera che questo aiuti a dare al blog del tuo sito web Divi un ulteriore impulso in termini di design e funzionalità.
Non vedo l'ora di sentirti nei commenti.
Saluti!