Hoe maak je een prachtige Astra-themakop?

Headers zijn van vitaal belang voor alle inhoud op uw webpagina, omdat ze niet alleen lezers maar ook zoekmachines dienen. Verbluffende en goed geschreven headers hebben het potentieel om lezers naar uw bericht te trekken en meer klikken te genereren. 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 ondertitels zijn die secties in uw documenten vormen. De kopteksten van H3 tot H6 bieden verdere subkoppen in uw document onder H2. Voordat we verder gaan met hoe het Astra-thema u kan helpen om verbluffende headers in uw inhoud te maken, laten we eerst eens kijken naar het belang van headers

Inhoudsopgave:

• Waarom zijn kopteksten 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 verbluffende koptekst met Astra-thema?
• Voors en tegens van het gebruik van Astra Theme for Headers
• Laatste woorden

Waarom zijn kopteksten belangrijk voor uw webpagina's?

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

1. Onderwerpidentificatie

Headers spelen een essentiële rol voor de zoekmachines en lezers om de zoekwoorden te kiezen waarnaar ze op zoek zijn in het artikel. De primaire koptekst in de tekst helpt bij het identificeren van het onderwerp van het materiaal en de subkoppen navigeren de lezer naar hun interessegebied.

2. Toegankelijkheid

Mensen gebruiken tegenwoordig meestal schermlezers om door elke inhoud te bladeren. Kopteksten in elke inhoud worden gemakkelijk opgepikt door schermlezers en zijn essentieel voor het effectief gebruiken van schermlezers. Ze stellen de lezers ook in staat om van de ene kop naar de andere te springen om bij het vereiste onderwerp te komen.

3. Zoekmachineoptimalisatie

Wanneer headers uw onderwerp identificeerbaar maken, rangschikken zoekmachines uw pagina voor zoekopdrachten. Hoe meer u uw kopteksten goed opgesteld en gevuld met geschikte zoekwoorden maakt, hoe meer de zoekmachines uw ranking zullen verhogen.

Hier is een handleiding voor het gebruik van de gratis Astra-themafuncties om verbluffende headers 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, 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 ondertitel, omdat deze de inhoud in stukken verdeelt die beter zijn voor consumptie. Niet alleen dat, de structuur van het artikel wordt weergegeven door de headers en subheaders. 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 van mobiele apparaten zullen ontvangen dan ooit tevoren. Dus als u uw inhoud goed plaatst, zult u ongetwijfeld kijkers trekken vanaf zowel mobiel als desktop.

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

Hoe maak je een verbluffende koptekst met Astra-thema?

Allereerst, om toegang te krijgen tot de Astra Header Builder, logt u in op uw WordPress-dashboard en gaat u vanuit de linkerzijbalk naar Uiterlijk> 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 u kunt zien, is de headerbuilder verdeeld in drie verticale secties, de ene op de andere gestapeld. Je hebt de "primaire kop" in het midden met een "boven kop" bovenaan en "onder de kop" onderaan.  

Elke koptekst heeft zijn eigen set "koptekstinstellingen", die u kunt openen door op het tandwielpictogram links van de koptekst te klikken.

Vanaf hier kunt u de kopteksthoogte, randgrootte, achtergrond, opvulling en marge aanpassen.

Merk ook op hoe elke kop in drie secties is verdeeld. U kunt koptekstelementen toevoegen aan en verwijderen uit deze secties om ze meer functionaliteit te geven. Op het moment van schrijven van deze tutorial heb je toegang tot 12 header-elementen:

• Sitetitel en logo
• Eerste menu
• Knop 1
• Knop 2 (pro)
• Zoeken
• Rekening
• HTML1
• HTML2
• Secundair menu
• sociaal
• Widget 1
• Widget 2
• Widget 3 (pro)
• Widget 4 (pro)
• Winkelwagen

Om nu een nieuw Header-element toe te voegen, beweegt u uw muis over dat gedeelte en klikt u op de knop "+". Hierdoor wordt een lijst met beschikbare elementen weergegeven. 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 header-element om een ​​header-element te verwijderen.

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

Alle header-elementen die u hebt gebruikt, worden weergegeven in het menu aan de linkerkant, direct onder het tabblad Algemeen. Hieronder vindt u ook de optie om het kopteksttype 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 header-element.

Direct naast het tabblad Algemeen hebben we het tabblad Ontwerpen. Vanaf hier krijgt u een paar basisontwerpopties om de breedte en marge van de koptekst te wijzigen. Meer geavanceerde instellingen zijn beschikbaar voor Astra Pro-gebruikers.

