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

Vereisten

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

Aangepaste code toevoegen

Zodra u zich in Site Creator bevindt:

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

Metagegevens in de HEAD & BODY

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

1. Klik op Instellingen in het linkermenu.
2. Klik op SEO & Metadata in het gedeelte Websiteconfiguratie:
   
3. Scroll naar beneden naar Aangepaste code.
4. Kies of u de code wilt toevoegen onder het tabblad HEAD of onder het tabblad BODY.
5. Sla de wijzigingen onderaan de pagina op:
   

Voorbeelden van CSS-aanpassingen

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

De achtergrondafbeelding van de website aanpassen

Om de afbeelding van uw keuze (die u in de bestandsbibliotheek kunt uploaden) als achtergrond van de pagina in te stellen en de weergave aan te passen:

1. Ga naar punt 3, zoals te zien is op de eerste afbeelding bovenaan deze handleiding.
2. Voeg de code <style> toe om aan te geven dat u de CSS-code wilt wijzigen.
3. vervolgens body { om aan te geven dat u de opmaak van de pagina wilt wijzigen en de "{" om de ruimte te openen waarin u de opdrachten kunt invoegen,
4. vervolgens background-image: url("../data/files/fond01.jpg"); met het exacte pad en de naam van de afbeelding die in de bibliotheek is opgeslagen, en vergeet niet de puntkomma, 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 afstand tussen de letters van alle links op de site vergroten

Om de afstand tussen de letters in klikbare woorden (links) aanzienlijk te vergroten:

1. Ga naar punt 3, zoals te zien is op de eerste afbeelding bovenaan deze handleiding.
2. Voeg de code toe (indien deze nog niet aanwezig is) <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 op de pagina wilt wijzigen, en met name de links ("a") en de "{" om de ruimte te openen waarin u de opdrachten kunt invoegen,
4. vervolgens letter-spacing:1em; door de waarde te verlagen (bijvoorbeeld 0.9em), waarbij u de puntkomma niet vergeet, zodat u de volgende opdracht kunt invoegen of de bewerking kunt beëindigen.
5. } om de eerder geopende invoegruimte te sluiten.
6. </style> om aan te geven dat de code hier eindigt.

Bekijk deze andere voorbeelden van CSS-code die u op uw website kunt invoegen.