Come creare una barra dei contenuti audio permanente in Divi

L'aggiunta di una barra dei contenuti audio permanente è un ottimo modo per presentare una clip audio per un facile accesso mentre un utente scorre il contenuto della pagina. Ad esempio, i podcaster possono "attaccare" l'audio in primo piano nella parte superiore di una pagina di un episodio in modo che l'utente possa sempre accedere a quei controlli audio mentre ascolta e interagisce con il resto del contenuto della pagina.

In questo tutorial, diventeremo un po' creativi con le opzioni di posizione appiccicosa integrate di Divi per creare una barra dei contenuti audio adesiva in Divi. Ti mostreremo come convertire il contenuto audio esistente su una pagina (come una riga con un modulo audio) in una barra di contenuto audio permanente che rimane nella parte superiore della finestra una volta che l'utente passa il contenuto audio durante lo scorrimento. Inoltre, ti mostreremo anche come modificare il contenuto, lo stile e il layout della barra una volta attivato lo stato permanente (o bloccato nella parte superiore della finestra). La transizione graduale e la funzionalità di questo design offrono una soluzione unica per mostrare contenuti audio su qualsiasi sito Web Divi.

Arriviamo ad esso!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Ecco uno sguardo alla transizione del contenuto audio in una barra di contenuto audio appiccicosa.

Ed ecco uno sguardo a come si potrebbe interagire con la barra audio mentre si scorre la pagina.

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 i file

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.

SCARICA

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:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Parte 1: carica il pacchetto di layout predefinito per podcast da Divi Builder

Per avviare il design della nostra barra audio permanente in Divi, utilizzeremo il layout della pagina di destinazione del podcast predefinito. Dal menu delle impostazioni, seleziona l'icona più "Carica dalla libreria". Quindi trova il layout della pagina di destinazione del podcast e caricalo nella pagina.

Parte 2: Creazione della riga adesiva per contenere il contenuto audio

Nella parte superiore del layout predefinito, trova la riga all'interno di quella sezione superiore. Quindi aggiungi una nuova riga a una colonna sotto la riga esistente.

Impostazioni riga

Prima di aggiungere qualsiasi modulo, apri le impostazioni per la nuova riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%
• Imbottitura (desktop): 10px in alto, 10px, in basso, 10% a sinistra, 10% a destra
• Imbottitura (tablet e telefono): 10px in alto, 10px, in basso, 10px a sinistra, 10px a destra

Per rendere permanente la riga, vai alla scheda Avanzate e aggiorna quanto segue:

• Posizione appiccicosa: bastone in alto

Ciò farà sì che la riga (presto diventerà la nostra barra dei contenuti audio) si attacchi alla parte superiore della finestra del browser durante lo scorrimento della pagina.

Parte 3: aggiunta del contenuto audio

Aggiunta del modulo audio alla riga

Quindi, sposta/trascina il modulo audio esistente (pre-progettato) dalla prima riga nella sezione superiore nella nuova riga appena creata. Questo servirà come audio in primo piano che includeremo all'interno del lettore audio adesivo

Aggiungere un invito all'azione utilizzando un modulo Blurb

Successivamente, creeremo un CTA che verrà mostrato sul lato destro della nostra barra dei contenuti audio adesiva.

Per creare il CTA, copia il modulo blurb con l'icona di riproduzione nella sezione superiore del layout.

Quindi, incolla il modulo blurb duplicato sotto il modulo audio nella seconda riga della sezione superiore.

Parte 4: modellare il contenuto audio

Disegnare il modulo audio

Una volta che la riga eredita la posizione fissa, vogliamo avere uno stile diverso per il nostro modulo audio. Per fare ciò, apri le impostazioni per il modulo audio e aggiorna le seguenti opzioni di stato permanente:

• Dimensione del testo del titolo (appiccicoso): 14px
• Altezza della riga del titolo (appiccicoso): 1.3 em
• Altezza riga didascalia (appiccicoso): 1.3 em

Tutto ciò che fa è ridurre leggermente il testo e la spaziatura in modo che il contenuto audio non occupi molto spazio verticale nella nostra barra adesiva.

Successivamente, vogliamo modificare la larghezza del modulo audio nello stato appiccicoso come segue:

• Larghezza (da tavolo): 80%
• Larghezza (appiccicosa): 100%
• Larghezza massima (appiccicosa): 100%

