Wilt u de beste headers vinden om uw ontwerp te inspireren?

In het verleden verwees een 'header' in webdesign over het algemeen naar de strip die altijd bovenaan websites stond en die het logo, de navigatiebalk en misschien wat contactgegevens en de zoekbalk bevat. Tegenwoordig verwijst een "header" vaker naar de hele ruimte boven de homepage.

Verbeter de kwaliteit van uw pagina's door te ontdekken Hoe slechte blogpagina's te verbeteren

À moins que quelqu'un ait trouvé votre site web grâce à un blog de partage sur les médias sociaux ou d'un renvoi sur un autre site web , il y a de fortes chances qu'ils y par le biais de la page d' ontvangst. En het eerste dat ze zeker zullen zien, is je header.

Door een website te ontwerpen die aan de verwachtingen van bezoekers voldoet en het comfort te verbeteren door de ervaring een beetje voorspelbaarder te maken, kunt u dit effectief doen de klikfrequentie en conversieratio's verbeteren.

Denk nu eens aan deze kopruimte op deze startpagina.

De meeste mensen vertrouwen op homepages om ze een overzicht te geven van wat een bedrijf of website kan doen, wat betekent dat je het je niet kunt veroorloven deze kans te verspillen om aan die verwachting te voldoen. Natuurlijk, homepage koptekst ontwerp is misschien uniek voor uw merk, maar de elementen die daar worden gevonden, zouden dat niet moeten zijn. Bezoekers verwachten dat scrollen niet nodig is om erachter te komen wat een website voor hen doet. In wezen zou uw koptekst een verhaal van 10 seconden moeten zijn dat van waarde blijkt te zijn voor uw bezoekers.

Dus wat ga je doen met deze ruimte om de interesse van je bezoekers te trekken?

We zullen het hebben over enkele trends in 2017-headerontwerp, hoe u dit zeer zichtbare onroerend goed kunt gebruiken en een aantal interessante voorbeelden van headers bekijken.

5 kopteksttrends

Het is niet zo dat uw bezoekers zich niet bewust zijn van hun vermogen om op een pagina naar beneden te scrollen of door een navigatie te klikken om meer over uw website te weten te komen. Maar waarom zouden ze hiertoe gedwongen moeten worden? Er is voldoende ruimte in de koptekst om het korte bericht weer te geven dat hen vertelt wat ze moeten weten. En als 50 woorden of minder niet genoeg zijn, is het niet noodzakelijk de rest van het document dat meer zegt.

Eerst en vooral kan de startpagina-header eerste indrukken van uw bezoekers maken of breken.

Als u moeite heeft om een ​​manier te vinden om uw website op deze site te introduceren, vindt u misschien inspiratie in de volgende header-designtrends van 2017:

1. Oversized held afbeelding

Dankzij de modulaire stijl van webdesign om responsief te zijn, zijn de meeste ontwerpen nu verdeeld in afzonderlijke secties en blokken. Deze ontwerpstijl past goed bij de afbeeldingen op volledige breedte die veel websites bevatten.

Zie ook: Hoe maak je een volledige breedte pagina op WordPress

Neem bijvoorbeeld de website van Cleverbird Creative. Het maakt gebruik van een unieke en opvallende afbeelding bedekt met eenvoudige tekst om bezoekers te verwelkomen. Er zijn geen fouten in wat ze hier zien: vereenvoudigd in schoonheid.

2. Afbeeldingsschuifregelaar

Ik denk dat er een tijd was, niet te ver in het verleden, dat velen van ons de schuifregelaar als een haalbaar onderdeel van het ontwerp zagen. Zoveel ontwerpers hebben geweldig werk geleverd in ze te gebruiken in de kopteksten.

Er zijn glijdende afbeeldingen die automatisch scrollen met afbeeldingen in hoge resolutie en andere die bezoekers vragen om zelf de controle over deze ervaring over te nemen.

3. Parallax-animatie gebruiken

Parallax-scrollen groeit nog steeds sterk en de header heeft bewezen de perfecte plek te zijn om dit soort "illusie" visueel weer te geven op webdesign. Wat u echter recentelijk zult zien, is het geven van de ontwerper een parallax-effect om een ​​voorbijgaande grens te scrollen, waarschijnlijk om bezoekers te verrassen met het onverwachte resultaat.

