Site Web Wix à partir de zéro - Le menu d'en-tête

• Mai 18, 2024

Dans ce didacticiel, nous continuerons à travailler sur notre site Web Wix que nous avons commencé à partir d'un modèle vierge. Nous ajouterons un menu principal dans la section d'en-tête.

Notre première tâche consiste à ajouter un arrière-plan de couleur à l'en-tête.

1. Sélectionnez l'en-tête et cliquez sur le bouton Modifier la conception de l'en-tête.
   
   À ce stade, l'en-tête est défini sur Aucune couleur. Changeons cela en blanc.
   
   
2. Cliquez sur le motif d'en-tête juste en dessous de la couleur No.
   
   
3. Cliquez sur le bouton Personnaliser la conception en bas de la fenêtre.
   
   
4. Définissez le paramètre Couleur de remplissage et opacité sur 100% de blanc pour l'arrière-plan et l'arrière-plan central.
   
   
5. Pour les paramètres de bordure, définissez la bordure supérieure et la largeur de bordure inférieure sur 0.
   
   
6. Réglez le Corners Radius sur 0 et désactivez l'option Enable Shadow.
   
   

Maintenant, nous pouvons ajouter le menu supérieur.

1. Dans le menu de gauche, cliquez sur l'icône Plus et choisissez Menu dans la liste.
   
   
2. Cliquez sur l'un des menus horizontaux pour l'ajouter à la page.
   
   Vous verrez un nouveau menu sur la page avec le lien pour notre page unique - Accueil.
   
   
3. Cliquez et faites glisser le menu vers la section d'en-tête. Quand vous voyez le texte Attacher à l'en-tête, relâchez le menu.
   
   Parce que nous allons centrer notre menu sur la page, nous allons étendre la zone de menu sur la largeur de 980 px.
   
   
4. Avec la boîte de menu sélectionnée, faites glisser les extrémités de la boîte pour remplir la zone 980. Utilisez les directives de gauche et de droite comme guide.
   
   Le menu doit être déjà réglé au centre par défaut. Vous pouvez le voir car le lien Accueil est au centre de la boîte. Maintenant, nous pouvons personnaliser le menu.
   
   
5. Le menu étant toujours sélectionné, cliquez sur l'icône Conception (pinceau) pour ouvrir la fenêtre Conception du menu horizontal. Cliquez sur le bouton Personnaliser la conception en bas de la fenêtre.
   
   Si vous cliquez sur Couleur de remplissage et opacité, vous verrez que l'arrière-plan du menu est déjà défini sur 100% blanc. Gardons ce paramètre et passons au texte.
   
   Dans le didacticiel précédent, nous avons défini la police sur Futura Light pour le thème de texte principal. Faisons de même pour le menu.
   
   
6. Cliquez sur l'icône T pour ouvrir la section Paramètres de texte.
   
   
7. Cliquez sur la flèche à droite de la section Police et choisissez Futura Light dans la liste.
   
   Gardons le paramètre de couleur par défaut pour le texte du menu régulier. Mais nous changerons la couleur du texte du menu Hover et Clicked en or.
   
   
8. Cliquez sur le lien Survoler dans la fenêtre. Cliquez sur la case de couleur pour ouvrir le sélecteur de couleurs. Cliquez sur le lien Ajouter une couleur, modifiez le paramètre Couleur sur # bc9b5d et cliquez sur le bouton Ajouter. Fermez le sélecteur de couleurs.
   
   
9. Répétez l'étape précédente pour le réglage cliquée. Mais cette fois, vous pouvez choisir la couleur dorée dans la zone Mes couleurs.
   
   Enfin, nous voulons changer le texte par défaut pour le lien de la page de HOME au nom du site Web.
   
   
10. Le menu étant toujours sélectionné, cliquez sur le bouton Gérer le menu dans le menu contextuel.
    
    
11. Dans le menu Pages, recherchez la page d'accueil et cliquez sur le lien à droite. Choisissez Renommer dans la liste. Ajoutez le nouveau titre du lien et cliquez sur Terminé.
    
    Notre prochaine tâche consiste à redimensionner la section d'en-tête à un peu plus que la hauteur du menu.
    
    
12. Sélectionnez le menu et faites-le glisser vers le haut en haut de la zone d'en-tête.
    
    
13. Cliquez sur une zone vide de l'en-tête pour voir la poignée d'étirement. Faites glisser la poignée vers le haut.
    
    

Captures d'écran utilisées avec la permission de Wix.com, Inc.

Instructions Vidéo: Nathanaël Bez - Son site web avec Wix.com (Mai 2024).