skip to Main Content

Comment créer une vidéo de démonstration contextuelle sur Divi

Divi : le thème WordPress le plus facile à utiliser

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

L’une des pages de destination exclusives que beaucoup fournissent à leurs abonnés durant la période du Cyber ​​Monday, est la superbe page de destination des versions de logiciels. Cette mise en page présente de superbes illustrations et une utilisation unique de séparateurs de section qui émerveillera les visiteurs.

cyber monday.jpg

Comment obtenir la page de destination exclusive des versions du logiciel pour le Cyber ​​Monday

Avant de vous lancer dans cette utilisation, vous devez vous familiariser avec la page de destination exclusive du Cyber ​​Monday que vous pouvez obtenir en devenant un nouveau membre Elegant Themes, en mettant à niveau votre compte existant ou en étant déjà un membre à vie chez nous. Si vous êtes déjà membre à vie, vous pouvez vous connecter à notre espace membre  et télécharger toutes nos pages exclusives ici . Tous les autres utilisateurs devront utiliser le bouton ci-dessous pour acheter ou mettre à niveau avant de pouvoir suivre le reste de notre didacticiel.

Déjà membre à vie? Vous pouvez télécharger le pack maintenant, pas besoin de participer à l’offre du Cyber Monday !

Comment créer une vidéo de démonstration contextuelle sur Divi

Une fois que vous avez téléchargé la nouvelle page de destination des versions de logiciels depuis notre zone membres, vous pouvez continuer à lire ce qui suit.

Dans le cas d’utilisation de ce tutoriel, nous allons vous montrer comment créer une démo vidéo en cliquant sur un bouton. La vidéo qui apparaît au clic aura fière allure sur les écrans de bureau et de petite taille. C’est une excellente approche si vous ne souhaitez pas inclure une vidéo directement sur votre page mais préférez créer une interaction avec les visiteurs.

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat final sous différentes tailles d’écran.

Bureau

résultat final divi video popup.gif

Mobile

result mobile video popup divi.gif

Commençons!

Utiliser le plugin gratuit Video PopUp

Installer et activer le plugin

La première chose à faire est de télécharger le plugin gratuit Video PopUp . Vous pouvez trouver ce plugin en allant sur votre site web WordPress> Plugins> Ajouter un nouveau> Recherche de ‘Video PopUp’. Une fois que vous avez trouvé ce plugin, installez-le. Une fois que vous avez terminé, assurez-vous d’activer le plugin.

video popup.jpg

Paramètres du plugin

Continuez en allant dans les paramètres généraux de ce plugin et en activant les deux options en haut.

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

configuration video popup.jpg

Ajouter une nouvelle page à l’aide de la page de destination de la version logicielle

Ajouter une nouvelle page et activez utilisez le Visual Builder

Il est temps de commencer à mettre les choses en pratique! Ajoutez une nouvelle page, donnez un titre à votre page et activez immédiatement Visual Builder.

créer une nouvelle page divi.jpg

Télécharger une mise en page de version de logiciel à partir de mises en page enregistrées

Accédez à « Vos mises en page enregistrées » et téléchargez la page de destination que vous avez mis en ligne.

mise en page téléchargée divi.jpg

Ajouter un module de texte sous le module Blurb du bouton de lecture

Comme vous pouvez le constater, la page contient déjà un bouton de lecture qui nous aidera à obtenir le résultat souhaité. Mais pour que cela fonctionne, nous devons recréer la conception dans le module Blurb à l’aide d’un module de texte. Ajoutez un nouveau module de texte juste en dessous du module Blurb.

ajouter un texte au dessus du module blurb.jpg

Ajouter une image à la zone de contenu

Une fois que vous avez ajouté le module de texte, continuez et ajoutez l’image du bouton de lecture à la zone de contenu de votre module de texte en cliquant sur « Ajouter un média » et en sélectionnant le bouton de lecture de votre médiathèque.

Ajouter un media au module blurb divi.jpg

choisir une image divi.jpg

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Ajouter une copie à la zone de contenu

Continuez en ajoutant une copie juste en dessous de l’image.

dupliquer le module blurb.jpg

Paramètres du texte

Pour que le module corresponde à la présentation, nous allons activer l’orientation du texte centrale dans les paramètres de texte du module.

activer l'orientation centrale.jpg

Paramètres de texte de lien par défaut

Et nous modifierons également les paramètres du texte du lien en conséquence:

  • Link Font: Cabin
  • Poids de la police de lien: gras
  • Lien Couleur du texte: rgba (162,176,193,0.7)
  • Taille du texte du lien: 17px
  • Hauteur de la ligne du lien: 1.6em

conception menu lien divi.jpg

Survoler les paramètres du texte

Changer la couleur du texte du lien en survol.

  • Couleur du texte du lien: # a2b0c1

modifier la couleur du lien divi.jpg

Espacement

Enfin, ajoutez également une marge supérieure négative au module de texte.

  • Top Marign: -20vw

définir une marge supérieure divi.jpg

Ajouter une lecture contextuelle au contenu du module de texte

Basculer vers l’éditeur de texte

Pour créer la fenêtre contextuelle au clic, nous devrons ajouter un lien personnalisé au contenu du module de texte. Retournez à la zone de contenu du module de texte et sélectionnez le mode Éditeur de texte.

modifier le module texte en mode editeur de texte divi.jpg

Ajouter un lien à tout le contenu

Liez votre zone de contenu à la fenêtre contextuelle en ajoutant un lien vers l’image et la copie. Assurez-vous de remplacer l’URL du lien par la vôtre.

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a>

ajouter un lien une image avec une video divi.jpg

Supprimer le module Blurb du bouton de lecture

Maintenant que nous avons créé un module de texte qui a exactement le même aspect que le module Blurb, nous pouvons supprimer le module Blurb qui existait auparavant et c’est tout! Vous pouvez appliquer cette méthode à n’importe quel type de mise en page que vous utilisez, mais c’est vraiment une grande valeur ajoutée pour la page de destination de la version logicielle.

supprimer le module blurb inutilisé divi.jpg

Dernières pensées

Comme vous pouvez le constater, ajouter une fenêtre contextuelle sur Divi à l’aide du plugin Video Popup est assez simple. Ceci vous permettra de présenter des vidéos sur votre blog sans avoir automatiquement besoin de l’intégrer sur le contenu.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thèmes WordPress cool que j'ai trouvé sur
Et il y a plus de 50 000 thèmes et modèles parmi lesquels choisir!

Back To Top
5 Partages
Partagez4
Tweetez
Enregistrer1
WhatsApp