Articles sur : Création de site
Cet article est aussi disponible en :

Comment créer un en-tête avec un logo positionné au centre avec Ex2-Theme ?

Créer un en-tête avec un logo positionné au centre avec Ex2-Theme



Ex2-Theme est livré avec le constructeur visuel d'en-tête de pied de page par glisser-déposer. Cet outil vous offre une grande liberté lors de la conception de vos en-têtes et pieds de page. L'un des modèles intéressants de conceptions qui peuvent être réalisés avec le constructeur d’en-tête consiste à créer un en-tête incluant un logo positionné au centre. Ce type de design ne nécessite que quelques minutes à faire.

En suivant les étapes simples présentées dans cet article, vous pouvez construire facilement un en-tête qui affiche votre logo au milieu avec vos éléments de menu répartis de chaque côté de celui-ci.

Comment accomplir cela ?



Pour réaliser ce design d'en-tête avec le thème Ex2, vous devrez utiliser constructeur d’en-tête et trois éléments :

Identité et logo du site
Menu primaire
Menu secondaire

Peu importe si vous avez commencé à créer votre site Web à partir de zéro ou importé l'un de nos modèles de démarrage, la configuration d'en-tête par défaut que vous verrez dans le constructeur d'en-tête devrait se composer de l'élément "Identité et logo du site" d'un côté, associé à l'élément “Menu Primaire” sur un autre :

Pour commencer à construire votre en-tête avec un logo centralisé, il est d’abord nécessaire de créer vos menus.

Création d'un menu principal et secondaire



À partir du tableau de bord WordPress, accédez à Apparence > Menus pour configurer les options liées à vos menus. Vous pouvez également y accéder à partir de la section “Menus” disponible à partir de Apparence > Personnaliser.

Suivez les étapes étapes pour commencer le processus de création des deux menus nécessaires pour votre en-tête:

Étape 1: Cliquez sur le bouton « Créer un nouveau menu » pour entreprendre la création.
Étape 2: Nommez votre menu. Vous pouvez nommer le menu comme vous le souhaitez. Afin de faciliter le suivi des choses, nous suggérons de nommer ce premier menu "Menu de gauche" puisqu’il sera ajouté à la gauche du logo dans l'en-tête
Étape 3: Sélectionnez les éléments que vous souhaitez ajouter au menu. Si vous avez besoin de créer de nouveaux éléments, vous pouvez simplement cliquer sur le bouton "Ajouter des éléments".
Étape 4: Faites défiler jusqu'à la section "Emplacements des menus" et marquez ce menu comme "Menu principal" :
Étape 5: Retournez à Apparence> Personnaliser> Menus et répétez les étapes 1 à 3 pour créer votre deuxième menu. Il est alors recommandé de nommer ce menu « Menu de droite » mais vous pouvez le nommer comme il vous convient.
Étape 6: Faites défiler jusqu'à la section "Emplacements des menus" et marquez ce menu comme "Menu secondaire".

Créez votre en-tête



Maintenant que vous avez créé vos menus, accédez à Apparence > Personnaliser > Constructeur d'en-tête et suivez ces étapes pour créer votre en-tête :

Étape 1: Ajoutez votre élément "Identité et logo du site" à la section centrale de l'en-tête principal et insérez votre logo. L'en-tête principal est l'en-tête du milieu dans votre générateur d'en-tête visuel.
Étape 2: Enfin, pour créer votre en-tête avec un logo positionné au centre comme indiqué précédemment, ajoutez vos éléments de menu principal et secondaire. Cliquez sur la section de gauche de l'en-tête principal et ajoutez l'élément de menu principal. Cliquez sur la droite et ajoutez également le menu secondaire. Cliquez sur "Publier" pour enregistrer votre en-tête. Vous pouvez positionner les menus plus près des côtés de votre site Web en déplaçant (glisser-déposer) les éléments du menu principal et secondaire.
Étape 3: Cette étape est facultative et dépendra de la conception de votre logo et des autres options d'identité du site (si vous avez activé le titre du site ou le slogan). Vous pouvez ajouter des marges à votre élément Identité du site et logo pour que votre logo soit à égale distance des deux menus. L'utilisation du pourcentage (%) comme unité de taille garantira que cette distance s'affiche bien sur tous les écrans

Mis à jour le : 20/03/2023

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !