Sélectionner une page


Ajouter des vidéos à votre page dans Divi est très simple avec le module vidéo. Le module vous permet d’intégrer des vidéos à partir de presque n’importe quelle source, ainsi que de personnaliser la vignette et le bouton de lecture pour donner à l’intégration un style plus clair.

Voir une démo en direct de ce module

Comment ajouter un module 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 le thème Divi installé sur votre site Web, vous constaterez qu’un Utilisez Divi Builder Chaque fois que vous créez une nouvelle page, cliquez sur le bouton au-dessus de l’éditeur de publication. Cliquer sur ce bouton active le Divi Builder et vous donne accès à tous les modules de Divi Builder. Cliquez ensuite sur Utiliser le constructeur visuel Bouton pour démarrer le générateur en mode visuel. Vous pouvez également cliquer sur Utiliser le constructeur visuel Lorsque vous naviguez sur votre site Web, cliquez sur le bouton dans le front-end si vous êtes connecté à votre tableau de bord WordPress.

Module vidéo

Après être entré dans 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 que dans les lignes. Lorsque vous démarrez une nouvelle page, n’oubliez pas d’ajouter d’abord une ligne à votre page. Nous avons d’excellents tutoriels sur l’utilisation de Divi doubler et section Éléments.

Module vidéo

Trouvez le module vidéo dans la liste des modules et cliquez dessus pour l’ajouter à votre page. La liste des modules peut être recherchée. Ainsi, vous pouvez également taper le mot «vidéo», puis appuyer sur Entrée pour rechercher et ajouter automatiquement le module vidéo! Une fois le module ajouté, vous serez accueilli avec la liste des options du module. Ces options sont divisées en trois groupes principaux: teneur, conception et Avancée.

Exemple de cas d’utilisation: ajouter une vidéo à votre page de destination

L’ajout d’une vidéo à votre page de destination est un excellent moyen de promouvoir vos produits et d’augmenter les conversions. Dans cet exemple, je vais vous montrer comment utiliser le module vidéo pour ajouter une vidéo à votre page de destination. J’ai ajouté un cercle rouge dans lequel la vidéo doit entrer.

Module vidéo

En utilisant le constructeur visuel, j’ajoute une nouvelle section avec une ligne pleine largeur (1 colonne). Dans les paramètres de ligne, sous l’onglet Conception, je choisis l’option Utiliser une largeur personnalisée. Pour l’option Largeur personnalisée qui apparaît, je vais entrer une largeur personnalisée de 767 px. Cela garantira que le module vidéo que je vais ajouter sur cette ligne ne dépassera pas cette largeur et deviendra trop grand pour des écrans plus grands.

Module vidéo

Ensuite, j’ajoute le module vidéo à la ligne. Dans l’onglet « Contenu » du paramètre du module vidéo, j’entre l’URL de la vidéo que je souhaite intégrer à ma page de destination. J’utilise l’URL d’une vidéo YouTube pour cet exemple.

Module vidéo

J’ajoute ensuite une URL de superposition d’image pour ma vidéo en cliquant sur le bouton Générer à partir de la vidéo. Cela tirera automatiquement une image de la vidéo pour servir de superposition avec une nouvelle icône vidéo personnalisée.

Module vidéo

Dans l’onglet Conception, je changerai la couleur de l’icône de lecture pour qu’elle corresponde à ma page de destination.

Module vidéo

Maintenant, j’ai une vidéo pour ma page de destination qui a l’air soignée et qui va avec mon design.

Module vidéo

Après avoir vu le module vidéo en action, plongez dans TOUS les paramètres dans les sections suivantes. Nous avons donné un aperçu détaillé de ce que vous pouvez trouver dans les onglets individuels des paramètres du module, ainsi qu’une explication des différentes fonctions.

Options de contenu

Module vidéo

URL de la vidéo

Le module Divi Video vous permet d’ajouter des vidéos 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 souhaité, soit entrer n’importe quelle URL vidéo à partir d’une source vidéo tierce telle que Youtube ou Vimeo. Copiez simplement l’URL de votre navigateur et collez-la dans le champ URL de la vidéo. Divi s’occupe du reste!

URL de superposition d’image

Si vous souhaitez définir une vignette personnalisée pour les vidéos qui est placée sur la surface vidéo standard avec un bouton de lecture personnalisé pour un aspect plus net et plus stylisé, vous pouvez la sélectionner dans la zone Superposition d’image. Dans ce champ, vous pouvez soit télécharger votre propre image personnalisée, soit demander à Divi d’en générer une automatiquement à partir de l’url de votre vidéo. La plupart des fournisseurs de vidéos comme Youtube et Vimeo prennent en charge cette option. Cliquez simplement sur le bouton Générer à partir de la vidéo et laissez Divi faire le reste!

Étiquette d’administrateur

Par défaut, votre module vidéo est affiché avec une étiquette qui lit «Vidéo» dans le générateur. Avec l’étiquette d’administrateur, vous pouvez changer cette étiquette pour une identification facile.

Options de conception

Jouer la couleur du symbole

Module vidéo

Si vous définissez une superposition d’image pour votre module vidéo, la vidéo affichée aura une icône de lecture sur la vidéo. Vous pouvez définir la couleur de cette icône ici pour qu’elle corresponde à la palette de couleurs de votre page.

Options étendues

Module vidéo

ID CSS et classes

Cela peut être utilisé pour ajouter un identifiant ou une classe CSS unique à votre module. Ceux-ci peuvent ensuite être utilisés dans votre feuille de style ou dans le champ CSS personnalisé Options du thème pour attribuer un style personnalisé au module. Les identifiants CSS peuvent également être fournis avec des liens d’ancrage pour créer des liens vers des zones spécifiques de votre page.

CSS personnalisé

Ici, vous pouvez ajouter du CSS personnalisé à votre module vidéo.

Visibilité

Si vous souhaitez masquer votre module vidéo sur certains appareils, vous pouvez sélectionner sur quels appareils le module vidéo doit être désactivé.





Source link

Recent Posts