Hoe maak je een verbluffende Astra-themaheader?

Headers zijn essentieel voor alle inhoud op uw webpagina, omdat ze niet alleen lezers, maar ook zoekmachines dienen. Prachtige en goed geschreven kopteksten hebben het potentieel om lezers naar uw bericht te trekken en het aantal klikken te vergroten. De headers kunnen variëren van H1 tot H6, afhankelijk van de hiërarchie van uw inhoud. De hoofdtitel van uw pagina of artikel is H1, terwijl H2 de subkoppen zijn die secties in uw documenten vormen. De kopteksten H3 tot en met H6 bieden verdere subkoppen in uw document onder H2. Voordat we verder gaan met hoe het Astra-thema u kan helpen prachtige headers in uw inhoud te maken, moeten we eerst eens kijken naar het belang van headers

Inhoudsopgave:

• Waarom zijn headers belangrijk voor uw webpagina's?
• 1. Onderwerpidentificatie
• 2. Toegankelijkheid
• 3. Zoekmachineoptimalisatie
• 4. Maakt pagina's scanbaar
• 5. Bruikbaarheid van mobiele apparaten
• Hoe maak je een prachtige header met Astra-thema?
• Voor- en nadelen van het gebruik van Astra-thema voor headers
• Laatste woorden

Waarom zijn headers belangrijk voor uw webpagina's?

Dit is de reden waarom u ervoor moet zorgen dat u kopteksten in uw tekst opneemt

1. Onderwerpidentificatie

Headers spelen een essentiële rol voor zoekmachines en lezers bij het kiezen van de trefwoorden waarnaar ze in het artikel zoeken. De primaire kop in de tekst helpt het onderwerp van het materiaal te identificeren, en de subkoppen navigeren de lezer naar het interessegebied.

2. Toegankelijkheid

Tegenwoordig gebruiken mensen meestal schermlezers om door de inhoud te bladeren. Kopteksten in alle inhoud kunnen gemakkelijk worden opgepikt door schermlezers en zijn essentieel voor het effectief gebruik van schermlezers. Ze bieden de lezers ook de mogelijkheid om van de ene kop naar de andere te springen om bij het gewenste onderwerp te komen.

3. Zoekmachineoptimalisatie

Wanneer headers uw onderwerp herkenbaar maken, rangschikken zoekmachines uw pagina voor zoekopdrachten. Hoe beter u uw headers goed opstelt en vult met de juiste trefwoorden, hoe meer de zoekmachines uw ranking zullen verhogen.

Hier is een handleiding over het gebruik van de gratis Astra-themafuncties om verbluffende kopteksten voor uw pagina's te maken. Volg de procedure om een ​​header naar keuze te maken.

4. Maakt pagina's scanbaar

Door headers te gebruiken, maakt u de pagina's zo scanbaar mogelijk. Het is algemeen bekend dat niemand het hele artikel leest, en zeker niet regel voor regel. Daarom is het belangrijk dat pagina's kopteksten hebben. Van alle headers is de belangrijkste header de eerste header, omdat deze de toon zet voor het hele bericht of de hele pagina.

Vervolgens komt de subkop, omdat deze de inhoud in stukken verdeelt die beter zijn voor consumptie. Bovendien wordt de structuur van het artikel weergegeven door de kop- en subkopteksten. Kortom, de juiste set headers betekent dat u het publiek kunt aantrekken met uw boeiende inhoud.

5. Bruikbaarheid van mobiele apparaten

Met de tijd wordt mobiel dominanter dan ooit. Het lijdt geen twijfel dat sites meer verkeer via mobiele apparaten zullen krijgen dan ooit tevoren. Dus als u uw inhoud goed plaatst, zult u zeker kijkers trekken via zowel mobiel als desktop.

Kortom, headers optimaliseren de webpagina niet alleen voor de lezers, maar ook voor de zoekmachines.

Hoe maak je een prachtige header met Astra-thema?

Om toegang te krijgen tot de Astra Header Builder, logt u allereerst in op uw WordPress-dashboard en gaat u in de linkerzijbalk naar Weergave > Astra-opties > Header Builder, zoals weergegeven in de onderstaande afbeelding:

Klik erop en u gaat naar het gedeelte Header Builder in de WordPress-aanpasser. De interface zou er ongeveer zo uit moeten zien als wat we hier hebben:

Zoals je kunt zien, is de headerbuilder verdeeld in drie verticale secties, de ene op de andere gestapeld. Je hebt de ‘primaire header’ in het midden met een ‘above header’ bovenaan en ‘below the header’ onderaan. 

Elke header heeft zijn eigen set ‘headerinstellingen’, die u kunt openen door op het tandwielpictogram links van de header te klikken.

Vanaf hier kunt u de hoogte van de koptekst, de randgrootte, de achtergrond, de opvulling en de marge aanpassen.

Merk ook op hoe elke koptekst in drie secties is verdeeld. U kunt koptekstelementen aan deze secties toevoegen en verwijderen om ze functioneler te maken. Op het moment dat u deze tutorial schrijft, heeft u toegang tot 12 header-elementen:

