Comment ajouter une barre audio "Dernier épisode" fixe à votre en-tête Divi

Si vous hébergez un site Web de podcast avec Divi, il y a de fortes chances que vous utilisiez déjà le module audio intégré. Maintenant, si vous cherchez un moyen spécial de mettre votre dernier épisode à l'honneur, vous allez adorer ce didacticiel. Aujourd'hui, nous allons vous montrer comment inclure une barre audio du dernier épisode fixe dans votre en-tête Divi. Nous inclurons une animation en boucle du module de texte pour attirer l'attention sur la barre audio et vous pourrez également télécharger le modèle d'en-tête global, y compris la barre audio !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez le modèle d'en-tête de barre audio GRATUITEMENT

Pour mettre la main sur le modèle d'en-tête de barre audio gratuit, vous devez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Accédez à Divi Theme Builder et commencez à créer un en-tête global

Aller à Divi Theme Builder

Commencez par accéder au Divi Theme Builder dans le backend de votre site WordPress.

Commencer à créer un en-tête global

Ensuite, commencez à créer un en-tête global.

Créer un en-tête global avec la dernière barre audio des épisodes

Paramètres de section

Couleur de l'arrière plan

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et changez la couleur d'arrière-plan. Nous associons cet en-tête global au Podcast Layout Pack, mais n'hésitez pas à utiliser tout autre type de style de conception de votre choix.

• Couleur d'arrière-plan : #1a1844

Espacement

Ensuite, passez à l'onglet Conception et ajoutez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 50 pixels (ordinateur de bureau), 80 pixels (tablette et téléphone)
• Rembourrage inférieur : 0px

Boîte ombre

Pour séparer l'en-tête du contenu de la page/de la publication, nous ajouterons également une ombre de boîte à notre section.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une première ligne à votre section en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Toute cette rangée sera dédiée à notre dernière barre audio d'épisode. Mais avant d'en arriver là, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #fe4943

Dimensionnement

Passez à l'onglet de conception de la ligne et modifiez ensuite les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur: 90%
• Largeur maximale : 100 %

Espacement

Nous ajoutons également des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px

Frontière

Ensuite, nous irons dans les paramètres de bordure et nous ajouterons des coins arrondis.

• En bas à gauche : 10px
• En bas à droite : 10px

Boîte ombre

Nous incluons également une ombre de boîte.

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Position

Ensuite, nous allons passer à l'onglet avancé et corriger toute la ligne. Nous augmenterons également l'index z de la ligne pour nous assurer qu'il chevauche la deuxième ligne que nous ajouterons à notre section.

• Poste : fixe
• Emplacement : Centre supérieur
• Indice Z : 11

Colonne 1 Visibilité

Complétez les paramètres de ligne en définissant les débordements de la colonne 1 sur masqués. Cela aidera avec l'animation de texte que vous avez pu remarquer dans l'aperçu de cet article. En définissant les débordements sur masqués, nous nous assurerons que l'animation est masquée au-delà du conteneur de colonne.

• Débordement horizontal : masqué
• Débordement vertical : caché

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps d'ajouter des modules, en commençant par un module de texte dans la colonne 1. Ajoutez une copie de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte en conséquence :

• Police de texte : Open Sans
• Style de police de texte : majuscule
• Couleur du texte : #ffffff
• Taille du texte : 15px
• Espacement des lettres du texte : 3px

Espacement

Nous ajouterons également une marge gauche négative à notre module. Cela aidera avec notre animation en boucle.

• Marge gauche : -190%

Animation

Enfin, ajoutez l'animation de boucle suivante à votre module de texte :

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Durée de l'animation : 9000 ms
• Intensité de l'animation : 30 %
• Opacité de démarrage de l'animation : 100 %
• Courbe de vitesse d'animation : linéaire
• Répétition de l'animation : boucle

Ajouter un module audio à la colonne 2

Supprimer tout le contenu

Dans la colonne 2, le seul module dont nous avons besoin est un module audio. Assurez-vous que le contenu est supprimé.

Télécharger un fichier audio

Ensuite, téléchargez un fichier audio contenant votre dernier épisode.

Supprimer la couleur d'arrière-plan

Supprimez ensuite la couleur d'arrière-plan du module.

Espacement

Ensuite, passez à l'onglet Conception et supprimez certaines valeurs de remplissage par défaut en leur ajoutant « 0px ».

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage gauche : 0px

Ajouter la ligne n° 2

Structure des colonnes

Passons à la rangée suivante. Cette ligne contiendra notre logo, notre menu et nos icônes de réseaux sociaux. Choisissez la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur maximale : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter un module de menu à la colonne 1

Sélectionnez le menu

Ensuite, ajoutez un module de menu à la colonne 1 et sélectionnez un menu de votre choix.

Télécharger le logo

Téléchargez un logo ensuite.

Supprimer la couleur d'arrière-plan

Ensuite, supprimez la couleur de fond blanc par défaut.

Paramètres du texte du menu

Passez à l'onglet Conception et modifiez les paramètres du texte du menu comme suit :

• Police du menu : Open Sans
• Couleur du texte du menu : #ffffff (ordinateur de bureau), #1a1844 (tablette et téléphone)
• Taille du texte du menu : 15 px
• Alignement du texte : à droite

Paramètres de texte du menu déroulant

Nous modifions également la couleur de la ligne du menu déroulant dans les paramètres du menu déroulant.

• Couleur de la ligne du menu déroulant : #ffffff

Paramètres des icônes

Avec la couleur de l'icône du menu hamburger dans les paramètres des icônes.

• Couleur de l'icône du menu Hamburger : #fe4943

Dimensionnement

Et nous allons compléter les paramètres du module en attribuant une largeur maximale de logo dans les paramètres de dimensionnement.

• Largeur maximale du logo : 65 %

Ajouter le module de suivi des médias sociaux à la colonne 2

Ajouter des réseaux sociaux

Dans la deuxième colonne de notre deuxième ligne, nous aurons besoin d'un module de suivi des médias sociaux. Ajoutez les réseaux sociaux de votre choix.

Alignement

Passez à l'onglet de conception du module et modifiez l'alignement du module.

• Alignement du module : Centre

Espacement

Ajoutez ensuite des valeurs de marge personnalisées.

• Marge supérieure : 20px
• Marge inférieure : -4% (tablette et téléphone uniquement)

Frontière

Et complétez l'en-tête en ajoutant des coins arrondis aux paramètres de bordure du module. Une fois que vous avez terminé l'en-tête global, assurez-vous d'enregistrer toutes les modifications de Divi Theme Builder et d'afficher le résultat sur votre site Web !

• Tous les coins : 50vw

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec le module audio intégré de Divi. Plus précisément, nous vous avons montré comment inclure une barre audio fixe dans votre en-tête global personnalisé. C'est un excellent moyen de mettre en valeur le dernier épisode de votre podcast. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.