Met de Astra Header Builder kunt u ook afstemmen hoe de koptekst van de site eruit zal zien op verschillende schermformaten, zoals desktop, mobiel of tablet. Gebruik de apparaatkiezer in de linkerbenedenhoek van het scherm om een ​​ander schermformaat te kiezen en aan te passen.

Zoals je kunt zien, krijg je op een kleiner scherm een ​​extra gebied genaamd 'Off Canvas'. Hierdoor kunt u ruimte besparen in de koptekst en sommige dingen buiten het scherm verplaatsen die bezoekers indien en wanneer nodig kunnen schakelen.

En dat is ongeveer onze beknopte handleiding over het maken van een koptekst met het Astra-thema. Als u klaar bent met het toevoegen van alle Header-elementen en het aanbrengen van de nodige ontwerpwijzigingen, klikt u op de publicatieknop 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 zelfstudie hebben we een zeer eenvoudige koptekst 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 om u te helpen complexere en verbluffende headers te maken.

Hier is een korte blik op de verschillende opties die je tot je beschikking hebt:

Primaire koptekst

De standaardkop in Astra is de primaire kop. Het toont een logo en ook een navigatiemenu dat aanpasbaar is met verschillende primaire koptekstinstellingen in Astra.

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

U kunt gebruik maken van de volgende aanpassingsinstellingen

Indeling

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

Logo links

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

Juist Logo

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

Center Logo

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

Breedte

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

Volledige breedte

In instellingen over de volledige breedte wordt uw koptekst aan beide uiteinden uitgerekt en past deze in het paginaformaat van uw browser.

Breedte van inhoud

Bij instellingen voor inhoudsbreedte past de koptekst zich aan volgens de ingestelde containerbreedte en kunt u 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 aanpassen.

Mobiele koptekst

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

Stack

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

In lijn

In de inline optie zullen het logo en menu op elkaar aansluiten en kan een goede optie zijn in het geval van een klein logo.

Kleurenthema's

De primaire headers kunnen in verschillende kleuren worden gepresenteerd met behulp van het Astra-thema. De algemene kleuren zijn gratis beschikbaar, maar je moet de add-on- plugin van Astra Pro gebruiken voor meer geavanceerde functies. Om algemene kleuren in Astra te gebruiken, ga je naar het tabblad Uiterlijk, selecteer je Aanpassen, dan Globaal en kies je ten slotte de kleurenoptie. 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 koptekst

Transparante kopteksten zijn een gemakkelijke manier om mooie en aantrekkelijke kopteksten voor uw pagina te maken. De achtergrond van de primaire koptekst wordt transparant en trekt de inhoud van de pagina naar boven. De inhoud van de pagina en de primaire koptekst worden samengevoegd, wat betekent dat het bovenste deel van de inhoud een achtergrond wordt van de transparante koptekst. Als de afbeelding zich bijvoorbeeld in het bovenste gedeelte van de pagina bevindt, gaat deze omhoog om een ​​achtergrond voor de transparante koptekst te worden.

Hoe een transparante koptekst toevoegen?

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

Stap 1

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

Uiterlijk> Aanpassen> Koptekst> Transparante koptekst

Stap 2

Onder de transparante header-opties kunt u deze voor de hele website inschakelen, de rand onderaan, kleurenschema's en de logo-lay-out kiezen

Inschakelen op volledige website

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

Uitschakelen op archieven, zoeken en op 404

De transparante koptekstinstelling kan op deze speciale pagina's 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. Voor het maken van een blogindexpagina kunt u naar de startpagina-instellingen gaan en onder het tabblad "Uw startpagina-weergave" "Uw laatste berichten" kiezen.

De weergave van uw startpagina> Uw laatste berichten

Als u de instellingen van de transparante koptekst op deze blogindexpagina wilt uitschakelen, kunt u hiervoor het selectievakje aanvinken.

Uitschakelen op pagina's

Schakel het selectievakje in als u de optie van de transparante koptekst op alle pagina's wilt uitschakelen.

Uitschakelen op berichten

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

Kleuren en achtergrond

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

• Achtergrond
• Pagina Titel
• Menu
• Submenu
• Inhoud

Voors en tegens van het gebruik van Astra Theme for Headers

Voordelen

• Kans voor de transparante koptekst is beschikbaar
• De kopteksten van zowel volledige breedte als inhoudsbreedte zijn beschikbaar 
• Aanpassing van kleur en typografie is beschikbaar

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 om uw site te onderhouden.

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 kun je met veel opties voor het aanpassen van headers in het Astra-thema een verbluffende header maken.