De header bevat de eerste set zichtbare elementen wanneer uw website laadt. U kunt elementen zoals logo, navigatiemenu en sociale media-pictogrammen naar eigen inzicht in de header plaatsen.
In dit artikel:
- Koptekst voor bureaublad
- Koptekst – Rand
- Koptekst – Pil
- Koptekst voor mobiel
- Soorten koptekst
- Kopelementen
Je kunt de headerstijl (voor zowel desktop als mobiel) beheren via het gedeelte Ontwerp (1).
Zodra je in het gedeelte Ontwerp bent, klik je op het tabblad Koptekst (2).
Als alternatief kunt u ook de zoekoptie van de studio gebruiken.
- Enter Voorvoegsel (1) in de zoekbalk.
- Klik in de gerelateerde resultaten op de Ontwerp- websitekop optie (2).
Koptekst voor bureaublad
- Koptekstindeling – Controleer de momenteel toegepaste koptekstlay-out voor de desktop versie. Klik op de Opmaak veranderen knop om te kiezen uit de beschikbare koplay-outopties en toe te passen op uw website.
We bieden twee soorten koptekstlay-outs - lay-outs van de bovenste kopteksten lay-outs met twee kolommen. De koplay-outs met twee kolommen bestaan in thema's als Burst en Isle. - Breedte – Geef de koptekstbreedte op als Volledige breedte or Site Breedte.
'Volle breedte' geeft de koptekst weer terwijl deze de volledige breedte beslaat zonder enige marge over te laten.
'Breedte site' kan worden opgegeven in de Design sectie. U kunt hier een vaste breedte opgeven.
Het zal de koptekst weergeven door vast te houden aan de opgegeven vaste breedte. Meer weten. - Verticale vulling - Voeg ruimte (boven en onder) toe aan de kop van uw website (gespecificeerd in vh). Meer weten.
- Gedrag - De positie van uw bureaubladkop kan worden ingesteld op FEMENGDE (hier wordt de kop bovenaan vastgezet, dwz zelfs als de pagina scrolt, is de kop zichtbaar) of Scroll met site (hier schuift de koptekst mee met de pagina).
- Kleverige navigatie - Schakel de plakkerige navigatie in of uit in het geval van de Sscroll met site koppositie.
- Sticky Menu – Stel de positie van het vastgezette menu in wanneer de pagina naar links of in het midden van het scherm wordt gescrold.
Voor sticky-navigatie wordt de koptekst weergegeven nadat het eerste gedeelte half op het scherm is gescrolld
Bekijk header-opvulling in actie:
Bekijk eens een header op een live website.
Bekijk verschillende lay-outs voor desktopheaders
Bekijk verschillende koptekstlay-outs met 2 kolommen op het bureaublad
Zoekgebaseerde koptekstindelingen die zich richten op zoeken op websites
Koptekst – Rand
- Grens: Schakel de rand voor de koptekst in of uit.
- Dikte: Geef de breedte op van de randlijnen voor de koptekst.
- Functie: Stel de positie van de koptekstrand in. Je hebt vier opties: Alle zijden, Boven en onder, Alleen boven en Alleen onder.
Koptekst – Pil
De pilvormige header in Pixpa geeft je websiteheader een strakke, moderne uitstraling met afgeronde hoeken en flexibele afstand. Dit ontwerp is ideaal voor creatievelingen en professionals die hun header visueel onderscheidend en stijlvol willen maken.
Je kunt deze stijl toepassen op elke koptekstlay-out , waardoor je volledige ontwerpvrijheid hebt voor verschillende kopteksttypen.
- Koptekst – Pil: Zet de schakelaar Koptekst – Pil aan om de pil-styling voor uw koptekst te activeren.
- Hoekradius: Pas de ronding van de hoeken van de header aan met de schuifregelaar of het veld Hoekradius. Hogere waarden maken de hoeken ronder.
- Bovenste vulling: Geef de ruimte boven de inhoud in de pilkop op om de verticale afstand te bepalen.
- Bodemvulling: Definieer de ruimte onder de inhoud om een evenwichtige weergave te garanderen.
- Compacte breedte: Hiermee kunt u kiezen hoe breed de kop van uw pil wordt weergegeven:
- Volle breedte: Rekt de header uit over de volledige schermbreedte.
- Sitebreedte: Lijnt de koptekst uit met de algehele breedte van de inhoud van uw site.
- Compact: Verkleint de header tot een strakker, gecentreerd blok – ideaal voor minimalistische ontwerpen.
Koptekst voor mobiel
Met deze instellingen kunt u bepalen hoe de header van uw site op mobiele apparaten wordt weergegeven. Dit zorgt voor een overzichtelijke en geoptimaliseerde lay-out op kleinere schermen.
- Layout – Controleer de momenteel toegepaste koptekstlay-out voor de mobiel versie. Klik op de Opmaak veranderen knop om te kiezen uit de beschikbare koplay-outopties en toe te passen op uw website.
- Verticale vulling – Toevoegen Verticale ruimte (boven en onder) naar de header van uw website op mobiele apparaten (gespecificeerd in vh).
- Mobiele koptekst - Geef aan of u de mobiele header alleen op mobiele apparaten (tot 768 px) wilt weergeven of ook op tablets (tot 1199 px).
Vergeet niet op de knop 'Publiceren' te klikken nadat u wijzigingen hebt aangebracht, zodat deze direct op uw website zichtbaar zijn.
Bekijk verschillende lay-outs voor mobiele kopteksten
- Het puntsymbool in de mobiele header verwijst naar de klantaccounts.
- Het lijkt er alleen op dat de optie Klantaccount in de winkel is ingeschakeld. Leer het team kennen.
Soorten koptekst
Je kunt kiezen uit vier verschillende soorten headers:
Normale kop
De normale koptekstindeling heeft een strak en eenvoudig ontwerp met een logo, navigatielinks, sociale pictogrammen en menuknop die horizontaal worden weergegeven. Het is ideaal voor het bieden van een klassieke en gebruiksvriendelijke browse-ervaring.
Koptekst met twee kolommen
De koptekstindeling met twee kolommen verdeelt de koptekst in twee afzonderlijke secties, waardoor een logo en sociale pictogrammen links of in het midden mogelijk zijn, en het navigatiemenu en andere items van de koptekst rechts als een klikbare zijbalk.
Deze lay-out is perfect voor websites die zowel hun merk als belangrijke acties tegelijkertijd moeten benadrukken.
Op zoek gebaseerde koptekst
De op zoekopdrachten gebaseerde koptekstindeling bevat prominent een zoekbalk, waardoor gebruikers gemakkelijk specifieke inhoud snel kunnen vinden. Dit ontwerp is vooral handig voor websites met veel inhoud waar de zoekfunctionaliteit centraal staat.
Kopelementen
- Logo/sitetitel – Het allereerste element van de sitekop is het logo/de titel van de site. Stel de sitetitel in/upload het sitelogo voor uw site.
Let op: Als u het sitelogo niet heeft geüpload, verschijnt de sitetitel in de koptekst van uw site. Als u beide heeft opgegeven, is het sitelogo ook zichtbaar in de kop van uw site. - Menu – Een ander element van de sitekop is het menu (menulinks). Jij kan volg de navigatielinks op de site, or elk menu-item verwijderen/verbergen van uw site.
- Sociale iconen – U kunt de Sociale iconen die zijn verbonden met uw sociale media-profielen aan uw sitekop. U kunt een afbeelding voor sociaal delen die zal worden gebruikt als miniatuur wanneer de website of een van de websitepagina's wordt gedeeld op sociale media. Kies ook waar de sociale media pictogrammen zou verschijnen op uw website. De beschikbare posities zijn koptekst, voettekst, beide of geen.
- Zoekvak Voeg een ... toe zoekvak waarmee uw sitebezoekers kunnen zoeken naar inhoud in producten (als u een winkel op uw website heeft ingeschakeld), afbeeldingen, blogberichten en pagina's (galerijen, mappen en andere pagina's) naar uw sitekop.
- Winkelwagen icoon - Voeg een zwevende toe winkelwagen pictogram dat is gemakkelijk te bereiken en altijd zichtbaar zonder uw website in de kop van uw site te storen.
- Menuknop Voeg een ... toe menuknop naar uw sitekop, dwz een call-to-action-knop die doorverwijst naar een opgegeven URL. U kunt de label en URL voor de menuknop. Kies ook de Knop grootte te Klein, Middel of Groot.