Nous allons concevoir un en-tête personnalisé comprenant un menu et un logo en utilisant WordPress et Divi. L’objectif est de construire un header similaire à ce modèle en guise d’exercice.

Il se compose d’un logo à gauche et d’un menu à droite.

Prérequis

• Accès à un site WordPress avec le thème Divi activé.
• Connexion à l’interface d’administration WordPress.
• avoir suivi le tuto pour créer une page avec Divi

Étape 1 : Accéder au constructeur de thème Divi

1. Connectez-vous à votre tableau de bord WordPress.
2. Dans la colonne de gauche, trouvez le menu « Divi » (vers le bas de la colonne) et cliquez dessus.
3. Dans le sous-menu qui s’affiche, cliquez sur « Theme Builder » pour accéder à l’écran principal du constructeur de thème.

💡 Le « theme builder » est l’outil de Divi qui permet de construire de façon visuelle votre header mais aussi votre footer ultérieurement.

Étape 2 : Ajouter un en-tête global

1. Dans l’écran « Theme Builder », cliquez sur « Ajouter un en-tête global ».
2. Sélectionnez ensuite l’option « Construire un en-tête global » pour ouvrir l’éditeur visuel de Divi.

Étape 3 : Ajouter une structure et insérer un module menu

1. Une fois dans l’éditeur visuel, ajoutez une nouvelle ligne (cliquer sur le [+] vert) en choisissant une structure à une colonne.
2. Cliquez ensuite sur le bouton [+] pour insérer un module dans cette colonne.
3. Sélectionnez le module « Menu » dans la liste des modules disponibles.

💡 Un « menu » permet d’afficher la liste des pages que vous voulez afficher en haut de votre site. En général se sont des pages de catégories de produits, de prestations, de contact… Le contenu du menu sera ajouté plus bas dans ce tutoriel.

Étape 4 : Ajouter un logo

1. Cliquez sur le module « Menu » pour ouvrir ses paramètres (roue crantée en forme d’étoile [*])
2. Dans l’onglet « Contenu », recherchez la section « Logo », cliquez sur le [+] pour l’ajouter
3. Téléchargez votre logo ou sélectionnez-le dans votre bibliothèque média.

💡 Les modules de Divi se composent tous de la même façon : un onglet « Contenu » permet de modifier le texte ou les images du module, un onglet « style » permet de modifier les couleurs, les polices, les espacements…

Étape 5 : Modifier le style du menu

1. Accédez à l’onglet « Style » des paramètres du module menu.
2. Personnalisez les éléments du menu : police, taille, couleur, etc., pour correspondre à votre charte graphique ou  celle de notre exemple de départ, qui utile une police « Galada » et du texte de couleur « rouge ».

Étape 6 : Aligner le texte du menu

1. Toujours dans l’onglet « Style », localisez l’option d’alignement du texte.
2. Sélectionnez « Aligner à droite » pour que le menu soit positionné correctement.

Étape 7 : Ajuster les marges internes

💡 Par défaut, Divi ajoute des marges de 15px sur les lignes (zones vertes) et les section (zones bleues) pour des raisons esthétiques. C’est en général utile mais sur le header c’est ennuyeux car sur cette zone l’espace est réduit et précieux. Donc on va le « forcer » à 0px.

1. Ouvrez les paramètres de la ligne contenant le module menu.
2. Réglez les marges internes (padding) de la ligne à 0 px pour optimiser l’espace.

1. Faites de même pour la section contenant cette ligne en fermant le module menu (⚠️ sauvegarder auparavant votre travail en cliquant sur le coche verte en bas à droite de votre module « menu ») puis en cliquant sur le [*] bleu pour en modifier les paramètres. Puis aller dans l’onglet « Style » de la section.

Étape 8 : Ajuster la largeur du logo

1. Retournez aux paramètres du module menu.
2. Dans l’onglet « Conception », ajustez la largeur du logo à 200 px pour une taille adaptée.

Étape 9 : Modifier les dimensions de la ligne

1. Ouvrez les paramètres de la ligne.
2. Activez l’option « Largeur personnalisée de gouttière » et ajustez les dimensions selon vos besoins.
3. Sauvegardez en cliquant sur la coche verte en bas à droite du menu.

Étape 10 : Sauvegarder le modèle

1. Dans l’éditeur visuel, cliquez sur le bouton « Enregistrer » en bas à droite. Si besoin cliquer sur les 3 petits points au centre en bas pour révéler le menu du bas.
2. Revenez à l’écran principal du constructeur de thème et cliquez sur « Sauvegarder » pour appliquer les modifications globales.

Étape 11 : Créer un menu dans WordPress

1. Dans le tableau de bord WordPress, accédez au menu « Apparence » > « Menus ».
2. Cliquez sur « Créer un nouveau menu », donnez-lui un nom et définissez-le comme menu principal.
3. Ajoutez les pages souhaitées au menu en les sélectionnant dans la liste et en cliquant sur « Ajouter au menu ».

Résultat final

Une fois toutes ces étapes complétées, vous obtiendrez un en-tête personnalisé et fonctionnel.