Come costruire un layout di sermone utilizzando campi personalizzati e contenuto dinamico in Divi

La possibilità di accedere e ascoltare i sermoni è una parte vitale di qualsiasi sito web della chiesa. E, con il rilascio del nuovo Church Layout Pack di Divi, ho pensato che sarebbe stato utile mostrarti come puoi costruire un layout di sermone usando contenuti dinamici. Per fare ciò, utilizzerò il plug-in Advanced Custom Fields per creare un gruppo di campi personalizzati che puoi aggiornare nel backend del tuo post. E utilizzando la funzione di contenuto dinamico di Divi, ti mostrerò come puoi progettare un layout per inserire quei campi personalizzati per popolare il contenuto del tuo post. Una volta che tutto è stato detto e fatto, avrai un bel layout di sermone con contenuto dinamico che può essere aggiornato sul backend utilizzando un'interfaccia utente intuitiva di campi personalizzati senza mai dover distribuire il generatore visivo.

Iniziamo.

Quello di cui hai bisogno

Per questo tutorial, avrai bisogno di quanto segue:

• Il tema Divi
• Il plugin Campi personalizzati avanzati
• Il layout del blog della chiesa dal pacchetto di layout della chiesa (accessibile da Divi Builder)

Anteprima del layout del sermone

Ecco una sbirciatina al layout che costruiremo. La bellezza di questo layout è che la maggior parte del contenuto viene generata da campi personalizzati sul back-end utilizzando contenuto dinamico.

Creazione di campi personalizzati con il plugin Advanced Custom Fields

Il plug-in Advanced Custom Fields (ACF) ti consente di raggruppare facilmente i campi personalizzati da utilizzare come contenuto dinamico nei tuoi post o pagine. Supporta una serie di tipi di campi (come un selettore di date, un editor Wysiwyg e oEmbed) che rendono l'aggiornamento dei campi personalizzati davvero semplice. Ciò è estremamente utile per fornire un'interfaccia utente più intuitiva per consentire ai clienti di aggiornare il proprio sito utilizzando campi personalizzati.

Una volta installato e attivato il plug-in ACF, vai alla dashboard di WordPress e ai campi personalizzati > Aggiungi nuovo.

Aggiungi un nuovo campo Gruppo

Per impostare un nuovo gruppo, assegna un titolo al nuovo gruppo di campi.

Nella sezione della posizione (o attiva/disattiva) modifica le impostazioni in modo che il tipo di post sia uguale a "Progetto" anziché a Post. Questo in pratica dice al plug-in di visualizzare solo questo gruppo di campi personalizzato sul tipo di post del progetto integrato in Divi (puoi lasciarlo come post se lo desideri anche tu. A tua scelta.)

Quindi scorrere verso il basso fino alla sezione delle impostazioni e aggiornare quanto segue:

Posizione: alta (dopo il contenuto)

Questa impostazione di posizione determina la posizione del tuo gruppo di campi personalizzati nell'editor di backend del tuo articolo o pagina.

Aggiungi campi personalizzati al gruppo di campi

Ora che il tuo gruppo è stato creato e configurato, è il momento di iniziare ad aggiungere campi personalizzati al gruppo.

Il campo personalizzato dell'altoparlante

Per il primo campo personalizzato, aggiungiamo un punto in cui gli utenti possono inserire un relatore per il sermone. Per aggiungere un nuovo campo, fai clic sul pulsante "Aggiungi campo" e inserisci quanto segue:

Etichetta del campo: Altoparlante
Nome del campo: altoparlante
Tipo di campo: Seleziona
Scelte (inserire ciascuna su una nuova riga): pastore senior, pastore associato, pastore giovanile, relatore ospite

Il campo personalizzato del titolo del sermone

Quindi, aggiungi un campo personalizzato per il titolo del sermone.

Etichetta del campo: Titolo del sermone
Nome del campo: sermon_title
Tipo di campo: testo
Testo segnaposto: Titolo del sermone

Il campo personalizzato della data del sermone

Quindi, aggiungi un campo personalizzato per la data del sermone. Questo lo imposteremo per avere un tipo di campo di selezione della data in modo che l'aggiunta di nuove date sarà un gioco da ragazzi nel back-end.

Etichetta del campo: Data del sermone
Nome del campo: sermon_date
Tipo di campo: Selettore data
Formato di visualizzazione: Fa j, Y
Formato di ritorno: Fa j, Y
La settimana inizia il: lunedì

Il campo personalizzato della descrizione del sermone

Quindi, aggiungi un campo personalizzato per la descrizione del sermone. Ciò consentirà agli utenti di aggiornare il contenuto del post utilizzando un editor Wysiwyg senza dover aprire il visual builder.

Etichetta del campo: Descrizione del sermone
Nome del campo: sermon_description
Tipo di campo: Wysiwyg Editor

Il campo personalizzato di incorporamento audio del sermone

Quindi, aggiungi un campo personalizzato per l'incorporamento dell'audio del sermone utilizzando il tipo di campo oEmbed. Questo ci permetterà di incorporare un audio del sermone semplicemente aggiornando l'URL dell'audio per l'incorporamento nel backend.

