Comment créer une mise en page de sermon à l'aide de champs personnalisés et de contenu dynamique dans Divi

La possibilité d'accéder et d'écouter les sermons est une partie vitale de tout site Web d'église. Et, avec la sortie du nouveau pack de mise en page d'église de Divi, j'ai pensé qu'il serait utile de vous montrer comment créer une mise en page de sermon à l'aide de contenu dynamique. Pour ce faire, j'utiliserai le plugin Advanced Custom Fields pour créer un groupe de champs personnalisés que vous pourrez mettre à jour dans le backend de votre publication. Et en utilisant la fonctionnalité de contenu dynamique de Divi, je vais vous montrer comment vous pouvez concevoir une mise en page pour extraire ces champs personnalisés pour remplir le contenu de votre publication. Une fois que tout est dit et fait, vous aurez une belle mise en page de sermon avec un contenu dynamique qui peut être mis à jour sur le backend à l'aide d'une interface utilisateur intuitive de champs personnalisés sans jamais avoir à déployer le générateur visuel.

Commençons.

De quoi as-tu besoin

Pour ce tutoriel, vous aurez besoin des éléments suivants :

• Le thème Divi
• Le plugin Advanced Custom Fields
• La mise en page du blog de l'église à partir du pack de mise en page de l'église (accessible depuis le Divi Builder)

Aperçu de la mise en page du sermon

Voici un aperçu de la mise en page que nous allons construire. La beauté de cette mise en page est que la plupart du contenu est généré à partir de champs personnalisés sur le backend à l'aide de contenu dynamique.

Création de champs personnalisés avec le plugin Advanced Custom Fields

Le plugin Advanced Custom Fields (ACF) vous permet de regrouper facilement des champs personnalisés à utiliser comme contenu dynamique sur vos publications ou pages. Il prend en charge un certain nombre de types de champs (comme un sélecteur de date, un éditeur Wysiwyg et oEmbed) qui facilitent la mise à jour des champs personnalisés. Ceci est extrêmement utile pour fournir une interface utilisateur plus intuitive aux clients pour mettre à jour leur site à l'aide de champs personnalisés.

Une fois le plugin ACF installé et activé, accédez à votre tableau de bord WordPress et champs personnalisés > Ajouter un nouveau.

Ajouter un nouveau groupe de champs

Pour configurer un nouveau groupe, attribuez un titre au nouveau groupe de champs.

Dans la section Emplacement (ou bascule), modifiez les paramètres de sorte que le type de publication soit égal à « Projet » au lieu de Publier. Cela indique essentiellement au plugin d'afficher uniquement ce groupe de champs personnalisés sur le type de publication de projet intégré à Divi (vous pouvez également le laisser en tant que publication si vous le souhaitez. Votre choix.)

Faites ensuite défiler jusqu'à la section des paramètres et mettez à jour les éléments suivants :

Position : élevée (après contenu)

Ce paramètre de position détermine l'emplacement de votre groupe de champs personnalisés dans l'éditeur principal de votre publication ou page.

Ajouter des champs personnalisés au groupe de champs

Maintenant que votre groupe a été créé et configuré, il est temps de commencer à ajouter des champs personnalisés au groupe.

Le champ personnalisé du haut-parleur

Pour le premier champ personnalisé, ajoutons un endroit où les utilisateurs peuvent saisir un orateur pour le sermon. Pour ajouter un nouveau champ, cliquez sur le bouton « Ajouter un champ » et saisissez ce qui suit :

Étiquette de champ : Haut-parleur
Nom du champ : haut-parleur
Type de champ : Sélectionner
Choix (entrez chacun sur une nouvelle ligne) : Pasteur principal, Pasteur associé, Pasteur des jeunes, Conférencier invité

Le champ personnalisé du titre du sermon

Ensuite, ajoutez un champ personnalisé pour le titre du sermon.

Libellé du champ : Titre du sermon
Nom du champ : sermon_title
Type de champ : Texte
Texte d'espace réservé : Titre du sermon

Le champ personnalisé de la date du sermon

Ensuite, ajoutez un champ personnalisé pour la date du sermon. Celui-ci, nous allons définir un type de champ de sélecteur de date afin que l'ajout de nouvelles dates soit un jeu d'enfant sur le backend.

Libellé du champ : Date du sermon
Nom du champ : sermon_date
Type de champ : sélecteur de date
Format d'affichage : F j, Y
Format de retour : F j, Y
La semaine commence le : lundi

Le champ personnalisé de description du sermon

Ensuite, ajoutez un champ personnalisé pour la description du sermon. Cela permettra aux utilisateurs de mettre à jour le contenu de la publication à l'aide d'un éditeur Wysiwyg sans avoir à ouvrir le constructeur visuel.

Libellé du champ : Description du sermon
Nom du champ : sermon_description
Type de champ : Éditeur Wysiwyg

Le champ personnalisé Sermon Audio Embed

Ensuite, ajoutez un champ personnalisé pour l'intégration audio du sermon à l'aide du type de champ oEmbed. Cela nous permettra d'intégrer une intégration audio du sermon en mettant simplement à jour l'URL audio de l'intégration sur le backend.

