Er zijn drie dingen die je moet weten over de afmetingen van de afbeeldingen in je header:

1. Wat ook de grootte is van de originele afbeelding die je geüpload hebt - wanneer je de ingebouwde beeld-editor gebruikt zal het resultaat niet groter dan 800 x 600 px zijn, ongeacht of je de afbeelding bijsnijdt, de afmetingen of helderheid aanpast, enz. Zodra je de afbeelding opslaat, worden de afmetingen van de afbeelding automatisch aangepast.

2. Afhankelijk van het thema dat je gebruikt kan de header afbeelding 100% van de schermbreedte bedekken, omwille van de vereisten van het responsive design. Voor ervaren gebruikers bestaat er een oplossing. Zie verder.

3. Denk eraan dat niet alle website sjablonen / templates een eigen header afbeelding hebben. Is in jouw header geen afbeelding aanwezig, dan kan je de Image of Slideshow widget gebruiken om een header afbeelding te maken..

Zo kan je de header afbeelding in verschillende situaties bewerken:

Hoe een stilstaande header afbeelding verkleinen?

Hoe de hoogte wijzigen:

1. Log in op uw Sitebuilder back-end.

2. Ga naar de Home pagina.

3. Beweeg de cursor over de header afbeelding. Het symbool Header Area bewerken zal verschijnen. Klik erop, dit opent de Header Area.

   

4. Klik op Afbeelding Bewerken. U komt nu in de Photo Editor.

   

5. Verklein de afbeelding door middel van de Crop of Resize knop.

   1. Gebruik Crop wanneer u een deel van de afbeelding wil uitknippen. Klik op de button Crop

      1. Gebruik de markeerpunten in de hoeken om het deel of de delen te kiezen dat u wil uitknippen.

      2. Wil u de proportie behouden, klik dan Lock Dimensions.

   2. Gebruik Resize wanneer u alles in de afbeelding bewaren wil. Klik op Resize.

      1. Om de proporties te behouden moet u op het slot klikken.

      2. Vul de gewenste pixelgrootte in.

6. Bent u klaar, klik op Apply en dan op Save.

Hoe de breedte wijzigen:

Let op wanneer je de breedte van je header afbeelding wijzigt. Gebruik je de methode hierboven om de breedte te verminderen, dan kan SiteBuilder mogelijk uw afbeelding uitrekken en de kwaliteit ervan verminderen. Dat komt doordat de header breedte ingesteld staat op 100% voor het responsive design voor meerdere schermen. De breedte op een veilige manier wijzigen doe je zo:

1. In het menu aan de zijkant ga je naar het tabblad SEO. Klik erop om de Search Engine Optimization instellingen te opeen. Je zal het header html-code veld vinden in het Head Code of Kop Code menu. Post de volgende code.

   <style> #headerimage img{ max-width:1130px; max-height:190px; } </style>

    

