Sélectionner une page


L’ajout d’un sélecteur personnalisé pour vos transcriptions vidéo peut apporter de nombreux avantages à votre site Web. 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 l’optimisation des moteurs de recherche. Les utilisateurs ont la possibilité de lire le contenu. C’est une excellente accessibilité pour les sourds, les malentendants ou dans un café bruyant. Et vous pouvez lire les transcriptions plus rapidement que la vidéo (ou les sous-titres de la vidéo). En outre, le contenu ajouté est susceptible d’avoir un nombre important de mots-clés qui amélioreraient le référencement. La création d’un sélecteur personnalisé pour une transcription vidéo est également utile car le contenu au format long sera masqué jusqu’à ce qu’il soit nécessaire.

Dans ce tutoriel, nous allons créer un commutateur personnalisé (et compact) pour les transcriptions vidéo dans Divi. À cette fin, nous adapterons le module à bascule de Divi avec une révision précise afin qu’il s’adapte parfaitement à n’importe quelle vidéo. Ensuite, nous vous montrerons comment utiliser la transcription générée automatiquement par Youtube comme contenu pour basculer. Tout cela sans avoir à utiliser de plugin.

Commençons!

Avant goût

Voici un aperçu de la conception que nous allons créer dans ce didacticiel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devez d’abord les 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 en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail et cliquez sur Télécharger. Vous ne serez plus abonné et ne recevrez aucun e-mail supplémentaire.

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 Portabilité, sélectionnez l’onglet Importer et téléchargez le fichier depuis votre ordinateur.

Cliquez ensuite sur le bouton Importer.

Panneau de notification Divi

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au didacticiel.

Ce dont vous avez besoin pour commencer

Extension des onglets d'angle

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

  1. Si vous ne l’avez pas déjà Installez et activez le thème Divi.
  2. Créez une nouvelle page dans WordPress et éditez la page dans le frontend avec le Divi Builder (Visual Builder).
  3. Sélectionnez l’option « Construire à partir de zéro ».

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

Créer un sélecteur personnalisé pour les transcriptions vidéo dans Divi

Partie 1: ajouter une vidéo Youtube à la page à l’aide d’un module vidéo Divi

Dans la première partie de notre tutoriel, nous allons ajouter / intégrer une vidéo YouTube à une page à l’aide d’un module vidéo dans le constructeur Divi. Ce processus est vraiment assez simple.

Avant d’ajouter la vidéo, ajoutons une seule ligne de colonne à la section.

Toggle Transcription de la vidéo Divi

Ensuite, ajoutez un module vidéo à la ligne.

Toggle Transcription de la vidéo Divi

Sous l’option «Fichier vidéo MP4 ou URL Youtube», cliquez sur l’icône «Ajouter une vidéo plus».

Toggle Transcription de la vidéo Divi

Ensuite, choisissez le Coller depuis l’URL Action 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 Insérer dans le message Bouton.

Toggle Transcription de la vidéo Divi

Une fois la vidéo ajoutée, vous pouvez ajouter une image de superposition personnalisée à la vidéo.

Toggle Transcription de la vidéo Divi

Partie 1: création du sélecteur personnalisé pour la transcription

Maintenant que notre vidéo est en place, nous pouvons créer le sélecteur personnalisé qui contiendra notre contenu de transcription. Pour ce faire, nous adapterons un module de commutation.

Tout d’abord, ajoutez un module bascule juste en dessous de la vidéo.

Toggle Transcription de la vidéo Divi

Dans les paramètres de bascule, ajoutez le mot «transcription» pour le texte du titre. (Nous reviendrons au contenu du corps plus tard pour l’ajouter à notre contenu de transcription vidéo YouTube plus tard.)

Toggle Transcription de la vidéo Divi

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

  • Couleur de l’icône: # 42b3a9
  • Ouvrir Basculer la couleur d’arrière-plan: transparent
  • Couleur d’arrière-plan de la bascule fermée: transparent
  • Alignement du texte: centre
  • Police du titre: Roboto
  • Police du titre: TT

