Comment créer une belle page de podcast avec Divi

Vous avez un podcast génial. Mais votre site Web peut avoir besoin de quelques travaux. Il fait son travail, mais il ne se démarque pas. N'ayez crainte, podcasteur ! Je vous ai couvert.

Je vais vous apprendre un moyen simple d'utiliser Divi pour créer non seulement une page d'accueil facilement mise à jour pour votre podcast, mais également une page d'archive élégante et un modèle pour les épisodes individuels.

Produit final du jour : page d'accueil du podcast en trois sections

Je voulais garder le design simple et aussi minimal que possible, sans perdre la personnalité qu'un bon podcast doit conserver. Cette conception est pour un podcast indépendant fictif appelé You're An All-Star , dont l'accent est mis sur les chaussures et le bonheur. Je voulais que le design reflète ce thème.

La première section utilise une couleur vive pour attirer l'attention de l'utilisateur, fournit un bref aperçu du sujet du podcast sur la gauche et utilise le module audio Divi pour présenter un épisode de podcast pour une écoute immédiate.

Au fur et à mesure que l'utilisateur fait défiler vers le bas, l'esthétique se déplace légèrement dans la section Épisodes sélectionnés, qui utilise à nouveau le module audio Divi pour présenter un contenu facilement accessible, ainsi qu'une option pour visiter les archives de l'émission. Le fond est en parallaxe pour attirer l'attention sur les épisodes eux-mêmes.

La dernière section est simplement un e-mail opt-in. Chaque marque, podcast, blog et entreprise en a besoin, et pour la faire ressortir, j'ai ramené cette section à un arrière-plan de couleur et l'ai rendue suffisamment petite pour que la parallaxe de la deuxième section aide à attirer davantage l'attention sur elle.

Ci-dessous, je vais vous donner un tutoriel étape par étape sur la façon dont j'ai stylisé et créé chaque module, section et page du site.

Les actifs dont vous aurez besoin

L'avantage de cette conception est qu'elle ne prend pas beaucoup de ressources en dehors de Divi lui-même. Tout ce dont vous aurez besoin, ce sont 5 images haute résolution à utiliser pour les arrière-plans et les illustrations et vignettes de podcast que vous utilisez pour vos épisodes.

Toutes mes images proviennent d'Unsplash (toutes les images de ce site se trouvent dans cette collection). J'ai utilisé Aperçu pour convertir certains d'entre eux en noir et blanc, mais vous pouvez utiliser le logiciel de retouche d'image de votre choix. Presque tous vous permettent de sélectionner une option en niveaux de gris/noir et blanc ou de réduire la saturation à zéro.

En dehors de cela, toutes les ressources dont vous aurez besoin se trouvent directement dans Divi. Allons-y, alors !

Page d'accueil du site Web du podcast : première section

Commencez par créer une nouvelle page dans votre tableau de bord WordPress et définissez-la comme page d'accueil de votre site. (J'ai commodément nommé le mien « Maison ».)

Revenez maintenant pour éditer votre nouvelle page. Dans la zone Attributs de page dans la barre latérale droite, remplacez le modèle par défaut par le modèle de page vierge.

Tout d'abord, nous créons une ligne à trois colonnes.

A l'intérieur de la colonne du milieu, nous souhaitons insérer un module diviseur Divi.

Dans les paramètres du diviseur, sous l'onglet Conception, définissez la hauteur sur 600. Cela gardera non seulement les deux colonnes extérieures (le contenu principal de la section) séparées, mais gardera également la section suffisamment haute pour permettre un espace blanc adéquat sur un certain nombre de résolutions des fenêtres. (Tout en restant masqué sur mobile par défaut.)

Maintenant, dans la colonne de gauche, nous allons ajouter deux modules de texte. J'ai décidé que pour ce projet, un en-tête horizontal aurait semblé déplacé, donc le premier module de texte sera simplement un titre.

Sous l'onglet contenu des paramètres de texte, ajoutez le titre à la zone de contenu.

Dans l'onglet Conception, mettez à jour la couleur du texte sur « Lumière » et modifiez l'orientation du texte sur « Centre ». Ajustez ensuite la police et la taille du texte. J'ai choisi la police "Special Elite" en raison de son aspect vieilli, puis j'ai défini sa taille sur 60. Définissez également la hauteur de la ligne de texte sur 1em.

Une fois cela réglé, il est temps de passer à la deuxième zone de texte. Nous utilisons celui-ci comme texte de présentation rapide pour le podcast.

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

