Een header- en footerbouwer, opgebouwd uit echte blokken
Headers, footers, topbalken, megamenu's, zijpanelen, paginatitels en hero's zijn records die je ontwerpt in de blokeditor en vervolgens toewijst aan de hele site of aan één enkele pagina.
Laatst bijgewerkt
Blokken genest zoals je verwacht
Een header-record bevat een Header Root. De root bevat een Container, en een Container bevat Zones. Een Zone is een vak in de headerrij: het logo in de ene, het menu in de volgende, een zoekicoon en een winkelwagen in de laatste.
Zones bepalen de indeling
Een zone bepaalt wat waar staat. Schuif er één naar rechts, groepeer een zoekveld en een winkelwagen tot een cluster, of laat een zone sober wanneer je de markup uit de weg wilt hebben.
- Zones worden per breakpoint anders gerangschikt, zodat één record desktop, tablet en telefoon dekt
- Elke zone kan worden beperkt tot een apparaatniveau en buiten de markup van de andere gehouden worden
- Extra classes op een zone als je die vanuit je eigen CSS wilt aanspreken
De 22 headerblokken
Header Root
De header zelf. Al het overige staat erin genest.
Header Container
Een breedtecontainer, zodat een header op verschillende breekpunten als kader, over de volledige breedte of een mix van beide kan staan.
Header Zone
Een cel in de headerrij. Zones bevatten de onderdelen en bepalen waar ze komen te staan.
Header Logo
Je logo, met aparte bestanden voor de sticky- en de donkere variant.
Header Navigation
Het hoofdmenu, met dropdowns en megamenu-panelen.
Header Search
Een zoekicoon dat een veld opent, of een veld dat altijd open staat.
Header Cart
De WooCommerce-winkelwagen met het aantal artikelen en een uitklapbare samenvatting.
Header Social
Een rij met sociale pictogrammen van de profielen die je één keer instelt.
Header Button
Een call-to-actionknop met de gebruikelijke opties voor formaat, stijl en link.
Header Icon Link
Een enkel icoon dat naar elke bestemming linkt, bijvoorbeeld naar een telefoonnummer of een accountpagina.
Header Info
Een klein blok met contactgegevens, een adres of openingstijden.
Header Shop Search
Een productzoekfunctie voor webshops, beperkt tot je catalogus.
Header Topbar
Plaatst een topbar-record boven de headerrij.
Mega Menu Column
Een kolom binnen een megamenupaneel, zodat een paneel echte indeling kan bevatten.
7 presets om mee te beginnen
Een preset is een bundel met layout-instellingen die je in één klik toepast. Kies het gedrag dat je wilt en pas daarna in de blokinstellingen alles aan wat je wilt.
Transparant
Geen achtergrond, zodat alles wat achter de header staat zichtbaar blijft.
Semi-transparant
Een transparante achtergrond, zodat de afbeelding erachter zichtbaar blijft en de tekst goed leesbaar blijft.
Zwevend
De header zweeft binnen de pagina, met ruimte rondom aan alle kanten.
Zwevend semi-transparant
Zwevend, met ook de doorschijnende achtergrond.
Zwevend en klein
Een zwevende header met een verlaagde hoogte.
Volledige breedte, sticky
Loopt over de volledige breedte van het venster en blijft vastgezet terwijl de pagina scrolt.
Sticky bij omhoog scrollen
Blijft bovenaan terwijl bezoekers naar beneden scrollen en keert terug wanneer ze weer omhoog scrollen.
Bovenbalken, megamenu's en zijpanelen zijn ook records
Ontwerp elk één keer, stel het in als sitestandaard en overschrijf het daarna op de pagina's die iets anders willen.
Topbars
Een topbar is een zelfstandig item met eigen blokken: een telefoonnummer, openingstijden, een taalwisselaar en een promotie. Het Header Topbar-blok plaatst deze boven de headerrij. Wijs er globaal één toe en overschrijf die per pagina.
12 van de 88 demo's hebben een topbalk die je kunt bewerken.
Zijpanelen
Een zijpaneel is een record dat vanaf de rand van het scherm inschuift, voor een secundair menu, een winkelwagen, een contactformulier of een set gegevens die anders de header zou overladen.
6 demo's bevatten al een zijpaneel dat aan een trigger is gekoppeld.
Een record toewijzen doe je via een veld: kies het standaard zijpaneel, de rand waar het vandaan komt, of het de pagina verschuift of eroverheen zweeft, en hoe de trigger eruitziet. Topbalken, megamenu's en footers wijs je op dezelfde manier toe.
94 velden, het grootste onderdeel van Thema-opties
Thema-opties bevat de site-brede headerinstellingen die niet bij één record thuishoren. Een demo-import stelt ze allemaal voor je in, en jij wijzigt alleen de instellingen die je belangrijk vindt.
- 94 van de 533 Thema-opties-velden horen bij de header
- Stel het standaard headerrecord in en overschrijf het daarna op elke pagina
- Sticky-gedrag, hoogte, afstand en mobiele breekpunten
- Elk veld staat beschreven in de naslagartikelen
40 header-patronen om mee te beginnen
Voeg een patroon in en je krijgt gewone blokken die je kunt verplaatsen, hernoemen en verwijderen. Niets is vergrendeld en niets is een screenshot van een lay-out die je niet kunt bereiken.
- 40 header-patronen, meer dan elke andere categorie
- 16 footerpatronen voor het andere eind van de pagina
- 183 patronen in totaal, ingedeeld in 17 categorieën
- Ingevoegd vanuit het tabblad Patronen van de blokinvoeger die je al gebruikt
Footers en copyrightbalken zijn afzonderlijke records
De footer werkt precies zoals de header. Een Footer-record bevat de kolommen en een Copyrights-record bevat de dunne balk eronder, zodat je de juridische tekst op de hele site kunt wijzigen zonder het ontwerp erboven aan te raken.
Zes blokken en 17 opties
Footer About voor de bedrijfstekst, Footer Contacts voor het adres en telefoonnummer, Footer Instagram voor een feed, Footer Widget Area voor alles wat een widget kan, Widget Links voor een overzichtelijke kolom met links, en Copyrights voor de onderste balk.
- Een footer globaal of per pagina toewijzen, net als de header
- Een apart copyrights-record voor de balk eronder
- 16 footerpatronen om mee te beginnen
- Wordt in het bewerkingsvlak getoond terwijl je de pagina bouwt
4 stijlen, of ontwerp je eigen
De band onder de header is een ontwerpvlak op zich, met 57 opties erachter en een overschrijving per pagina op elke pagina die je publiceert.
Standaard, Mini, Sjabloon of Aangepast
Default is de standaardband. Mini is een compacte versie voor binnenpagina's. Template kiest een van de benoemde gespecialiseerde lay-outs. Custom toont een paginatitel die je zelf uit blokken hebt opgebouwd.
- Page Title, Heading, Subtitle, Breadcrumbs and Buttons blocks
- Een sitebrede standaard die elke afzonderlijke pagina kan overschrijven
- Achtergrond, hoogte, uitlijning en broodkruimels zijn allemaal instellingen
Geplaatst in het sjabloon via een slotblok
Heroes en sliders zijn elk een eigen record, net als headers. Een slotblok staat in het bloksjabloon en haalt de hero of slider op die is toegewezen aan de pagina die wordt bekeken.
- Hero-records en Slider-records, beide opgebouwd uit blokken
- De blokken Hero Slot en Slider Slot staan in het sjabloon, niet in je content
- Eén sjabloon voor elke pagina, elk met een eigen opening
- 12 van de 88 Demo's bevatten een slider die je kunt bewerken
Je bouwt de header op de plek waar je hem ziet
Slot-blokken projecteren de header, topbalk, paginatitel, hero en footer in het bewerkingsvlak, zodat een pagina eruitziet als een echte pagina in plaats van als een doos met alinea's.
Een pagina in de blokkeneditor, met de header en footer rond de inhoud, getekend door dezelfde code die ze voor een bezoeker tekent.
Eén renderer
De header die je in de canvas ziet, wordt getekend door dezelfde code als voor een bezoeker, dus er is geen aparte voorbeeldweergave die je apart hoeft bij te houden.
Globaal of per pagina
Stel een standaardheader, topbalk, paginatitel, hero en footer in voor de site en overschrijf vervolgens elk van deze onderdelen op een afzonderlijke pagina via de eigen instellingen van die pagina.
Responsief ontworpen
Zones worden per breekpunt opnieuw gerangschikt en kunnen beperkt worden tot een apparaatniveau, zodat je de layout voor de telefoon in de editor controleert voordat iemand anders die te zien krijgt.
Heb ik een tweede header nodig voor mobiel?
Een enkele Canvas-header dekt meestal ook mobiel af, omdat zones per breakpoint van volgorde wijzigen en elke zone kan worden beperkt tot een apparaatcategorie. Eén headerrecord kan op een telefoon het logo in het midden plaatsen, de contactgegevens weglaten en het menu achter een schakelknop plaatsen. Maak een tweede headerrecord aan als je echt een ander ontwerp wilt, niet om een indeling te repareren.
Kan één pagina een andere header gebruiken?
Ja, elke Canvas-header, topbalk, paginatitel en footer heeft een standaardinstelling voor de hele site en een overschrijving per pagina. Zo kan een landingspagina een transparante header en een topbalk met alleen het logo hebben, terwijl de rest van de site zijn eigen instellingen behoudt.
Is een header een widgetgebied of een menu?
Een Canvas-header is geen van beide: het is een record dat je bewerkt in de blokkeneditor, precies zoals een pagina. De navigatie, het logo, de zoekfunctie, de winkelwagen en de knoppen erin zijn blokken met hun eigen instellingenpanelen.
Wat gebeurt er met mijn header als mijn licentie verloopt?
Wanneer een Canvas-licentie verloopt, blijven je header en de rest van je site precies werken zoals nu. Wat wordt gepauzeerd, is de dienst: updates, demo-imports, AI en het bewerken van premium blokken stoppen tot je verlengt. Er is een coulanceperiode van 14 dagen als een licentiecontrole onze servers niet kan bereiken.
Kan ik de Site-editor nog gebruiken?
Ja, Canvas is gebouwd op echte bloksjablonen, dus sjablonen en sjabloononderdelen blijven waar WordPress ze bewaart, en een headerrecord wordt via een blok in het sjabloon geplaatst. Lees hoe de editor werkt.
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.