Gids

Een WordPress-header bouwen zonder plugin

Een header is het enige onderdeel van een website dat elke bezoeker ziet, en het onderdeel dat thema's meestal verbergen achter een instellingenscherm met negen opties. In Canvas is een header een record dat je in de editor opbouwt uit blokken, dus deze gids gaat over bouwen, niet over een rondleiding langs vinkjes.

Gepubliceerd op Laatst bijgewerkt Geschreven door het Canvas-team bij SemiColonWeb

Wat een header is in Canvas

Een header is een record, die in het WordPress-beheer net als een pagina wordt weergegeven en in dezelfde blokeditor wordt bewerkt. Die ene beslissing is wat de headerplugin uit je stack haalt.

Andere thema's bouwen de header ergens anders op. Blocksy en Astra bewaren hun headerbouwers allebei in de Customizer, een paneel met instellingen naast de site, los van de editor waarin je pagina's schrijft. Onze vergelijking met Blocksy zet de twee benaderingen naast elkaar.

De nesting

Een headerrecord bevat een Header Root. De root bevat een Header Container, die bepaalt of de header is ingekaderd of de volle breedte gebruikt, en of dat op het ene breekpunt anders is dan elders. De container bevat Header Zones, en een zone is een cel in de headerrij. Het logo gaat in de ene zone, de navigatie in de volgende, en een zoekicoon en een winkelwagen in de laatste.

Er zijn in totaal 22 blokken in de header-familie, en op een gewone site gebruik je er vier of vijf. Al het overige is er voor de dag dat je een winkelzoekfunctie, een taalkoppeling of een blok met openingstijden in de hoek nodig hebt.

Dit is op geen enkele manier een aparte editor. Als je pagina's in WordPress bewerkt, kun je ook een header bewerken, met dezelfde ongedaanmaakfunctie, blokinstellingen en sneltoetsen.

Maak het header-record aan

Open de lijst Headers in het Canvas-menu en voeg een nieuw record toe. Je hebt twee eerlijke startpunten.

Begin met een patroon

Voeg een headerpatroon in en je krijgt gewone blokken die voor je zijn gerangschikt, klaar om ze te herschikken, te hernoemen of te verwijderen. Headers vormen de grootste patroongroep in het product, van in totaal 183 patronen, dus er is meestal iets in de buurt van de vorm die je wilt. Dit is de snelste route en de aangewezen keuze bij een eerste opbouw.

Begin met een demo

Als je een van de 88 demowebsites hebt geïmporteerd, staat de header al als record op je site. Open hem en pas hem aan, of dupliceer hem en experimenteer met de kopie. Een werkende header bewerken leert je de structuur sneller dan een leeg canvas.

Geef het record een naam die aangeeft waarvoor het is, bijvoorbeeld Hoofdheader of Landingspagina-header. Je krijgt er binnen een maand drie en de namen zijn het enige waarmee je ze uit elkaar kunt houden.

Zones indelen

Zones regelen de lay-out, waardoor je bijna nooit met uitlijningsklassen hoeft te vechten.

  • Plaats een zone aan de rand. Een linkerzone voor het logo, een middenzone voor het menu en een rechterzone voor de acties is de indeling waar de meeste sites op uitkomen.
  • Groepeer dingen die bij elkaar horen. Een zoekicoon, een winkelwagen en een knop in één zone blijven samen een cluster en krijgen de ruimte van één groep.
  • Per breakpoint de volgorde wijzigen. De zone die op desktop op de derde plaats staat, kan op een telefoon op de eerste plaats staan, zonder een tweede headerrecord.
  • Beperk een zone tot een apparaatcategorie. Geef een zone opdracht om de apparaten over te slaan waar geen ruimte voor is, dan hoef je niets achteraf met CSS te verbergen.
  • Voeg je eigen CSS-classes toe aan een zone als je die vanuit een eigen stylesheet wilt aanspreken.

Bouw eerst de desktopindeling en laat die ongemoeid tot de onderdelen erin staan. Beslissingen over de indeling zijn veel makkelijker als er al echte inhoud in de rij staat.

De Canvas-headerbouwer in de blokkeneditor, met een header die bestaat uit een logoblok, een navigatieblok en een knop
Een header in de editor. Zones bevatten de onderdelen; elk onderdeel is een blok met een eigen instellingenpaneel.

