Comment changer une image d'arrière-plan avec un gif animé au survol
Publié: 2019-06-14Changer une image d'arrière-plan avec un GIF animé en survol peut être un excellent moyen de donner vie à votre contenu tout en fournissant une illustration sympa pour des produits ou des services. Par exemple, si vous faites la promotion des fonctionnalités d'un produit logiciel particulier, un GIF animé peut aider à illustrer certains aspects de la fonctionnalité du produit (nous le faisons pour les produits ici chez Elegant Themes). Mais, au lieu d'afficher ce GIF initialement, vous souhaiterez peut-être afficher une capture d'écran fixe de cette fonction qui est remplacée par une version animée (ou GIF) en survol.
Dans ce didacticiel, je vais vous montrer comment créer un texte de présentation qui change une image d'arrière-plan (fixe) avec un GIF animé en survol. Nous allons commencer par expliquer comment créer une capture d'écran et un GIF à l'aide de Snagit (un logiciel de capture d'écran). Ensuite, nous verrons comment implémenter ces images d'arrière-plan dans un texte de présentation afin qu'elles activent le survol. La commutation réelle des images est extrêmement facile avec les options de survol en arrière-plan de Divi.
Cette conception aidera à garder la conception statique dès le départ, puis à engager les utilisateurs chaque fois qu'ils interagissent avec le contenu.
Commençons.
Aperçu
Téléchargez l'arrière-plan GIF sur Hover Layout GRATUITEMENT
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 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.
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 une nouvelle page avec le Divi Builder actif.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Abonnez-vous à notre chaîne Youtube
Pour commencer, vous aurez besoin des éléments suivants :
- Le thème Divi installé et actif
- Logiciel de capture d'écran (ou une combinaison d'outils) qui vous permettra de prendre des captures d'écran, d'enregistrer des vidéos d'écran et de créer des GIF. Dans ce tutoriel, j'utiliserai Snagit principalement parce que c'est une solution tout-en-un que j'utilise tous les jours pour mes articles de blog et mes tutoriels.
- 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 à créer des onglets de survol dans Divi.
Partie 1 : Création de captures d'écran et de GIF
Pour cette conception, nous souhaitons créer une capture d'écran à afficher comme image d'arrière-plan fixe pour un module de présentation. Ensuite, nous voulons créer un GIF (une image animée) qui donne vie à cette image d'arrière-plan fixe avec une courte illustration du fonctionnement du produit. L'astuce consiste à créer des images et des GIF qui se ressemblent suffisamment pour qu'ils aient une transition en douceur lors du passage d'une image à l'autre en survol.
Une fois les deux images créées, nous pouvons utiliser l'image fixe comme image de fond initiale. Ensuite, nous pouvons passer de l'image d'arrière-plan à l'image gif en survolant le module de présentation.
Pour créer les captures d'écran et les GIF, j'utiliserai Snagit. Bien qu'il ne s'agisse pas d'un logiciel gratuit, il est très facile à utiliser et vous permet de créer des captures d'écran, d'enregistrer votre écran et de convertir des enregistrements d'écran en GIF au même endroit.
Création de l'image fixe de la capture d'écran
Pour créer la capture d'écran, ouvrez Snagit et ouvrez la boîte de capture. Assurez-vous ensuite de choisir de capturer une image en sélectionnant une région de votre écran. Cela vous permettra de faire glisser une zone sur votre écran pour être capturée sous forme d'image. Pour initialiser la capture d'écran, cliquez sur le bouton de capture.
Ensuite, cliquez et faites glisser la zone de capture autour de la zone de votre écran que vous souhaitez capturer en tant qu'image.
Enregistrez l'image sur votre ordinateur. Ensuite, ouvrez à nouveau la boîte de capture Snagit et choisissez de capturer une vidéo en sélectionnant une région de votre écran. Pour initialiser la capture d'écran, cliquez sur le bouton de capture.
Ensuite, cliquez et faites glisser la zone de capture autour de la zone de votre écran que vous souhaitez capturer et enregistrer en tant que clip vidéo. Pour créer une transition plus fluide entre l'image fixe et le gif, vous voudrez capturer la même zone pour la vidéo que vous l'avez fait pour l'image (ou aussi près que possible).
Lorsque vous êtes prêt, cliquez sur le bouton d'enregistrement et effectuez la démonstration que vous souhaitez enregistrer.
Lorsque vous avez terminé, cliquez sur Arrêter pour arrêter l'enregistrement. Ensuite, vous pouvez éditer le clip vidéo dans l'éditeur Snagit. Lorsque vous avez terminé l'édition, cliquez sur le bouton Gif à côté de la vidéo pour créer un Gif à partir de votre vidéo.
Dans la fenêtre contextuelle Créer un gif, modifiez les paramètres de sortie selon vos besoins. Assurez-vous d'activer la boucle pour que votre gif se répète. Cliquez ensuite sur le bouton Créer.
Une fois le gif créé, enregistrez-le sur votre ordinateur.
Vous avez maintenant une image fixe et une image gif prêtes à être ajoutées à votre conception dans Divi.
Partie 2 : Création d'un Blurb qui change l'image d'arrière-plan avec l'image Gif animée en survol
Si vous ne l'avez pas déjà fait, créez une nouvelle page et déployez le Divi Builder pour construire sur le front-end. Créez ensuite une nouvelle section régulière avec une ligne à deux colonnes.
Dans la colonne 1, ajoutez un module de présentation.
Mettez ensuite à jour les paramètres de contenu comme suit :
Corps : "Le corps du texte va ici"
Utiliser l'icône : OUI
Icône : nuage (voir capture d'écran)
Ajouter l'image d'arrière-plan par défaut
Ensuite, ajoutez l'image d'arrière-plan par défaut au texte de présentation comme suit :
Image d'arrière-plan : téléchargez l'image d'arrière-plan (la capture d'écran fixe) que vous avez créée.
Taille de l'image d'arrière-plan : Ajuster (cela garantira que l'image entière reste visible)
Position de l'image d'arrière-plan : en haut au centre (cela gardera l'image en haut du texte de présentation)
Ajouter l'image gif de fond de survol
Une fois l'image d'arrière-plan initiale en place, déployez l'option de survol d'arrière-plan et sélectionnez l'onglet de survol. Ajoutez ensuite l'image Gif pour servir de nouvelle image d'arrière-plan sur l'état de survol.
Styliser le module Blurb
Continuez à styliser le module de présentation en mettant à jour les paramètres de conception suivants :
Couleur de l'icône : #6bb962
Icône de cercle : OUI
Couleur du cercle : #ffffff
Alignement du texte : au centre
Police du titre : Lora
Taille du texte du titre : 34 px
Rembourrage : 50 % haut, 5 % bas, 3 % à gauche, 3 % à droite
La vraie clé de cette conception est le rembourrage. Pour que l'arrière-plan soit placé au-dessus du contenu du texte de présentation, vous devez ajouter environ 50 % de rembourrage supérieur. Et puisque la taille de l'image d'arrière-plan est définie sur « ajustement » et la position est définie sur « en haut au centre », elle se placera bien au-dessus du contenu pour répondre aux largeurs du navigateur.
Enfin, donnez au texte de présentation une ombre de boîte au survol comme suit :
Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Force du flou de l'ombre de la boîte : 0 px (par défaut), 24 px (survol)
Résultat final
Voici le résultat final.
Et voici le design sur tablette et téléphone.
Et voici à quoi cela pourrait ressembler avec des textes de présentation supplémentaires avec différentes captures d'écran et couleurs.
Dernières pensées
Si vous n'êtes pas habitué à utiliser des GIF sur votre site Web, vous devriez certainement l'envisager. Ils peuvent vraiment donner vie à votre contenu et fournir des illustrations extrêmement utiles pour vos visiteurs. Et, avec les options de survol en arrière-plan de Divi, vous pouvez facilement basculer une image fixe avec un GIF en survol. Cette solution peut fournir une conception moins gênante dès le départ qui engage vraiment l'utilisateur lorsqu'il interagit avec votre contenu. J'espère que cela vous sera utile pour votre prochain projet.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!