Diese Anleitung erklärt, wie Sie den Quellcode anpassen, das CSS ändern oder den HEAD- oder BODY-Bereich einer Website, die mit dem Site Creator von Infomaniak erstellt wurde, bearbeiten können.

Voraussetzungen

• Auf Site Creator zugreifen:
  • Hier klicken, um auf die Verwaltung Ihres Produkts im Infomaniak Manager zuzugreifen (Benötigen Sie Hilfe?).
  • Direkt auf den Namen des betreffenden Site Creators klicken.
  • Auf die Schaltfläche Meine Website bearbeiten klicken, um den Editor zu starten:
    

Benutzerdefinierten Code hinzufügen

Sobald Sie sich im Site Creator befinden:

1. Klicken Sie im linken Menü auf Design.
2. Klicken Sie auf Weitere Einstellungen.
3. Klicken Sie unten auf Benutzerdefinierten Code:
   
4. Geben Sie benutzerdefinierten HTML-, JavaScript-Code (mit den entsprechenden script-Tags) oder CSS-Code (mit den entsprechenden style-Tags) ein – weiter unten finden Sie einige Beispiele.
5. Speichern Sie die Änderungen am unteren Rand der Seite.

Metadaten in HEAD & BODY

Um JavaScript-Code oder einen anderen Code in den Bereich HEAD oder BODY des Quellcodes Ihrer Website einzufügen:

1. Klicken Sie im linken Menü auf Einstellungen.
2. Klicken Sie im Bereich Website-Konfiguration auf SEO & Metadaten:
   
3. Scrollen Sie nach unten zu Benutzerdefinierter Code.
4. Wählen Sie, ob der Code unter den Registerkarten HEAD oder unter BODY hinzugefügt werden soll.
5. Speichern Sie die Änderungen am unteren Rand der Seite:
   

Beispiele für CSS-Anpassungen

Diese Beispiele ermöglichen den Einstieg in die erweiterte Anpassung der Webseiten. Es besteht jedoch das Risiko, dass Sie nach den vorgenommenen Änderungen keinen Zugriff mehr auf den Editor haben, was Sie dazu zwingen würde, von vorne zu beginnen.

Hintergrundbild der Webseite anpassen

Um Ihr gewünschtes Bild (das Sie in der Dateibibliothek hochladen können) als Hintergrundbild für die Seite zu verwenden und dessen Darstellung anzupassen:

1. Gehen Sie zu Punkt 3, der in der ersten Abbildung oben in diesem Handbuch sichtbar ist.
2. Fügen Sie den Code <style> ein, um anzugeben, dass Sie den CSS-Code ändern möchten.
3. dann body {, um anzugeben, dass Sie den Hauptteil der Seite ändern möchten, und das "{", um den Bereich zu öffnen, in dem Sie die Befehle einfügen können,
4. dann background-image: url("../data/files/fond01.jpg"); mit dem genauen Pfad und Namen des Bildes, das in der Bibliothek hochgeladen wurde, und vergessen Sie nicht das Semikolon, damit Sie den nächsten Befehl einfügen können.
5. background-repeat: repeat;, um das eingefügte Bild zu wiederholen.
6. background-attachment: fixed;, damit das Hintergrundbild fixiert bleibt, auch wenn der Besucher die Seite nach oben oder unten scrollt, um den Inhalt zu lesen.
7. }, um den zuvor geöffneten Einfügebereich zu schließen.
8. </style>, um anzuzeigen, dass der Code hier endet.

Den Abstand zwischen den Buchstaben aller Links auf der Website vergrößern

Um den Abstand zwischen den Buchstaben in den anklickbaren Wörtern (Links) deutlich zu vergrößern:

1. Gehen Sie zu Punkt 3, der in der ersten Abbildung oben in diesem Handbuch sichtbar ist.
2. Fügen Sie den Code (falls noch nicht vorhanden) <style> ein, um anzugeben, dass Sie den CSS-Code ändern möchten.
3. dann .container div a {, um anzugeben, dass Sie die Blöcke der Seite ändern möchten, insbesondere die Links („a“) und das „{“, um den Bereich zu öffnen, in dem Sie die Befehle einfügen können,
4. dann letter-spacing:1em;, wobei Sie den Wert verringern (z. B. 0.9em), und dabei das Semikolon nicht vergessen, damit Sie den nächsten Befehl einfügen oder beenden können.
5. }, um den zuvor geöffneten Einfügebereich zu schließen.
6. </style>, um anzuzeigen, dass der Code hier endet.

Sehen Sie sich diese weiteren CSS-Codebeispiele an, die Sie auf Ihrer Website einfügen können.