Zwevende kop

Zwevende kop, of "floating header", maakt het mogelijk om een koptekst te maken die meebeweegt wanneer bezoekers naar beneden scrollen in je webshop. Deze zwevende koptekst kan hetzelfde bevatten als je gewone koptekst, maar het meest voorkomende is om het logo van de winkel, zoekveld, winkelwagen en menuknop te tonen.

Aan de slag

Volg de onderstaande stappen om te beginnen met het bouwen van een zwevende kop.

Open de Design Builder.
Open vanuit de paginakeuzelijst Zwevende kop en klik op Bewerk.
De pagina zal nu leeg openen.

Sectie toevoegen

Stap 1 in de bouw is het toevoegen van de sectie(s) die je wilt gebruiken. Voor dit paginatype is alleen Koptekst bouwer beschikbaar.

Sectie toevoegen
Kies Koptekst bouwer

Blokken toevoegen

Nadat de sectie is toegevoegd, kun je de blokken toevoegen die je in de sectie wilt tonen.
Beweeg met je muis over de sectie en klik op de blauwe plusknop om een blok te kiezen. In het onderstaande voorbeeld kiezen we ervoor om de volgende drie blokken toe te voegen:

Weergave menukop koptekst (wordt gebruikt om het menu te openen)
Logo
Iconen

Sectie aanpassen

Het eerste wat je doet, is de secties zelf aanpassen. Hier kiezen we ervoor om de achtergrondkleur, het aantal kolommen (om de juiste weergave te krijgen) en de opvulling te wijzigen.

Daarnaast wijzig je de zichtbaarheid van alle naar Alleen weergeven op desktop. Dit zorgt ervoor dat dit zwevende kop alleen wordt weergegeven wanneer je naar beneden scrollt op een computer, en niet op mobiel.

Blokken aanpassen

Nadat de blokken zijn toegevoegd, moeten we het uiterlijk, de grootte en dergelijke aanpassen.

Logo

We beginnen met het aanpassen van het logo. Het gebruikt een standaardafbeelding wanneer het blok wordt toegevoegd. Dit vervangen we door een daadwerkelijk logo en stellen vervolgens de grootte van het logo in.
Voor SEO is het belangrijk om de grootte van het logo in te stellen.

Opzet van kolommen

Voordat we verdergaan, passen we het aantal kolommen aan dat door het koptekst zal worden gebruikt.

Voor dit voorbeeld menu willen we een kleiner logo in het midden en menu + iconen aan elke kant. We kiezen er daarom voor dat de menuknop en iconen elk 2 kolommen gebruiken en het logo 1. In totaal worden dit 5 kolommen, waarbij het logo de minste ruimte inneemt en in het midden is geplaatst.

Instellingen voor kolommen vind je, voor de meeste blokken en secties, onder geavanceerde instellingen.

Daarnaast voegen we wat Opvulling toe om wat extra ruimte boven en onder het logo te hebben.

Iconen

Wanneer we klaar zijn met het aanpassen van het aantal kolommen, gaan we verder naar de iconen.
Hier passen we de grootte aan naar 1rem (wat overeenkomt met 16 pixels).

Menuknop koptekst

Voor de weergave menuknop koptekst passen we de lettergrootte aan naar 1rem en het gewicht naar 400, zodat het overeenkomt met de rest van het design. Verder passen we de letterkleur en tekst op de knop aan.

Koptekst afronden

Het laatste wat we doen is het design opslaan voordat we naar een andere pagina navigeren om het menu in actie te zien! 🥳