Comment recréer la procédure pas à pas de la vidéo Click d'ET avec Divi

Le partage d'aperçus vidéo sur votre site Web peut augmenter l'interactivité et aider les visiteurs à comprendre vos produits et/ou services mieux et plus rapidement. Maintenant, sur le site Web Elegant Themes, nous avons adopté cette approche pour nous-mêmes et créé une conception de procédure pas à pas vidéo simple qui permet aux gens de naviguer à travers certaines de nos fonctionnalités les plus populaires. Nous avons recréé ce design dans Divi et aujourd'hui, nous allons vous montrer comment le recréer à partir de zéro. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page de la présentation de la vidéo de clic

Pour mettre la main sur la mise en page de la procédure pas à pas vidéo en cliquant gratuitement, vous devez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Abonnez-vous à notre chaîne Youtube

Commençons à recréer !

Ajouter une nouvelle section régulière

Commencez par ajouter une nouvelle section régulière à la page sur laquelle vous travaillez.

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et appliquez les paramètres de dimensionnement suivants :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 2
• Largeur : 85 vw (ordinateur de bureau), 90 % (tablette et téléphone)
• Largeur maximale : 100 %

Paramètres de la colonne 1

Ouvrez ensuite les paramètres de la colonne 1.

Espacement

Accédez aux paramètres d'espacement et ajoutez un rembourrage supérieur sur le bureau.

• Rembourrage supérieur : 5vw (ordinateur de bureau), 0vw (tablette et téléphone)

Classe CSS

Passez à l'onglet avancé et ajoutez une classe CSS. Plus tard dans l'article, nous allons utiliser cette classe CSS pour créer un effet de grille sur tablette et mobile.

• Classe CSS : item-responsive-grid

Ajouter le module Blurb à la colonne 1

Ajouter un titre

Commençons à ajouter des modules ! Pour chaque élément cliquable, nous allons utiliser un module Blurb. Nous allons commencer par le premier et le réutiliser pour les éléments de clic restants. Ajoutez un nouveau module Blurb à la colonne 1 et entrez un titre de votre choix.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Paramètres d'icône par défaut

Passez à la conception et modifiez les paramètres de l'icône en conséquence :

• Couleur de l'icône : #e8e9ea
• Placement de l'icône : à gauche
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police des icônes : 2vw (ordinateur de bureau), 4.5vw (tablette), 7vw (téléphone)

Paramètres de l'icône de survol

Modifiez la couleur de l'icône au survol.

• Couleur de l'icône : #b0c8ff

Paramètres du texte du titre

Passez aux paramètres du texte du titre et apportez-y également quelques modifications.

• Police du titre : Lato
• Poids de la police du titre : gras
• Style de police du titre : majuscule
• Taille du texte du titre : 0.8vw (ordinateur de bureau), 1.7vw (tablette), 2.5vw (téléphone)
• Hauteur de la ligne de titre : 2vw (ordinateur de bureau), 4.5vw (tablette), 7vw (téléphone)

Espacement par défaut

Nous allons façonner le module Blurb en utilisant des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 0,5 vw (ordinateur de bureau), 1,5 vw (tablette et téléphone)
• Rembourrage gauche : 1.2vw (ordinateur de bureau et tablette), 5vw (téléphone)
• Rembourrage droit : 1.2vw (ordinateur de bureau et tablette), 5vw (téléphone)

Espacement de survol

Créez un effet de survol de surbrillance en modifiant les valeurs de marge de survol.

• Marge gauche : -0.5vw
• Marge droite : -0.5vw

Frontière

Ajoutez également des coins arrondis.

Ombre de boîte par défaut

Avec une ombre de boîte subtile.

• Position verticale de l'ombre de la boîte : 10px
• Force du flou d'ombre de la boîte: 70px
• Couleur de l'ombre : rgba(0,0,0,0.11)

Ombre de la boîte de survol

Changez la couleur de l'ombre de la boîte au survol.

• Couleur de l'ombre : rgba(103,151,255,0,22)

ID CSS et classe

Enfin, accédez à l'onglet avancé du module Blurb et ajoutez un identifiant et une classe CSS.

• ID CSS : video-walkthrough-item-1
• Classe CSS : vidéo-élément-curseur

Cloner le module Blurb trois fois

Une fois que vous avez terminé le premier module Blurb, vous pouvez le cloner trois fois.

Modifier le contenu

Modifiez le contenu de chaque module Blurb en double.

Modifier tous les identifiants CSS du module Blurb en double

Avec les identifiants CSS.

• 1) Construire visuellement : video-walkthrough-item-1
• 2) Effets : video-walkthrough-item-2
• 3) Diviseurs de forme : video-walkthrough-item-3
• 4) Édition en bloc : video-walkthrough-item-4

Réutiliser la colonne 1

Supprimer la colonne 3

Une fois que vous avez terminé la première colonne, vous pouvez ouvrir les paramètres de ligne et supprimer la troisième colonne.