Contenu : saisissez votre texte pour la description (je suggérerais une version tronquée de la description que vous utilisez sur iTunes et d'autres services)
Couleur de fond : rgba(0,0,0,0.4)

Dans l'onglet Conception, sélectionnez "Lumière" pour la couleur du texte et sélectionnez "Centrer" pour l'orientation du texte comme vous l'avez fait dans la case précédente. Définissez également la police du texte sur "Special Elite" à une taille de 20px.

Enfin, ajoutez 10px de rembourrage autour de toute la zone de texte.

Après cela, dirigez-vous vers l'onglet Avancé et, sous CSS personnalisé, saisissez-le dans le champ Élément principal pour arrondir les coins de la zone de texte :

border-radius: 10px;

Une fois que vous avez fait cela, vous avez terminé avec les deux premières colonnes de votre nouveau site ! Hourra ! Enregistrez votre travail en cliquant sur le cercle violet en bas de la page et en appuyant sur le bouton vert Enregistrer.

Excellent travail!

Cependant, pour le rendre un peu plus attrayant visuellement, nous devons définir l'arrière-plan de la section, alors allez dans les paramètres de la zone bleue (section) et téléchargez une image d'arrière-plan. J'ai tendance à garder le mien autour d'une résolution de 1920 × 1280.

Vous devriez maintenant voir quelque chose qui ressemble à ceci :

À l'heure actuelle, vous vous demandez peut-être : « Et les podcasts ? C'est un site de podcast, et nous n'avons encore rien fait avec un podcast ! Tu as complètement raison. Commençons donc par l'audio en sélectionnant le (vous l'avez deviné) module audio dans la troisième colonne de notre ligne.

Le module audio par défaut ne correspond pas exactement au thème que nous allons utiliser pour ce site, alors reprenons-le de ceci :

Pour ça:

Ouvrez les paramètres du module audio. Le champ Audio est l'endroit où vous pouvez soit télécharger votre propre fichier sur l'hôte que vous utilisez, soit vous pouvez directement créer un lien vers le fichier multimédia de n'importe quel service de podcasting que vous utilisez. J'utilise Libsyn pour le mien, alors j'ai juste récupéré l'URL du média et l'ai collée.

(Fait amusant : toute personne qui clique sur jouer sur votre site via ce module est également comptabilisée comme un téléchargement dans votre tableau de bord Libsyn. Score !)

Ensuite, vous voudrez mettre le titre de l'épisode auquel vous avez lié sous Titre et votre nom sous Nom d'artiste (ou tout ce que vous utilisez dans votre émission. Pour notre podcast fictif sur les chaussures, comment pourrais-je choisir autre chose que Chuck Taylor ? ). Le titre de l'album sera le nom de votre podcast.

Changeons ensuite cette couleur sarcelle verdâtre en un arrière-plan totalement transparent. La couleur n'a pas d'importance. Faites simplement glisser la barre de transparence jusqu'en bas, ou jusqu'à ce que le dernier chiffre du RGBA soit 0.

Pour l'image de la pochette, il est préférable d'utiliser la vignette de cet épisode particulier ou l'art du podcast que vous utilisez sur iTunes et ailleurs.

Une fois les détails du podcast triés, rendez-vous dans l'onglet Conception afin de pouvoir vraiment vous approprier ce lecteur.

Sélectionnez « Lumière » pour l'option Couleur du texte. Définissez les polices sur "Special Elite", la taille du titre sur 50px et la taille de la légende sur 20px.

J'ai également défini la marge supérieure sur ce lecteur particulier à 50px car cette marge maintient le lecteur centré horizontalement dans la section, et lorsque vous passez au mobile, cela permet un bon espacement entre les éléments. (Le paramètre s'applique à toutes les tailles de fenêtres, tant que vous ne cliquez pas sur l'icône du smartphone.)

Parce que l'arrière-plan est transparent, il n'est pas nécessaire d'arrondir les coins pour correspondre à la zone de texte de la première colonne, alors appuyez sur Enregistrer.

Parce que ce lecteur de podcast est la star de l'émission, nous ne voulons pas avoir à le recréer à chaque fois, nous allons donc enregistrer ce module dans la bibliothèque Divi, ce qui nous permettra de le dupliquer facilement sur le site et modifier selon nos besoins.

Entrez le nom de modèle que vous voulez et NE cochez PAS « En faire un élément global ». Nous utiliserons cette option dans la partie 2 de cette série, mais pas pour le moment.

D'accord! Encore un élément et la première section est terminée. (Ne vous inquiétez pas, cependant. C'est le plus impliqué de tous.)

La plupart des podcasts conservent un blog ou des notes d'émission pour que les auditeurs puissent revenir et revoir ce qui a été discuté dans l'épisode. Votre podcast n'est pas différent, j'en suis sûr. L'ajout d'un lien vers les shownotes de votre podcast est totalement indolore.

Créez un nouveau bloc de texte dans la troisième colonne, ouvrez les paramètres et tapez le texte du lien que vous souhaitez. Pour cet exemple, il s'agit de l'auto-explicatif « lire les notes de l'émission ».

Cliquez sur l'icône dans la barre d'outils pour ajouter un lien et saisissez/collez l'URL de vos notes de spectacle. (Encore une fois, dans la partie 2, je vais vous montrer comment créer et styliser des articles de blog pour les notes d'émission.) Étant donné que la structure de permalien WordPress est définie sur « Nom de la publication », tout ce que j'ai à faire est de taper le slug du post que j'ai écrit pour cet épisode.

