Eléments de média Chapitre 10

ÉLÉMENTS DE MÉDIA

CHAPITRE 10 : CURSEUR VIDÉO

MODULE 5

Le module de curseur vidéo

Ce module vous permet de placer toute une collection de vidéos dans un même

curseur. Ceci est idéal pour aﬃcher de manière condensée tout groupe de vidéos sur votre page.

Découvrez la démo en ligne: www.elegantthemes.com/preview/video-slider/

Divi facilite l'ajout d'un curseur vidéo à votre page. C'est une excellente façon d'organiser des collections de vidéos à partir de n'importe quelle source.

La galerie vidéo vous permet également de personnaliser les images miniatures vidéo et le bouton de lecture pour ajouter un style clair et personnalisé à vos images.

Comment ajouter un module de curseur vidéo à votre page

Avant de pouvoir ajouter un module vidéo à votre page, vous devez d'abord sauter dans le Divi Builder.

Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous construisez une nouvelle page.

Cliquez sur ce bouton pour activer le Divi Builder, vous donnant accès à tous les modules du Divi Builder.

Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode Visual. Vous pouvez également cliquer sur le bouton Activer Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.

Comment ajouter un module de curseur vidéo à votre page

Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page.

Les nouveaux modules ne peuvent être ajoutés qu' à l'intérieur des rangées.

Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page. Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.

Localisez le module curseur vidéo dans la liste des modules et cliquez dessus pour l'ajouter à votre page. La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper "vidéo slider" puis appuyer sur Entrée pour trouver et ajouter automatiQuement le module vidéo slider!

Une fois le module ajouté, vous serez accueilli avec la liste d'options du module. Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.

Remplir le curseur vidéo avec du contenu

Avant d'ajuster trop de paramètres, il est probablement préférable d'aller de l'avant et de remplir votre curseur vidéo avec des diapositives vidéo. De cette façon, lorsque vous apportez des changements, vous serez en mesure de voir comment ils affectent le résultat final. Pour ajouter une nouvelle diapositive vidéo, vous devrez cliquer sur le lien + Ajouter un nouvel élément.

Ici, vous pouvez télécharger un fichier. mp4 ou Webm. Vous pouvez également insérer une url vidéo depuis YouTube. Lorsque vous avez téléchargé votre fichier ou ajouté le lien YouTube, cliquez simplement sur le bouton de contrôle vert dans le coin inférieur droit et vous retournerez à l'onglet principal de contenu du module de curseur vidéo. Répétez ce processus pour chaque vidéo que vous souhaitez ajouter.

Maintenant que votre contenu a été ajouté, il y a quelques autres domaines à explorer. Les trois menus déroulants de l'onglet Contenu où les paramètres ont été regroupés qui affecteront l'ensemble du module.

Paramètres de contenu du module de curseur vidéo

Éléments

Superposition

Étiquette Admin

Sous les éléments, vous pouvez régler le réglage des flèches et des commandes du module de curseur vidéo.

Ici, vous pouvez choisir d'aﬃcher ou de masquer les superpositions vidéo sur la vidéo principale. Ceci peut être fait en ajoutant une superposition à chaque diapositive vidéo ou générée automatiquement par Divi.

Dans ce menu déroulant, vous pouvez ajouter une étiquette d'administrateur qui apparaîtra dans le constructeur backend ainsi que dans la vue squelette du constructeur visuel.

Paramètres de conception du module de curseur vidéo

Dans cet onglet, il n' y a qu'un seul groupe de paramètres appelés Couleurs des contrôles.

Ici, vous pouvez changer la couleur des contrôles du curseur pour passer de claire à foncée, changer la couleur de l'icône de lecture et ajuster la couleur de superposition des vignettes.

Paramètres avancés du module de curseur vidéo

Dans l'onglet Avancé de votre module vidéo, vous pouvez ajouter un identifiant et une classe css unique.

Vous pouvez également ajouter du css personnalisé à divers sélecteurs de css prédéfinis (et présélectionnés) dans le module de curseur vidéo dans le menu déroulant css personnalisé.

Enfin, dans le menu déroulant de visibilité, vous pouvez régler la visibilité de votre module sur les téléphones, les tablettes et les ordinateurs de bureau.

Paramètres individuels du contenu vidéo

Si vous voulez créer des paramètres spécifiques pour des diapositives individuelles, ceux-ci devront être configurés à l'intérieur des diapositives vidéo elles-mêmes.

Cliquez simplement sur l'icône d'engrenage de la diapositive pour ouvrir ses paramètres uniques.

Vidéo

Superposition

Comme démontré ci-dessus, c'est ici que vous pouvez ajouter votre contenu vidéo.

Dans la liste déroulante de superposition, vous pouvez télécharger une image pour superposer votre diapositive vidéo ou choisir de faire en générer une automatiquement par Divi.

Paramètres individuels de conception vidéo

Dans l'onglet design de votre diapositive vidéo, vous pouvez changer la couleur de la flèche de la diapositive de claire à foncée.

Exemple d'utilisation: Ajouter un curseur vidéo pour aﬃcher des vidéos de tutoriel pour une page de cours

Pour cet exemple, je vais vous montrer comment utiliser un curseur vidéo pour présenter une série de vidéos de tutoriel pour une page de cours en ligne...

C'est l'onglet que vous utiliserez pour modifier l'apparence de votre module.

Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.

Commençons par le début

Utilisez le constructeur visuel pour ajouter une section régulière avec une rangée pleine largeur (1 colonne).

Ajoutez ensuite un module Video Slider Module à la ligne.

La première chose que vous devez faire lorsque le modale Video Slider Settings apparaît, c'est de sélectionner + Ajouter un nouvel élément afin d'ajouter votre première vidéo au module.

Onglet Contenu

Onglet Design

Vidéo MP4/URL:[Entrez l'URL ou téléchargez la vidéo][Entrez l'URL ou téléchargez la vidéo

Vidéo Webm:[Entrer l'URL ou télécharger la vidéo][Entrée vidéo

URL de superposition d'images:[insérer une image personnalisée pour servir de superposition

Couleur des flèches coulissantes: Light

Sauvegarder les paramètres

Répétez cette étape pour ajouter le reste des vidéos nécessaires à l'appareil.

Une fois que toutes les vidéos et les superpositions d'images personnalisées ont été ajoutées, retournez aux réglages du curseur Vidéo et mettez à jour les options

Sauvegarder les paramètres

Répétez cette étape pour ajouter le reste des vidéos nécessaires à l'appareil.

Une fois que toutes les vidéos et les superpositions d'images personnalisées ont été ajoutées, retournez aux réglages du curseur Vidéo et mettez à jour les options comme suit:

Onglet de Contenu

Onglet

Design

Flèches: Afficher les flèches

Commandes du curseur: Utiliser la piste des vignettes

Afficher les superpositions d'images sur la vidéo principale: Afficher

Couleur des commandes du curseur: Light

Jouer Icône Couleur: #ffffff

C'est tout!

MERCI

Eléments de média Chapitre 10

More creations to inspire you

HISTORY OF THE EARTH

WWII TIMELINE WITH REVIEW

SPANISH: PARTES DE LA CASA WITH REVIEW

THE EUKARYOTIC CELL WITH REVIEW

PRIVATE TOUR IN SÃO PAULO

FACTS IN THE TIME OF COVID-19

AUSSTELLUNG STORYTELLING

Transcript