Cloner la colonne 1 et placer en bas

Clonez la première colonne (contenant les modules Blurb) et placez la colonne en double en bas.

Modifier la structure de la colonne arrière

Remplacez la structure des colonnes par celle qui a été sélectionnée au début de ce didacticiel.

Modifier tout le contenu du module Blurb de la colonne 3

Modifiez le titre du module Blurb de chaque doublon dans la colonne 3.

Modifier tous les identifiants CSS du module Blurb de la colonne 3

Avec les identifiants CSS.

• 5) Bibliothèque de mise en page : video-walkthrough-item-5
• 6) Transformations : video-walkthrough-item-6
• 7) États de survol : video-walkthrough-item-7
• 8) Rechercher et remplacer : video-walkthrough-item-8

Ajouter un module de texte à la colonne 2

Laisser la zone de contenu vide

Il est temps de commencer à ajouter les différents aperçus vidéo ! Il y a deux manières de l'aborder ; à l'aide d'un module vidéo ou d'un module texte. Le module vidéo oblige les visiteurs à appuyer sur play. En revanche, l'utilisation d'un module de texte avec un arrière-plan vidéo lit la vidéo automatiquement mais sans son. Pour ce didacticiel, nous utiliserons un module de texte, mais n'hésitez pas à utiliser un module vidéo à la place. Assurez-vous que la zone de contenu du module de texte reste vide.

Arrière-plan vidéo

Accédez aux paramètres d'arrière-plan et téléchargez une vidéo de votre choix.

• Suspendre la vidéo lorsqu'elle n'est pas visible : Oui

Dimensionnement

Passez à l'onglet Conception et ajoutez « 100 % » à la largeur.

• Largeur : 100 %

Espacement

Ensuite, nous allons permettre à l'arrière-plan de la vidéo de s'afficher en ajoutant des valeurs de remplissage haut et bas personnalisées sur différentes tailles d'écran. Remarque : les valeurs que vous ajoutez doivent être adaptées à l'ensemble de dimensions de votre vidéo.

• Rembourrage supérieur : 15vw (ordinateur de bureau), 24vw (tablette), 26vw (téléphone)
• Rembourrage inférieur : 15vw (ordinateur de bureau), 24vw (tablette), 26vw (téléphone)

Frontière

Continuez en ajoutant « 10px » à chacun des coins.

Boîte ombre

Avec une ombre de boîte subtile.

• Force du flou d'ombre de la boîte : 30px
• Force de propagation de l'ombre de la boîte: -5px
• Couleur de l'ombre : rgba(0,0,0,0.11)

Identifiant CSS

Enfin, ajoutez un identifiant CSS.

• ID CSS : video-walkthrough-1

Cloner le module de texte 7 fois

Une fois que vous avez terminé le module de texte, vous pouvez le cloner sept fois (une pour chaque module Blurb).

Modifier tous les arrière-plans vidéo du module de texte en double

Téléchargez un arrière-plan vidéo différent pour chacun des doublons.

Modifier tous les identifiants CSS des modules de texte en double et ajouter une classe CSS à tous les modules de texte en double

Modifiez également les identifiants CSS. Assurez-vous de connecter chaque module de texte au bon module Blurb en utilisant le même numéro à la fin de l'ID CSS. Nous masquons également chaque module de texte, en plus du module de texte d'origine, à l'aide d'une classe CSS.

• Module de texte 1 : présentation vidéo-1
• Module de texte 2 : procédure vidéo-2
• Module de texte 3 : procédure vidéo-3
• Module de texte 4 : visite vidéo-4
• Module de texte 5 : visite vidéo-5
• Module de texte 6 : visite vidéo-6
• Module de texte 7 : visite vidéo-7
• Module de texte 8 : vidéo-procédure-8
• Classe CSS : vidéo-pas-premier

Ajouter le module de code n° 1 à la colonne 1

Une fois que vous avez terminé la deuxième ligne, il est temps de commencer à ajouter le code. Pour faire fonctionner la fonction de clic, nous utiliserons du code CSS et JQuery. Nous placerons le code dans deux modules de code distincts. Commencez par ajouter le premier module de code à la colonne 1.

Insérer le code CSS de la page

Ajoutez les lignes de code CSS suivantes :

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

Ajouter le module de code n° 2 à la colonne 3

Continuez en ajoutant un autre module de code à la troisième colonne.

Insérer le code JQuery de la fonction de clic

Entrez les lignes suivantes de code JQuery :

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

Une fois cette étape franchie, vous pouvez enregistrer votre page et quitter le Visual Builder !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment recréer la procédure pas à pas de la vidéo de clic d'Elegant Themes avec Divi. Nous vous avons également fourni le téléchargement JSON gratuitement ! N'hésitez pas à utiliser cette conception pour tout type de site Web que vous créez. C'est un excellent moyen de présenter des vidéos et d'attirer l'attention de vos visiteurs. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.