Etichetta campo: Incorpora audio sermone
Nome del campo: sermon_audio_embed
Tipo di campo: oEmbed

Il campo personalizzato dell'URL audio del sermone

Successivamente, aggiungi un campo personalizzato per l'URL dell'audio del sermone in modo che possiamo utilizzare l'URL per popolare un collegamento all'interno di un modulo per creare un collegamento per il download al file.

Etichetta del campo: URL audio del sermone
Nome del campo: sermon_audio_url
Tipo di campo: URL

Tutto a posto. Una volta che i campi personalizzati sono stati aggiunti al nostro gruppo di campi, non dimenticare di salvare il tuo gruppo di campi. Ora possiamo iniziare a creare il layout del sermone per il nostro contenuto del sermone del campo personalizzato da utilizzare come contenuto dinamico in tutto il post.

Crea un nuovo progetto

Dal dashboard di WordPress, vai a Progetti > Aggiungi nuovo. Quindi inserisci un titolo per il Progetto che dovrebbe essere anche il titolo del sermone (ma dipende da te). Quindi fare clic per utilizzare Divi Builder. Vedrai il gruppo di campi personalizzati visualizzato nella parte superiore del divi builder.

Ora compila i campi personalizzati con le informazioni del sermone specifiche per questo post.

Relatore: Senior Pastor (selezionato da un menu a discesa)
Titolo del sermone: Una nuova creazione (o quello che vuoi)
Data del sermone: seleziona la data dal selettore di date
Descrizione del sermone: usa l'editor WYSIWYG per inserire la descrizione del sermone
Sermon Audio Embed: inserisci l'URL del file multimediale che desideri incorporare nel lettore multimediale
Sermon Audio URL: inserisci l'URL del file multimediale (dovrebbe essere un file zip se vuoi che venga scaricato immediatamente al clic)

Quindi aggiungi un'immagine in primo piano per il tuo progetto. Questa servirà come immagine utilizzata per il lettore audio del layout del sermone.

Aggiungere un nuovo layout predefinito per il tuo progetto

Ora fai clic per utilizzare Visual Builder.

(Nota: attualmente il generatore di backend non supporta il contenuto dinamico, quindi è necessario distribuire il generatore visivo. Se si preferisce personalizzare il layout con una funzionalità di generatore di backend, è sufficiente distribuire il generatore visivo e fare clic sulla modalità wireframe.)

Quindi fare clic sull'opzione Scegli un layout predefinito. Dal popup di caricamento dalla libreria, seleziona il pacchetto di layout della chiesa e quindi fai clic per utilizzare il layout della pagina del blog della chiesa.

Una volta caricato il layout nella pagina, eliminare la seconda, la quarta e la quinta sezione dal layout. Ora il tuo layout dovrebbe avere solo tre sezioni: la sezione dell'intestazione superiore, la sezione "Ultimi sermoni" e la sezione inferiore del piè di pagina.

Quindi elimina il modulo blog nella seconda sezione.

Aggiorna il modulo di testo "Ultimi Sermoni" in modo che abbia il seguente contenuto:

<h3>Description</h3>

Quindi duplica quel modulo di testo e aggiorna il contenuto per dire "Ascolta ora".

Aggiunta del contenuto dinamico del layout del sermone

La descrizione del sermone

Ora siamo pronti per iniziare a costruire il contenuto audio del sermone dinamico per la nostra sezione. Per cominciare, aggiungeremo la descrizione del sermone proprio sotto il modulo di testo con il titolo "Descrizione". Per farlo, aggiungi un nuovo modulo di testo. Passa il mouse sopra la casella di immissione del contenuto e fai clic sull'icona del contenuto dinamico.

Quindi seleziona il campo personalizzato Descrizione del sermone dall'elenco a discesa.

Salva le impostazioni.

Ora la descrizione del tuo sermone verrà visualizzata come contenuto dinamico. Ciò significa che tutto ciò che aggiungi alla casella di input della descrizione del sermone nella schermata dell'editor di backend verrà aggiornato dinamicamente nella pagina del progetto.

Il modulo audio e l'integrazione dell'audio

Sotto il modulo di testo con il titolo "Ascolta ora", aggiungi un nuovo modulo audio. Quindi aggiorna il contenuto del testo con il seguente contenuto dinamico:

Titolo: Titolo del sermone (campo personalizzato)
Nome dell'artista: Altoparlante (campo personalizzato)
Nome dell'album: Data del sermone (campo personalizzato)

Le etichette non hanno molta importanza poiché ci interessa principalmente il posizionamento del contenuto dinamico all'interno del modulo audio. Il titolo del sermone, l'oratore e la data del sermone vengono visualizzati bene all'interno del modulo audio senza molto lavoro.

Per l'immagine di copertina del modulo audio, aggiungi contenuto dinamico facendo clic sull'icona del contenuto dinamico quando passi con il mouse sull'area di anteprima dell'immagine e seleziona Immagine in primo piano.

