Comment créer une barre de contenu audio collante dans Divi

L'ajout d'une barre de contenu audio collante est un excellent moyen de présenter un clip audio pour un accès facile lorsqu'un utilisateur fait défiler le contenu de votre page. Par exemple, les podcasteurs peuvent « coller » leur audio en vedette en haut d'une page d'épisode afin que l'utilisateur puisse toujours avoir accès à ces commandes audio tout en écoutant et en interagissant avec le reste du contenu de la page.

Dans ce tutoriel, nous allons faire preuve d'un peu de créativité avec les options de position collante intégrées de Divi pour créer une barre de contenu audio collante dans Divi. Nous allons vous montrer comment convertir le contenu audio existant sur une page (comme une ligne avec un module audio) en une barre de contenu audio persistante qui reste en haut de la fenêtre une fois que l'utilisateur passe le contenu audio pendant le défilement. De plus, nous vous montrerons également comment modifier le contenu, le style et la disposition de la barre une fois que l'état collant est activé (ou bloqué en haut de la fenêtre). La transition en douceur et la fonctionnalité de cette conception offrent une solution unique pour présenter du contenu audio sur n'importe quel site Web Divi.

Allons-y !

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Voici un aperçu de la transition du contenu audio dans une barre de contenu audio collante.

Et voici un aperçu de la façon dont on peut interagir avec la barre audio tout en faisant défiler la page.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez 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 !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Partie 1 : Téléchargez le pack de mise en page Podcast Premade depuis le Divi Builder

Pour démarrer la conception de notre barre audio collante dans Divi, nous utiliserons la mise en page de la page de destination du podcast prédéfinie. Dans le menu des paramètres, sélectionnez l'icône « Charger à partir de la bibliothèque ». Recherchez ensuite la mise en page de la page de destination du podcast et chargez-la sur la page.

Partie 2 : Création de la ligne collante pour contenir le contenu audio

Dans la partie supérieure de la mise en page prédéfinie, recherchez la ligne à l'intérieur de cette section supérieure. Ajoutez ensuite une nouvelle ligne à une colonne sous la ligne existante.

Paramètres de ligne

Avant d'ajouter des modules, ouvrez les paramètres de la nouvelle ligne et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %
• Rembourrage (bureau) : 10 pixels en haut, 10 pixels en bas, 10 % à gauche, 10 % à droite
• Rembourrage (tablette et téléphone): 10px en haut, 10px, en bas, 10px à gauche, 10px à droite

Pour rendre la ligne persistante, accédez à l'onglet Avancé et mettez à jour les éléments suivants :

• Position collante : coller au sommet

Cela fera que la ligne (bientôt notre barre de contenu audio) restera en haut de la fenêtre du navigateur lors du défilement de la page.

Partie 3 : Ajout du contenu audio

Ajout du module audio à la rangée

Ensuite, déplacez/faites glisser le module audio existant (préconçu) de la première rangée de la section supérieure vers la nouvelle rangée que vous venez de créer. Cela servira d'audio vedette que nous inclurons dans le lecteur audio collant

Ajouter un CTA à l'aide d'un module Blurb

Ensuite, nous allons créer un CTA qui s'affichera sur le côté droit de notre barre de contenu audio collante.

Pour créer le CTA, copiez le module de présentation avec l'icône de lecture dans la partie supérieure de la mise en page.

Ensuite, collez le module de présentation en double sous le module audio dans la deuxième rangée de la section supérieure.

Partie 4 : Styliser le contenu audio

Styliser le module audio

Une fois que la ligne hérite de la position collante, nous voulons avoir un style différent pour notre module audio. Pour ce faire, ouvrez les paramètres du module audio et mettez à jour les options d'état persistant suivantes :

• Taille du texte du titre (collant) : 14px
• Hauteur de la ligne de titre (collante) : 1.3em
• Hauteur de la ligne de légende (collante) : 1,3 em

Tout cela ne fait que réduire un peu le texte et l'espacement afin que le contenu audio ne prenne pas beaucoup d'espace vertical dans notre barre collante.

Ensuite, nous voulons changer la largeur du module audio dans l'état collant comme suit :

• Largeur (bureau): 80%
• Largeur (collant): 100%
• Largeur maximale (collante) : 100 %

