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

• Zugriff auf Site Creator:
  • Hier klicken, um die Verwaltung Ihres Produkts im Infomaniak Manager aufzurufen (Benötigen Sie Hilfe?).
  • Klicken Sie direkt auf den Namen des betreffenden Site Creators.
  • Klicken Sie auf die Schaltfläche Meine Website bearbeiten, 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 Benutzerdefinierter 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 unten auf der Seite.

Metadaten in HEAD & BODY

Um JavaScript-Code oder einen anderen Code in den HEAD- oder BODY-Bereich 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 Sie den Code unter den Tabs HEAD oder BODY hinzufügen möchten.
5. Speichern Sie die Änderungen am unteren Rand der Seite:
   

Beispiele für CSS-Anpassungen

Diese Beispiele dienen als Ausgangspunkt für die erweiterte Anpassung der Website-Seiten. Es besteht jedoch das Risiko, dass Sie durch die vorgenommenen Änderungen den Zugriff auf den Editor verlieren, was Sie dazu zwingt, von vorne zu beginnen.

Hintergrundbild der Website anpassen

Um ein Bild Ihrer Wahl (das Sie in der Dateibibliothek hochladen) als Hintergrundbild der Seite zu verwenden und dessen Darstellung anzupassen:

1. Gehen Sie zu Punkt 3, der auf dem ersten Bild oben in diesem Handbuch zu sehen ist.
2. Fügen Sie den Code <style> ein, um anzugeben, dass Sie den CSS-Code ändern möchten.
3. Fügen Sie dann body { ein, 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. Fügen Sie dann background-image: url("../data/files/fond01.jpg"); mit dem genauen Pfad und Namen des in der Bibliothek hochgeladenen Bildes ein, 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 auch dann fixiert bleibt, 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 auf dem ersten Bild oben in diesem Leitfaden sichtbar ist.
2. Fügen Sie den Code (falls noch nicht vorhanden) <style> ein, um anzuzeigen, dass Sie den CSS-Code ändern möchten.
3. Fügen Sie dann .container div a { ein, um anzuzeigen, dass Sie die Blöcke der Seite und insbesondere die Links ("a") ändern möchten, und das "{", um den Bereich zu öffnen, in dem die Befehle eingefügt werden können.
4. Fügen Sie dann letter-spacing:1em; ein. Verringern Sie den Wert (z. B. 0.9em), und vergessen Sie nicht das Semikolon, damit Sie den nächsten Befehl einfügen oder den Code beenden können.
5. }, um den zuvor geöffneten Einfügebereich zu schließen.
6. </style>, um anzuzeigen, dass der Code hier endet.

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