• Sitetitel en logo
• Primair menu
• Knop 1
• Knop 2 (pro)
• Zoekopdracht
• Rekening
• HTML-1
• HTML-2
• Secundair menu
• Sociaal
• Widget 1
• Widget 2
• Widget 3 (prof)
• Widget 4 (prof)
• Winkelmand

Om nu een nieuw Header-element toe te voegen, beweegt u uw muis over dat gedeelte en klikt u op de knop "+". Er verschijnt een lijst met beschikbare elementen. Kies degene die u wilt gebruiken en deze wordt toegevoegd aan het kopgedeelte.

Op dezelfde manier klikt u gewoon op de knop “x” naast het koptekstelement om een ​​koptekstelement te verwijderen.

U kunt de koptekstelementen ook tussen koptekstsecties verplaatsen door eenvoudigweg te slepen en neer te zetten.

Alle koptekstelementen die u hebt gebruikt, verschijnen in het menu aan de linkerkant, direct onder het tabblad Algemeen. Hieronder vindt u ook de optie om het headertype te wijzigen. Gratis gebruikers krijgen alleen de optie voor ‘Transparante Headers’. Als u echter Astra Pro gebruikt, kunt u ‘Sticky Headers’ inschakelen.

Vanaf hier heeft u toegang tot de specifieke instellingen van het headerelement.

Direct naast het tabblad Algemeen hebben we het tabblad Ontwerp. Vanaf hier krijgt u enkele basisontwerpopties om de breedte en marge van de koptekst te wijzigen. Er zijn meer geavanceerde instellingen beschikbaar voor Astra Pro-gebruikers.

Met de Astra Header Builder kunt u ook nauwkeurig afstemmen hoe de sitekop er op verschillende schermformaten uitziet, zoals desktop, mobiel of tablet. Om een ​​ander schermformaat te kiezen en aan te passen, gebruikt u de apparaatkiezer in de linkerbenedenhoek van het scherm.

Zoals je kunt zien, krijg je op een kleiner scherm een ​​extra gebied genaamd ‘Off Canvas’. Hierdoor kunt u ruimte in de koptekst besparen en een deel van de zaken buiten het scherm verplaatsen, zodat bezoekers indien nodig kunnen schakelen.

En daarmee is onze korte handleiding over het maken van een header met het Astra-thema afgerond. Als u klaar bent met het toevoegen van alle koptekstelementen en het aanbrengen van de nodige ontwerpwijzigingen, klikt u op de knop Publiceren, en dat is alles. 

Uw nieuw gemaakte Astra-header is nu actief op uw WordPress-website.

Astra Header Builder: een snel overzicht van beschikbare opties

In de bovenstaande tutorial hebben we een heel eenvoudige header gemaakt met behulp van de Astra Header Builder om u een idee te geven van hoe de functie werkt. Er zijn echter talloze tools en opties binnen de Astra Header Builder waarmee u complexere en verbluffendere headers kunt maken.

Hier volgt een kort overzicht van de verschillende opties die u tot uw beschikking heeft:

Primaire kop

De standaardheader in Astra is de primaire header. Het toont een logo en ook een navigatiemenu dat kan worden aangepast met verschillende primaire headerinstellingen in Astra.

Installeer gewoon Astra en ga naar het gedeelte Koptekst om de primaire koptekstoptie te kiezen en naar de aanpassing te gaan. Koptekst > Primaire koptekst

U kunt gebruik maken van de volgende aanpassingsinstellingen

Indeling

De lay-outinstellingen beheren de positie van het logo voor uw pagina. Er zijn in de Astra drie verschillende posities beschikbaar voor het logo

Linkerlogo

Het logo in deze instelling wordt naar de linkerkant van het navigatiemenu verplaatst. Het is een typische stijl voor het positioneren van een logo.

Juiste logo

Het logo in deze instelling wordt naar de rechterkant van het navigatiemenu verplaatst.

Midden-logo

Het logo beweegt in deze instelling in het midden boven het navigatiemenu. Het is een goede optie in het geval van een lang menu.

Breedte

Breedte-instellingen beheren de breedte van de koptekst voor de tekst. U kunt de breedte van uw header aanpassen als

Volledige breedte

Bij instellingen op volledige breedte wordt uw koptekst aan beide uiteinden uitgerekt en aangepast aan de paginagrootte van uw browser.

Inhoud breedte

Bij de instellingen voor de inhoudsbreedte wordt de koptekst aangepast aan de ingestelde containerbreedte. U kunt deze instellen door het volgende te selecteren

Globaal > Container > Breedte

Grens

Door de rand te selecteren, kunt u een rand onder uw koptekst toevoegen en de kleur en breedte ervan aanpassen.

Mobiele kop

Het navigatiemenu verandert op responsieve apparaten in een hamburger. Daarom zal de primaire header op deze apparaten alleen het hamburgermenu en het logo weergeven. U kunt de lay-out van het logo met betrekking tot het menu aanpassen in de responsieve widgets.