Onderdelen toevoegen

Vul nu de zones in. Elk daarvan is een blok, en elk heeft een instellingenpaneel met de opties die dat blok ondersteunt.

  • Header Logo. Je logo, met aparte bestanden voor de sticky-status en de donkere status, zodat een transparante header over een donkere foto geen omweg nodig heeft.
  • Header Navigation. Het hoofdmenu, met dropdownmenu's en megamenupanelen. Het toont een WordPress-menu, dus het menu zelf beheer je nog steeds op de plek waar je het verwacht.
  • Header Search. Een pictogram dat een veld opent, of een veld dat altijd open staat, wat het beste bij het ontwerp past.
  • Header Button. De call-to-action, met de gebruikelijke instellingen voor grootte, stijl en link. Eén is overtuigend, drie is ruis.
  • Header Cart. De WooCommerce-winkelwagen met het aantal artikelen en een uitklapbare samenvatting, voor webwinkels.
  • Header Icon Link, Header Social en Header Info. Een telefoonnummer, een rij met sociale profielen, een klein blok met contactgegevens, een adres of openingstijden.

Megamenu's, wanneer een lijst niet genoeg is

Een megamenu is een eigen record, opgebouwd uit blokken en weergegeven door het Megamenu-blok, zodat een menu-item een paneel over de volle breedte opent met kolommen, afbeeldingen en knoppen. Mega Menu Column houdt het paneel op een raster. Gebruik het alleen wanneer een categorie echt structuur heeft, niet om een kleine site druk te laten lijken.

Sticky, transparant en de layoutvoorinstellingen

Gedrag komt uit presets, dat zijn bundels met lay-outinstellingen die je met één klik toepast en daarna aanpast. Kies het gedrag dat je wilt en wijzig daarna alles wat je wilt.

  • Transparant. Geen achtergrond, dus wat achter de header staat, is zichtbaar. Combineer het met de donkere of lichte logovariant zodat het logotype leesbaar blijft.
  • Semi-transparant. Een doorschijnende achtergrond, waardoor de afbeelding erachter zichtbaar blijft en de tekst leesbaar. Meestal de veiligere keuze boven een drukke foto.
  • Zwevend, en zwevend halftransparant of zwevend klein, waarbij de header binnen de pagina staat met ruimte eromheen, los van de randen van het venster.
  • Volledige breedte, sticky. Beslaat de volledige breedte van het venster en blijft vastgezet terwijl de pagina scrollt.
  • Sticky bij omhoog scrollen. Verdwijnt van de bovenkant wanneer de bezoeker omlaag scrolt en keert terug zodra hij weer omhoog scrolt, waardoor lange pagina's weer meer ruimte krijgen.

De sitebrede instellingen erachter

Headeropties zijn het grootste onderdeel van de Thema-opties, met 94 van de 533 velden, en ze bevatten de dingen die geen enkel record zou moeten beheren: de standaardheader, sticky-gedrag, hoogte, afstanden en het mobiele breekpunt. Een demo-import vult ze allemaal in, en jij past alleen de opties aan die je belangrijk vindt.

De headersectie van Canvas Thema-opties, met de instellingen voor de header op de hele site
Thema-opties, Header. De standaardinstellingen voor de hele site achter elk headerrecord.

De telefoonheader

Het meeste verkeer komt binnen via een telefoon, dus controleer dit eerst. Het goede nieuws is dat het hetzelfde record is.

  • Herschik in plaats van opnieuw bouwen. Zet het logo in het midden, de menuknop links en een belknop rechts, allemaal via zonevolgorde.
  • Laat weg wat niet past. Beperk de contactgegevens of de social-rij tot grotere schermen. Ze op een telefoon proppen helpt niemand.
  • Houd de tikdoelen groot. Een menuschakelaar en een telefoonicoon zijn de twee dingen waar mensen onderweg op tikken.
  • Stel het breekpunt bewust in. De breedte waarbij het menu inklapt is een instelling, dus een lang menu kan eerder inklappen dan een kort menu.
  • Overweeg een zijpaneel voor het mobiele menu. Een zijpaneel is een paneel dat vanaf de rand inschuift, met ruimte voor een echt menu, een zoekveld en een knop.

