Pas de header van je website aan

De header is de bovenkant van je website. Die kan je op verschillende manieren aanpassen met Sitebuilder.

IN DIT ARTIKEL:

Hoe wijzig ik de kleur van de header en footer?

De kleur van de header en van de footer is afhankelijk van het template dat je gekozen hebt. Sommige templates laten je kiezen uit verschillende skins.

Om de skin van je template te wijzigen:

  1. In je back-end gaat u naar de onderkant van het menu links. Klik op ‘Ontwerp’.
  2. Je bent nu in de Design Editor. Heeft je template verschillende skins, dan kan je dit zien in de laatste tab in het menu aan de zijkant, na Thema’s, Tekst en Achtergrond. Bij sommige thema’s zie je ook “Skins” staan.
  3. Kies een skin kleur en klik op ‘Verzenden’.

Ervaren gebruikers kunnen style tags toevoegen aan de header van de website.

  1. Open je website in een browser en bekijk de HTML-code. Zoek naar de class of id-naam van header en footer div’s van je thema en de eigenschap “background”.
  2. In je back-end van je website klik je op “SEO” onderaan het menu in de zijbalk. Dit opent het SEO-paneel van je paginanavigatie.
  3. In het luik “Kop Code” voeg je je gewenste stijl in. Het voorbeeld hieronder is voor een thema waarbij de header div .top heet, de footer div .footer heet, en de eigenschap “background” is, met zwart als kleur.
    <style>    .top {background:#000000;}
                .footer {background:#000000;}
            </style>
  4. Vervang #000000 door een kleur naar keuze en klik op “Verzenden”.
    Denk eraan dat je de header van elke pagina individueel moet wijzigen – je kan verschillende kleuren gebruiken voor verschillende delen van je website! 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. Klik op het opslaan-icoon bovenaan rechts en vervolgens op “publiceren” om de wijzigingen te bevestigen.

Hoe kan ik de afbeelding van een header verkleinen?

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:

Een stilstaande header afbeelding verkleinen

Wijzig de hoogte:

  1. Ga naar de back-end van je Sitebuilder-website en ga naar de home pagina. Beweeg de cursor over de header afbeelding. Het symbool Header Area bewerken zal verschijnen. Klik erop, dit opent de Header Area.
    Edit Header Area
  2. Klik op Afbeelding Bewerken. Je komt nu in de Photo Editor.
    Photo Editor
  3. Verklein de afbeelding door middel van de Crop of Resize knop.
    • Gebruik Crop wanneer je een deel van de afbeelding wil uitknippen. Gebruik de markeerpunten in de hoeken om de afbeelding uit te knippen. Klik op “Lock dimensions” om te bevestigen.
    • Gebruik Resize wanneer je alles in de afbeelding bewaren wil. Om de proporties te behouden, klik je op het slotje. Vul de gewenste pixelgrootte in.
  4. Ben je klaar, klik op Apply en dan op Save.

Wijzig de breedte:

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 je 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 openen. Je zal het header html-code veld vinden in het Head Code of Kop Code menu. Post de volgende code.
    <div id="headerimage" class="XXX">
                <img src="http://…" style="…">
            </div>
  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 via de browser.
  3. Sla je werk op en bekijk hoe de site eruit ziet op de verschillende schermen. Let op! De wijziging kunnen 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 helemaal veranderen.
Header met een slideshow verkleinen?

Wijzig de hoogte:

  1. Ga naar de back-end van je Sitebuilder-website en ga naar de home pagina.
  2. Beweeg de cursor over de header afbeelding. Het symbool Header Area bewerken zal verschijnen. Klik erop, dit opent de Header Area.
    Edit Header Area
  3. 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’.
  4. Gebruik de optie ‘Bijsnijden’ (crop) of ‘Vergroten/verkleinen’ (resize) om de afbeelding te verkleinen.
    • Gebruik Crop wanneer je een deel van de afbeelding wil uitknippen. Gebruik de markeerpunten in de hoeken om de afbeelding uit te knippen. Klik op “Lock dimensions” om te bevestigen.
    • Gebruik Resize wanneer je alles in de afbeelding bewaren wil. Om de proporties te behouden, klik je op het slotje. Vul de gewenste pixelgrootte in.
  5. Ben je klaar, klik op ‘Toepassen’ en dan ‘Bewaren’.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.
  6. 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.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.
  7. Vooraleer te publiceren gebruik je best de Preview optie om te zien hoe je nieuwe lay-out eruit ziet op de verschillende schermen.
    Je kan nu je nieuwe lay-out publiceren. Vergeet niet om ook de wijzigingen voor je mobiele toestel te wijzigen.

Hoe kan ik de header area verwijderen?

Je moet begrijpen dat je de header area niet volledig kan verwijderen. Wens je geen header afbeelding, dan kan je dit proberen:

Heb je een diashow van header afbeeldingen:

  1. Klik op Edit Header Area om de editor te openen
  2. Wijzig alle afbeeldingen uit de collecties
  3. Klik op Apply

 

Heb je één header afbeelding:

  1. Klik op Edit Header Area om de editor te openen
  2. In het menu links klik je op Lay-out
  3. Bij Wijzig huidige lay-out kies je No Header Image
  4. Klik op Apply
  5. Klik op Sluiten

 

Oplossing voor gevorderde gebruikers:

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

<style>
        #header-image 
        { 
        display:none;
        }
        </style>

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 via de browser.

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 ‘header-image’, en dus zou de lijn code die je moet vinden er zo uitzien:

<div id="header-image" class="XXX">
        <img src="http://…"  style="…">
        </div> 
        

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.

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.

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.

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..

Updated on 3 September 2020

Was this article helpful?

Hulp nodig?
Geen oplossing gevonden? Maak je geen zorgen, we zijn er altijd om je te helpen!
Contacteer support

Geen oplossing gevonden?

support_bottom_contact_alt

Onze specialisten staan 24/7 klaar met gratis support. Aarzel niet om Joachim en zijn collega's te contacteren via e-mail of telefoon.

support_bottom_contact_alt
Joachim Coessens Specialist Support