Eléments de média Chapitre 9

ÉLÉMENTS DE MÉDIA

CHAPITRE 9 : VIDÉO

MODULE 5

Module vidéo

Ajouter des vidéos à votre page dans Divi est simple en utilisant le module Vidéo. Le module vous permet d'intégrer des vidéos de n'importe quelle source, ainsi que de personnaliser l'image miniature et le bouton de lecture pour ajouter un style plus clair à l'inclusion.

Comment ajouter un module vidéo à votre 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 Utiliser Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.

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 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 le mot "vidéo" puis cliquer sur Entrée pour trouver et ajouter automatiquement le module vidéo! 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é.

Exemple d'utilisation : Ajouter une vidéo à votre page d'accueil

Ajouter une vidéo à votre page d'atterrissage est un excellent moyen de promouvoir vos produits et d'augmenter les conversions.

Exemple d'utilisation : Ajouter une vidéo à votre page d'accueil

En utilisant le Visual Builder, j'ajoute une nouvelle section avec une ligne pleine largeur (1 colonne).

Pour l'option Custom Width (largeur personnalisée) qui s'affiche, je saisis une largeur personnalisée de 767px. Ceci fait en sorte que le module vidéo que je vais ajouter dans cette rangée ne dépasse pas cette largeur et devienne trop grand sur les écrans de plus grande taille.

Exemple d'utilisation : Ajouter une vidéo à votre page d'accueil

Puis j'ajoute une URL de superposition d'images pour ma vidéo en cliquant sur le bouton "Générer à partir de la vidéo".

Cela permet d'extraire automatiquement une image de la vidéo pour la superposer à une nouvelle icône vidéo personnalisée.

Sous l'onglet Design, je change la couleur de l'icône de lecture pour correspondre à ma page d'accueil.

Maintenant j'ai une vidéo pour ma page d'atterrissage qui a l'air propre et qui correspond à mon design.

Maintenant que vous avez vu le module vidéo en action, plongez dans TOUS ses paramètres dans les sections ci-dessous. Nous avons fourni un récapitulatif détaillé de ce que vous trouverez dans chaque onglet des paramètres du module et une explication de ce que chacun fait.

URL vidéo

URL de superposition d'images

Étiquette Admin

Le module Divi Video vous permet d'ajouter de la vidéo en utilisant deux méthodes différentes.

Vous pouvez soit télécharger votre propre fichier vidéo à partir de votre ordinateur en cliquant sur le bouton "Télécharger la vidéo" et en sélectionnant le fichier désiré, ou vous pouvez entrer n'importe quelle URL vidéo à partir d'une source vidéo tierce comme Youtube ou Vimeo.

Copiez et collez simplement l'URL de votre navigateur et collez-la dans le champ URL Vidéo et Divi s'occupera du reste!

Si vous souhaitez définir une image miniature vidéo personnalisée, qui sera placée sur l'interface vidéo standard avec un bouton de lecture personnalisé pour créer une apparence plus propre et plus stylisée, vous pouvez le faire en utilisant le champ Image Overlay.

Ce champ vous permet soit de télécharger votre propre image personnalisée, soit de laisser Divi en générer automatiquement une à partir de votre URL vidéo. La plupart des fournisseurs vidéo supportent cette option, comme Youtube et Vimeo. Cliquez simplement sur le bouton "Générer à partir de la vidéo" et laissez Divi s'occuper du reste!

Par défaut, votre module vidéo apparaîtra avec l'étiquette "Vidéo" dans le constructeur. L'étiquette Admin vous permet de changer cette étiquette pour une identification facile.

Options de conception

Jouer Couleur de l'icône

Si vous désignez une superposition d'images pour votre module vidéo, la vidéo affichée contient une icône de lecture sur la vidéo. Vous pouvez définir ici la couleur de cette icône pour qu'elle corresponde à celle de votre page.

Options avancées

ID CSS et classes

CSS personnalisé

Visibilité

Ceci peut être utilisé pour ajouter un identifiant CSS unique ou une classe à votre module.

Celles-ci peuvent ensuite être utilisées dans votre feuille de style ou dans la boîte Options Thème Personnalisées CSS pour appliquer un style personnalisé au module.

Les ID CSS peuvent également être ciblés avec des liens d'ancrage pour lier à certaines zones de votre page.

Vous pouvez ajouter des CSS personnalisés à votre module vidéo.

Si vous souhaitez masquer votre module vidéo sur certains périphériques, vous pouvez sélectionner les périphériques sur lesquels vous souhaitez désactiver le module vidéo.

MERCI