Comment recréer le processus vidéo détaillé et Click en utilisant Divi

Partager des aperçus vidéo sur votre site Web peut améliorer l’interactivité et aider les visiteurs à mieux comprendre vos produits et \/ ou services plus rapidement. Maintenant, sur le site elegant theme, nous avons adopté cette approche nous – mêmes et créé une conception simple de guide vidéo de clic qui permet aux gens de parcourir certaines de nos fonctionnalités les plus populaires. Nous avons recréé le design dans Divi et aujourd’hui nous allons vous montrer comment le recréer à partir de zéro. Vous pouvez également télécharger gratuitement le fichier json! On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille.
Bureau Mobile Téléchargement gratuit Click Video Detailed Procedure Layout pour obtenir la mise en page d’une vidéo de voyage gratuite, vous devez d’abord la télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire. Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Abonnez – vous à notre chaîne YouTube et commençons à recréer! Ajouter une nouvelle section générale commence par ajouter une nouvelle section standard
: 2vw (bureau), 4.5vw (tablette), 7vw (téléphone) Espacement par défaut nous utiliserons des valeurs de remplissage personnalisées sur différentes tailles d’écran pour façonner le module Blurb. Remplissage supérieur: 1vw (bureau), 2vw (tablette), 3vw (téléphone) Remplissage inférieur: 0,5 VW (bureau), 1,5 VW (tablette et téléphone) Remplissage gauche: 1,2 VW (bureau et tablette), 5vw (téléphone) Remplissage droit: 1,2 VW (bureau et tablette), 5vw (téléphone) Crée un effet de mise en évidence lorsque vous déplacez la souris en changeant la valeur de la marge lorsque vous déplacez la souris. Bord gauche: – 0,5vw bord droit: – 0,5vw La bordure ajoute également des filets. Les ombres de boîte par défaut et les ombres de boîte fine. Position verticale de l’ombre du cadre: 10 Px intensité du flou de l’ombre du cadre: 70 Px couleur de l’ombre: rgba (0,0,0,0,11) Les ombres de cadre en vol stationnaire changent la couleur des ombres de boîte en vol stationnaire. Couleur de l’ombre: rgba (103151255,0.22) Enfin et surtout, allez dans l’onglet avancé du module Blurb et ajoutez l’ID CSS et la classe. CSS id: Video – Walkthrough – item – 1 CSS Class: Slider Video element Cloner le module Blurb trois fois après avoir terminé le premier module Blurb, vous pouvez le cloner trois fois. Modifier le contenu modifier le contenu de chaque module Blurb dupliqué. Modifier tous les identifiants CSS dupliqués et les identifiants CSS du module Blurb. Visual Build: Video – Walkthrough – item – 1 2) effects: Video – Walkthrough – item – 2 3) shape Splitter: Video – Procedure – item – 3 4) Batch Edition: Video – Walkthrough – item – 4 Une fois que vous avez terminé de réutiliser la colonne 1 pour supprimer la première colonne de la colonne 3, vous pouvez ouvrir les paramètres de ligne et supprimer la troisième colonne. Cloner la colonne 1 et placer la première colonne du clone (y compris le module Blurb) en bas et la colonne dupliquée en bas. Mo
Modifier la structure de la colonne renvoie la structure de la colonne à la structure de la colonne sélectionnée au début de ce tutoriel. Modifier le contenu de tous les modules Blurb dans la colonne 3 modifier le titre du module Blurb pour chaque copie dans la colonne 3. Changez tous les identifiants CSS du module Blurb dans la colonne 3 avec les identifiants CSS. Bibliothèque de mise en page: Video – Walkthrough – item – 5 6) Conversion: Video – Guide – item – 6 7) État de la souris: Video – Walkthrough – item – 7 8) Recherche et remplacement: Video – Guide – item – 8 Ajouter un formulaire texte à la colonne 2 laisser la zone de contenu vide il est temps de commencer à ajouter un aperçu vidéo différent! Il existe deux façons de résoudre ce problème; Utilisez un formulaire vidéo ou un formulaire texte. Le module vidéo demande aux visiteurs d’appuyer sur play. En utilisant un module texte avec fond vidéo, la vidéo sera lue automatiquement, mais pas audio. Dans ce tutoriel, nous utiliserons le texte, mais aussi la vidéo. Assurez – vous que la zone de contenu du formulaire de texte reste vide. Arrière – plan vidéo allez aux paramètres d’arrière – plan et téléchargez la vidéo que vous avez sélectionnée. Pause lorsque la vidéo n’est pas en vue: Oui Passez à l’onglet conception et ajoutez 100% à la largeur. Largeur: 100% Espacement ensuite, nous vous permettrons d’afficher l’arrière – plan vidéo en ajoutant des valeurs de remplissage personnalisées en haut et en bas à différentes tailles d’écran. Remarque: les valeurs que vous ajoutez doivent correspondre à l’ensemble de taille de la vidéo. Remplissage en haut: 15vw (bureau), 24vw (tablette), 26vw (téléphone) remplissage en bas: 15vw (bureau), 24vw (tablette), 26vw (téléphone) La bordure continue en ajoutant \
C’est la colonne. Entrez le Code jquery cliquez sur la ligne suivante pour entrer le Code jquery: Jquery (fonction ($)
$(‘[ID * = \
Sélecteur de variables 1 = $(ceci). Propriété (\
Variable $Video = $(\
$video. Afficher (). Frères et sœurs (). Cacher ();
$video. Addclass (\
$(\
$video. Removeclass (\
$(‘[ID * = \
$(this). Addclass (\
});
}); Une fois cette étape terminée, vous pouvez enregistrer la page et quitter Visual Builder! Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment recréer des vidéos élégantes d’itinérance thématique en utilisant Divi. Nous vous offrons également un téléchargement json gratuit! N’hésitez pas à utiliser ce design pour n’importe quel type de site Web que vous créez. C’est une excellente façon de présenter des vidéos et d’attirer l’attention des visiteurs. Si vous avez des questions ou des suggestions, veuillez les commenter immédiatement dans la section commentaires ci – dessous! Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.