Ziet uw website er aantrekkelijk genoeg uit voor de bezoekers? Of is het gewoon een normale website tussen miljoenen anderen! Wilt u dat uw website zich onderscheidt van de massa? Wilt u dat elke pagina van uw site er anders uitziet met een ander gevoel? Wat als ik zeg dat de sleutel tot de oplossing voor al deze problemen is in uw eigen handen? En die sleutel is – aangepaste header!! Ja, je leest het goed. Laten we eens kijken hoe…

Een header is het belangrijkste visuele element van uw site dat de bovenste positie inneemt. Het is het eerste wat een bezoeker ziet wanneer hij op uw website terechtkomt. De header van uw site is de identiteit van uw website die hetzelfde blijft op alle pagina’s van de website. U kunt het gebruiken om een goede langdurige impact in de geest van de bezoeker te maken. U kunt opvallen en het vertrouwen van de gebruiker winnen door het creëren van opmerkelijke zelf-voorstellende aangepaste headers. Een aangepaste header in WordPress is een functie waarmee u de header afbeelding kunt aanpassen samen met het toevoegen van tekst, widget etc. aan het. U kunt ook aanpassen van deze elementen als per uw behoefte aan het beste beeld van uw website functie. Hier op Templatetoaster website builder software, controleer dan hoe u aangepaste header met WordPress theme builder.

WordPress aangepaste header te creëren: Waarom heb je eigenlijk nodig een?

De header is een van de belangrijkste elementen van uw website. Het is een gebaar dat veel over uw site overbrengt. Meestal bevat het een foto of video om de aandacht van de bezoeker te trekken. Volgens Nielsen Norman group, blijft een bezoeker slechts 10-20 seconden op uw website. Dus, de header moet aantrekkelijk zijn om hen te interesseren.

Een aangepaste header in WordPress geeft u meer controle en flexibiliteit. U kunt een headerafbeelding draaien, de grootte wijzigen of bijsnijden, naast het verplaatsen van het logo, tekst of widgets. U kunt het ontwerpen om contrast uw website look. Je moet het gebruiken als een voorstel aan het doelpubliek. Probeer uw tagline in de aangepaste header in WordPress te citeren. Zoals je misschien geen tweede kans om de eerste goede indruk te maken. Een goed gestructureerde header moet beantwoorden waarom je uniek bent, wat is alles wat uw site functies etc.

Dus, een aangepaste header is belangrijk omdat het werkt als een gezicht van uw website. Het moet in staat zijn om de crux en de stemming van uw site aan het publiek te communiceren. U kunt een verschillende WordPress aangepaste header per pagina hebben. Bijvoorbeeld, kunt u functies van uw product in de header voor Over ons pagina en de rest van de pagina’s zonder functies. Het kan wonderen doen!

Hoe een aangepaste header aan WordPress toe te voegen?

De standaard WordPress thema’s staan u toe om aangepaste headers te gebruiken. U kunt uw eigen aangepaste header afbeeldingen volgens uw voorkeuren. Het instellen van een WordPress aangepaste header afbeelding kost een paar inspanningen. In principe zijn er twee stappen nodig om een aangepaste header aan de standaard WordPress thema’s toe te voegen, en wel als volgt

1. Bron en bewerk uw afbeelding

Voreerst, selecteer een verleidelijke afbeelding. Het moet eenvoudig en uniek zijn. U kunt veel gratis afbeeldingen op het internet vinden. Voor meer details, kunt u lezen over 16 websites om gratis afbeeldingen te krijgen. Zodra u de bron van uw header afbeelding, je bent gewoon overgelaten met het bewerken van het.

U kunt gebruik maken van een aantal van de handige desktop editing of web-based gratis editing tools. U kunt de gekozen afbeelding verjongen met GIMP, paint.net enz. GIMP is een gratis en open source beeldbewerkingssoftware. Het biedt je veel geavanceerde gereedschappen om een speciaal tintje aan je afbeelding te geven. Terwijl paint.net het bewerken van afbeeldingen op Windows vergemakkelijkt. Krijg uw aangepaste header WordPress afbeelding gedaan.

2. Upload de aangepaste header

Om de header afbeelding te uploaden, logt u in op uw WordPress dashboard. Navigeer vanuit het linkerdeelvenster naar Uiterlijk → Koptekst.

Het zal een Koptekst Media deelvenster openen aan de linkerkant van het scherm. Ga naar Header Image en klik op de knop Add New Image.