Ensuite, nous devons ajuster l'espacement du module audio comme suit :

• Marge : 0px en haut, 0px en bas
• Remplissage : 0px en haut, 0px en bas, 0px à gauche, 20px à droite

Enfin, nous devons ajouter quelques extraits CSS personnalisés sous les paramètres avancés afin d'aligner notre texte à gauche et d'ajouter des couleurs uniques à notre bouton et curseur de lecteur audio.

Ajoutez le CSS suivant au titre audio uniquement sous l'onglet persistant :

text-align:left;

Ajoutez le CSS suivant à la méta audio uniquement sous l'onglet persistant :

text-align:left !important;

Ajoutez le CSS suivant aux boutons du lecteur uniquement sous l'onglet persistant :

color: #fe4943;

Ajoutez le CSS suivant aux curseurs du lecteur Actuels uniquement sous l'onglet persistant :

background: #2c4ca3;

Styliser le CTA Blurb

Ensuite, nous allons styliser notre module de présentation qui va servir de CTA simulé pour voir tous les épisodes.

Tout d'abord, ajoutez le texte « Tous les épisodes » au contenu du corps du texte de présentation.

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Police de caractère : Lato
• Poids de la police de caractères : gras
• Style de police de caractères : TT
• Taille du corps du texte : 10px
• Espacement des lettres du corps : 2px
• Hauteur de la ligne du corps : 1,3 em

Ajustez ensuite la taille de l'icône de présentation :

• Taille de la police de l'icône : 50px

Ajustez ensuite la taille du module comme suit :

• Largeur du contenu : 100 %
• Largeur : 20%

Revenez maintenant à l'onglet contenu et ajoutez un arrière-plan pour le texte de présentation comme suit :

• Couleur d'arrière-plan : #1a1844
• Image de fond : [ajouter une image]
• Mélange d'images d'arrière-plan : luminosité

Nous voulons que ce module soit initialement masqué jusqu'à ce que la ligne atteigne l'état collant et que la barre de contrôle audio soit bloquée en haut de la fenêtre. Pour ce faire, nous pouvons ajouter quelques extraits de css qui masquent le module sur le bureau et montrent le module à l'état collant.

Sous l'onglet Avancé, mettez à jour le CSS personnalisé suivant :

Élément principal CSS (bureau) :

display:none;

Élément principal CSS (collant) :

display:block;

CSS de l'image de présentation :

margin-bottom: 10px

Partie 5 : Modification de l'alignement du contenu de la barre audio dans l'état collant

À l'heure actuelle, la ligne collante n'a qu'une seule colonne avec deux modules empilés les uns sur les autres. Ainsi, la barre collante afficherait le texte de présentation CTA sous le module audio. Cela prendrait trop d'espace vertical pour une barre collante et ne serait pas très joli.

Pour vous assurer que tout est aligné horizontalement et verticalement dans la colonne, nous. peut utiliser la propriété CSS flex pour ajuster la disposition de nos modules dans l'état collant.

Pour ce faire, ouvrez les paramètres de la colonne contenant les deux modules.

Sous l'onglet avancé, ajoutez le CSS personnalisé suivant à l'élément principal

Élément principal (bureau) :

display:flex;
flex-direction:column;

Élément principal (collant) :

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

C'est ça! Passons en revue les résultats.

Résultat final

Voici la conception sur le bureau une fois que la ligne est à l'état collant.

Et voici le design sur mobile.

Et voici quelques clips vidéo sur le fonctionnement de la magie de la barre collante de contenu audio sur une page en direct.

Dernières pensées

Les options de position collante de Divi peuvent être un outil puissant pour les concepteurs de sites Web. Dans ce didacticiel, nous vous avons montré comment créer une barre de contenu audio collante en utilisant les options de style collant de Divi de manière avancée et créative. L'une des techniques uniques présentées dans ce didacticiel consistait à aligner le contenu d'une ligne collante à l'aide de la propriété flex. Heureusement, Divi a un moyen pratique d'ajouter des extraits de code personnalisés à l'état collant en utilisant les blocs CSS personnalisés avancés pour nous donner la flexibilité de conception dont nous avions besoin. Espérons que cela vous donnera de l'inspiration pour en créer un sur votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!