Deze handleiding legt uit hoe u de broncode kunt aanpassen, de CSS kunt wijzigen en de HEAD- of BODY-sectie van een website kunt bewerken die is gemaakt met de Site Creator van Infomaniak.

Vereisten

• Toegang tot Site Creator:
  • Klik hier om toegang te krijgen tot het beheer van uw product in de Infomaniak Manager (Hulp nodig?).
  • Klik rechtstreeks op de naam van de betreffende Site Creator.
  • Klik op de knop Mijn website bewerken om de editor te openen:
    

Aangepaste code toevoegen

Als u zich in Site Creator bevindt:

1. Klik in het linkermenu op Ontwerp.
2. Klik op Meer parameters.
3. Klik onderaan op Aangepaste code:
   
4. Voer aangepaste HTML-, JavaScript-code (met de tags script) of CSS-code (met de tags style) in – zie hieronder enkele voorbeelden.
5. Sla de wijzigingen onderaan de pagina op.

Metadata in HEAD & BODY

Om JavaScript-code of andere code toe te voegen aan de sectie HEAD of BODY van de broncode van uw website:

1. Klik in het linkermenu op Instellingen.
2. Klik op SEO en metadata in het gedeelte Websiteconfiguratie:
   
3. Ga naar Aangepaste code.
4. Kies onder welke tabbladen u HEAD of BODY wilt toevoegen.
5. Sla de wijzigingen onderaan de pagina op:
   

Voorbeelden van CSS-aanpassingen

Deze voorbeelden helpen u om te beginnen met het aanpassen van de website. Er bestaat echter een risico dat u, afhankelijk van de wijzigingen die u aanbrengt, geen toegang meer heeft tot de editor zelf, waardoor u opnieuw moet beginnen.

De achtergrondafbeelding van de website aanpassen

Om de afbeelding van uw keuze (die moet worden geüpload naar de bestandsbibliotheek) als achtergrondafbeelding in te stellen en de weergave ervan aan te passen:

1. Ga naar stap 3, die zichtbaar is in de eerste afbeelding bovenaan deze handleiding.
2. Voeg de code <style> toe om aan te geven dat u de CSS-code wilt wijzigen.
3. begin met body { om aan te geven dat u de opmaak van de pagina wilt wijzigen, en gebruik de accolade "{" om de ruimte te openen waarin de opdrachten kunnen worden ingevoegd,
4. voeg vervolgens background-image: url("../data/files/fond01.jpg"); toe, met het exacte pad en de naam van de afbeelding die in de bibliotheek is geüpload, en vergeet niet de puntkomma toe te voegen, zodat u de volgende opdracht kunt invoegen.
5. background-repeat: repeat; om de ingevoegde afbeelding te herhalen.
6. background-attachment: fixed; zodat de achtergrondafbeelding vast blijft, zelfs als de bezoeker de pagina naar beneden of omhoog scrollt om de inhoud te lezen.
7. } om de eerder geopende invoegruimte te sluiten.
8. </style> om aan te geven dat de code hier eindigt.

De letterafstand van alle links op de website wijzigen

Om de letterafstand in de klikbare woorden (links) aanzienlijk te vergroten:

1. ga naar punt 3, dat in de eerste afbeelding bovenaan deze handleiding te zien is.
2. voeg de code toe (indien nog niet aanwezig) <style> om aan te geven dat u de CSS-code wilt wijzigen,
3. vervolgens .container div a { om aan te geven dat u de blokken van de pagina en in het bijzonder de links ("a") wilt wijzigen, en gebruik de accolade "{" om de ruimte te openen waarin de opdrachten kunnen worden ingevoegd,
4. vervolgens letter-spacing:1em; door de waarde te verlagen (bijvoorbeeld 0,9em), en vergeet niet de puntkomma toe te voegen, zodat u de volgende opdracht kunt invoegen of afsluiten.
5. } om de eerder geopende invoegruimte te sluiten.
6. </style> om aan te geven dat de code hier eindigt.

Bekijk deze andere CSS-codevoorbeelden die u op uw website kunt invoegen.