Comment ajouter un en-tête dans WordPress ? Utilisez WordPress Customizer ou Cover block pour personnaliser votre image d'en-tête

Comment ajouter un en-tête dans WordPress ? Utilisez WordPress Customizer ou Cover block pour personnaliser votre image d'en-tête

Vous pouvez convenir avec nous qu'aucun site Web n'est complet sans en-tête. Saviez-vous que vous avez deux options différentes pour créer un en-tête dans WordPress ? Dans ce didacticiel, nous expliquerons les différences individuelles.

Image d'en-tête authentique

L'en-tête WordPress classique, tel que vous le savez, est utilisé sur toutes les différentes pages. C'est généralement une large boîte rectangulaire d'un côté à l'autre. À l'intérieur, il y a un logo ou un nom de site Web, un slogan et des éléments de menu. Vous pouvez également y insérer une image d'arrière-plan appelée image d'en-tête. L'image d'en-tête est idéale pour attirer l'attention des visiteurs et créer l'apparence générale du site Web. C'est à vous de décider si vous utilisez une image d'en-tête discrète ou une image dominante qui attirera l'attention des visiteurs sur la navigation du site Web.

Image d'en-tête WordPress
Le type d'en-tête le plus utilisé - image d'en-tête en haut du site Web

Comment modifier l'en-tête dans WordPress Customizer

Par défaut, l'image d'en-tête peut être modifiée via WordPress Customizer. Vous pouvez y accéder à la fois depuis l'administrateur WordPress et depuis votre site Web :

  • Directement depuis WP admin, accédez simplement à Apparence -> Personnaliser
  • Sur le frontend, si vous êtes connecté, cliquez sur "Personnaliser" dans la barre du haut

Customizer inclut tous les paramètres d'apparence de base de votre thème actuellement actif. Par conséquent, où trouver les paramètres d'image d'en-tête dépend de votre thème actif. Dans le thème Citadela, vous pouvez ajouter et modifier l'image d'en-tête dans Personnalisation –> Apparence –> Arrière-plan de l'en-tête.

Ajouter un en-tête via Customizer
Ajout d'en-tête via Customizer

Paramètres de l'image d'en-tête

