Come creare un ticker per post di blog con il modulo di scorrimento dei post di Divi
Pubblicato: 2021-07-03Un ticker per i post del blog è uno strumento utile per mostrare in modo dinamico i post del blog (recenti, correlati, ecc.) sul tuo sito web. Puoi pensarlo come un news ticker per i post del blog di WordPress.
Oggi ti mostreremo come creare un ticker per i post del blog con il modulo di scorrimento dei post di Divi. Simile a un news ticker, il blog post ticker che creeremo sarà una versione semplificata e compatta del modulo di scorrimento dei post di Divi. E, poiché il modulo di scorrimento dei post ha funzionalità integrate per mostrare i post in vari modi, puoi usarlo ovunque tu voglia. Puoi usarlo nella home page come ticker dei post per mostrare i post recenti, oppure puoi usarlo nell'intestazione di un modello di post di blog per mostrare i post correlati alla categoria corrente.
Dopo averti mostrato come creare il ticker del post del blog in Divi, ti mostreremo anche come salvarlo nella tua libreria Divi in modo da poterlo aggiungere a un'intestazione di un modello di post del blog in Divi Builder.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al ticker del post del blog che creeremo in questo tutorial.
Ecco come il post ticker si posiziona bene sul display del telefono.
Mostreremo come aggiungere il post ticker per mostrare i post correlati anche nell'intestazione di un modello di post del blog.
Scarica il layout e il modello 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!
Importa il layout nella libreria Divi
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. Sarà il file JSON all'interno della cartella denominata "blog post ticker layout (Divi Library)".
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Importa il modello di intestazione in Divi Theme Builder
Se desideri importare il modello di post del blog con il ticker del post aggiunto all'intestazione, dovrai navigare in Divi > Generatore di temi.
Quindi usa l'icona della portabilità in alto a destra della pagina per importare il file JSON. Sarà il file all'interno della cartella denominata "modello di intestazione del post del blog con post ticker (Theme 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.
Creazione del blog post ticker in Divi
Creazione della riga
Per iniziare, creiamo una riga a una colonna all'interno della sezione.
Impostazioni riga
Quindi, aggiorna le impostazioni del design della riga come segue:
- Larghezza grondaia: 1
- Imbottitura: 0px in alto, 0px in basso
Creazione del titolo del post ticker con un modulo di testo
Ora che la riga è a posto, aggiungi un modulo di testo alla riga per creare il titolo del post ticker.
Testo del titolo e sfondo
Aggiorna il testo del corpo per leggere "Post recenti:".
Quindi aggiorna il colore di sfondo:
- Colore di sfondo: #333333
Impostazioni di progettazione
Nella scheda Progettazione, aggiorna gli stili di testo come segue:
- Carattere del testo: Poppins
- Peso del carattere del testo: semi grassetto
- Stile del carattere del testo: TT
- Colore del testo del testo: rgba (255,255,255,0.7)
- Spaziatura delle lettere del testo: 1px
- Altezza riga di testo: 40 px
- Allineamento del testo: Centro
- Larghezza: 100%
- Larghezza massima: 175 px (desktop e tablet), 100% (telefono)
Questo si prende cura del titolo del nostro post ticker. Ora iniziamo a costruire il post ticker.
Creazione del ticker del post del blog con un modulo di scorrimento del post del blog
Per creare il ticker del post del blog, utilizzeremo un modulo di scorrimento dei post e quindi semplificheremo il design per renderlo davvero compatto.
Aggiungi un modulo di scorrimento degli articoli sotto il modulo di testo.
Pubblica contenuto slider
Nella scheda dei contenuti, puoi scegliere il conteggio dei post, le categorie incluse e il modo in cui sono stati ordinati. Per questo esempio manterremo l'impostazione predefinita e faremo in modo che il dispositivo di scorrimento mostri i post più recenti.
Per nascondere l'estratto del post, assicurati di aggiornare quanto segue:
- Usa gli estratti dei post: NO
- Lunghezza estratto: 0
Elementi e sfondo del cursore dei post
In realtà, tutto ciò che vogliamo visualizzare nel dispositivo di scorrimento sono il titolo del post e le frecce della diapositiva. Sotto il gruppo di opzioni degli elementi, nascondi tutto tranne le frecce.
- Mostra controlli: NO
- Mostra il pulsante Leggi di più: NO
- Mostra post meta: NO
Manterremo l'opzione per mostrare l'immagine in primo piano come sfondo di ogni diapositiva. Ma per un backup, assicurati di aggiungere il seguente colore di sfondo:
- Colore di sfondo: #eeeeee
Impostazioni di progettazione del dispositivo di scorrimento post
Stili di sovrapposizione e freccia
Nella scheda Design, aggiorna la sovrapposizione di sfondo e il colore della freccia come segue:
- Usa sovrapposizione sfondo: S
- Colore di sfondo della sovrapposizione: rgba (248,248.248,0.9)
- Colore freccia: #ffffff (desktop), #ef51f7 (hover)
Testo del titolo
Quindi, aggiorna gli stili del testo del titolo come segue:
- Carattere del titolo: Poppins
- Peso del carattere del titolo: medio
- Allineamento del testo del titolo: a sinistra
- Colore del testo del titolo: #333333
- Colore del testo del titolo (passa il mouse): #ef51f7
- Dimensione del testo del titolo: 16 px (desktop), 14 px (telefono)
- Altezza della riga del titolo: 40 px
- Titolo Testo Ombra: vedi screenshot
- Colore dell'ombra del testo del titolo: trasparente
Spaziatura
Dobbiamo fare spazio al modulo di testo del titolo del post ticker in modo da poter posizionare il nostro cursore del post sul lato destro di esso. Per farlo, aggiorna quanto segue:
- Margine: 175 px a sinistra (desktop e tablet), 0 px a sinistra (telefono)
- Imbottitura: 0px in alto, 0px in basso, 0px a sinistra, 0px a destra
Animazione automatica
Il cursore del post ha un'opzione integrata per l'aggiunta di animazioni automatiche. Questo ci darà la funzionalità ticker di cui abbiamo bisogno per vedere i post senza dover fare clic sulle frecce di scorrimento.
Aggiungi l'animazione automatica come segue:
- Animazione automatica: ON
- Velocità di animazione automatica: 3500
Sentiti libero di aumentare o diminuire la velocità in base a ciò che ritieni migliore.
Stile avanzato
Classe CSS e CSS personalizzato
A questo punto, il post slider è per la maggior parte un post ticker funzionante. Ma ci sono alcune modifiche avanzate che possiamo aggiungere per ripulire il design.
Innanzitutto, aggiungi una classe CSS personalizzata come segue:
- Classe CSS: et-post-ticker
Per assicurarti che il titolo del post rimanga su una riga all'interno del cursore/ticker e nasconda l'overflow con un'ellissi, aggiungi il seguente CSS al titolo della diapositiva:
padding-bottom:0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Per dare alle frecce di diapositiva più di un pulsante, aggiungi il seguente CSS alle frecce di diapositiva:
height: 40px; width: 40px; line-height:40px; font-size: 28px; text-align: center; margin-top:-20px; background:#333;
CSS aggiuntivo con modulo di codice per il posizionamento delle frecce di scorrimento
A questo punto, la funzionalità predefinita delle frecce della diapositiva verrà mostrata solo al passaggio del mouse e il posizionamento delle frecce è sui lati destro e sinistro della diapositiva. Per migliorare l'esperienza dell'utente e renderla più simile a un post ticker, possiamo visualizzare sempre le frecce e posizionarle a destra del cursore.
Per fare ciò, aggiungi un nuovo modulo di codice sotto il cursore del post.
Quindi incolla il seguente CSS assicurandoti di avvolgerlo con i tag di stile necessari.
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
right: 40px !important;
opacity: 1 !important;
left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
right: 0px !important;
opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
padding: 0 84px 0 3% !important;
}
Risultato finale
Ecco il risultato finale su una pagina live.
Nota come il post ticker gestisce l'overflow del testo del titolo.
Ed ecco come il post ticker si posiziona bene sul display del telefono.
Aggiunta del ticker del post all'intestazione di un modello di post del blog
Un ovvio caso d'uso per questo post ticker è che mostri i post recenti su un'intestazione effettiva di un modello di post di blog. Ecco come puoi farlo.
Salvataggio della riga nella libreria Divi
Innanzitutto, salva la riga contenente gli elementi che compongono il nostro post ticker nella libreria Divi. Puoi farlo facendo clic sull'icona a tre punti sulla riga e selezionando "Salva nella libreria". Quindi dai un nome al layout e fai clic sul pulsante "Salva nella libreria".
Aggiunta della riga Post Ticker al modello di intestazione
Modifica l'intestazione personalizzata
Una volta che la riga è stata salvata nella libreria, siamo pronti per aggiungerla a un'intestazione personalizzata. Per questo esempio, assicurati che il modello sia assegnato a "Tutti i post". Quindi fare clic per modificare l'intestazione personalizzata per quel modello.
Inserisci riga (Post Ticker) dalla libreria
Nell'editor del layout dell'intestazione, fai clic per aggiungere una nuova riga dove desideri che venga visualizzato il ticker del post.
Nel modale Inserisci riga, seleziona la scheda Aggiungi da libreria. Trova la riga ticker del post del blog che hai precedentemente salvato nella libreria e selezionala.
Ora il ticker del post verrà visualizzato nell'intestazione.
Mostra articoli correlati per la categoria corrente
Poiché questo ticker di post verrà visualizzato solo sui post del blog, possiamo scegliere di visualizzare solo i post relativi alla categoria corrente.
Innanzitutto, dobbiamo aggiornare il testo del titolo nel nostro modulo di testo in "Post correlati:".
Quindi, apri le impostazioni del cursore del post. In Categorie incluse, seleziona l'opzione Categoria corrente.
Ora ogni post del blog avrà un ticker del post nell'intestazione che mostra i post correlati per categoria corrente.
Risultato sul modello di post sul blog
Ecco l'animazione automatica in azione.
Ecco come puoi fare clic sulle frecce di navigazione per passare al post successivo e precedente. E facendo clic sul titolo del post si arriva a quel post.
Ed ecco come appare su tablet e telefono. 
Pensieri finali
Come abbiamo appreso, possiamo creare facilmente un ticker per i post del blog semplificando il design del modulo slider di Divi e apportando alcune modifiche personalizzate alle frecce di navigazione. E non dimenticare che puoi sempre apportare facilmente modifiche allo stile utilizzando tutte le opzioni integrate nel cursore del post. Si spera che questo torni utile per tutti voi blogger e sviluppatori web là fuori.
Non vedo l'ora di sentirti nei commenti.
Saluti!