Créer de belles archives et afficher des pages de notes pour votre podcast

Hier, nous avons utilisé le constructeur visuel de Divi pour mettre en place une page d'accueil pour votre podcast qui impressionnera absolument vos auditeurs, mais que faire s'ils veulent approfondir votre émission ?

Ils se dirigeront vers les belles archives et montreront les pages de notes que je vais vous apprendre à faire aujourd'hui.

Produits finaux d'aujourd'hui : Afficher les pages de notes et d'archives

Les pages elles-mêmes sont conçues pour compléter la page d'accueil, mais ne reflètent pas directement ses éléments.

Sur la page des notes de l'émission, je voulais m'assurer que tout visiteur serait en mesure d'écouter l'épisode directement dans son navigateur, de voir les faits saillants et les liens de cet épisode particulier et d'avoir la possibilité de s'inscrire à votre liste de diffusion.

La page d'archives est tout aussi simple et fonctionnelle que la page de notes d'exposition. Les pages d'archives ont un seul objectif : permettre à vos utilisateurs de voir rapidement et facilement votre ancien catalogue. C'est exactement ce que fait cette page. Avec un extrait rapide de l'émission, vos auditeurs pourront parcourir votre émission pour trouver exactement le sujet qu'ils souhaitent écouter.

Les actifs dont vous aurez besoin

Comme hier, vous aurez besoin d'images d'arrière-plan haute résolution. Les deux que j'ai utilisés se trouvent dans cette collection sur Unsplash (qui comprend également les arrière-plans de la page d'accueil d'hier). Je les ai modifiés pour qu'ils soient en niveaux de gris dans Aperçu, mais n'importe quel logiciel de retouche d'image pourra soit appliquer un effet noir et blanc/niveaux de gris, soit vous permettre de déplacer le curseur de saturation jusqu'à 0.

Votre vie sera également un peu plus facile si vous avez déjà créé la page d'accueil, car vous utiliserez le même style.

C'est tout, alors passons à la construction !

Création de la page Afficher les notes

Les notes d'émission ne sont que des « articles » dans WordPress, alors accédez à votre tableau de bord et accédez à Articles -> Ajouter un nouveau.

Vous le ferez chaque fois que vous voudrez créer une page de notes d'émission pour un épisode individuel de votre émission. Donnez-lui le titre que vous voulez et définissez le slug d'URL sur quelque chose de simple (afin que vos auditeurs s'en souviennent après la fin de votre épisode).

Tout d'abord, assurez-vous de cliquer sur « Utiliser le Divi Builder ».

Cela devrait ouvrir la prochaine série d'options dont nous avons besoin. Dans la partie droite de la page, définissez la publication sur « Pleine largeur » car nous n'allons pas utiliser de barre latérale pour nos notes de spectacle. Et définissez le titre de la publication sur « Masquer » afin que les métadonnées telles que l'auteur, les commentaires et la date de la publication elle-même ne s'affichent pas.

Ensuite, vous voudrez entrer dans Visual Builder et être présenté par une page Web délicieusement vierge.

La première chose que vous voudrez faire est de cliquer sur l'icône d'engrenage dans la section bleue dans le coin supérieur gauche de la page pour entrer dans les paramètres de la section.

À partir de là, téléchargez votre image de fond. Faites défiler un peu plus bas dans les paramètres et activez Utiliser l'effet de parallaxe. Laissez la méthode de parallaxe sur la valeur par défaut « True Parallax ».

Enregistrez ces paramètres et vous devriez voir quelque chose comme ceci :

Ce n'est pas exactement ce qu'il y avait dans le produit final ci-dessus, n'est-ce pas ? Nous allons devoir l'étirer un peu en ajoutant le contenu à la page.

Cliquez sur le + vert et insérez une seule ligne de colonne (celle dans le coin supérieur gauche).

Ensuite, vous serez heureux d'avoir déjà fait la page d'accueil d'hier. Dès que vous aurez choisi votre rangée, vous serez accueilli par une fenêtre vous demandant de choisir un élément. Vous allez sélectionner le lecteur de podcast que nous avons enregistré hier en cliquant sur « Ajouter à partir de la bibliothèque ».

J'avais nommé le mien simplement "Épisode de podcast", mais si vous choisissez quelque chose de différent, assurez-vous de le choisir.

Badabing-badaboom, vous avez un épisode de podcast ajouté à votre page de notes d'émission comme par magie.

Gardez à l'esprit que vous devrez modifier le titre et le média (et potentiellement l'illustration de l'épisode) pour chaque nouvelle page de notes d'émission. Ce que vous venez d'ajouter est une copie exacte de ce que vous aviez enregistré.

Vos notes de spectacle réelles iront directement sous le lecteur de podcast, alors passez votre souris sur le lecteur et appuyez sur le + noir. Faites défiler jusqu'à ce que vous voyiez le module de texte. Ajoutez-le à la page.

Sous l'onglet Contenu dans Paramètres de texte, entrez vos notes dans l'éditeur WYSIWYG et accédez à l'onglet Conception.

Dans l'onglet Conception, mettez à jour les options suivantes :

Couleur du texte : clair
Orientation du texte : à gauche
Police du texte : Élite spéciale
Taille de la police du texte : 20 px
Texte Couleur du texte : #ffffff

Enregistrez-le et vous devriez voir un nouveau bloc de texte brillant et une page similaire à celle-ci.

Nous atteignons la dernière ligne droite pour la page des notes de l'émission – il ne reste que deux éléments. Cliquez à nouveau sur le + noir et ajoutez le modèle de bouton que vous avez enregistré hier.

Au lieu d'emmener les utilisateurs vers les archives comme celle d'hier le fera, celle-ci va les renvoyer à la page d'accueil. Accédez à la page des paramètres du bouton et définissez l'URL sur une simple barre oblique inverse.

Pourquoi ne pas le faire aller à /home ou quelque chose de similaire ? Eh bien, en utilisant uniquement une barre oblique inverse, votre utilisateur sera dirigé vers la première page de votre site Web, quoi qu'il en soit. Et puisque vous êtes sur le même site, même le déplacement de domaines n'affectera pas le bouton. Il rentrera toujours à la maison. C'est exactement ce que vous voulez qu'il fasse !

Parcourez et remplissez le reste des paramètres du bouton. Ouvrez-le dans la même fenêtre, changez le texte du bouton en « Retour à la maison » (ou ce que vous voulez) et l'alignement du bouton en « Droite » (à la fois pour le garder à l'écart du contenu et pour le faire tenir debout contre le contenu). Le style de l'onglet Design aurait dû être importé de la bibliothèque Divi.