Quelle que soit l'image d'en-tête que vous choisissez, vous pouvez la configurer selon vos besoins. Un effet intéressant peut être obtenu en utilisant "Header Image Repeat". Vous pouvez configurer les options suivantes :

  • Tuile
  • Tuile horizontalement
  • Mosaïque verticale
  • Pas de répétition (si vous ne voulez pas répéter l'image)
Fonctionnalité de répétition de l'image d'en-tête activée
Effet de mosaïque de l'image d'en-tête

Autres paramètres dans WordPress – Taille de l'image d'en-tête

Une autre option pour modifier l'en-tête et ajuster l'image consiste à définir une taille appropriée. La taille de l'image d'en-tête a les trois options suivantes :

  • Original - il conservera la taille d'origine de l'image
  • Couverture - l'image téléchargée sera redimensionnée pour s'adapter d'un côté à l'autre, l'image peut également être coupée pour s'adapter
  • Contenir - la taille de l'image d'en-tête sera ajustée de manière à ce que toute l'image soit visible
3 options de taille d'image d'en-tête
Voyez à quel point l'en-tête peut être différent en fonction de sa taille - taille d'origine, de couverture et de contenu

Vous pouvez également définir la position de l'image dans l'en-tête et définir la fixation de l'arrière-plan.

Bloc de couverture qui fonctionne comme en-tête

Comme nous l'avons déjà mentionné au début de cet article, il existe plusieurs façons de modifier l'en-tête dans l'éditeur WordPress. En plus d'utiliser Customizer, vous pouvez également utiliser l'un des blocs principaux de WordPress appelé bloc de couverture. Quelle est donc la différence ?

L'en-tête classique créé avec Customizer concerne l'ensemble du site Web, tandis que le bloc de couverture vous permet d'ajouter une image de couverture qui fonctionne essentiellement comme image d'en-tête à n'importe quelle page ou publication. Vous pouvez même l'utiliser plusieurs fois sur une même page ou publier avec différents paramètres.

Où utiliser le bloc de couverture

Le bloc de couverture a une application plus large sur le site Web par rapport à l'en-tête de site Web classique. Le bloc de couverture ajoute une image de titre large et pleine largeur au contenu. Vous pouvez l'utiliser pour séparer visuellement le contenu des articles de blog. Chaque section de publication aura sa propre image d'en-tête qui peut être connectée au contenu suivant. La grande fonctionnalité est que vous pouvez écrire du texte directement à l'intérieur du bloc de couverture. Ce texte sera affiché sur l'image.

Image de couverture comme image d'en-tête dans l'article de blog
Article de blog avec image d'en-tête ajoutée via le bloc de couverture

En-tête de la page d'accueil

Le bloc de couverture peut également être utilisé à la place de l'en-tête du site Web si vous souhaitez obtenir un look original. Étant donné que le bloc de couverture offre diverses options d'alignement, vous pouvez le définir sur la largeur du contenu ou sur toute la largeur. L'en-tête pleine largeur peut également être utilisé comme grande image d'arrière-plan. Mais n'oubliez pas de désactiver le titre de la page dans le thème Citadela. Cette étape est nécessaire si vous souhaitez utiliser le bloc Cover comme en-tête de site Web.

En-tête en tant qu'image d'arrière-plan pleine largeur
En-tête pleine largeur sur la page d'accueil

Comment créer un en-tête à l'aide du bloc de couverture

Dans un premier temps, vous devez ajouter le bloc de couverture. Vous pouvez l'ajouter à n'importe quelle page ou publier de la manière suivante :

Cliquez sur le signe "+" dans la barre supérieure ou sur le signe "+" n'importe où dans le contenu. Après cela, recherchez simplement le bloc de couverture.

Ajouter un bloc Cover en cliquant sur "+"
Ajout d'un bloc de couverture à l'aide de "+"

Un autre moyen rapide consiste à ajouter un bloc en utilisant "/" après le nom du bloc.

Utiliser une barre oblique pour ajouter un bloc de couverture
Ajoutez une barre oblique et tapez Bloc de couverture pour ajouter ce bloc dans la zone de contenu

Après avoir ajouté le bloc de couverture, vous obtiendrez un espace pour télécharger une image ou une vidéo. Vous pouvez également sélectionner une image dans la bibliothèque multimédia. L'image ou la vidéo sélectionnée sera utilisée comme en-tête.

Titre de l'en-tête

Une chose intéressante avec l'en-tête ajouté à l'aide du bloc de couverture est que vous pouvez écrire un titre de texte sur l'image. Ce titre peut également être utilisé comme en-tête de section, par exemple dans les articles de blog. Il est également possible d'y ajouter n'importe quelle URL.

Titre dans l'image d'en-tête
Titre dans l'image d'en-tête

Alignement du bloc de couverture

Le bloc de couverture peut être aligné à l'aide de la barre d'outils du bloc. Il peut être aligné dans la zone de contenu vers la gauche, la droite ou le centre. Il peut également être défini comme large ou pleine largeur. Ces options doivent être prises en charge par le thème actif que vous utilisez pour créer votre site Web.

Alignement du bloc de couverture
Vous pouvez aligner votre bloc de couverture de plusieurs façons pour obtenir le look parfait de votre en-tête

Paramètres de l'image de couverture

L'apparence de l'image de couverture peut être modifiée dans l'inspecteur. Si vous le définissez comme arrière-plan fixe, l'image ne défilera pas avec le reste du contenu de votre page, mais elle restera à sa place tout le temps.

À l'aide de Focal Point Picker, vous pouvez choisir quelle partie de l'image sera affichée dans l'en-tête. Vous pouvez travailler avec l'image encore plus loin. Par exemple, vous pouvez définir la couleur de superposition et l'opacité de l'arrière-plan. Les deux paramètres vous aideront à mettre la touche finale à votre en-tête. Si vous utilisez le bloc de couverture dans un article de blog, en utilisant le schéma de couleurs et la transparence appropriés, vous pouvez ajouter l'atmosphère souhaitée à votre article. Soyez prudent avec ces paramètres car le texte du titre doit être clairement visible.

Définir la superposition des couleurs et l'opacité
En choisissant la superposition de couleurs appropriée, vous pouvez créer un en-tête accrocheur

Créer un en-tête vidéo

Le bloc de couverture peut également être utilisé pour lire des vidéos dans l'en-tête de votre site Web. Vous pouvez attirer l'attention des visiteurs ou promouvoir un produit ou un service. Il y a plusieurs formats vidéo pris en charge, le plus courant que vous pouvez utiliser est .mp4.

La grande chose est que vous pouvez également écrire le titre sur la vidéo, l'aligner, la rendre pleine largeur ou définir la superposition de couleurs. Les paramètres du bloc de couverture sont les mêmes pour tous les types de support.

Quelle est votre expérience avec les en-têtes ? Avez-vous déjà essayé le bloc Cover pour créer un en-tête ? Préférez-vous un en-tête de site Web classique utilisant le personnalisateur WordPress ? Faites-le nous savoir dans les commentaires ci-dessous.