Stapel

Bij de stapeloptie beweegt het logo boven het hamburgermenu. Kiezen voor de stapel kan handig zijn als je een groot logo hebt.

Inline

Bij de inline optie zullen het logo en menu in elkaars verlengde liggen en kan bij een klein logo een goede optie zijn.

Kleurthema's

De primaire headers kunnen in verschillende kleuren worden gepresenteerd met behulp van het Astra-thema. De algemene kleuren zullen gratis beschikbaar zijn, maar voor meer geavanceerde functies moet u de add-on plugin van Astra Pro gebruiken. Om globale kleuren in Astra te gebruiken, moet je naar het tabblad Uiterlijk gaan, aanpassen selecteren, vervolgens globaal en ten slotte de kleurenoptie kiezen. Uiterlijk > Aanpassen > Globaal > Kleuren

Typografie

De typografie-instellingen voor de pagina of site zijn automatisch van toepassing op de primaire koptekst met Astra Theme. U kunt typografie-instellingen selecteren en aanpassen door naar het tabblad Uiterlijk onder globaal te gaan. 

Uiterlijk > Aanpassen > Globaal > Typografie

Transparante kop

Transparante kopteksten zijn een gemakkelijke manier om mooie en aantrekkelijke kopteksten voor uw pagina te maken. De achtergrond van de primaire header wordt op transparant ingesteld en trekt de inhoud van de pagina naar de bovenkant. De inhoud van de pagina en de primaire koptekst worden samengevoegd, wat betekent dat het bovenste gedeelte van de inhoud de achtergrond wordt van de transparante koptekst. Als de afbeelding bijvoorbeeld in het bovenste gedeelte van de pagina staat, wordt deze omhoog geplaatst en wordt deze een achtergrond voor de transparante koptekst.

Hoe voeg ik een transparante header toe?

De transparante header formuleert in twee snelle stappen om uw pagina aantrekkelijk te maken 

Stap 1

U kunt de optie voor een transparante koptekst vinden onder de aanpasser en deze vervolgens bewerken

Uiterlijk > Aanpassen > Koptekst > Transparante koptekst

Stap 2

Onder de transparante koptekstopties kunt u deze voor de hele website inschakelen, de rand onderaan, kleurenschema's en de logo-indeling kiezen

Inschakelen op de volledige website

Als u transparante headerinstellingen voor de hele website wilt, kunt u deze optie inschakelen door het selectievakje aan te vinken. Als u het selectievakje aanvinkt, zijn er nog steeds enkele uitsluitingsregels die u voor specifieke berichten of pagina's kunt inschakelen. Voor de volgende pagina's kunt u de transparante koptekstoptie uitschakelen

Schakel uit in Archieven, Zoeken en op 404

Op deze speciale pagina's kan de transparante header-instelling worden uitgeschakeld door het selectievakje aan te vinken.

Uitschakelen op blogindexpagina

De voorpagina van uw blog wordt de blogindexpagina als u de instellingen vanaf uw startpagina wijzigt. Om een ​​blogindexpagina te maken, kunt u naar de startpagina-instellingen gaan en onder het tabblad 'Uw startpaginaweergave' 'Uw nieuwste berichten' kiezen.

Uw startpaginaweergave > Uw laatste berichten

Als je de instellingen van de transparante header op deze blogindexpagina wilt uitschakelen, kun je hiervoor het selectievakje aanvinken.

Uitschakelen op Pagina's

Als u de optie van de transparante koptekst op alle pagina's wilt uitschakelen, vinkt u het selectievakje aan.

Uitschakelen voor berichten

Als je de transparante koptekstoptie voor alle berichten wilt uitschakelen, vink dan het selectievakje aan.

Kleuren en achtergrond

U kunt de achtergrond- en kleurinstellingen van uw transparante koptekst aanpassen met de volgende beschikbare opties

• Achtergrond
• Sitetitel
• Menu
• Submenu
• Inhoud

Voor- en nadelen van het gebruik van Astra-thema voor headers

Pluspunten

• Mogelijkheid voor de transparante header is beschikbaar
• De headers van zowel de volledige breedte als de inhoudsbreedte zijn beschikbaar 
• Aanpassing van kleur en typografie is mogelijk

Nadelen

• Sticky header-optie is niet beschikbaar
• Geavanceerde kleurfuncties zijn niet beschikbaar

Laatste woorden

Astra is een van de beste thema's die er zijn. En als u het gebruikt, bent u op de goede weg voor het onderhouden van uw site.

Met het gratis thema van Astra kunt u mooie en aantrekkelijke headers voor uw webpagina ontwerpen. De optie en aanpassing van een transparante header zijn ook beschikbaar, wat de ervaring van de kijker kan verbeteren. Over het algemeen kunt u met veel aanpassingsopties voor de koptekst in het Astra-thema een verbluffende koptekst maken.