HEY

Neem deel aan de volgende Webflow uitdaging

Hoe voeg ik een navigatiemenu toe aan Webflow?

Bijna alle websites hebben een navigatiemenu. Alleen, hoe voeg je een navigatiemenu toe op Webflow? Ik zal het je nu laten zien!

Bijgewerkt op

22/6/2020

Webflow navigatiemenu
Foto door Sharon McCutcheon op unsplash

Bijna alle websites hebben een navigatiemenu. Zeer praktisch, het stelt gebruikers in staat om door uw site te navigeren (zoals de naam al aangeeft). Maar de echte vraag is: hoe voeg je een navigatiemenu toe op Webflow?

3 stappen om een navigatiemenu te maken op Webflow

Het toevoegen van een navigatiemenu aan Webflow gebeurt in slechts 3 stappen:

  • U moet op de "+" knop aan de linkerkant (in de zijbalk) klikken.
  • In deze balk zoekt u naar het tabblad: componenten.
  • Onder dit tabblad klikt u op "navigatiemenu". Het zal onmiddellijk functioneel zijn op verschillende schermversies (smartphone, tablet en desktop).

En hop, je hebt een navigatiemenu gemaakt! Het enige wat u nu nog hoeft te doen is het aan te passen aan het ontwerp van de site (het in te voegen logo of beeld, de kleur van de achtergrond, tekst, etc.). Ga hiervoor naar de rechter zijbalk. Ik heb het al uitgelegd in een ander artikel over CSS: deze balk is gewijd aan CSS (kleur, tekstgrootte, typografie en vele andere).

Elke pagina van uw menu moet nog worden aangepast. Wees niet ontmoedigd, deze stap zal niet veel tijd in beslag nemen. Ik zal je een techniek laten zien om het snel te doen: geef ze een les. Alle elementen die bij deze klasse horen zullen automatisch worden aangepast wanneer je deze klasse zelf aanpast (in plaats van het één voor één te doen).

Er is een YouTube-video waarin ik dit beschrijven aan de onderkant van het artikel. Steun me door subscting aan het kanaal van YouTube "Happy Desk design"

Webflow navigatiemenu
Foto door Greyson Joralemon op Unsplash

Alleen, is het maken van een menu verplicht?

De voordelen van een navigatiemenu?

Tegenwoordig zou het opzetten van een navigatiemenu geen optie meer moeten zijn, maar een noodzaak. Het is een standaard geworden in de webpraktijk. Een navigatiemenu heeft inderdaad een heel specifieke rol: dankzij dit menu kan een internetgebruiker zich gemakkelijk oriënteren, zich verplaatsen en zijn weg vinden op uw site.

Meestal worden deze menu's bovenaan de pagina's geplaatst. Deze positie belooft veel ruimte te besparen, daarom heb ik in mijn voorbeeld besloten om u te laten zien hoe u een Webflow navigatiemenu aan de bovenkant van de pagina kunt toevoegen. Als u meer details wilt (bijvoorbeeld een verticaal menu), stel ik u voor om een volledige Webflow training te volgen :)

In ieder geval past een horizontaal menu beter bij een moderner en trendy design. Het stelt ook de internetgebruikers gerust omdat het hun surfgedrag in stand houdt.

Aan de andere kant, voor website-eigenaren, helpt een Webflow navigatiemenu bovenaan de pagina hen om hun producten, diensten te markeren... Ze zijn onmiddellijk zichtbaar, zelfs op het eerste gezicht.

Webflow navigatiemenu
Foto door Denise Chan op Unsplash

Extra tips

Als u kiest voor horizontale navigatiemenu's, zorg er dan voor dat het aantal velden dat ze bevatten redelijk is. In het algemeen zijn 8 items het maximum. Anders kan het ontwerp in gevaar komen (en de zichtbaarheid van de pagina's).

Bovenal moet een menu (ongeacht het type) in overeenstemming zijn met de rest van het grafische handvest van een website. Trouwens, is dat niet de echte rol van een webdesigner?

Webflow navigatiemenu
Foto door Robert Katzki op Unsplash

Conclusie
Kortom, ik heb u alleen de basis gegeven voor het maken van navigatiemenu's op Webflow. Ik nodig u echter uit om mijn training te volgen voor meer gedetailleerde informatie over Webflow menu's :)

YouTube: Webflow Navigatiemenu

Kom terug naar deze pagina wanneer je maar wilt. Heb je nog ideeën bedacht die ik misschien vergeten ben? Zo ja, wat zijn dat dan? Laat hieronder een reactie achter of stuur een e-mail naar hello@happydesk.be.
Kevin Palombo, manager van Happydesk.

VRIJE TRAINING

Begin met het volgen van de Gratis Training, u ontdekt de basisprincipes van Webflow en een voorproefje van wat u te wachten staat in de Webflow Expert en Creative Business training.

Begin gratis

Koffiepauze

4 items die je misschien leuk vindt

VRIJE TRAINING

Registreer hier voor toegang tot
de gratis training

Begin met het volgen van de Gratis Training, u ontdekt de basisprincipes van Webflow en een voorproefje van wat u te wachten staat in de Webflow Expert en Creative Business training.

Start de gratis training