L'en-tête est la première section d'un site Web que les visiteurs voient. La personnalisation du texte dans la balise d'en-tête est très importante pour les créateurs de sites WordPress qui souhaitent des designs créatifs et uniques. Cependant, modifier et personnaliser les en-têtes dans WordPress peut être difficile. Cela nécessite de comprendre comment utiliser correctement le personnalisateur de thème WordPress, les éditeurs de code et d'autres outils.
Un en-tête personnalisé contribue à renforcer votre marque, améliore la navigation sur le site avec des menus et attire plus de visiteurs avec des visuels comme des logos. De la conception de logo personnalisées au codage de menus déroulants avancés, la maîtrise de la personnalisation des en-têtes WordPress ouvre un contrôle total sur l'apparence et le fonctionnement de la porte d'entrée de votre site pour vos besoins spécifiques. Nous en saurons davantage à ce sujet dans cet article.
Un bref aperçu de l’en-tête WordPress
Un en-tête WordPress apparaît en haut et constitue le premier élément du site Web qui attire l'attention des visiteurs. Il est important de se concentrer particulièrement sur les en-têtes lors de la maintenance de WordPress car ils contiennent des éléments clés tels que :
- Menu de navigation – Cela permet aux visiteurs de cliquer facilement sur différentes pages de votre site.
- Logo – Le logo de votre entreprise qui aide les gens à reconnaître votre marque.
- Autres éléments utiles – Des éléments tels que des icônes de réseaux sociaux, des boutons pour effectuer une action (comme « Acheter maintenant »), des barres de recherche, des informations de contact, etc.
L’en-tête doit donner une bonne première impression et fournir immédiatement tout ce à quoi un visiteur pourrait avoir besoin d’accéder.
Heureusement, avec la nouvelle fonctionnalité d'édition complète du site de WordPress, vous pouvez désormais concevoir et personnaliser votre en-tête comme vous le souhaitez. Il existe de nombreux types d’en-têtes WordPress :
- En-tête global – Un en-tête cohérent affiché sur chaque page
- Sticky Header – L’en-tête reste visible en haut lors du défilement vers le bas
- En-tête plein écran – occupe tout l’écran avec de grandes images/vidéos
- Menu coulissant – Sur mobile, le menu se glisse par le côté
- En-tête coulissant vers le bas – Glisse vers le bas lorsque vous faites défiler pour afficher plus d'options
- Menu vertical – Le menu est vertical sur le côté au lieu d'horizontal
- En-tête transparent – En-tête transparent sur le contenu de la page
- En-tête tourné – L’en-tête est tourné à 90 degrés pour un look unique
- Mega Menu – Catégories extensibles idéales pour les sites de commerce électronique
Le type d'en-tête que vous choisissez dépend de la conception, du contenu et de l'expérience utilisateur idéale de votre site. Certains conviennent mieux aux portefeuilles créatifs, d'autres aux sites de contenu, aux boutiques en ligne, etc. Le bon en-tête peut améliorer l'expérience de vos visiteurs.
Comment modifier l'apparence de l'en-tête
Vous souhaitez transformer l'apparence de votre en-tête sans effort en ajustant son style de police, sa taille et sa couleur pour qu'il corresponde à l'esthétique de votre site Web ? Nous allons vous montrer trois méthodes pour bien faire les choses —-
Méthode 1 : en utilisant le personnalisateur de thème
Le personnalisateur de thème est un outil intégré à WordPress qui permet aux utilisateurs de modifier divers aspects du thème de leur site Web en temps réel. Il fournit une interface conviviale dans laquelle vous pouvez apporter des modifications à des éléments tels que les couleurs, les polices, les mises en page, les widgets , etc., sans avoir besoin de connaître aucun code. Cette fonctionnalité intuitive permet aux propriétaires de sites Web de personnaliser l'apparence de leur site et de voir les modifications instantanément avant de les appliquer en direct.
Suivez les étapes ci-dessous pour affiner l'attrait visuel de votre site Web WordPress en utilisant le personnalisateur de thème et en affinant l'apparence de votre en-tête à la perfection.
Étape 1 : accéder au site Web WP
Connectez-vous à votre tableau de bord WordPress en utilisant vos informations d'administrateur pour commencer. Vous pouvez également accéder à la page de connexion en ajoutant wp-admin à la fin de l'adresse de votre site Web. Si la page de connexion diffère, il existe plusieurs façons de trouver votre URL de connexion WordPress .
Étape 2 : Accédez au personnalisateur de thème
Pour modifier l'apparence de votre site Web, allez sur le côté gauche de votre tableau de bord d'administration WordPress et cliquez sur Apparence . Ensuite, choisissez Personnaliser parmi les options qui apparaissent. Cela ouvrira le personnalisateur de thème, où vous pourrez effectuer toutes sortes d'ajustements de conception.
Lire la suite : Les modifications WordPress ne s'affichent pas ? Réparez facilement !
Étape 3 : Localiser le paramètre d'en-tête
Trouver où modifier votre en-tête peut différer en fonction de votre thème. Habituellement, vous verrez les options pour l'en-tête dans les sections intitulées En-tête , En-tête et navigation ou Options d'en-tête . Cliquez sur la section qui mentionne l'en-tête pour l'ouvrir et voir les paramètres que vous pouvez modifier.
Étape 4 : Personnaliser les éléments d'en-tête
En fonction de votre thème et de ce que vous pouvez personnaliser, vous pouvez généralement modifier ces parties de l'en-tête :
- Titre/Logo du site : vous pouvez ajuster le titre de votre site ou ajouter un logo personnalisé.
- Slogan du site : modifiez ou masquez le slogan de votre site.
- Image d'en-tête/Dégradé : Certains thèmes vous permettent d'ajouter une image ou une couleur dégradée à l'arrière-plan de l'en-tête.
- Menu de navigation : vous pouvez choisir le menu qui apparaît en haut du site Web, où il va et à quoi il ressemble.
- Disposition de l'en-tête : modifiez la largeur, la hauteur et l'emplacement de l'en-tête.
- Texte et couleurs de l'en-tête : ajustez la couleur du texte, des liens et d'autres éléments de style dans l'en-tête.
Étape 5 : prévisualisez vos modifications
Lorsque vous modifiez les choses dans WordPress Customizer, vous verrez un aperçu en direct de la façon dont votre en-tête apparaîtra. Prenez votre temps pour vérifier si vous aimez les modifications avant de décider de les publier. De cette façon, vous pouvez vous assurer que tout semble correct avant d’être mis en ligne sur votre site.
Étape 6 : Enregistrez vos modifications
Une fois que vous avez ajusté l'en-tête selon vos préférences, cliquez sur le Publier ou Enregistrer et publier . Cela enregistrera vos modifications et les affichera immédiatement sur votre site Web.
Lire la suite : Correction de « Échec de la publication » de WordPress. La réponse n'est pas une réponse JSON valide. Problème
Étape 7 : Vérifiez sur le site Web
Pour voir à quoi ressemble votre en-tête avec les modifications, ouvrez l'URL dans un nouvel onglet de navigateur Web. N'oubliez pas que vous devrez peut-être faire plusieurs allers-retours pour que tout soit parfait. Pendant que vous travaillez dessus, c'est une bonne idée de vider le cache de votre site WordPress. Cela permet de garantir que vous voyez avec précision les mises à jour les plus récentes.
Conseil de pro : différents thèmes offrent différentes manières de personnaliser votre en-tête. Si votre thème actuel ne vous offre pas suffisamment d'options pour l'en-tête, pensez à passer à un nouveau thème.
Vous pouvez également contacter nos services de conception personnalisée pour obtenir une aide supplémentaire pour adapter l'en-tête à votre goût.
Enthousiasmé par la personnalisation des en-têtes WordPress ?
Adoptez des services de conception de sites Web sur mesure à partir d'un prix de paiement unique incroyablement bas de 999 $ !
Méthode 2 : modifier l'en-tête à l'aide de l'éditeur de site complet
Si vous souhaitez des moyens plus avancés et flexibles de personnaliser votre en-tête dans WordPress, essayez d'utiliser un éditeur de site complet au lieu du personnalisateur par défaut. Vous pouvez accéder à l' éditeur de site complet via les nouvelles fonctionnalités WordPress ou dans l'éditeur de blocs WordPress moderne, Gutenberg.
Voici comment modifier l'en-tête à l'aide de l'éditeur de site complet :
Étape 1 : Accédez au site Web WordPress
Accédez à votre tableau de bord d'administration WordPress en vous connectant.
Étape 2 : Accédez à l'éditeur de site complet
Accédez à Apparence dans le menu du tableau de bord WordPress. À partir de là, sélectionnez Éditeur de site dans le menu déroulant. Cette action lancera l'interface de l'éditeur de site complet.
Étape 3 : Sélectionnez le bloc d'en-tête
L'aperçu en direct du site Web est maintenant affiché et vous trouverez tous les choix d'édition répertoriés sur le côté gauche. Recherchez la partie en-tête, généralement positionnée en haut du site. Il est susceptible d'être identifié comme Header ou Site Header . Continuez en cliquant sur la section d’en-tête.
Étape 4 : modifier l'en-tête
Une fois que vous avez choisi la section d'en-tête, vous verrez diverses options d'édition dans la barre latérale. Selon le thème et les fonctionnalités de l'éditeur de blocs, vous pouvez personnaliser l'en-tête des manières suivantes :
- Changer de logo : téléchargez un logo personnalisé ou remplacez celui actuel.
- Ajouter des blocs : utilisez cet outil avancé pour incorporer et organiser du texte, des images, des boutons ou tout autre contenu dans l'en-tête.
- Ajuster la hauteur de l'en-tête : contrôlez la visibilité du site sur la page en augmentant ou en raccourcissant l'en-tête pour répondre à vos besoins en matière de conception Web.
- Blocs d'en-tête : utilisez des blocs pour intégrer différents éléments de contenu dans l'en-tête. Les blocs de texte, les blocs d'images, les boutons, les icônes de réseaux sociaux et les barres de recherche sont couramment utilisés.
- Alignement des éléments d'en-tête : alignez chaque bloc à gauche, au centre ou à droite. Vous pouvez également gérer l'alignement et le placement des éléments d'en-tête tels que le logo, le titre du site et le menu de navigation.
- En-tête collant : activez ou désactivez la fonction d'en-tête collant, qui maintient l'en-tête visible en haut de la page lorsque les utilisateurs font défiler vers le bas.
Obtenez des informations sur la conception : l'importance du crénage dans la conception Web
Étape 5 : prévisualisez et publiez vos modifications
L'éditeur de site complet WordPress vous permet d'afficher un aperçu en direct de l'en-tête de votre site Web. Examinez les modifications pour vous assurer qu’elles correspondent à vos préférences de conception et répondent à vos exigences.
Étape 6 : Vérifiez votre site Web
Rendez-vous sur votre site et explorez l'en-tête fraîchement mis à jour.
Dans l'ensemble, WP Full Site Editor offre une approche plus visuelle et adaptable pour personnaliser votre en-tête distinctif par rapport au Theme Customizer. Néanmoins, les fonctionnalités disponibles et les choix de personnalisation peuvent varier en fonction du thème et des plugins installés.
Méthode 3 : modifier l'en-tête à l'aide du plugin d'en-tête
Pour le moyen le plus efficace d’améliorer l’en-tête de votre site WordPress, envisagez d’utiliser un plugin. Les plugins offrent une gamme de possibilités de personnalisation, vous permettant d'adapter votre en-tête à la perfection.
De plus, ils reçoivent souvent des mises à jour régulières, garantissant la compatibilité avec les dernières versions de WordPress et vous offrant de nouvelles fonctionnalités à explorer. Alors, pourquoi ne pas profiter de ces outils dynamiques pour créer un en-tête qui se démarque vraiment et évolue avec les besoins de votre site ?
Continuez à lire : Meilleurs créateurs de sites Web WordPress d'une page pour les entreprises
Suivez ces étapes :
Étape 1 : Installer le générateur d'en-tête et de pied de page Elementor
Pour commencer à améliorer votre site WordPress, accédez à votre tableau de bord d'administration WordPress. De là, rendez-vous dans la section Plugins. Ensuite, cliquez sur Ajouter nouveau et recherchez le plugin Elementor Header & Footer Builder.
Une fois que vous l'avez trouvé, appuyez sur le Installer . Après l'installation, cliquez sur Activer pour activer le plugin. Suivre ces étapes garantira que le Elementor Header & Footer Builder est actif et prêt à être utilisé.
Étape 2 : Créer un modèle d'en-tête
Une fois arrivé à votre tableau de bord WordPress , rendez-vous dans la section Modèles À partir de là, optez pour la Theme Builder . Pour créer un nouveau modèle d'en-tête, cliquez simplement sur le bouton Ajouter un nouveau Ensuite, sélectionnez le d'en-tête pour commencer.
Étape 3 : Choisissez une structure d'en-tête
Elementor propose des conceptions d'en-tête prêtes à l'emploi. Cependant, si vous préférez, vous pouvez également créer un en-tête entièrement personnalisé à partir de zéro. Une fois que vous avez fait votre sélection, l'éditeur Elementor s'ouvrira, vous permettant de commencer à affiner le design que vous avez choisi.
Étape 4 : Concevez votre en-tête
Utilisez l'éditeur Elementor pour concevoir votre conception d'en-tête à la perfection. Avec son interface intuitive, vous pouvez facilement incorporer et personnaliser des éléments tels que des logos, des menus de navigation, du texte, des boutons, des images et même des codes courts en les faisant glisser et en les déposant depuis la sélection sur le panneau latéral de gauche.
De plus, Elementor propose de nombreuses options de personnalisation pour le style, les couleurs, la typographie et l'espacement, vous permettant d'affiner chaque élément pour l'aligner sur votre vision de conception. N'hésitez pas à explorer les widgets et les fonctionnalités d'Elementor pour insuffler à votre en-tête dynamisme et interactivité, le rendant vraiment unique.
Continuez à lire : Comment modifier le pied de page WordPress en 5 méthodes simples (guide étape par étape)
Étape 5 : Prévisualisez votre en-tête
En utilisant Elementor, vous pouvez avoir un aperçu de l'en-tête que vous avez créé en cliquant simplement sur l'icône en forme d'œil située à côté du Publier . Cela vous permet de revoir votre conception et d'effectuer les ajustements nécessaires sans affecter vos pages Web en direct.
Étape 6 : Enregistrer le modèle d'en-tête
Lorsque vous cliquez sur le bouton Publier, une boîte de dialogue apparaîtra, vous invitant à choisir où afficher l'en-tête que vous avez créé. Si vous manquez de sélectionner une option dans cette fenêtre contextuelle, passez simplement à l'étape suivante.
Étape 7 : attribuez l'en-tête à votre site Web
Pour présenter votre en-tête personnalisé sur votre site Web, vous devez l'attribuer à des pages ou à des conditions particulières. Commencez par accéder à votre tableau de bord d’administration WordPress, puis accédez à Modèles. Vous trouverez plusieurs options sous le nom que vous avez attribué à la section En-tête. Cliquez sur Modifier dans ce panneau. Faites défiler vers le bas et sélectionnez Conditions d'affichage, où vous pouvez configurer les règles d'affichage pour insérer l'en-tête.
Plus de lectures : Guide d'accessibilité WordPress : Conformité aux normes WCAG
Étape 8 : Publiez votre modèle d'en-tête
Après avoir paramétré les conditions d'affichage, activez votre en-tête personnalisé sur votre site internet en cliquant sur le Publier .
Votre nouvel en-tête est maintenant en ligne ! Le plugin Header Footer d'Elementor est polyvalent et visuellement attrayant pour la conception et la personnalisation des en-têtes. Avec ce plugin, vous pouvez créer des en-têtes de style statique, collant ou même transparent.
Lire la suite : Elementor bloqué sur l'écran de chargement ? Voici plus de 25 méthodes exploitables pour y remédier !
Personnalisation de l'en-tête WordPress à l'aide de l'édition complète du site
L'édition complète du site dans WordPress offre une nouvelle approche de la personnalisation, allant au-delà des limites de l'ancien Theme Customizer. Bien que vous puissiez toujours utiliser le personnalisateur, l'éditeur de site constitue la nouvelle frontière : un canevas pour la liberté de création (bien qu'il soit toujours en version bêta). Par exemple, lorsque vous travaillez avec le thème Twenty Twenty-Three , l'éditeur de site s'avère inestimable pour personnaliser les polices, les couleurs, les styles de boutons de votre en-tête, etc.
Vérifiez ceci : 25 meilleurs thèmes WordPress Elementor SaaS
Accéder à l'en-tête WordPress dans l'éditeur de site
- Accédez à Apparence > Éditeur de site dans votre administrateur WordPress
- Au chargement de l'éditeur, vous arriverez sur les paramètres d'accueil
- Pour accéder aux paramètres d'en-tête, cliquez sur le logo WordPress (en haut à gauche) ou sur la flèche déroulante, puis choisissez Parcourir tous les modèles.
- Ensuite, sélectionnez Parties du modèle dans le menu WordPress.
- Enfin, cliquez sur En-tête pour modifier l'en-tête de votre site
Styliser l'en-tête
Le thème Twenty Twenty-Three est livré avec une structure d'en-tête de base. Cependant, vous pouvez ajouter ou supprimer des blocs WordPress à votre guise. Passons en revue la modification de cette de modèle pour créer un en-tête simple et personnalisé :
- Cliquez sur l' d'affichage en liste pour voir la structure de l'en-tête
- Vous trouverez un bloc Groupe contenant une Ligne avec deux blocs enfants : Titre de la page et Navigation
- La ligne est déjà centrée verticalement et définie sur toute la largeur
Personnalisation de l'en-tête
- Supprimez le de titre du site en développant son menu de points de suspension et en sélectionnant Supprimer le titre du site.
- Ajoutez le bloc Icônes sociales en cliquant sur l'icône plus à côté de Navigation et en recherchant des icônes sociales.
- Ajoutez les icônes de plateformes sociales de votre choix (Facebook, Instagram, etc.) via la boîte modale
- Stylisez le bloc d'icônes sociales en ajustant la disposition, la justification, l'orientation, le comportement des liens, les couleurs et l'espacement.
- Ajoutez une couleur d'arrière-plan au bloc Ligne via Paramètres supplémentaires > Arrière-plan
- Insérez un nouveau bloc Row pour des éléments d'en-tête supplémentaires
- Déplacez le bloc de navigation vers la nouvelle ligne en le faisant glisser
- Ajoutez un bloc Button à la première ligne et stylisez-le (texte, couleur, rayon de bordure)
- Ajoutez le bloc Logo du site à la deuxième ligne, téléchargez votre logo et configurez les paramètres
- Assurez-vous que la deuxième ligne est définie sur toute la largeur et que la justification est « espace entre les éléments »
- Définissez l'alignement des lignes pour qu'il soit aligné au milieu .
En organisant judicieusement les blocs et en ajustant leurs styles, vous pouvez avoir un contrôle granulaire sur chaque aspect de votre en-tête WordPress et créer un en-tête personnalisé qui s'aligne parfaitement sur votre image de marque tout en offrant une expérience utilisateur optimale.
Besoin de personnalisation pour votre en-tête WordPress ?
Nous couvrons la conception WordPress de sites complets avec un style optimal, à des coûts révolutionnairement bas ! Profitez de cette offre avec un paiement unique de 999 $.
Conclusion
N'oubliez pas que la personnalisation des en-têtes WordPress vous permet de faire une impression durable sur les visiteurs, reflétant l'identité unique de votre marque. Que vous utilisiez le personnalisateur de thème, l'éditeur de site complet ou des plugins spécialisés, profitez des outils puissants à votre disposition. Expérimentez avec différentes mises en page, couleurs et éléments pour créer un en-tête visuellement captivant et convivial qui stimule l'engagement et les conversions. Faites preuve de créativité, donnez la priorité aux fonctionnalités et affinez continuellement votre en-tête pour garder une longueur d'avance.