2. Geeft deze code niet het gewenste resultaat, dan kan de identifier verkeerd zijn - verschillende designs hebben vaak verschillende identifiers. Welke je nodig hebt kom je te weten door de broncode te bekijken. Dat doe je zo:

   1. Voor Google Chrome: Klik rechts op de header afbeelding, en kies Inspect Element uit het uitklapmenu.

      

   2. Voor Safari: Open de voorkeuren via Safari >Voorkeuren en ga naar het gedeelte Geavanceerd / Meer. Onderaan de pagina vink je het vak 'Toon het Ontwikkelaars menu' aan. Sluit de instellingen af, en ga naar de bovenkant van de pagina. Klik op Ontwikkelaar > Toon broncode

      

   3. Voor Firefox: Klik rechts op de header afbeelding, en kies Inspect Element uit het uitklapmenu.

      

      1. Beweeg de cursor over de stukken code tot enkel het header oplicht in de lay-out. Kopieer deze identifier. In dit voorbeeld is jouw identifier 'headerimage', en dus zou de lijn code die je moet vinden er zo uitzien:

         <div id="headerimage" class="XXX"> <img src="http://…" style="…"> </div>

      2. Zie je een andere identifier of class, wijzig de bovenstaande code in het Kop Code menu. Gebruik '#' wanneer je het object aan het beschrijven bent via de identifier -de 'id' waarde- en gebruik '.' in de plaats van '#' wanneer je het object beschrijft via de class waarde.

      3. Sla je werk op en bekijk hoe de site eruit ziet op de verschillende schermen. Let op! De wijziging kan misschien nog niet meteen te zien zijn in de lay-out die je aan het bewerken bent, maar hij zal wel te zien zijn in de preview schermen - klik op het icoon met het oog in de rechter bovenhoek van je scherm.
      4. Ziet het er goed uit, kopieer dan deze code in de header-sectie van elke pagina - denk eraan dat de SEO instellingen pagina per pagina toegepast worden. Tip: Zou je de Kop Code code willen toepassen voor de hele site, dan kan dat indien je versie 3 van Sitebuilder hebt: klik op "Instellingen" en blader naar beneden: de Kop Code sectie hier telt voor alle pagina's.
      5. Ziet je mobiele versie er niet goed uit, dan moet je de verhoudingen van de afbeelding aanpassen. OF wanneer je op het tabblad Mobiel werkt, dan kan je naar de Creatieve Modus pagina overschakelen en de afbeelding hele maal veranderen.

Hoe kan je de header van een slideshow verkleinen?

1. Log in op de backend van je Sitebuilder.

2. Blader naar je homepage.

3. Beweeg de cursor over de header afbeelding / header strook. De tekst verschijnt 'Header Area bewerken'. Klik erop. Dat zal de Header Area openen.

   

4. Rechts zie je een preview van de afbeelding die je wil aanpassen. In de hoek linksonder van de rand van die afbeelding zie je vijf iconen. Klik op de borstel. Je komt nu in de 'Foto Editor'.

   

   

5. Gebruik de optie 'Bijsnijden' (crop) of 'Vergroten/verkleinen' (resize) om de afbeelding te verkleinen.

   1. Gebruik 'Bijsnijden' wanneer je stukken van de afbeelding wil bijknippen. Klik hiervoor op 'Bijsnijden'.

      1. Gebruik de ankerpunten in de hoeken om de gebieden te selecteren die je wil uitknippen.

      0.Wil je de verhoudingen bewaren maar de schaal wijzigen, klik op 'Proporties vergrendelen'.

   2. Gebruik Vergroten/verkleinen wanneer je alle objecten in de afbeelding behouden wil en enkel de grootte wil wijzigen. Klik op 'Verkleinen/vergroten'.

      1. Om de verhoudingen te bewaren klik je op het slot.

      2. Vul de gewenste afmeting in pixel in.

6. Ben je klaar, klik op 'Toepassen' en dan 'Bewaren'.

7. Herhaal dit voor alle afbeeldingen in je diashow. Zorg ervoor dat je dezelfde afmetingen in pixels geeft! Want anders zal je carrousel bij elke afbeelding van vorm veranderen.

8. Je bent nu terug in je 'Header Area'. Klik nogmaals op 'Toepassen' om af te ronden en op 'Sluiten' om naar de editor terug te keren.

9. Denk eraan: je header area is verschillend bij elke pagina. Wil je de nieuwe lay-out naar alle pagina's kopiëren, ga je naar de doelpagina en open je daar de header editor. In het tabblad Lay-out kopieer je de lay-out van de pagina die je zojuist bewerkt hebt. Heb je deze handleiding nauwgezet gevolgd, dan is dat je homepagina.

10. Vooraleer te publiceren gebruik je best de Preview optie om te zien hoe je nieuwe lay-out eruit ziet op de verschillende schermen..

11. Je kan nu je nieuwe lay-out publiceren. Vergeet niet om ook de wijzigingen voor je mobiele toestel te wijzigen.