Wix Website van Scratch - Het kopmenu

• Mei 8, 2024

In deze zelfstudie blijven we werken aan onze Wix-website die we zijn gestart vanuit een lege sjabloon. We zullen een hoofdmenu toevoegen in de koptekstsectie.

Onze eerste taak is om een ​​gekleurde achtergrond aan de koptekst toe te voegen.

1. Selecteer de koptekst en klik op de knop Koptekstontwerp wijzigen.
   
   Op dit punt is de koptekst ingesteld op Geen kleur. Laten we dat veranderen in wit.
   
   
2. Klik op het koptekstontwerp net onder de kleur Geen.
   
   
3. Klik op de knop Ontwerp aanpassen onderaan het venster.
   
   
4. Stel de vulkleur en dekking in op 100% wit voor de achtergrond en de middelste achtergrond.
   
   
5. Stel voor de randinstellingen de bovenrand en onderrandbreedte in op 0.
   
   
6. Zet de hoekradius op 0 en schakel de schaduw inschakelen uit.
   
   

Nu kunnen we het bovenste menu toevoegen.

1. Klik in het linkermenu op het Plus-pictogram en kies Menu in de lijst.
   
   
2. Klik op een van de horizontale menu's om deze aan de pagina toe te voegen.
   
   U ziet een nieuw menu op de pagina met de link naar onze enige pagina - Home.
   
   
3. Klik en sleep het menu naar de koptekstsectie. Wanneer u de tekst ziet Toevoegen aan koptekst, laat het menu los.
   
   Omdat we ons menu op de pagina zullen centreren, breiden we het menuvak uit over de breedte van 980 px.
   
   
4. Terwijl het menuvak is geselecteerd, sleept u de uiteinden van het vak om het 980-gebied te vullen. Gebruik de linker- en rechterrichtlijnen als richtlijn.
   
   Het menu moet standaard al zijn ingesteld op centreren. U kunt dit zien omdat de Home-link zich in het midden van het vak bevindt. Nu kunnen we het menu aanpassen.
   
   
5. Terwijl het menu nog steeds is geselecteerd, klikt u op het pictogram Ontwerp (penseel) om het venster Horizontaal menuontwerp te openen. Klik op de knop Ontwerp aanpassen onderaan het venster.
   
   Als u op Vulkleur en dekking klikt, ziet u dat de menuachtergrond al is ingesteld op 100% wit. Laten we deze instelling behouden en doorgaan naar de tekst.
   
   In de vorige tutorial hebben we het lettertype ingesteld op Futura Light voor het hoofdtekstthema. Laten we hetzelfde doen voor het menu.
   
   
6. Klik op het T-pictogram om het gedeelte Tekstinstellingen te openen.
   
   
7. Klik op de pijl rechts van het gedeelte Lettertype en kies Futura Light in de lijst.
   
   Laten we de standaardkleurinstelling voor de normale menutekst behouden. Maar we zullen de tekstkleur van het menu Hover and Clicked wijzigen in goud.
   
   
8. Klik op de link Hover in het venster. Klik op het kleurvak om de kleurkiezer te openen. Klik op de link Kleur toevoegen, wijzig de instelling Kleur in # bc9b5d en klik op de knop Toevoegen. Sluit de kleurenkiezer.
   
   
9. Herhaal de vorige stap voor de instelling Geklikt. Maar deze keer kun je de goudkleur kiezen in het gebied My Colors.
   
   Ten slotte willen we de standaardtekst voor de paginakoppeling van HOME wijzigen in de naam van de website.
   
   
10. Terwijl het menu nog steeds is geselecteerd, klikt u op de knop Menu beheren in het pop-upmenu.
    
    
11. Zoek in het menu Pagina's de HOME-pagina en klik op de link rechts. Kies Naam wijzigen in de lijst. Voeg de nieuwe linktitel toe en klik op Gereed.
    
    Onze volgende taak is om het koptekstgedeelte iets groter te maken dan de hoogte van het menu.
    
    
12. Selecteer het menu en sleep het omhoog naar de bovenkant van het koptekstgebied.
    
    
13. Klik op een leeg gedeelte van de koptekst om de rek uitrekken te zien. Sleep de hendel omhoog.
    
    

Schermafbeeldingen gebruikt met toestemming van Wix.com, Inc.