Étiquette de champ : Sermon Audio Intégrer
Nom du champ : sermon_audio_embed
Type de champ : oEmbed

Le champ personnalisé URL Sermon Audio

Ensuite, ajoutez un champ personnalisé pour l'URL audio du sermon afin que nous puissions utiliser l'URL pour remplir un lien dans un module afin de créer un lien de téléchargement vers le fichier.

Libellé du champ : URL audio du sermon
Nom du champ : sermon_audio_url
Type de champ : URL

Bien. Une fois les champs personnalisés ajoutés à notre groupe de champs, n'oubliez pas de sauvegarder votre groupe de champs. Nous pouvons maintenant commencer à créer la mise en page du sermon pour notre contenu de sermon de champ personnalisé à utiliser comme contenu dynamique tout au long de la publication.

Créer un nouveau projet

Depuis le tableau de bord WordPress, accédez à Projets > Ajouter un nouveau. Ensuite, entrez un titre pour le projet qui devrait également être le titre du sermon (mais cela dépend de vous). Cliquez ensuite pour utiliser le Divi Builder. Vous verrez le groupe de champs personnalisés affiché en haut du constructeur Divi.

Remplissez maintenant les champs personnalisés avec les informations de sermon spécifiques à ce message.

Conférencier : Pasteur principal (sélectionné dans un menu déroulant)
Titre du sermon : Une nouvelle création (ou ce que vous voulez)
Date du sermon : sélectionnez la date dans le sélecteur de date
Description du sermon : utilisez l'éditeur WYSIWYG pour saisir la description du sermon
Sermon Audio Embed : entrez l'URL du fichier multimédia que vous souhaitez intégrer dans le lecteur multimédia
URL du sermon audio : entrez l'URL du fichier multimédia (ce devrait être un fichier zip si vous voulez que cela se télécharge immédiatement en cliquant)

Ajoutez ensuite une image en vedette pour votre projet. Cela servira d'image utilisée pour le lecteur audio de la mise en page du sermon.

Ajout d'une nouvelle mise en page prédéfinie pour votre projet

Cliquez maintenant pour utiliser le Visual Builder.

(Remarque : actuellement, le générateur de backend ne prend pas en charge le contenu dynamique, nous devons donc déployer le générateur visuel. Si vous préférez personnaliser la mise en page avec une fonctionnalité de générateur plus backend, déployez simplement le générateur visuel et cliquez sur le mode filaire.)

Cliquez ensuite sur l'option Choisir une mise en page prédéfinie. Dans la fenêtre contextuelle de chargement à partir de la bibliothèque, sélectionnez le pack de mise en page de l'église, puis cliquez pour utiliser la mise en page de la page de blog de l'église.

Une fois la mise en page chargée sur la page, supprimez les deuxième, quatrième et cinquième sections de la mise en page. Désormais, votre mise en page ne devrait comporter que trois sections : la section d'en-tête supérieure, la section « Derniers sermons » et la section de pied de page inférieure.

Supprimez ensuite le module de blog dans la deuxième section.

Mettez à jour le module de texte « Derniers sermons » afin qu'il ait le contenu suivant :

<h3>Description</h3>

Ensuite, dupliquez ce module de texte et mettez à jour le contenu pour dire « Écoutez maintenant ».

Ajout du contenu dynamique de la mise en page du sermon

La description du sermon

Nous sommes maintenant prêts à commencer à créer le contenu audio dynamique du sermon pour notre section. Pour commencer, nous allons ajouter la description du sermon juste sous le module de texte avec le titre "Description". Pour ce faire, ajoutez un nouveau module de texte. Survolez la zone de saisie de contenu et cliquez sur l'icône de contenu dynamique.

Sélectionnez ensuite le champ personnalisé Description du sermon dans la liste déroulante.

Enregistrer les paramètres.

Maintenant, la description de votre sermon sera affichée en tant que contenu dynamique. Cela signifie que tout ce que vous ajoutez à la zone de saisie de la description du sermon sur l'écran de l'éditeur principal sera mis à jour dynamiquement sur la page du projet.

Le module audio et l'intégration audio

Sous le module de texte intitulé « Écoutez maintenant », ajoutez un nouveau module audio. Mettez ensuite à jour le contenu textuel avec le contenu dynamique suivant :

Titre : Titre du sermon (champ personnalisé)
Nom de l'artiste : Conférencier (champ personnalisé)
Nom de l'album : Date du sermon (champ personnalisé)

Les étiquettes n'ont pas vraiment d'importance puisque nous sommes principalement concernés par le placement du contenu dynamique dans le module audio. Le titre du sermon, le conférencier et la date du sermon sont bien affichés dans le module audio sans trop de travail.

Pour l'image de couverture du module audio, ajoutez du contenu dynamique en cliquant sur l'icône de contenu dynamique lorsque vous survolez la zone d'aperçu de l'image et sélectionnez Image en vedette.

Désormais, tout ce que vous avez défini comme image vedette sur le backend remplira automatiquement l'image de couverture pour l'audio de votre sermon.

