Ajouter des effets 3D aux vidéos GIF et HTML5 pour afficher une animation de produit unique dans Divi

Animation les vidéos GIF et HTML5 sont parfaites pour animer les produits de votre site. Ces courtes animations transmettent des messages précieux aux visiteurs d’une manière plus compréhensible que la vidéo ordinaire. Ce type de vidéo GIF et HTML5 peut être facilement ajouté avec Divi. Avec un peu de créativité, vous pouvez ajouter des effets 3D à une animation de produit unique. Dans ce tutoriel, je vais vous montrer comment ajouter des effets 3D aux vidéos GIF et HTML5 pour afficher une animation de produit unique dans Divi. Ce design est idéal pour ceux qui veulent présenter une mise en page créative d’un produit ou d’un service à la réception. Pour ce faire, nous devons d’abord comprendre comment intégrer les vidéos GIF et HTML5 dans votre page en utilisant Divi. Ensuite, nous pourrons positionner et tourner GIF (ou vidéo) dans l’espace 3D en utilisant l’option de conversion Divi. Enfin, nous utiliserons quelques techniques de conception Divi pour créer une belle disposition de profil qui correspond à GIF et à la vidéo 3D.
On y va. Voici un aperçu de la conception que nous allons construire dans ce tutoriel. La conception est similaire lorsque vous utilisez GIF et HTML5 video pour créer une animation de produit. Télécharger gratuitement les effets 3D de GIF et l’animation vidéo HTML5 Divi Layout pour maîtriser les dessins de ce tutoriel, vous devez d’abord les 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 Abonnez – vous au communiqué de presse Divi et nous vous enverrons une copie de la dernière page de connexion Divi par courriel.
Lecture automatique pour générer une animation de haute qualité qui fonctionne comme GIF. De plus, lorsque vous ajoutez l’intégration au module Divi, vous pouvez utiliser Divi Builder pour modéliser la vidéo de façon créative.
Consultez cet article pour en savoir plus sur les raisons pour lesquelles vous devriez envisager d’utiliser des vidéos HTML5 sur un GIF normal. Maintenant que nous en savons plus sur l’utilisation des vidéos GIF et HTML5, nous sommes prêts à commencer à les utiliser dans Divi. Ce dont vous avez besoin pour démarrer ce tutoriel est une image GIF, un fichier vidéo MP4 (et l’URL du fichier vidéo) pour intégrer des éléments vidéo HTML5. Pour maximiser le support de votre navigateur, vous pouvez également inclure la même vidéo au format WebM (nous en discuterons plus loin). Le thème Divi installe et active une nouvelle page créée pour la construction à partir de zéro à l’avant (Visual Builder).
Ajouter des effets 3D à une vidéo GIF ou HTML5 animée Avant de concevoir une mise en page partielle complète pour ce tutoriel, je pense qu’il est préférable de vous montrer comment ajouter des effets 3D aux vidéos GIF et HTML5. Une fois terminé, nous terminerons la mise en page du reste avec un beau design moderne. Ajoutons d’abord l’effet 3D au GIF dans Divi. Créer un GIF il existe plusieurs façons de créer un GIF sur le Web. Parce que ce tutoriel est sur la création d’un GIF pour animer les actions du produit, vous devez enregistrer une partie de l’écran (en utilisant l’enregistreur d’écran), puis convertir le fichier vidéo en fichier GIF. N’oubliez pas de créer le GIF le plus petit possible pour limiter la taille du fichier et le temps de téléchargement. Une fois le GIF créé, vous pourrez l’utiliser comme n’importe quelle autre image dans Divi.
Si vous souhaitez apprendre à créer un GIF
En utilisant Snagit, jetez un coup d’oeil à notre post sur la façon de changer l’image de fond en GIF d’animation pendant que vous passez le curseur. Ajoutez des effets 3D au GIF dans Divi il est temps d’ajouter le GIF à Divi afin que nous puissions le modéliser avec des effets 3D fantastiques. Pour commencer, ajoutez une nouvelle section normale avec deux colonnes de lignes. Avant d’ajouter un formulaire, nous devons ajouter l’attribut perspective à la colonne contenant le GIF. Pour ce faire, ouvrez les paramètres de ligne et ajoutez le clip CSS suivant à l’élément principal de la colonne 1:
Perspective: 1000px; Cet attribut de perspective est nécessaire pour ajouter une perspective à un élément d’une colonne. Les éléments nécessitent une perspective pour obtenir des effets 3D lorsque vous utilisez les options de transformation de Divi. Pour une meilleure compréhension, consultez notre post sur la façon d’utiliser les options de perspective et de transformation pour concevoir des murs de photos 3D. Ajoutez maintenant le module image à la colonne 1. Téléchargez GIF dans le module image. Pour cette conception, le GIF devrait être d’environ 600 pixels x 700 pixels. Ensuite, utilisez les options Transform pour redimensionner, tourner et incliner le GIF dans l’espace 3D. Changer la roue y: 8 degrés changer la roue X: 28 degrés Transformer l’inclinaison de l’axe Y: 10 degrés transformer l’inclinaison de l’axe X: – 8 degrés Échelle de transformation (tablette): 80% Voyons les résultats. Ajouter des effets 3D à la vidéo HTML5 dans Divi avant d’ajouter des effets 3D, nous devons créer notre propre vidéo HTML5. Nous examinerons ci – dessous les étapes à suivre pour le faire. Mais si vous voulez une explication plus complète, consultez notre post sur la façon de créer un GIF animé avec des fichiers plus petits en utilisant la vidéo HTML5.
Créer un code d’intégration vidéo HTML5 les éléments vidéo HTML5 ont les caractéristiques suivantes:
Structure de base.

Vous n’avez pas besoin d’en savoir trop sur HTML pour voir ce que ce code fait. Élément intérieur

Ensuite, nous ajouterons quatre propriétés pour contrôler l’affichage et la fonctionnalité de la vidéo. Ce type de contrôle est la principale raison pour laquelle la vidéo HTML5 est insérée manuellement plutôt que d’utiliser le module vidéo Divi. Ces attributs incluent la lecture automatique (pour que la vidéo démarre automatiquement), la boucle (pour que la vidéo se répète), l’audio muet (pour que la vidéo ne joue pas d’audio) et la lecture en ligne (pour que la vidéo joue dans la zone de lecture).
Hauteur maximale: 300 Px (bureau), aucune (tablette et téléphone) remplissage: 0px en haut, 0px en bas