(Remarque : en n'entrant pas les informations de domaine et uniquement le slug, vous dites à WordPress de diriger les utilisateurs vers cette page, quelles que soient les informations de domaine. C'est vraiment utile au cas où vous changeriez de domaine, et cela aide à éviter les liens rompus !)

Enregistrez simplement ce lien et vous êtes prêt à partir !

Vous devez également enregistrer ce module dans votre bibliothèque de la même manière que vous l'avez fait pour votre lecteur de podcast.

Voila ! Le vôtre… attendez. Euh oh. Votre lien de notes de spectacle est… est… laid !

Pas de soucis, cependant. Les liens laids sont une solution facile! Même si vous utilisez les paramètres du module de texte pour modifier la couleur du texte, cela n'affectera pas ces mots car il s'agit d'un lien.

Dirigez-vous vers le champ CSS personnalisé dans votre Divi -> Options du thème et entrez-le en bas.

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

Ce que cela fera est de garder le texte blanc (en ligne avec le reste du texte du site, assurez-vous qu'il est souligné comme la plupart des autres liens, et mettez-le en gras lorsque vous le survolez avec une souris.)

Assurez-vous de l'enregistrer, et maintenant votre lecteur de podcast est terminé !

Et pour le dernier peu de peaufinage dans cette première section, cliquez sur les paramètres de ligne (boîte verte).

Sélectionnez "Utiliser la largeur personnalisée". Assurez-vous que les unités sont définies sur des pourcentages et déplacez le curseur sur 80. En faisant cela, cette ligne occupera 80% de la taille de la fenêtre d'affichage de l'utilisateur, ce qui empêchera tout se regrouper.

Et il en va de même de la section supérieure du nouveau site Web de votre podcast ! Cela devrait ressembler à quelque chose comme ça maintenant.

Enregistrez-le, et juste comme ça, la plupart du travail est fait ! Et grâce à la fonctionnalité de bibliothèque de Divi, les deux prochaines sections vont passer ! Regarde juste.

Page d'accueil du site Web du podcast : deuxième section

Cette section va présenter des épisodes sélectionnés de notre podcast et permettre aux utilisateurs de visiter les archives (qui sont, comme les pages de notes de l'émission, à venir dans la partie 2).

La première chose que nous allons faire est en fait de créer une nouvelle section en cliquant sur le + bleu en bas de la section et en ajoutant une section régulière. Cela créera une autre boîte bleue dans le générateur visuel. Ajouter dans une ligne à une seule colonne.

Lorsque nous avons cela en place, ajoutons un arrière-plan de la même manière que ci-dessus, mais cette fois, nous voulons sélectionner l'option "Utiliser l'option de parallaxe" dans les paramètres de la section. Gardez la liste déroulante sur "True Parallax" au lieu de "CSS".

C'est la seule section que nous utiliserons avec la parallaxe sur la page d'accueil. Je pense qu'utiliser l'effet avec parcimonie attire davantage l'attention sur le contenu que vous souhaitez mettre en évidence.

Enregistrez puis insérez une nouvelle zone de texte dans la ligne. Tapez "Épisodes sélectionnés", centrez-le dans l'éditeur WYSIWYG et dirigez-vous vers les paramètres pour définir la police du texte sur "Special Elite" et la taille du texte 50px. Vous devriez voir quelque chose comme ceci maintenant :

En dessous, créez une nouvelle ligne à trois colonnes en cliquant sur le + vert, et dans la première colonne, entrez dans l'onglet "Ajouter à partir de la bibliothèque". (Vous n'aurez pas toutes ces options de bibliothèque pour le moment, mais vous les aurez plus tard !)

Sélectionnez « Épisode de podcast » ou tout ce que vous avez nommé votre joueur ci-dessus. Ajoutez ensuite un autre module en dessous, accédez à nouveau à la bibliothèque et ajoutez votre module "Afficher le lien Notes" enregistré. Faites ceci pour les trois colonnes, jusqu'à ce que vous voyiez ceci :

Continuez ainsi jusqu'à ce que vous ayez ajouté tous les épisodes souhaités. Modifiez le titre, la pochette de l'album et les liens des notes d'émission pour chaque épisode. Je viens d'ajouter une deuxième ligne et de remplir uniquement la deuxième colonne pour que le design corresponde à l'arrière-plan que j'ai choisi.

Il ne reste plus qu'à ajouter un bouton « Parcourir les archives ». Créez une nouvelle ligne tout en bas en cliquant sur le + vert et utilisez une disposition à une seule colonne. Insérez un module "Bouton". Cela créera un bouton très difficile à lire (en fonction de votre expérience, bien sûr), qui nécessitera un style simple.

Ouvrez les paramètres du module Button et entrez l'URL slug de la page qui sera vos archives. Je suis allé avec l'évident "/archives", j'ai utilisé le texte "Parcourir les archives", puis j'ai centré le bouton lui-même.

Dans l'onglet Paramètres, nous cliquons sur "Utiliser des styles personnalisés pour le bouton" et définirons la couleur d'arrière-plan sur "#ffffff" et la couleur du texte sur "#000000" (c'est-à-dire blanc et noir, respectivement.)

Ensuite, nous voudrons arrondir les coins du bouton en définissant le rayon de bordure sur 10px, définir la police sur "Special Elite" et changer l'icône d'ajout de bouton de "Par défaut" à "Non".

Enfin, modifiez le rayon de bordure de survol du bouton à 10px afin qu'il soit arrondi lorsque le bouton est survolé.

Je l'ai enregistré dans ma bibliothèque afin de pouvoir utiliser le style dans d'autres boutons au fur et à mesure.

Et avec cela, votre deuxième section est terminée. Vous avez presque terminé, podcasteur ! Vous arrondissez à la troisième place, littéralement !

Page d'accueil du site Web du podcast : troisième section

Ce sera juste un module unique sur un arrière-plan statique.
Tout d'abord, créez une nouvelle boîte bleue avec une colonne à double largeur comme nous l'avons fait pour la section deux et sélectionnez le module "Email Optin" dans le menu.

Vous verrez cela allumé, ce qui ne correspond pas du tout à notre conception. C'est une solution super facile, cependant.

Accédez aux paramètres du module et mettez à jour les options suivantes :

Titre : J'ai laissé le titre en blanc intentionnellement
Contenu : ajoutez votre texte d'appel à l'action et centrez-le.
Fournisseur de services : j'utilise Mailchimp, c'est donc ce que j'ai choisi ici.
Couleur d'arrière-plan : transparent ; cela rend également le bouton lui-même transparent.

La seule chose qu'il vous reste à faire est de vous assurer que votre service de messagerie est fourni, sinon le formulaire ne s'affichera pas après avoir enregistré et quitté le générateur. Si vous utilisez Mailchimp, il existe une excellente documentation sur la recherche de votre clé API dans leur documentation de support.

Une fois que vous avez votre clé, accédez à votre tableau de bord WordPress, rendez-vous à nouveau sur Divi -> Options du thème, et entrez votre clé API Mailchimp dans le champ bien nommé « Clé API Mailchimp ».

Une fois que cela est enregistré, la seule étape qui vous reste avant d'avoir une belle page terminée est de définir un arrière-plan pour la troisième section. Le produit final devrait ressembler à ceci :

Tu l'as fait! Hourra ! Vous avez maintenant une page d'accueil entièrement fonctionnelle pour votre podcast. Il est temps de battre un record et d'en parler au monde, n'est-ce pas ?

Demain : créer de superbes archives et afficher des pages de notes pour votre podcast

Puisque vous avez maintenant une excellente page d'accueil, vous pouvez présenter le contenu le plus impressionnant que vous ayez. Mais si vos fans deviennent de vrais fanatiques, ils voudront plonger profondément dans votre émission.

Demain, je vais vous montrer comment créer des pages simples mais belles pour l'ensemble de vos archives d'épisodes de podcast, ainsi que des pages individuelles pour chaque épisode qui indiquent aux lecteurs ce dont vous discutez dans chaque épisode et leur donnent une chance de s'inscrire pour votre liste de diffusion super incroyable.

À demain!

Afficher la page de notes :

Page d'archives :