Toggle Transcription de la vidéo Divi

  • Largeur maximale: 800px
  • Orientation du module: centre
  • Rembourrage: 0px au-dessus, 20px en dessous, 0px à gauche, 0px à droite
  • Largeur de la bordure: 0px

Toggle Transcription de la vidéo Divi

Dans l’onglet Avancé, certains extraits de code CSS doivent être ajoutés pour terminer la conception de la bascule.

Ajoutez le CSS suivant Changer de piste::

display:inline-block;
padding: 1em 2.5em 1em 2em !important;

Ajoutez le CSS suivant Icône de bascule::

right: 0.75em !important;

Ajoutez le CSS suivant Basculer le contenu::

max-height: 30vh;
overflow-y: scroll;
padding: 20px 3%;
background: #ffffff;
border: 2px solid #eeeeee;
border-radius: 5px;
text-align:left;

Toggle Transcription de la vidéo Divi

Partie 3: Obtenir la transcription de Youtube et l’ajouter au contenu de bascule

La transcription manuelle des vidéos peut être fastidieuse. Et il existe des services et des plugins qui peuvent le faire de manière plus professionnelle (certains à un prix élevé). Pour ce didacticiel, cependant, nous utiliserons une méthode rapide, simple et gratuite. Nous allons extraire la transcription générée automatiquement de Youtube pour une vidéo et l’utiliser sur notre site Web.

Pour ce faire, accédez à votre vidéo sur Youtube et procédez comme suit:

  1. Ouvrez le menu déroulant Plus d’actions (3 points horizontaux) à côté du bouton Enregistrer sous de la vidéo.
  2. Cliquez sur Ouvrir la transcription dans la liste.
  3. Dans le champ « Transcription » en haut, ouvrez le menu déroulant « Plus d’actions » (3 points verticaux).
  4. Cliquez sur Activer / désactiver l’horodatage. Par conséquent, les horodatages ne sont plus affichés à gauche de chaque bloc de texte.

Toggle Transcription de la vidéo Divi

Copiez l’intégralité du contenu de la transcription à l’intérieur de la boîte dans votre presse-papiers.

Toggle Transcription de la vidéo Divi

Pour le moment, le texte est plein de sauts de ligne. Pour les retirer, vous pouvez aller sur textfixer.com et utiliser leurs gratuits Outil de suppression des sauts de ligne Supprimez les sauts de ligne du texte.

Dans la section Supprimer les sauts de ligne, sélectionnez Supprimer les sauts de ligne uniquement.

Collez ensuite le texte de transcription dans le champ.

Cliquez sur le bouton Supprimer les sauts de ligne.

Une fois que le texte sous le titre Nouveau texte a été généré sans saut de ligne, copiez le texte dans le presse-papiers.

Toggle Transcription de la vidéo Divi

Revenez sur votre site, ouvrez les paramètres de bascule et collez le contenu de la transcription dans le module.

Toggle Transcription de la vidéo Divi

Certes, il manque au texte de transcription un certain nombre de majuscules, de signes de ponctuation, de paragraphes, etc. Cependant, le contenu est présent et lisible. Cependant, vous voudrez peut-être passer quelques minutes à nettoyer le texte pour vos lecteurs.

C’est ça!

En bout de ligne

Voici le résultat final de notre mélangeur personnalisé pour une transcription vidéo dans Divi.

Sur le bureau …

Sur la tablette …

Et au téléphone …

Dernières pensées

Dans ce didacticiel, nous vous avons montré comment convertir un module de basculement Divi en une transcription vidéo personnalisée vers le commutateur Divi. La conception particulièrement concise du commutateur offre à elle seule des applications qui vont au-delà de celles des transcriptions vidéo. Je veux dire, vous pouvez littéralement y mettre n’importe quel texte. Mais je pense que cela s’intègre bien dans une vidéo. L’utilisation de ces transcriptions générées automatiquement sur une vidéo Youtube peut certainement être utile lorsque vous avez besoin d’une solution simple. Cependant, vous pouvez explorer d’autres options pour transcrire votre contenu vidéo et / ou en partager avec nous.

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

De bas en haut!





Source link

Recent Posts