Successivamente, dobbiamo regolare la spaziatura del modulo audio come segue:

• Margine: 0px in alto, 0px in basso
• Imbottitura: 0px in alto, 0px in basso, 0px a sinistra, 20px a destra

Infine, dobbiamo aggiungere alcuni frammenti CSS personalizzati nelle impostazioni avanzate per allineare a sinistra il nostro testo e aggiungere colori univoci al pulsante e al dispositivo di scorrimento del nostro lettore audio.

Aggiungi il seguente CSS al titolo audio solo nella scheda permanente :

text-align:left;

Aggiungi il seguente CSS a Audio Meta solo nella scheda adesiva :

text-align:left !important;

Aggiungi il seguente CSS ai pulsanti del lettore solo nella scheda permanente :

color: #fe4943;

Aggiungi il seguente CSS al Player Slider Current solo nella scheda permanente :

background: #2c4ca3;

Disegnare l'invito all'azione di Blurb

Successivamente, modelleremo il nostro modulo blurb che fungerà da finto CTA per visualizzare tutti gli episodi.

Innanzitutto, aggiungi il testo "Tutti gli episodi" al contenuto del corpo del blurb.

Nella scheda Progettazione, aggiorna quanto segue:

• Carattere del corpo: Lato
• Peso del carattere del corpo: grassetto
• Stile del carattere del corpo: TT
• Dimensione del testo del corpo: 10px
• Spaziatura delle lettere del corpo: 2px
• Altezza della linea del corpo: 1,3 em

Quindi regola la dimensione dell'icona blurb:

• Dimensione carattere icona: 50 px

Quindi regolare le dimensioni del modulo come segue:

• Larghezza contenuto: 100%
• Larghezza: 20%

Ora torna alla scheda del contenuto e aggiungi uno sfondo per il blurb come segue:

• Colore di sfondo: #1a1844
• Immagine di sfondo: [aggiungi immagine]
• Miscela immagine di sfondo: luminosità

Vogliamo che questo modulo sia inizialmente nascosto alla vista finché la riga non raggiunge lo stato permanente e la barra di controllo dell'audio è bloccata nella parte superiore della finestra. Per fare ciò, possiamo aggiungere alcuni frammenti di css che nascondono il modulo sul desktop e mostrano il modulo nello stato appiccicoso.

Nella scheda Avanzate, aggiorna il seguente CSS personalizzato:

Elemento principale CSS (desktop):

display:none;

CSS dell'elemento principale (appiccicoso):

display:block;

Blurb immagine CSS:

margin-bottom: 10px

Parte 5: Modifica dell'allineamento del contenuto della barra audio nello stato appiccicoso

In questo momento la riga adesiva ha solo una colonna con due moduli impilati uno sopra l'altro. Quindi la barra adesiva mostrerebbe il blurb CTA sotto il modulo audio. Questo occuperebbe troppo spazio verticale per una barra appiccicosa e non sarebbe molto bello.

Per assicurarci che tutto sia allineato orizzontalmente e verticalmente all'interno della colonna, noi. possiamo usare la proprietà CSS flex per regolare il layout dei nostri moduli nello stato appiccicoso.

Per fare ciò, apri le impostazioni per la colonna contenente entrambi i moduli.

Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'Elemento principale

Elemento principale (desktop):

display:flex;
flex-direction:column;

Elemento principale (appiccicoso):

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

Questo è tutto! Rivediamo i risultati.

Risultato finale

Ecco il design sul desktop una volta che la riga è nello stato appiccicoso.

Ed ecco il design su mobile.

Ed ecco alcuni video clip di come funziona la magia della barra adesiva del contenuto audio su una pagina live.

Pensieri finali

Le opzioni di posizione appiccicosa di Divi possono essere un potente strumento per i web designer. In questo tutorial, ti abbiamo mostrato come creare una barra dei contenuti audio adesiva utilizzando le opzioni di stile appiccicoso di Divi in ​​modi avanzati e creativi. Una delle tecniche uniche presenti in questo tutorial era come allineare il contenuto di una riga permanente utilizzando la proprietà flex. Per fortuna, Divi ha un modo conveniente per aggiungere frammenti di codice personalizzati allo stato appiccicoso utilizzando i blocchi CSS personalizzati avanzati per darci la flessibilità di progettazione di cui avevamo bisogno. Spero che questo ti dia qualche ispirazione per crearne uno nel tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!