Kadence Header- en navigatieblokken
Kadence theme heeft als enige een set Gutenberg-blocks waarmee je volledig aanpasbare headers rechtstreeks in de native WordPress-blokeditor kunt bouwen: de Kadence Header/navigatie blokken.
Wat zijn Kadence Header- en navigatieblokken?
De Kadence Header- en navigatieblokken bestaan uit drie Gutenberg blokken die samenwerken. Ze bieden alles wat je nodig hebt om een aanpasbare, professioneel ogende header en navigatie te bouwen.
- Met het Header blok kun je aanpasbare headers ontwerpen, of je nu een sticky of transparante header nodig hebt om het uiterlijk en de functionaliteit van jouw site te verbeteren.
- Met het Navigatieblok kun je dynamische menu’s maken, inclusief submenu’s (vervolgkeuzemenu’s) en megamenu’s, wat maximale flexibiliteit biedt voor de structuur van jouw site.
- Tenslotte kun je met het Navigatie link blok individuele navigatielinks nauwkeurig afstemmen met een nauwkeurige styling om ervoor te zorgen dat elk element aansluit bij jouw ontwerpvisie
Samen vormen deze drie blokken een complete oplossing voor het creëren van visueel verbluffende en zeer functionele headers en navigatie, allemaal binnen de native WordPress-blokeditor.
Wat deze blokken echt baanbrekend maakt, is dat Kadence de eerste blokplug-in is die naadloos met beide integreert:
Dus of je nu een modern FSE-thema of een klassiek thema gebruikt, je hebt nu de flexibiliteit en controle om de perfecte header en navigatie voor jouw site te creëren.
Hoe het werkt
Bekijk onderstaande video waarbij de complexe header van Webflow opnieuw wordt gecreëerd met behulp van de nieuwe Kadence Header- en navigatieblokken.
“Wat was de motivatie om een headerbuilder in Kadence blokken te maken terwijl het Kadence-thema al een headerbuilder heeft?”
Deze, m.i. terechte, vraag werd gesteld aan het Kadence team. Lees hieronder hun antwoord.
Hoewel de headerbuilder van het Kadence-thema een krachtig hulpmiddel is en deze voor de meeste gebruikers voldoende is, heeft deze wel enkele beperkingen. Door een headerbuilder in blokken onder te brengen, wilden we twee belangrijke problemen oplossen:
1. We willen dat gebruikers volledige controle en flexibiliteit hebben over elke ontwerpkeuze
Met de headerbuilder van het Kadence Theme konden gebruikers bijvoorbeeld niet meer dan 2 knoppen toevoegen, randen tussen headerelementen toevoegen of verticale headers implementeren zonder enige creativiteit te gebruiken (zoals het plaatsen van gewenste blokken in de HTML-widget) of het toevoegen van aangepaste code.
Met de Kadence Header/navigatie blokken wilden we gebruikers de ultieme flexibiliteit en controle geven over hun headerontwerpen. Of het nu gaat om het toevoegen van meerdere knoppen, het maken van randen of het bouwen van complexe lay-outs zoals verticale kopteksten, deze blokken maken het mogelijk – allemaal binnen de eigen blokeditor.
2. We wilden gebruikers van volledige sitebewerking (FSE) in staat stellen betrouwbare headers te maken
Veel FSE-thema’s worden geleverd met vooraf ingestelde lay-outs en opties die niet de aanpassing of geavanceerde controle bieden die nodig is voor complexe ontwerpen. Gebruikers worden vaak geconfronteerd met uitdagingen op het gebied van reactievermogen, geavanceerde functies zoals plakkerige of transparante headers en de mogelijkheid om lay-outs te verfijnen zonder afhankelijk te zijn van aangepaste code of plug-ins van derden. Dit gebrek aan flexibiliteit heeft het moeilijk gemaakt om unieke, op maat gemaakte kopontwerpen te realiseren.
Met de Kadence Advanced Header-/Navigatie blokken kunnen FSE-gebruikers nu genieten van hetzelfde aanpassingsniveau als traditionele themagebruikers, zonder de beperkingen. Je kunt volledig responsieve headers maken met geavanceerde functies, zoals sticky of transparante headers, en elk detail rechtstreeks in de blokeditor verfijnen. Hierdoor kunnen gebruikers unieke, betrouwbare headers bouwen die zowel visueel aantrekkelijk als functioneel zijn.
Belangrijkste kenmerken van de Kadence Header- en navigatie blokken
#1 Gebruikersgemak
De Kadence Header- en navigatieblokken zijn ontworpen voor gebruiksgemak, waardoor gebruikers snel en efficiënt eenvoudige menu’s kunnen maken.
Onboarding verloopt naadloos, met een wizardachtige ervaring en begeleide tutorials, zodat gebruikers de headerfunctionaliteit vanaf het begin begrijpen.
Gebruikers kunnen helemaal opnieuw beginnen met een blanco sjabloon of kiezen uit een verscheidenheid aan vooraf gebouwde ontwerpen, waaronder basiskoppen, kopteksten met meerdere rijen en mobielspecifieke lay-outs. Vooraf gebouwde sjablonen en de mogelijkheid om bestaande klassieke WordPress-menu’s te importeren zorgen voor een soepele overgang.
De visuele headerbuilder beschikt over intuïtieve drag-and-drop-functionaliteit voor eenvoudige blokpositionering, terwijl de navigatie een hiërarchische, visuele menu-editor biedt met gemak van slepen en neerzetten.
#2 Complexiteit vereenvoudigd
De Kadence Header- en navigatieblokken bieden complexe headermogelijkheden waarmee gebruikers ingewikkelde megamenu’s kunnen ontwerpen met rij-indelingen, pictogrammen en multimedia-elementen.
We hebben de complexiteit van het bouwen van een header overgenomen en vereenvoudigd tot een gebruiksvriendelijke ervaring waar zelfs niet-technische gebruikers van kunnen genieten. Met megamenu containers kunnen gebruikers een breed scala aan onderliggende blokken toevoegen om zeer gedetailleerde menu’s met geavanceerde styling te bouwen. De blokken ondersteunen ook andere Kadence-blokken binnen headers, waardoor de functionaliteit toeneemt.
Voor mobiele ervaringen omvat de functie gespecialiseerde lay-outs en opties voor tablets en mobiele apparaten. Bovendien ondersteunt het sticky en transparante headers, waardoor gebruikers nog meer flexibiliteit krijgen voor creatieve ontwerpen.
#3 Meerdere manieren van bewerken, allemaal synchroon
Door de blokeditor te combineren met een visuele ervaring, kunnen gebruikers genieten van een dubbele aanpak voor de headerbuilder. Hierdoor kunnen gebruikers headers bouwen via de blokeditor of de visuele interface in de thema opties, wat flexibiliteit biedt voor verschillende workflows.
Voor navigatie kunnen gebruikers menu’s visueel bewerken in de Gutenberg-editor of in een hiërarchische weergave zoals de klassieke menu-editor. Beide manieren van bewerken worden gesynchroniseerd, zodat wijzigingen die in één interface worden aangebracht, in alle andere worden weerspiegeld, waardoor alles consistent blijft.
Conclusie
De nieuwe Kadence Header- en navigatie blokken geven gebruikers de mogelijkheid complexe en visueel aantrekkelijke navigaties te bouwen naast de al beschikbare headerbuilder in de thema opties.
Daarnaast is gebruik zowel mogelijk in de klassieke thema als FSE thema’s waarmee de Header- en navigatieblokken future-ready zijn.