Ora, qualunque cosa tu abbia impostato come immagine in primo piano sul backend popolerà automaticamente l'immagine di copertina per l'audio del tuo sermone.

Per abbinare meglio il design del layout, salva le tue impostazioni e copia lo sfondo della sezione inferiore facendo clic con il pulsante destro del mouse sul testo della categoria Sfondo nelle impostazioni della sezione e selezionando "Copia sfondo".

Ora incolla lo sfondo nelle impostazioni dello sfondo del tuo modulo audio aprendo le impostazioni del modulo audio, facendo clic con il pulsante destro del mouse sul testo della categoria di sfondo e facendo clic sull'opzione "Incolla sfondo".

Quindi passa alle impostazioni di progettazione e aggiorna quanto segue:

Orientamento del testo: a sinistra
Margine personalizzato: 0px in basso

Ora tutto ciò che ci resta per completare il lettore audio del sermone è l'effettivo incorporamento del lettore audio. Attualmente, la casella di input audio integrata nel modulo audio non supporta il contenuto dinamico (sono sicuro che lo farà in futuro), quindi faremo una piccola soluzione. Creeremo un nuovo modulo di testo e aggiungeremo il file audio incorporato utilizzando il contenuto dinamico. E a causa del modo in cui WordPress riconosce lo shortcode generato dal campo personalizzato, visualizzerà il lettore audio predefinito.

Per fare ciò, aggiungi un modulo di testo sotto il modulo audio e quindi aggiungi il campo personalizzato "Sermon Audio Embed" come contenuto dinamico. Assicurati di abilitare Raw HTML in modo che lo shortcode funzioni.

Ora possiamo posizionare il nostro lettore audio all'interno del modulo audio con un margine personalizzato. Vai alla scheda Progettazione e aggiorna quanto segue:

Margine personalizzato (desktop): -40 px in alto, 280 px a sinistra, 60 px a destra
Margine personalizzato (tablet): 0px a sinistra, 0px a destra

Il link per il download

A volte, è utile per gli utenti scaricare il file audio. Per semplificare questa operazione, puoi aggiungere un collegamento al file audio al tuo post. Per fare ciò, utilizzeremo il contenuto dinamico per popolare un modulo blurb con il titolo del sermone e l'URL dell'audio.

Aggiungi un modulo blurb sotto il modulo audio e aggiorna il contenuto come segue:

Titolo: Titolo del sermone (campo personalizzato)
Icona: vedi screenshot
URL del collegamento al titolo: URL audio del sermone (campo personalizzato)

Per modellare il blurb in modo che assomigli di più a un link cliccabile, aggiorna quanto segue:

Colore dell'icona: rgba (33,50,94,0.86)
Posizionamento immagine/icona: a sinistra
Stile carattere titolo: U
Colore sottolineatura titolo: rgba(33,50,94,0.86)
Colore del testo del titolo: rgba (33,50,94,0.86)
Altezza della riga del titolo: 2em
Larghezza contenuto: 100%

Per rendere il collegamento ancora più riconoscibile come download, puoi modificare il contenuto dinamico del titolo del sermone che sta occupando il titolo del blurb con testo aggiuntivo nella casella di immissione successiva che recita "(download)".

Aggiunta del titolo del sermone e della meta all'intestazione

Per l'ultimo passaggio, assicuriamoci che la nostra sezione di intestazione del progetto/post utilizzi contenuto dinamico per il titolo del post insieme al nome del relatore e alla data del sermone. Per fare ciò, apri le impostazioni del modulo di intestazione a larghezza intera e aggiorna quanto segue:

Titolo: Titolo del sermone (campo personalizzato)
Testo sottotitolo: Altoparlante (campo personalizzato)
(Nota: per il contenuto dinamico dell'altoparlante, inserire "by:" nell'input precedente)
Testo del collegamento del pulsante n. 1: elimina
Testo collegamento pulsante n. 2: elimina
Contenuto: Data del sermone (campo personalizzato)

Ora vai alla scheda Design ed estrai l'imbottitura personalizzata in uso.

Questo è il risultato finale.

Ora tutto ciò che devi fare in futuro è salvare il layout nella tua libreria Divi per essere utilizzato per i futuri post di sermoni. E poiché hai il tuo gruppo di campi personalizzato pronto per andare su tutti i progetti, puoi semplicemente aggiornare le informazioni sul campo personalizzato sul back-end senza dover mai aprire Visual Builder.

Inoltre, con i sermoni salvati come progetti, puoi facilmente creare un portfolio filtrabile per visualizzare i tuoi sermoni!

Pensieri finali

Spero che questo tutorial aiuti a far luce sui contenuti dinamici e su come possono essere utilizzati con il plug-in Advanced Custom Fields per creare un layout potente per i sermoni. Potrebbe volerci del tempo per impostare tutto, ma ne vale sicuramente la pena. Naturalmente, questo stesso processo può essere utilizzato per creare tutti i tipi di contenuto dinamico per diversi tipi di post. Fatemi sapere se avete domande nei commenti qui sotto. Aspetto tue notizie.

Saluti!