Vous aurez maintenant un joli bouton de navigation, et je suggère de l'ajouter à votre bibliothèque afin que vous puissiez l'utiliser sur plusieurs pages.

Et enfin, configurons l'inscription par e-mail afin que nous puissions obtenir ces adresses e-mail douces et agréables pour tenir les utilisateurs au courant des nouvelles sur le podcast.

Pour cela, nous voulons une toute nouvelle ligne à une seule colonne. Alors cliquez sur le + vert et mettez-le en place. Ajoutez ensuite un module Email Optin dans la liste déroulante. Tout comme hier, accédez aux paramètres du module et entrez le titre que vous souhaitez afficher ainsi que tout texte d'appel à l'action que vous souhaitez dans l'éditeur WYSIWYG.

Ajoutez également le texte de votre choix pour le bouton lui-même. J'ai choisi le "S'abonner" totalement unique.

Choisissez votre fournisseur de service de messagerie et votre liste (rappelez-vous d'hier que le module complet ne s'affichera pas sur la page lorsqu'il sera en ligne si vous ne choisissez pas de liste).

Changez l'arrière-plan RGBA en transparent.

Sous l'onglet Conception, définissez la police d'en-tête sur « Special Elite » et la taille sur 36 px.

Vous définirez également la police du corps sur « Special Elite » et la taille sur 16px.

Contrairement à presque tout le reste de ce site, nous souhaitons utiliser une bordure pour le module Email Optin. Déplacez donc « Bordure utilisateur » sur oui et définissez la couleur sur #ffffff et le rembourrage personnalisé sur 15 pixels de tous les côtés.

Lorsque cela est fait, accédez à l'onglet Avancé et ajoutez-le à l'élément principal sous CSS personnalisé pour arrondir les coins du module :

border-radius:10px;

Enregistrez votre travail, et vous avez une option d'e-mail !

La seule autre chose dont votre page de notes de spectacle a besoin est de sauvegarder ce module pour une utilisation sur d'autres pages. Étant donné que vous souhaitez que vos options d'e-mail soient cohérentes sur l'ensemble du site, nous allons les enregistrer en tant qu'élément global. Cliquez sur votre bouton "Ajouter à la bibliothèque" lorsque vous passez la souris sur le module et assurez-vous de cocher la case "En faire un élément global".

Vous disposez maintenant d'un seul élément que vous pouvez utiliser sur plusieurs pages. Et si vous y apportez des modifications, elles seront reflétées dans toutes les instances, contrairement au lecteur de podcast et au bouton ci-dessus où chaque module peut être modifié individuellement.

Et voilà, mes amis, votre modèle de page Afficher les notes ! Je suggère également d'enregistrer la page entière dans votre bibliothèque afin que vous puissiez simplement l'importer et modifier les éléments dont vous avez besoin pour chaque épisode.

Maintenant… en route pour les Archives ! La ligne d'arrivée est en vue !

Construire votre page d'archives

Dirigez-vous vers votre tableau de bord WordPress et accédez à Ajouter une nouvelle page, nommez-la (la mienne est « Archives ») et ouvrez le Divi Visual Builder. Peasy facile.

Une fois que vous y êtes, ajoutez une nouvelle ligne à une seule colonne avec un module de texte.

Accédez aux paramètres et entrez le titre de votre page dans l'éditeur WYSIWYG.

Dans l'onglet Conception, définissez la Couleur du texte sur Clair et l'Orientation sur Centre. Réglez la police sur "Special Elite" et la taille de la police sur 50px.

Pour que le texte apparaisse bien sur mobile, assurez-vous de modifier les marges supérieure et inférieure à 40 pixels.

Enregistrez votre travail et préparez-vous à ajouter un arrière-plan aux archives ! Ouvrez les paramètres dans la zone bleue +, sélectionnez votre image d'arrière-plan et définissez la parallaxe comme vous l'avez fait pour Afficher les notes. Encore une fois, j'ai créé celui-ci en niveaux de gris en utilisant Aperçu.

Sous l'onglet Conception, définissez les rembourrages supérieur et inférieur sur 55px et 176px respectivement afin que toute la page permette de voir l'effet de parallaxe, quel que soit le nombre de messages que vous avez dans vos archives.

Pourquoi 176px au lieu de 175 ? Parce que je suis un rebelle, voilà pourquoi.

Vous verrez ceci lorsque vous enregistrerez votre travail :

Ensuite, ajoutez une nouvelle ligne à une seule colonne, mais cette fois, insérez un module Blog. Cela affichera la boucle WordPress que vous avez définie, et nous voulons simplement qu'il s'agisse d'extraits et de titres afin que vos auditeurs sachent à quoi s'attendre.

Dirigez-vous vers les paramètres et mettez à jour les options dans l'onglet Contenu comme suit :

Numéro de publication : 10 (ou ce que vous pensez être le mieux adapté à votre site ; il sera paginé après l'affichage de ce numéro)
Contenu : Afficher l'extrait (parce que nous voulons que l'utilisateur clique et écoute l'épisode dans le lecteur)
Afficher l'image en vedette : OUI
Couleur d'arrière-plan des carreaux de grille : rgba (73,73,73,0,72)

Dans l'onglet Conception, mettez à jour les options suivantes :

Disposition : Grille
Police d'en-tête : Special Elite
Couleur du texte de l'en-tête : #ffffff
Police de caractère : Élite spéciale
Couleur du corps du texte : #ffffff
Police Meta : Élite spéciale
Couleur du méta-texte : #ffffff
Utiliser la bordure : OUI
Couleur de la bordure : #ffffff
Largeur de la bordure : 1px
Style de bordure : solide

Lorsque tout est réglé, vous avez un dernier style à faire. La grille elle-même a des angles vifs et carrés dans chaque case, et nous voulons obtenir un rayon de bordure de 10px afin qu'il corresponde au reste du site.

Accédez à votre tableau de bord WordPress -> Divi -> Options de thème, puis faites défiler jusqu'à CSS personnalisé. Ajoutez ce code dans la case pour arrondir les coins des cases d'extrait individuelles :

.et_pb_post {
 border-radius: 10px;
}

Gardez à l'esprit que ".et_pb_post" est la classe CSS que Divi utilise pour ajuster ces boîtes dans leur ensemble.

Après cela, enregistrez tout votre travail.

La seule chose qui reste à faire est d'ajouter le bouton Retour à la maison de votre bibliothèque, et vous aurez terminé. Cliquez sur le + noir pour l'ajouter à la même ligne que votre module Blog.

Hot diggity dog, vous venez de terminer la configuration de votre page d'archives.

Félicitations! Vous venez de terminer la configuration de votre page Archives. Enregistrez votre page d'archives en tant que modèle en cliquant sur le + violet en bas de l'écran, et vous pouvez cocher un autre élément de votre liste de seau - car entre hier et aujourd'hui, vous venez de créer un lecteur de podcast entièrement fonctionnel, une page d'accueil, une archive, et modèle pour les notes de présentation individuelles.

En conclusion

Et c'est tout! Merci d'avoir suivi mes deux tutoriels de page de podcast. Vous pouvez voir le premier Comment créer une belle page de podcast avec Divi sur ce lien. Si vous avez des questions ou des commentaires, n'hésitez pas à les laisser ci-dessous et je ferai de mon mieux pour y répondre !