Ajout d'effets 3D aux GIF et aux vidéos HTML5 pour afficher des animations de produits uniques dans Divi

Les GIF animés et les vidéos HTML5 peuvent être parfaits pour animer le fonctionnement d'un produit sur votre site Web. Ces courtes animations communiquent des informations précieuses au visiteur d'une manière plus facile à digérer qu'une vidéo ordinaire. L'ajout de ce type de GIF et de vidéos HTML5 peut se faire assez facilement avec Divi. Et avec un peu de créativité, vous pouvez ajouter des effets 3D pour des animations de produits uniques.

Dans ce tutoriel, je vais vous montrer comment ajouter des effets 3D aux GIF et vidéos HTML5 pour afficher des animations de produits uniques dans Divi. Cette conception fonctionne très bien pour ceux qui recherchent une mise en page créative pour présenter un produit ou un service en vedette. Pour ce faire, nous devrons d'abord comprendre comment ajouter des GIF et des intégrations vidéo HTML5 à votre page à l'aide de Divi. Ensuite, nous pourrons utiliser les options de transformation de Divi pour positionner et faire pivoter le GIF (ou la vidéo) dans l'espace 3D. Pour terminer, nous utiliserons quelques techniques de conception Divi pour créer une belle disposition de section pour accompagner ces GIF et vidéos 3D.

Commençons.

Aperçu

Voici un aperçu de la conception que nous allons construire dans ce tutoriel. La conception est similaire lors de l'utilisation d'un GIF et d'une vidéo HTML5 pour créer les animations du produit.

Téléchargez GRATUITEMENT les effets 3D pour les vidéos GIF et HTML5 Animations de produits Divi Layout

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le 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 !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Abonnez-vous à notre chaîne Youtube

Utilisation de GIF pour de courtes animations de produits

Les GIF existent depuis longtemps. C'est probablement parce que les GIF sont faciles à créer et largement pris en charge par tous les navigateurs. Et ils peuvent bien fonctionner pour des animations de produits très courtes. Parce qu'un GIF est une image, vous pouvez l'utiliser dans un module Divi Image comme vous le feriez pour n'importe quel autre jpg ou png. Cela vous permet de styliser le GIF avec toute la puissance des paramètres intégrés de Divi. Mais attention, les GIF avec une durée plus longue et une fréquence d'images plus élevée peuvent entraîner des fichiers de très grande taille. Il est donc préférable de garder vos GIF courts et aussi petits que possible.

Utiliser la vidéo HTML5 comme remplacement GIF

Les vidéos HTML5 deviennent un remplacement GIF populaire, en particulier pour les animations de produits plus longues. Vous avez peut-être remarqué qu'ils sont utilisés sur la nouvelle conception du site Web Elegant Themes. Ils sont nettement plus petits que les GIF et prennent donc moins de temps à charger. Et ajouter une vidéo HTML5 sur votre site Divi est simple. Tout ce que vous avez à faire est d'ajouter l'élément vidéo HTML5 pour intégrer la vidéo à votre page (de la même manière que vous ajouteriez un shortcode vidéo dans WordPress). Vous pouvez également personnaliser la vidéo avec des commandes cachées, une boucle et une lecture automatique, ce qui donne une animation de haute qualité qui fonctionne comme un GIF. De plus, lors de l'ajout de l'intégration à un module Divi, vous pouvez également utiliser le constructeur Divi pour styliser la vidéo de manière créative.

Consultez cet article pour plus d'informations sur les raisons pour lesquelles vous devriez envisager d'utiliser la vidéo HTML5 par rapport aux GIF ordinaires.

Maintenant que nous comprenons un peu mieux l'utilisation des GIF et des vidéos HTML5, nous sommes prêts à commencer à les utiliser dans Divi.

Ce dont vous avez besoin pour ce tutoriel

Pour commencer, vous aurez besoin des éléments suivants :

