Leer hoe u een plakkerig menu kunt maken voor de hoofdnavigatie van uw WordPress-website! Vastgezette menu's helpen de gebruikerservaring te verbeteren door het menu van uw website gemakkelijker beschikbaar te maken voor sitebezoekers. Bovendien kan het de algehele uitstraling van uw site helpen verbeteren. Laten we erop ingaan!

Inhoudsopgave

1. Navigeer naar de site-editor

De eerste stap in dit proces is navigeren naar de “Site-editor” binnen het WordPress-beheergebied. De Site-editor is beschikbaar voor “Blokthema’s” in WordPress, ervan uitgaande dat u WordPress versie 5.9 of nieuwer gebruikt.

Ga naar om naar de Site-editor te navigeren Uiterlijk> Editor (rode pijl in de bovenstaande afbeelding) vanuit de hoofdnavigatie in het WP Admin-gebied.

Klik op het gebied met de hoofdinhoud aan de rechterkant van het scherm (omlijnd in lichtblauw en aangegeven door de blauwe pijl in de bovenstaande afbeelding). Hiermee gaat u naar de Blok-editor in de Site-editor.

Aan de rechterkant, onder het tabblad 'Pagina', zie je een rij met het label 'Sjabloon' (blauw omlijnd in de bovenstaande afbeelding). Klik op de sjabloonnaam/link (rode pijl). Klik vervolgens op ‘Sjabloon bewerken’ (groene pijl – soms is ‘Sjabloon bewerken’ een kleine blauwe tekstlink onder de vervolgkeuzelijst waarin de naam van uw sjabloon wordt weergegeven).

2. Bewerk uw sjabloon

U bevindt zich nu in de Sjablooneditor voor de startpagina van uw website. (Als u geen startpagina voor uw site heeft ingesteld, kunt u uitchecken deze tutorial over het instellen van een statische startpagina voor uw WordPress-website).

Bovenaan de sjabloon bevindt zich uw hoofdnavigatie voor uw pagina – ook wel de ‘Header’ van uw webpagina genoemd. Wanneer u met uw muis over dit element beweegt, ziet u een paars kader waarin dit wordt aangegeven (rode pijl in de bovenstaande afbeelding). Dit geeft aan dat dit element a is “gesynchroniseerd patroon,” wat betekent dat als u een wijziging aanbrengt in één exemplaar van het patroon, de wijzigingen voor alle exemplaren op de hele site worden toegepast. Klik op dit gebied om het header-gesynchroniseerde patroon te selecteren.

Als dit het hoofdkopelement van uw site is, zou u nu moeten zien dat het gesynchroniseerde patroon het label 'Header' heeft in de blokwerkbalk.

3. Voeg uw koptekst toe aan een groep

Klik in de blokwerkbalk voor het geselecteerde headerpatroon op het pictogram "Opties" (rode pijl in de bovenstaande afbeelding) en selecteer "Groep" (groene pijl). Hierdoor wordt het gesynchroniseerde patroon in een groepsblok genest.

Je zult merken dat de blokwerkbalk nu het groepsblokpictogram heeft (blauwe pijl in de bovenstaande afbeelding) en dat de omtrek rond het hoofdnavigatiegebied nu blauw is in plaats van paars (rode pijl).

Houd er rekening mee dat dit de breedte van uw hoofdnavigatiemenu kan veranderen. Om de breedte aan te passen, beweegt u uw muis over het gesynchroniseerde koptekstpatroon en klikt u om het te selecteren (rode pijl).

Klik in de blokwerkbalk voor het header-gesynchroniseerde patroon op het pictogram "Uitlijnen" (groene pijl) en verander dit terug naar de gewenste breedte (blauwe pijl - in mijn geval heb ik "Brede breedte" geselecteerd).

Om terug te keren naar het groepsblok, klikt u op het pictogram ‘Groep selecteren’ in de werkbalk Koptekstblok (roze pijl).

WordPress vereenvoudigd: cursus krachtige websites bouwen door Davies Media Design

4. Stel de groep in op “Sticky”

Terwijl de groep is geselecteerd, navigeert u naar het tabblad ‘Blokkeren’ onder de zijbalk Instellingen aan de rechterkant van het scherm (rode pijl in de bovenstaande afbeelding).

Klik op het menu-item met het label “Positie” (groene pijl). Je ziet nu een vervolgkeuzelijst met het label 'Standaard' (roze pijl). Klik op de vervolgkeuzelijst en selecteer de optie "Sticky" (blauwe pijl).

Navigeer naar de bovenkant van de editor en klik op de knop ‘Opslaan’ (rode pijl) en klik vervolgens nogmaals op ‘Opslaan’. U heeft nu een hoofdnavigatie in het stickmenu voor uw WordPress-website!

5. Stijl het plakmenu

Je kunt veel elementen van het nieuwe sticky-menu aanpassen/stijlen, maar voor deze tutorial voeg ik eenvoudigweg een achtergrond toe achter het groepsblok om ervoor te zorgen dat het menu de gehele breedte van de webpagina bestrijkt.

Om dit te doen, navigeer ik met het groepsblok geselecteerd naar het tabblad ‘Stijlen’ van de zijbalk Instellingen (rode pijl in de bovenstaande afbeelding).

Onder 'Kleur' ​​klik ik op de optie 'Achtergrond' (blauwe pijl) en selecteer vervolgens het witte staal om de achtergrondkleur in te stellen op wit (groene pijl).

Nogmaals, ik klik twee keer op 'Opslaan' om de wijzigingen op te slaan.

Houd er rekening mee dat u altijd de breedte, hoogte of afstand van de kop van uw website kunt aanpassen onder het gedeelte ‘Afmetingen’ met behulp van de schuifregelaars ‘Opvulling’ en ‘Marge’.

U kunt een voorbeeld van uw site bekijken door op het apparaatpictogram (rode pijl) te klikken en vervolgens op 'Site bekijken' (groene pijl).

U kunt door uw website scrollen en zien hoe het plakkerige navigatiemenu bovenaan op zijn plaats blijft (groene pijl)!

Zodra u klaar bent met het bewerken van uw sticky-menu, klikt u op de knop 'Terug' bovenaan de editor (rode pijl). Hierdoor keert u terug naar uw webpagina in de zij-editor.

Om terug te keren naar het WP Admin-gedeelte klikt u eenvoudig op het logo in de linkerbovenhoek.

Dat is het voor deze tutorial! Als je ervan genoten hebt, dan kan dat leer WordPress met mijn diepgaande cursus over Udemy. Of u kunt andere gratis bekijken WordPress-videotutorials en Help-artikelen over WordPress op mijn website.

Verlaat de mobiele versie