Come aggiungere una barra audio fissa "Ultimo episodio" all'intestazione Divi
Pubblicato: 2020-05-28Se stai ospitando un sito Web di podcast con Divi, è molto probabile che tu stia già utilizzando il modulo audio integrato. Ora, se stai cercando un modo speciale per mettere sotto i riflettori il tuo ultimo episodio, adorerai questo tutorial. Oggi ti mostreremo come includere una barra audio fissa per l'ultimo episodio nell'intestazione Divi. Includeremo un'animazione in loop del modulo di testo per attirare l'attenzione sulla barra audio e sarai in grado di scaricare il modello di intestazione globale, inclusa la barra audio!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il modello di intestazione della barra audio
Per mettere le mani sul modello di intestazione della barra audio gratuito, 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!
Vai a Divi Theme Builder e inizia a creare un'intestazione globale
Vai a Divi Theme Builder
Inizia andando al Divi Theme Builder nel backend del tuo sito Web WordPress.
Inizia a creare un'intestazione globale
Quindi, inizia a creare un'intestazione globale.
Crea un'intestazione globale con la barra audio dell'ultimo episodio
Impostazioni della sezione
Colore di sfondo
Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri quella sezione e cambia il colore di sfondo. Stiamo abbinando questa intestazione globale al Podcast Layout Pack, ma sentiti libero di utilizzare qualsiasi altro tipo di stile di design di tua scelta.
- Colore di sfondo: #1a1844
Spaziatura
Quindi, passa alla scheda Design e aggiungi alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.
- Imbottitura superiore: 50 px (desktop), 80 px (tablet e telefono)
- Imbottitura inferiore: 0px
Scatola ombra
Per separare l'intestazione dal contenuto della pagina/del post, aggiungeremo anche un'ombra di riquadro alla nostra sezione.
- Intensità della sfocatura dell'ombra della scatola: 80 px
- Colore ombra: rgba(0,0,0,0.3)
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una prima riga alla tua sezione utilizzando la seguente struttura a colonne:
Colore di sfondo
L'intera riga sarà dedicata alla barra audio dell'ultimo episodio. Ma prima di arrivare a questo, apri le impostazioni della riga e cambia il colore di sfondo.
- Colore di sfondo: #fe4943
Dimensionamento
Passa alla scheda Design della riga e modifica successivamente le impostazioni di dimensionamento.
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza: 90%
- Larghezza massima: 100%
Spaziatura
Stiamo aggiungendo anche dell'imbottitura superiore e inferiore personalizzata.
- Imbottitura superiore: 10px
- Imbottitura inferiore: 10px
Frontiera
Quindi, andremo alle impostazioni del bordo e aggiungeremo alcuni angoli arrotondati.
- In basso a sinistra: 10px
- In basso a destra: 10px
Scatola ombra
Stiamo includendo anche un'ombra di scatola.
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba(0,0,0,0.3)
Posizione
Successivamente, andremo alla scheda Avanzate e fisseremo l'intera riga. Aumenteremo anche l'indice z della riga per assicurarci che si sovrapponga alla seconda riga che aggiungeremo alla nostra sezione.
- Posizione: fissa
- Posizione: in alto al centro
- Indice Z: 11
Visibilità colonna 1
Completa le impostazioni della riga impostando gli overflow della colonna 1 su nascosto. Questo aiuterà con l'animazione del testo che hai potuto notare nell'anteprima di questo post. Impostando gli overflow su nascosto, ci assicureremo che l'animazione sia nascosta oltre il contenitore della colonna.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Aggiungi modulo di testo alla colonna 1
Aggiungi contenuto
È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Aggiungi una copia a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Stile del carattere del testo: maiuscolo
- Colore del testo: #ffffff
- Dimensione testo: 15px
- Spaziatura delle lettere del testo: 3px
Spaziatura
Aggiungeremo anche un margine sinistro negativo al nostro modulo. Questo aiuterà con la nostra animazione in loop.
- Margine sinistro: -190%
Animazione
Ultimo ma non meno importante, aggiungi la seguente animazione in loop al tuo modulo di testo:
- Stile di animazione: diapositiva
- Direzione animazione: Sinistra
- Durata dell'animazione: 9000 ms
- Intensità animazione: 30%
- Opacità iniziale dell'animazione: 100%
- Curva di velocità di animazione: lineare
- Ripetizione animazione: loop
Aggiungi modulo audio alla colonna 2
Rimuovi tutto il contenuto
Nella colonna 2, l'unico modulo di cui abbiamo bisogno è un modulo audio. Assicurati che il contenuto sia stato rimosso.
Carica file audio
Quindi, carica un file audio contenente il tuo ultimo episodio.
Rimuovi colore di sfondo
Successivamente, rimuovi il colore di sfondo del modulo.
Spaziatura
Quindi, passa alla scheda Progettazione e rimuovi alcuni valori di riempimento predefiniti aggiungendo "0px" ad essi.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
- Imbottitura sinistra: 0px
Aggiungi riga #2
Struttura della colonna
Alla prossima riga. Questa riga conterrà il nostro logo, il menu e le icone dei social media. Scegli la seguente struttura di colonne:
Dimensionamento
Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento di conseguenza:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza massima: 100%
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi modulo menu alla colonna 1
Seleziona Menu
Quindi, aggiungi un modulo menu alla colonna 1 e seleziona un menu a tua scelta.
Carica logo
Carica un logo successivo.
Rimuovi colore di sfondo
Quindi, rimuovi il colore di sfondo bianco predefinito.
Menu Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo del menu come segue:
- Carattere del menu: Open Sans
- Colore testo menu: #ffffff (desktop), #1a1844 (tablet e telefono)
- Dimensione del testo del menu: 15px
- Allineamento del testo: a destra
Menu a discesa Impostazioni testo
Stiamo cambiando anche il colore della linea del menu a discesa nelle impostazioni del menu a discesa.
- Colore linea menu a discesa: #ffffff
Impostazioni icone
Insieme al colore dell'icona del menu dell'hamburger nelle impostazioni delle icone.
- Colore icona menu hamburger: #fe4943
Dimensionamento
E completeremo le impostazioni del modulo assegnando una larghezza massima del logo nelle impostazioni di dimensionamento.
- Larghezza massima logo: 65%
Aggiungi il modulo Segui social media alla colonna 2
Aggiungi social network
Nella seconda colonna della nostra seconda riga, avremo bisogno di un modulo di follow sui social media. Aggiungi i social network di tua scelta.
Allineamento
Passa alla scheda di progettazione del modulo e modifica l'allineamento del modulo.
- Allineamento del modulo: Centro
Spaziatura
Aggiungi successivamente alcuni valori di margine personalizzati.
- Margine superiore: 20px
- Margine inferiore: -4% (solo tablet e telefono)
Frontiera
E completa l'intestazione aggiungendo alcuni angoli arrotondati alle impostazioni del bordo del modulo. Una volta completata l'intestazione globale, assicurati di salvare tutte le modifiche di Divi Theme Builder e visualizza il risultato sul tuo sito web!
- Tutti gli angoli: 50vw
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come essere creativo con il modulo audio integrato di Divi. Più specificamente, ti abbiamo mostrato come includere una barra audio fissa nell'intestazione globale personalizzata. Questo è un ottimo modo per enfatizzare l'ultimo episodio del tuo podcast. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.