1. Une image GIF
2. Un fichier vidéo MP4 (et l'URL de ce fichier vidéo) à utiliser dans l'intégration de l'élément vidéo HTML5. Pour une prise en charge maximale du navigateur, vous pouvez également inclure la même vidéo au format webm (nous en parlerons plus tard).
3. Le thème Divi installé et actif
4. Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Ajout d'un effet 3D à une vidéo GIF animée ou HTML5

Avant d'aller trop loin dans la conception de la disposition complète de la section pour ce didacticiel, j'ai pensé qu'il serait préférable de vous montrer comment ajouter l'effet 3D à la fois à une vidéo GIF et à une vidéo HTML5. Une fois que nous aurons terminé, nous peaufinerons le reste de la disposition de la section avec un joli design moderne.

Pour l'instant, commençons par ajouter l'effet 3D à un GIF dans Divi.

Créer un GIF

Il existe de nombreuses façons de créer un GIF sur le Web. Étant donné que ce didacticiel concerne la création d'un GIF pour animer le fonctionnement d'un produit, vous souhaiterez enregistrer une section de votre écran (à l'aide d'un enregistreur d'écran), puis convertir le fichier vidéo en fichier GIF. N'oubliez pas de créer le GIF aussi petit que possible pour limiter la taille du fichier et le temps de chargement. Une fois le GIF créé, vous pourrez l'utiliser comme vous le feriez avec n'importe quelle autre image dans Divi.

Si vous souhaitez apprendre à créer un GIF à l'aide de Snagit, consultez notre article sur Comment changer une image d'arrière-plan avec un gif animé en survol.

Ajouter un effet 3D à un GIF dans Divi

Il est maintenant temps d'ajouter le GIF à Divi afin que nous puissions le styliser avec un effet 3D sympa.

Pour commencer, ajoutez une nouvelle section régulière avec une ligne à deux colonnes.

Avant d'ajouter un module, nous devons ajouter la propriété perspective à la colonne qui contiendra notre GIF. Pour ce faire, ouvrez les paramètres de ligne et ajoutez l'extrait de code CSS suivant à l'élément principal de la colonne 1 :

perspective: 1000px;

Cette propriété perspective est nécessaire pour ajouter une perspective à l'élément dans la colonne. Un élément a besoin de perspective pour que nous puissions obtenir un effet 3D lors de l'utilisation des options de transformation de Divi. Pour une meilleure compréhension, consultez notre article sur la façon d'utiliser la perspective avec des options de transformation pour concevoir des murs de photos 3D.

Ajoutez maintenant un module d'image à la colonne 1.

Téléchargez le GIF dans le module d'image. Pour cette conception, le GIF doit mesurer environ 600 pixels sur 700 pixels.

Utilisez ensuite les options de transformation pour mettre à l'échelle, faire pivoter et incliner le GIF dans l'espace 3D.

Transformation Rotation Axe Y: 8deg
Transformation Rotation Axe X: 28deg

Axe Y de l'inclinaison de la transformation : 10 deg
Transformer l'axe X d'inclinaison : -8 deg

Échelle de transformation (tablette) : 80 %

Voyons maintenant le résultat.

Ajouter un effet 3D à une vidéo HTML5 dans Divi

Avant d'ajouter l'effet 3D, nous devons d'abord créer notre vidéo HTML5. Nous allons passer en revue les étapes sur la façon de le faire ci-dessous. Mais si vous voulez une explication plus complète, consultez notre article sur Comment utiliser la vidéo HTML5 pour créer des gifs animés avec des tailles de fichier plus petites.

Création du code d'intégration vidéo HTML5

L'élément vidéo HTML5 a la structure de base suivante.

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Vous n'avez pas besoin de connaître grand-chose en HTML pour voir ce que fait ce code. À l'intérieur de l'élément <video> , vous avez deux éléments <source> qui contiennent le chemin/l'url des fichiers vidéo que vous souhaitez afficher. Chaque élément source a une vidéo dans un format de fichier différent (webm et mp4). Les deux sont nécessaires pour une prise en charge maximale du navigateur. L'ordre est également important. La vidéo webm est placée au-dessus de la vidéo mp4 dans le code car il s'agit d'un format vidéo de meilleure qualité mais moins pris en charge par les navigateurs. Donc, si un navigateur prend en charge la vidéo webm, il l'affichera. Mais si le navigateur ne prend pas en charge la vidéo webm, il utilisera le format vidéo mp4 en dessous. Il n'est pas nécessaire d'inclure les deux formats vidéo, mais c'est une bonne pratique. Et si vous n'en utilisez qu'un, utilisez le format mp4 car il est plus largement pris en charge.

En fait, chaque fois que vous utilisez le module vidéo de Divi pour afficher des vidéos auto-hébergées, Divi crée ce même élément vidéo HTML5 pour afficher des vidéos. C'est pourquoi le module Vidéo vous permet d'ajouter à la fois un fichier vidéo mp4 et un fichier vidéo webm.

Pour utiliser le code de votre propre vidéo, il vous suffit d'ajouter l'url de la vidéo entre parenthèses après l'attribut src .

Si vous téléchargez les fichiers vidéo sur votre site WordPress, vous pouvez récupérer les URL de la médiathèque.

Collez ensuite les URL de la vidéo entre parenthèses après l'attribut src .

Cela devrait ressembler à quelque chose comme ça lorsque vous avez terminé.

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Ensuite, nous allons ajouter quatre attributs pour contrôler l'affichage et la fonctionnalité de la vidéo. Ce type de contrôle est la principale raison d'insérer la vidéo HTML5 manuellement au lieu d'utiliser le module vidéo Divi. Ces attributs incluent la autoplay (pour que la vidéo démarre automatiquement), la loop (pour que la vidéo se répète), le muted (pour que la vidéo ne playsinline pas l'audio) et les playsinline (pour que la vidéo soit playsinline dans la zone de lecture de l'élément). Pour appliquer ces attributs à la vidéo, ajoutez chacun des attributs entre les crochets de la <video> début.

Maintenant, le code ressemblera à ceci.

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Remarque : normalement, vous appliqueriez l'attribut de controls pour les vidéos HTML5, mais dans ce cas, nous le laisserons de côté afin que la vidéo fonctionne comme un GIF.

Vous êtes maintenant prêt à intégrer le code.

Intégration de la vidéo HTML5

Pour intégrer une vidéo HTML5 à votre page, nous pouvons utiliser le module de code.

Avant de remplacer le module d'image GIF par notre module de code, allons de l'avant et dupliquons toute la section afin de pouvoir conserver notre exemple GIF. Dans la section dupliquée, supprimez le module image et ajoutez un module texte à sa place.

Collez ensuite le code d'intégration vidéo HTML5 dans la zone de saisie du code.

Copiez ensuite les styles de transformation du module image et collez les styles de transformation dans le module de code. Ou vous pouvez mettre à jour les styles de transformation comme suit :

Transformation Rotation Axe Y: 8deg
Transformation Rotation Axe X: 28deg
Axe Y de l'inclinaison de la transformation : 10 deg
Transformer l'axe X d'inclinaison : -8 deg
Échelle de transformation (tablette) : 80 %

Étant donné que j'utilise la même vidéo que j'ai utilisée pour créer le GIF, le design sera très similaire. Cependant, la taille de la vidéo est nettement inférieure à la taille du GIF. Voici le résultat.

Terminer la conception de la disposition de la section

Maintenant que nous avons le GIF 3D (ou la vidéo HTML5) en place. Nous pouvons terminer la conception de notre disposition de section. Pour cette conception, je vais utiliser la section avec la vidéo HTML5 dans la colonne 1.

Personnalisation de la section et de la ligne

Ouvrez les paramètres de la section et mettez à jour les éléments suivants.

Rembourrage : 15% haut, 15% bas

Ensuite, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Dégradé de fond à gauche : #ba7fe8
Dégradé de fond à droite : #4b84ff

Hauteur maximale : 300 px (ordinateur de bureau), aucun (tablette et téléphone)

Remplissage : 0px en haut, 0px en bas

Ensuite, nous pouvons donner à la rangée une ombre de boîte intérieure semi-transparente pour un élément de conception unique.

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte: 40px
Couleur de l'ombre : rgba(255,255,255,0.89)

Positionnement du module de code

Ajustons maintenant le module de code avec la vidéo en ajustant la propriété transform translate comme suit :

Transformer traduire l'axe Y : -20 % (ordinateur de bureau), -7% (téléphone)

Ajout d'un module d'appel à l'action

Pour compléter la conception, ajoutons un module d'appel à l'action à la colonne 2. Ce sera un excellent endroit pour ajouter une description du produit présenté avec un bouton.

Ajoutez une URL de lien de bouton pour faire apparaître le bouton.

Continuez à mettre à jour les paramètres comme suit :

Couleur d'arrière-plan : #ffffff
Alignement du texte : à gauche
Couleur du texte : foncé

Police du titre : Lato
Poids de la police du titre : gras
Couleur du texte du titre : #20292f
Police de caractère : Lato
Couleur du corps du texte : #6d7c90
Taille du corps du texte : 17px
Hauteur de la ligne du corps : 1,8 em

Taille du texte du bouton : 12px
Couleur du texte du bouton : #ffffff
Couleur d'arrière-plan du bouton : #4b84ff
Largeur de la bordure du bouton : 0px
Rayon de la bordure du bouton : 100 pixels
Espacement des lettres des boutons : 2px
Police des boutons : Lato
Poids de la police du bouton : lourd
Style de police des boutons : TT
Remplissage des boutons : 12 pixels en haut, 12 pixels en bas, 20 pixels à gauche, 20 pixels à droite

Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte: 40px
Couleur de l'ombre : rgba(103,151,255,0.11)

Marge : 10 % droit

Transformer traduire l'axe Y : -33% (ordinateur de bureau), -15% (téléphone)
Transformer traduire l'axe X : -5%

Résultat final

Bureau

Tablette

Téléphone

Dernières pensées

L'ajout de l'effet 3D aux GIF et aux vidéos HTML5 donne vraiment un affichage unique pour ces animations de produits. Les options de transformation de Divi (combinées à la propriété perspective) facilitent l'ajout d'effets 3D à vos GIF et vidéos.

Et, espérons-le, vous avez appris quelques choses sur la façon d'utiliser les GIF et les vidéos HTML5 avec Divi. Les GIF sont simples à utiliser, mais il est plus difficile de conserver une taille de fichier conviviale pour le Web. Les vidéos HTML5 nécessitent l'utilisation d'un code d'intégration, mais peuvent très bien fonctionner comme remplacement GIF pour des animations plus longues.

N'hésitez pas à explorer de nouvelles façons passionnantes d'utiliser cette conception pour présenter des animations pour des produits et services dans votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!