Controleer het in de editor voordat je publiceert. Canvas toont de header in het bewerkingsvlak met dezelfde code als voor een bezoeker, dus de mobiele indeling bekijk je al terwijl je bouwt.

Wijs het toe, sitebreed of per pagina

Een record doet niets totdat iets ernaar verwijst. Er zijn twee niveaus, en ze werken op dezelfde manier voor elk onderdeel van de vaste paginaelementen.

De standaard voor de hele site

Stel de standaardheader in via Thema-opties en elke pagina gebruikt die. Doe hetzelfde voor de topbalk, het ontwerp van de paginatitel en de footer. Dit is de instelling die ervoor zorgt dat een nieuwe pagina er meteen goed uitziet zodra je hem publiceert.

De override per pagina

Elke afzonderlijke pagina kan elk van deze instellingen overschrijven via de eigen instellingen. Een campagnelandingspagina krijgt een transparante header en geen topbalk; de contactpagina behoudt de standaardvariant. Er wordt niets gedupliceerd om dat te bereiken, en niets hoeft later onthouden te worden, omdat de overschrijving op de pagina staat waarop die van toepassing is.

Topbars

Een topbalk is een eigen record met eigen blokken: een telefoonnummer, openingstijden, een taalwisselaar en een aankondiging. Het blok Header Topbar plaatst hem boven de headerrij. Omdat hij los staat, wijzigt een feestdagenbericht de hele site, zonder dat je de header hoeft te openen.

Bronnen

Waar deze gids iets beschrijft dat buiten Canvas zelf valt, zijn dit de officiële pagina's die dat documenteren.

Wat je hierna kunt doen

Hoe ga je verder?

Twee gidsen over waarom de header de bredere vraag bepaalt, en de headerbouwer zelf.

GidsBlokthema of paginabouwerWaarom de header meestal de doorslag geeft in de hele afweging.GidsEen WordPress-demowebsite importerenDe snelste manier om van binnenuit te zien hoe een afgewerkte, met blokken opgebouwde site eruitziet.ProductDe headerbouwerZones, rijen en headers per pagina, met de schermen waarop ze te zien zijn.
Vragen

Veelgestelde vragen

De volledige FAQ beantwoordt de rest, en de documentatie behandelt elke instelling in detail.

Heb ik een tweede header nodig voor mobiel?

Meestal niet, want één Canvas-headerrecord past zich zelfstandig aan een telefoon aan. Zones worden per breakpoint opnieuw gerangschikt en elk kan beperkt worden tot een apparaatcategorie, zodat één record het logo op een telefoon kan centreren, de contactgegevens kan weglaten en het menu achter een schakelknop kan plaatsen. Maak een tweede record aan wanneer je echt een ander ontwerp wilt, niet om een lay-out te repareren.

Kan één pagina een andere header hebben?

Ja, elke Canvas-pagina kan een eigen header hebben. Headers, topbars, paginatitels en footers hebben elk een sitebrede standaard en een overschrijving per pagina, dus een campagnelandingspagina kan een transparante header over een foto tonen, terwijl elke andere pagina de standaardheader behoudt.

Is dit een widgetgebied of een menu?

Een Canvas-header is geen van beide: het is een record dat je bewerkt in de blokkeneditor, net als een pagina, en het logo, de navigatie, de zoekfunctie, het winkelwagentje en de knoppen erin zijn blokken met hun eigen instellingenpaneel. Je WordPress-menu's blijven WordPress-menu's; het blok Header Navigation toont er een.

Wat gebeurt er met mijn header als mijn licentie verloopt?

Je site blijft precies werken zoals nu. Wat pauzeert is de service: updates, demo-imports, AI en het bewerken van premium blokken stoppen totdat je verlengt, en er is een coulanceperiode van 14 dagen als een licentiecontrole onze servers niet kan bereiken.

Bouw je volgende website met Canvas

Beginner, freelancer of bureau: je krijgt dezelfde blokken en dezelfde demo's. Begin met één site en bouw er zo veel als je nodig hebt, allemaal op dezelfde licentie.

Canvas kopen · vanaf US$ 79/jaarDemo's bekijken