4. Video-achtergrond

Video-achtergronden zijn een andere recente trend die het beste werkt wanneer ze worden toegepast op de koptekst van de startpagina. Die van de "28" -website zorgt voor een geweldige sfeer voor de website van het restaurant en laat video's zien van de voor- en achterkant van het restaurant.

Zie ook: Het toevoegen van video achtergronden op WordPress: voor- en nadelen

5. Verborgen navigatie

Hoewel kan worden beweerd dat het hamburgermenu behoort tot websites die op mobiele apparaten worden gelezen (zoals aanvankelijk gepland), moet echter worden gezegd dat in de context van minimalistische navigatie meerdere websites het vaak gebruiken. De website van rehabstudio is hier een goed voorbeeld van. Als je weer binnenkomt, kan de navigatie zichtbaar zijn, je onmiddellijke aandacht wordt getrokken door de opwindende beelden met het plus-symbool ... en dan realiseer je je dat er kleine animaties eromheen zitten.

Lees ook: Hoe u stijl geeft aan uw navigatiemenu's

Dat is alles voor deze verschillende inspiratiebronnen. Wat denk je ?

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. Berichtindeling: News Ticker

Deze premium WordPress-add-on van Visual Composer zullen verbeter uw WordPress-site door hem de mogelijkheid te bieden om dringende of belangrijke aankondigingen te doen op uw website. Dit is een extensie die ongetwijfeld ideaal is voor tijdschriftwebsites.

De belangrijkste kenmerken zijn: 

3-bladertypen geklasseerd, ondersteuning voor 3 locaties waar u uw advertenties kunt plaatsen, de mogelijkheid om de aanbevolen afbeelding te verbergen of weer te geven, personalisatie van advertentiebronnen, een volledig aanpasbare en responsieve lay-out, Meertalige ondersteuning, enz ...

Downloaden | demonstratie | web hosting

2. Smake It

WP Smush is een WordPress Plugin populaire beeldcompressie. Het comprimeert automatisch afbeeldingen tijdens het uploaden en kan ook worden gebruikt om reeds bestaande afbeeldingen te comprimeren en te optimaliseren. 

U kunt ook een maximale afbeeldingsresolutie instellen en uw afbeeldingen worden tijdens het comprimeren verkleind tot redelijkere formaten. Voor de gratis versie van deze plug-in is dat niet nodig maak een account aan om de compressieserver van de uitgever te gebruiken. 

Aarzel niet om het 7 WordPress plug-ins om de SEO van afbeeldingen op uw website te optimaliseren

Met de functie Bulk Optimizer kunt u maximaal 50 afbeeldingen tegelijk optimaliseren en kunt u de Bulk Optimizer opnieuw uitvoeren om meer afbeeldingen te comprimeren.

Downloaden | demonstratie | web hosting

3. FAQPlus

FAQPlus is zeker een van de WordPress plugins FAQ premium die qua functionaliteit de beste is in deze lijst. De hoeveelheid aanpassingen die het tot uw beschikking stelt, is indrukwekkend.

Onder de functies vindt u dat het ondersteunt de Visual Composer-plug-in. Het is volledig responsive en compatibel met verschillende browsers. Het biedt verschillende soorten veelgestelde vragen, met name: veelgestelde vragen in vraag- en antwoordformaat.

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.

• 10 multifunctionele WordPress-thema's om een ​​website te maken
• 9 Easy Digital Downloads-plug-ins om digitale downloads te beheren
• Hoe uw bezoekers langer op uw website te houden
• Hoe kunt u uw afbeeldingen optimaliseren en uw SEO verbeteren

Conclusie

Alstublieft ! Dat is alles voor deze tutorial, ik hoop dat u hiermee uw webdesign kunt personaliseren door u te laten inspireren door deze 5 headers.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Aarzel niet om deel de tip met je vrienden op je sociale netwerken. Maar vertel ons in de tussentijd over uw commentaires en suggesties in de speciale sectie.

...