Pour mieux correspondre à la conception de la mise en page, enregistrez vos paramètres et copiez l'arrière-plan de la section inférieure en cliquant avec le bouton droit sur le texte de la catégorie Arrière-plan dans les paramètres de la section et en sélectionnant « Copier l'arrière-plan ».

Collez maintenant l'arrière-plan dans les paramètres d'arrière-plan de votre module audio en ouvrant les paramètres du module audio, en cliquant avec le bouton droit sur le texte de la catégorie d'arrière-plan et en cliquant sur l'option « Coller l'arrière-plan ».

Passez ensuite aux paramètres de conception et mettez à jour les éléments suivants :

Orientation du texte : à gauche
Marge personnalisée : 0px en bas

Maintenant, tout ce qu'il nous reste pour terminer le lecteur audio du sermon est l'intégration du lecteur audio. Actuellement, la boîte d'entrée audio intégrée au module audio ne prend pas en charge le contenu dynamique (je suis sûr que ce sera le cas à l'avenir), nous allons donc faire une petite solution de contournement. Nous allons créer un nouveau module de texte et ajouter le fichier audio intégré à l'aide de contenu dynamique. Et en raison de la façon dont WordPress reconnaît le shortcode généré par le champ personnalisé, il affichera le lecteur audio par défaut.

Pour ce faire, ajoutez un module de texte sous le module audio, puis ajoutez le champ personnalisé « Sermon Audio Embed » en tant que contenu dynamique. Assurez-vous d'activer le HTML brut pour que le shortcode fonctionne.

Nous pouvons maintenant positionner notre lecteur audio à l'intérieur du module audio avec une marge personnalisée. Accédez à l'onglet Conception et mettez à jour les éléments suivants :

Marge personnalisée (bureau) : -40 pixels en haut, 280 pixels à gauche, 60 pixels à droite
Marge personnalisée (tablette) : 0 px à gauche, 0 px à droite

Le lien de téléchargement

Parfois, il est utile pour les utilisateurs de télécharger le fichier audio. Pour rendre cela plus facile, vous pouvez ajouter un lien vers le fichier audio à votre message. Pour ce faire, nous allons utiliser du contenu dynamique pour remplir un module de présentation avec le titre du sermon et l'URL audio.

Ajoutez un module de présentation sous le module audio et mettez à jour le contenu comme suit :

Titre : Titre du sermon (champ personnalisé)
Icône : voir capture d'écran
URL du lien du titre : Url audio du sermon (champ personnalisé)

Pour styliser le texte de présentation afin qu'il ressemble davantage à un lien cliquable, mettez à jour les éléments suivants :

Couleur de l'icône : rgba(33,50,94,0.86)
Placement des images/icônes : à gauche
Style de police du titre : U
Couleur de soulignement du titre : rgba(33,50,94,0.86)
Couleur du texte du titre : rgba(33,50,94,0.86)
Hauteur de la ligne de titre : 2 em
Largeur du contenu : 100 %

Pour rendre le lien encore plus reconnaissable en tant que téléchargement, vous pouvez modifier le contenu dynamique du titre du sermon qui occupe le titre du texte de présentation avec du texte supplémentaire dans la zone de saisie après qui lit "(télécharger)".

Ajouter le titre et la méta du sermon à l'en-tête

Pour la dernière étape, assurons-nous que notre section d'en-tête de projet/article utilise un contenu dynamique pour le titre de l'article ainsi que le nom de l'orateur et la date du sermon. Pour ce faire, ouvrez les paramètres du module d'en-tête pleine largeur et mettez à jour les éléments suivants :

Titre : Titre du sermon (champ personnalisé)
Texte du sous-titre : Haut-parleur (champ personnalisé)
(Remarque : pour le contenu dynamique du haut-parleur, saisissez « par : » dans l'entrée avant)
Texte du lien du bouton n° 1 : supprimer
Texte du lien du bouton #2 : supprimer
Contenu : Date du sermon (champ personnalisé)

Passez maintenant à l'onglet Conception et retirez le rembourrage personnalisé utilisé.

Voici le résultat final.

Maintenant, tout ce que vous aurez à faire à l'avenir est d'enregistrer la mise en page dans votre bibliothèque Divi pour l'utiliser pour les futurs messages de sermon. Et puisque votre groupe de champs personnalisés est prêt à être utilisé sur tous les projets, vous pouvez simplement mettre à jour les informations des champs personnalisés sur le backend sans jamais avoir à ouvrir Visual Builder.

De plus, avec les sermons enregistrés en tant que projets, vous pouvez facilement créer un portfolio filtrable pour afficher vos sermons !

Dernières pensées

J'espère que ce didacticiel aidera à mieux comprendre le contenu dynamique et comment il peut être utilisé avec le plugin Advanced Custom Fields pour créer une mise en page puissante pour les sermons. Cela peut prendre un certain temps pour tout mettre en place, mais le gain peut certainement en valoir la peine. Bien sûr, ce même processus peut être utilisé pour créer toutes sortes de contenus dynamiques pour différents types de publications. Faites-moi savoir si vous avez des questions dans les commentaires ci-dessous. Je suis dans l'attente de votre réponse.

À votre santé!