L’ajout d’un toggle personnalisé pour vos transcriptions vidéo peut apporter beaucoup d’avantages à votre site Web. En fait, le simple fait d’inclure une transcription vidéo pour chaque vidéo sur votre site Web peut améliorer l’expérience utilisateur, l’accessibilité et le référencement. Les utilisateurs auront la possibilité de lire le contenu, ce qui est une excellente fonction d’accessibilité pour les personnes sourdes, malentendantes ou dans un café bruyant. De plus, il est plus rapide de lire les transcriptions que de regarder la vidéo (ou les sous-titres de la vidéo). De plus, le contenu ajouté comprendra probablement une quantité importante de mots clés qui amélioreront le référencement. La création d’une bascule personnalisée pour la transcription d’une vidéo est également intéressante, car elle permet de cacher ce contenu long jusqu’à ce qu’il soit nécessaire.
Dans ce tutoriel, nous allons créer une bascule personnalisée (et compacte) pour les transcriptions vidéo dans Divi. Pour ce faire, nous allons personnaliser le module de basculement de Divi en le transformant de manière concise afin qu’il s’adapte parfaitement à n’importe quelle vidéo. Ensuite, nous allons vous montrer comment utiliser la transcription générée automatiquement par Youtube comme contenu pour la bascule. Tout cela sans avoir à utiliser de plugin.
C’est parti !
Coup d’œil rapide
Voici un aperçu du design que nous allons créer dans ce tutoriel.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur le design de ce tutoriel, vous devez d’abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily à l’aide du formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus d’astuces Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous êtes déjà sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur télécharger. Vous ne serez pas « réinscrit » et ne recevrez pas d’e-mails supplémentaires.
Pour importer la mise en page de 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 d’importation.
Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devez effectuer les opérations suivantes :
- Si vous ne l’avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour modifier la page sur le front-end (constructeur visuel).
- Choisissez l’option « Build From Scratch ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création d’un bouton personnalisé pour les transcriptions de vidéos dans Divi
Partie 1 : Ajout d’une vidéo Youtube à la page à l’aide d’un module vidéo Divi
Pour la première partie de notre tutoriel, nous allons ajouter/incorporer une vidéo Youtube à une page à l’aide d’un module vidéo dans le constructeur de Divi. Ce processus est vraiment très simple.
Mais avant d’ajouter la vidéo, ajoutons une rangée d’une colonne à la section.
Ensuite, ajoutons un module vidéo à la rangée.
Cliquez sur l’icône « Ajouter une vidéo » sous l’option « Fichier vidéo MP4 ou URL Youtube ».
Sélectionnez ensuite l’action Insérer à partir de l’URL dans la barre latérale gauche de la fenêtre contextuelle.
Collez l’URL de la vidéo YouTube dans le champ de saisie.
Cliquez ensuite sur le bouton Insérer dans le message.
Une fois la vidéo ajoutée, vous pouvez ajouter une image superposée personnalisée à la vidéo.
Partie 1 : Création du bouton personnalisé pour la transcription
Maintenant que notre vidéo est en place, nous pouvons créer le bouton à bascule personnalisé qui contiendra le contenu de notre transcription. Pour ce faire, nous allons personnaliser un module de basculement.
Tout d’abord, ajoutez un module à bascule directement sous la vidéo.
Dans les paramètres du module à bascule, ajoutez le mot « Transcription » pour le texte du titre. (Nous reviendrons plus tard sur le corps du texte pour y coller le contenu de la transcription de notre vidéo Youtube)
Sous l’onglet « Design », mettez à jour les éléments suivants :
- Couleur de l’icône : #42b3a9
- Couleur d’arrière-plan du bouton ouvert : transparent
- Closed Toggle Background Color : transparent
- Alignement du texte : Centre
- Police du titre : Roboto
- Style de la police du titre : TT
- Largeur maximale : 800px
- Alignement du module : Centre
- Rembourrage : 0px haut, 20px bas, 0px gauche, 0px droite
- Largeur de la bordure : 0px
Dans l’onglet Avancé, nous devons ajouter quelques extraits CSS pour finaliser la conception du bouton à bascule.
Ajoutez le CSS suivant au titre du basculeur:
display:inline-block ; padding : 1em 2.5em 1em 2em !important ;
Ajoutez le CSS suivant à l’icône de basculement:
right : 0.75em !important ;
Ajoutez le CSS suivant au contenu de la bascule:
max-height : 30vh ; overflow-y : scroll ; padding : 20px 3% ; background : #ffffff ; border : 2px solid #eeeeee ; border-radius : 5px ; text-align:left ;
Partie 3 : récupérer la transcription de Youtube et l’ajouter au contenu du basculement
La création de transcriptions pour les vidéos peut être un peu fastidieuse à réaliser manuellement. Il existe des services et des plugins qui permettent de le faire de manière plus professionnelle (certains sont payants). Mais pour ce tutoriel, nous allons utiliser une méthode rapide, facile et gratuite. Nous allons extraire la transcription générée automatiquement par Youtube pour une vidéo et l’utiliser sur notre site Web.
Pour ce faire, allez sur votre vidéo sur Youtube et suivez les étapes suivantes :
- Ouvrez le menu déroulant Plus d’actions (3 points horizontaux) à côté du bouton Enregistrer sous la vidéo.
- Cliquez sur Ouvrir la transcription dans la liste.
- En haut de la boîte Transcription, ouvrez le menu déroulant Plus d’actions (3 points verticaux).
- Cliquez sur Toggle timestamps. Les horodateurs ne s’afficheront plus à gauche de chaque bloc de texte.
Copiez l’intégralité du contenu de la transcription dans la boîte dans votre presse-papiers.
Actuellement, le texte est plein de sauts de ligne. Pour les supprimer, vous pouvez vous rendre sur textfixer.com et utiliser leur outil gratuit de suppression des sauts de ligne pour supprimer les sauts de ligne du texte.
Dans la section Supprimer les sauts de ligne, sélectionnez « Supprimer uniquement les sauts de ligne »
Collez ensuite le texte de la transcription dans la case.
Et cliquez sur le bouton Supprimer les sauts de ligne.
Une fois que le texte est généré dans la section intitulée Nouveau texte sans saut de ligne, copiez le texte dans le presse-papiers.
Retournez sur votre site, ouvrez les paramètres de basculement et collez le contenu de la transcription dans le module.
Certes, le texte de la transcription manque de majuscules, de ponctuation, de paragraphes, etc. Mais le contenu est là et lisible. Cependant, vous pouvez passer quelques minutes à nettoyer le texte pour vos lecteurs.
C’est tout !
Résultat final
Voici le résultat final de notre bascule personnalisée pour une transcription vidéo dans Divi.
Sur le bureau..
Sur tablette..
Et sur téléphone..
Réflexions finales
Dans ce tutoriel, nous vous avons montré comment transformer un module de basculement Divi en un basculement personnalisé pour les transcriptions vidéo dans Divi. Le design concis et unique du module à bascule a des applications qui vont au-delà des transcriptions vidéo. Je veux dire que vous pouvez littéralement mettre n’importe quel texte que vous voulez là-dedans. Mais je pense que cela convient parfaitement à une vidéo. De même, l’utilisation de ces transcriptions générées automatiquement pour une vidéo Youtube peut être très utile si vous avez besoin d’une solution simple. Mais n’hésitez pas à explorer d’autres options pour transcrire votre contenu vidéo et/ou à nous en faire part.
J’ai hâte de vous lire dans les commentaires.
À la vôtre !