Het zal de afbeeldingsgalerij openen om de afbeelding te kiezen. U kunt ook bladeren uw eigen afbeelding hier. Selecteer de afbeelding, bijsnijden indien nodig. Stel het in als de aangepaste header afbeelding. U bent klaar.

Hoe de header in WordPress aan te passen?

Nadat u de aangepaste headerafbeelding van het WordPress-thema hebt geüpload, kunt u deze bewerken voor het toepassen van video, tekst, widgets, sociale pictogrammen, enz. U kunt elk standaard WordPress thema gebruiken. Hier krijg je voorbeeld code om aangepaste header bewerken in Twenty Seventeen theme.

1. Voeg een tekstgebied aan de header

Met standaard thema, kunt u alleen de website titel. Maar om tekst toe te voegen, moet u wat code schrijven in header-image.php bestand. U voegt de volgende code toe om een tekstgebied in de header te krijgen

Na het toevoegen van deze code ziet u een apart tekstgebied in de header zoals hieronder getoond

2. Sociale pictogrammen toevoegen

Om sociale pictogrammen aan de header toe te voegen, voegt u de volgende code toe aan site-branding.php na de wrap class.

U moet ook CSS opgeven als u de sociale pictogrammen in uw eigen unieke stijl wilt weergeven.

Hiermee krijgt u de gewenste resultaten zoals getoond

3. Widget aan de header toevoegen

Als u een aantal widgets aan uw website wilt toevoegen, definieert u een functie in het bestand function.php. U kunt deze code aan het einde van het bestand toevoegen.

Als u dat gedaan heeft, voegt u deze HTML code toe aan header-image.php bestand om de specifieke widget op de frontend te tonen.

Nu, gaat u naar Appearance → Widgets. Vanaf hier, kun je elke widget toevoegen aan je aangepaste koptekst positie. U kunt bijvoorbeeld de widget Zoeken toevoegen door deze simpelweg naar de positie van de aangepaste koptekst te slepen.

De resulterende koptekst ziet er ongeveer zo uit

4. Het logo verplaatsen

U kunt een logo toevoegen aan de standaard WordPress-opties. Navigeer naar Uiterlijk → Koptekst → Koptekst Media → Logo Sectie. Hier kunt u een logo instellen door op de optie Logo selecteren te klikken.

Maar om het te verplaatsen, moet u extra CSS schrijven. In Twenty Seventeen-thema staat het logo standaard linksonder, zoals hieronder wordt getoond

Hier ziet u een voorbeeld CSS om het logo naar de middenpositie te verplaatsen. U kunt het ook overal in de header plaatsen.

.custom-logo-link {padding-right: 2em;position: absolute;left: 500px;top: 0px;}

5. Video toevoegen aan de Header

Ten slotte kunt u ook een video toevoegen aan uw WordPress Header. Gelukkig is het niet nodig om hiervoor code toe te voegen. WordPress biedt u een standaard optie om video of achtergrondafbeelding toe te voegen.

Voor het toevoegen van video aan de header, navigeert u naar Appearance → Header → Header Media → Header Video. Hier, klikt u op Selecteer Video knop zoals hieronder getoond. Dan, kunt u bladeren naar de video die u wilt op de header van uw computer. Als alternatief kunt u ook de URL van de video geven als het online is. U hoeft de video alleen maar te publiceren.

Uw headervideo ziet er dan als volgt uit

Op dezelfde manier kunt u een achtergrondheaderafbeelding toevoegen door een headerafbeelding uit de sectie Header Media te selecteren.

U kunt per pagina verschillende aangepaste WordPress-headers hebben, bijvoorbeeld sommige met een achtergrondafbeelding, sommige met video of Widgets, enzovoort. Het hangt allemaal af van uw keuze en creativiteit.

Hoe maak je een aangepaste header in WordPress van Scratch met TemplateToaster?

Je moet een goede kennis van PHP, HTML, CSS om te werken met template bestanden. Als u een beginner bent en niet weet hoe u code moet schrijven, kunt u vertrouwen op TemplateToaster WordPress Theme Builder. U hoeft geen codering om WordPress aangepaste header template te maken. Slechts een paar klikken te slepen & drop interface en u bent klaar met uw aangepaste header. Laten we eens kijken hoe om aangepaste header toe te voegen aan WordPress met TemplateToaster

Voreerst, downloaden en installeren TemplateToaster website builder. Na een succesvolle installatie, krijgt u het CMS selectie scherm zoals hieronder getoond. Selecteer hier WordPress

Dan krijgt u het volgende scherm om een sjabloon te maken vanaf nul of een voorbeeldsjabloon te gebruiken. U selecteert Beginnen vanaf nul en klikt op Wijzigen.

Dan wordt u doorgestuurd naar de hoofdinterface van de software van waaruit u kunt beginnen met het ontwerpen van uw aangepaste koptekst.

1. Aangepaste koptekst over de volle breedte

Het scherm met de hoofdinterface van de software ziet er als volgt uit. Vanaf hier kunt u een koptekst over de volle breedte instellen. Ga naar Koptekst → Breedte → Volledige breedte.

2. Logo verplaatsen

Van het tabblad Koptekst, klik op de Logo optie. Er wordt een galerij met logopictogrammen geopend. U kunt een logo-afbeelding selecteren uit de voorbeeldbibliotheek of u kunt uw eigen aangepaste afbeelding gebruiken. Het logo wordt ingesteld.

Wanneer u dubbelklikt op de logo-afbeelding, wordt een tabblad Formatteren geopend, zoals hieronder wordt weergegeven. Hier kunt u een link naar het logo maken of de positie ervan instellen. U kunt de positie wijzigen door een aangepaste linker- en bovenpositie op te geven of een snelkoppeling voor de positie te selecteren. Hier is bijvoorbeeld een verticale-middenpositie voor het logo gekozen.

3. Achtergrondafbeelding toevoegen

U selecteert de optie Achtergrond op het tabblad Koptekst om een achtergrondafbeelding voor de koptekst in te stellen. Er wordt een afbeeldingengalerij geopend. U kunt ook uw eigen aangepaste headerafbeelding bekijken via de optie Meer afbeeldingen.

Ook kunt u een voorgrond headerafbeelding toevoegen door op de optie Afbeelding te klikken op het tabblad Header.

4. Tekstgebied toevoegen aan de header

Als u de tagline en relevante informatie op de header wilt weergeven, kunt u een tekstgebied gebruiken. In het tekstgebied kunt u platte tekst, knoppen, lijsten enz. toevoegen. Klik op de optie Tekstgebieden.

Voeg inhoud toe en stijl deze door te dubbelklikken. Als u dubbelklikt, wordt een tabblad Editor geopend om de inhoud te bewerken.

5. Widget aan de koptekst toevoegen

U kunt met één klik een widgetgebied aan de koptekst toevoegen. Ga naar het tabblad Widget-gebieden en klik op de optie Widget-gebieden → Koptekst. U kunt ook de typografie voor deze widget instellen en het overal in de header verplaatsen door het gewoon te slepen. U kunt er na het exporteren inhoud aan toevoegen.

6. Sociale pictogrammen aan de koptekst toevoegen

Het toevoegen van pictogrammen voor sociale media aan de koptekst is heel eenvoudig. Klik op het tabblad Koptekst op de optie Sociale pictogrammen. Er wordt een galerij met sociale pictogrammen geopend om een afbeelding naar wens te selecteren. U kunt hier ook naar uw eigen pictogram bladeren.

Alle pictogrammen voor sociale media zijn hier beschikbaar. U kunt pictogrammen houden volgens uw behoefte. U kunt hier pictogrammen voor sociale media op Facebook, Twitter en Google + plaatsen.

7. Video aan de koptekst toevoegen

Om een video toe te voegen, klikt u op de optie Video toevoegen. Vanaf hier kunt u eenvoudig een achtergrondvideo voor de header uploaden.

Final Words

U hebt nu geleerd hoe u een aangepaste header in WordPress kunt maken. Het zal zeker veranderen de vooruitzichten van uw website. De oplossing die u kiest is geheel uw keuze. Hopelijk, je vond de post. Als u vragen hebt, kunt u in de commentaarsectie hieronder posten.

Gerelateerde lectuur: WordPress 101 tutorial

Beste WordPress hosting providers

Hoe WordPress versie te controleren

Hoe WordPress login url te vinden

Hoe WordPress te installeren

Welk WordPress thema is dat

Hoe WordPress taal te veranderen

Hoe WordPress aangepaste inlogpagina te maken

Hoe WordPress thema vanaf nul te maken

Hoe WordPress pagina update op te lossen die niet werkt