Ajouter une bannière à votre site

Souvent appelée image « hero » ou « bannière », le bloc Bannière permet d’ajouter à votre site une grande image, une vidéo ou une bannière de texte. Ce guide vous montrera comment ajouter une bannière et sélectionner l’image, la vidéo ou la couleur à afficher.

Dans cette vidéo, vous apprendrez à utiliser le bloc Bannière pour ajouter un en-tête visuel ou une section de style bannière à votre site WordPress.com. Elle explique comment ajouter une image d’arrière-plan ou une vidéo, placer du texte ou d’autres blocs par-dessus, ajuster la mise en page et le point focal, personnaliser la superposition et prévisualiser le design sur appareil mobile.

Vous pouvez ajouter une image de bannière à votre site en utilisant le bloc Bannière. Pour ajouter une bannière à une page, un article ou un modèle, procédez comme suit :

1. Accédez au tableau de bord de votre site.
2. Selon l’endroit où vous souhaitez ajouter la bannière, accédez à une page, un article ou un modèle, puis modifiez-le ou créez-en un nouveau :
   • Page : accédez à la section Pages de votre menu.
   • Article : accédez à la section Articles de votre menu.
   • Modèle : accédez à Apparence → Éditeur et sélectionnez le modèle.
3. Cliquez sur l’icône + (outil d’insertion de bloc) et recherchez « bannière ».
   • Ou saisissez /bannière à l’endroit où apparaît « Saisir / pour choisir un bloc ».

4. Cliquez sur l’icône de bannière pour insérer le bloc Bannière :

Après avoir ajouté un bloc Bannière, sélectionnez le média à afficher. Vous pouvez choisir parmi les options suivantes :

• Téléverser : cliquez sur le bouton « Téléverser » pour sélectionner un fichier sur votre ordinateur.
• Sélectionner un média : trouvez un média dans l’un de ces emplacements :
  • Médiathèque : les images et vidéos que vous avez déjà téléversées dans la médiathèque de votre site.
  • Votre téléphone : utilisez l’application mobile Jetpack pour téléverser des médias directement depuis votre téléphone.
  • Générer avec l’IA : fournissez une brève description du type d’image que vous souhaitez utiliser, et l’IA créera le visuel.
  • Google Photos : sélectionnez un média depuis votre compte Google Photos connecté.
  • Pexels : recherchez des images gratuites dans la bibliothèque Pexels.
  • Openverse : recherchez des images gratuites dans la bibliothèque Openverse.
• Utiliser l’image mise en avant : affiche l’image mise en avant de la page ou de l’article lorsqu’elle est définie. L’ajout d’un bloc Bannière à un modèle et la sélection de cette option affichent automatiquement l’image mise en avant de toute page ou de tout article utilisant ce modèle.
• Couleur : au lieu d’ajouter une image ou une vidéo, sélectionnez une couleur unie pour la bannière.

Vous pouvez ensuite ajouter à la bannière du contenu comme du texte et des boutons, personnaliser sa mise en page et ajuster son apparence.

Tenez compte des points suivants lorsque vous sélectionnez une image pour votre bannière :

• Les images décoratives ou abstraites fonctionnent le mieux, car l’image entière ne s’affiche pas toujours entièrement sur les appareils mobiles.
• Saisissez votre texte par-dessus l’image, plutôt que de l’intégrer directement dans l’image. Cela garantit que le texte s’adaptera correctement à toutes les tailles d’écran.
• Le bloc Bannière utilise l’image comme image d’arrière-plan et ne se redimensionne pas pour afficher toute la largeur de l’image sur les appareils plus petits. À l’aide du sélecteur de point focal, vous pouvez choisir la partie de l’image sur laquelle mettre l’accent sur les petits écrans.
  • Si votre image contient des éléments qui doivent être affichés entièrement sur tous les types d’appareils, vous pouvez utiliser un bloc Image à la place.

Le bloc Bannière prend en charge les images, les vidéos et les couleurs unies. Pour téléverser une vidéo dans le bloc Bannière, procédez comme suit :

1. Ajoutez un bloc Bannière à une page ou à un article.
2. Dans la barre d’outils du bloc, cliquez sur l’option « Ajouter un média » :

3. Choisissez l’une des options suivantes :
   • Téléverser : chargez un fichier vidéo depuis votre ordinateur (plan éligible requis).
   • Ouvrir la médiathèque : sélectionnez un fichier vidéo que vous avez déjà téléversé.
   • Intégrer une vidéo depuis une URL : collez une URL provenant de YouTube, Vimeo ou d’un autre fournisseur.

Le bloc Bannière est décoratif plutôt que fonctionnel. Il ne lit donc aucun son provenant d’un fichier vidéo. Si vous souhaitez inclure l’audio de la vidéo, utilisez le bloc VideoPress pour lire les vidéos avec le son.

Après avoir ajouté un bloc Bannière, vous pouvez changer le média à tout moment. Pour remplacer ou supprimer le média de votre bannière :

1. Accédez au tableau de bord de votre site.
2. Accédez à la page, à l’article ou au modèle où se trouve la bannière.
3. Sélectionnez Vue en liste dans le coin supérieur gauche de l’éditeur.
4. Cliquez sur l’élément bloc Bannière dans la vue en liste.

5. Dans la barre d’outils du bloc, cliquez sur le bouton Remplacer pour choisir une nouvelle image ou vidéo.

Vous pouvez choisir un nouveau fichier média à l’aide de l’une des options suivantes :

• Ouvrir la médiathèque : sélectionnez une image que vous avez déjà téléversée.
• Téléverser : sélectionnez une image sur votre appareil pour la téléverser sur votre site. Consultez les types de fichiers pris en charge.
• Utiliser l’image mise en avant : utilisez l’image mise en avant de la page ou de l’article.
• Réinitialiser : supprimez l’image, mais laissez le bloc Image en place afin de pouvoir choisir parmi des options telles que téléverser, sélectionner une image, générer avec l’IA ou insérer depuis une URL.
• Votre téléphone : ajoutez une image depuis votre téléphone à l’aide de l’application mobile Jetpack.
• Générer avec l’IA : générez une image à l’aide de l’IA en décrivant ce que vous souhaitez.
• Google Photos.
• Bibliothèque de photos gratuites Pexels.
• Images gratuites Openverse.
• Intégrer une vidéo depuis une URL : collez une URL provenant de YouTube, Vimeo ou d’un autre fournisseur