Bienvenue dans la section 2 du cours de formation Web pour débutants.
À la fin de cette section, vous serez capable de :
- Créer une bannière animée
- Ajouter du texte en surimpression à une bannière animée
Création d'une bannière animée
Pour créer une bannière animée, vous devez d'abord disposer d'au moins deux bannières statiques. Un graphiste peut s'en charger, ou, pour les besoins de ce cours, vous pouvez en créer une gratuitement avec Canva. La taille de votre bannière dépendra du modèle de site web choisi. Le site d'exemple utilisé dans ce cours utilise le thème Decor, dont la taille est de 1200 x 480 pixels.
Voici les bannières que nous avons utilisées, que vous pouvez également télécharger et utiliser si vous le souhaitez (clic droit et sélectionnez « Enregistrer sous » sur chaque lien) :
Sélectionnez le bouton « Création », puis choisissez l’option « Bannière/Diaporama ». Vous constaterez que quatre bannières sont déjà présentes par défaut : une bannière principale et trois bannières animées. Ces quatre bannières défilent ensemble, chacune s’affichant pendant un nombre de secondes prédéfini avant de passer à la suivante.
Pour cette section du cours, nous n'aurons que trois bannières. Vous pouvez donc supprimer l'une des bannières sous le titre animé en cliquant sur l'icône rouge, puis enregistrer votre travail en cliquant sur le bouton Publier.
Vous pouvez maintenant remplacer les trois bannières par défaut restantes par trois de vos propres images. Pour ce faire, cliquez sur l'icône d'image située sous chaque bannière. L'assistant d'ajout d'images s'ouvrira alors ; vous pourrez ainsi sélectionner et importer l'image depuis votre appareil. Répétez cette opération pour les trois bannières.
Faites défiler la page vers le bas pour trouver une zone permettant de modifier les effets de bannière animée par défaut. Vous pouvez y choisir le style et la vitesse d'animation, la vitesse de transition entre les diapositives, l'emplacement d'affichage de la bannière et la position des légendes. Pour ce cours, nous sélectionnerons l'option « Centrer » pour l'affichage des légendes et conserverons les autres options par défaut.
Ajouter des légendes à vos bannières animées
Remontez la page pour afficher à nouveau vos trois bannières. À côté de chaque bannière, vous verrez trois champs : URL du lien, Légende et Appel à l’action. C’est ici que vous saisissez le texte à afficher sur chaque bannière.
L'URL du lien que nous utiliserons restera la même pour chaque bannière. Vous pouvez trouver le lien approprié en cliquant sur le carré bleu contenant trois points. L'assistant URL s'ouvrira alors ; vous pourrez y sélectionner une page de votre site d'essai ou copier-coller une URL dans le champ situé en bas. Dans cet exemple, nous cliquerons sur l'option « Lien vers une page de ce site », puis choisirons la page « Boutique ».
L'URL du lien s'affichera alors dans l'encadré à côté de la bannière. Répétez cette étape pour les deux autres bannières.
Nous allons maintenant ajouter une légende et un appel à l'action aux trois bannières. Une légende est une courte information percutante concernant votre site web ou votre entreprise. Un appel à l'action indique au visiteur ce qu'il doit faire ensuite. Voici ce que nous avons ajouté :
Sur l'aperçu pour ordinateur, vous pouvez voir le texte superposé dans le cadre gris clair, et l'appel à l'action dans un plus petit cadre gris foncé à l'intérieur. Il s'agit désormais d'un lien cliquable pour les visiteurs de votre site web.
Vous avez terminé la section 2 du cours de niveau débutant. Bravo ! Passons maintenant à la section suivante : la section 3 pour débutants.
