Dieser Leitfaden erklärt, wie Sie den Quellcode anpassen, das CSS ändern, den HEAD- oder BODY-Bereich einer mit Site Creator von Infomaniak erstellten Website ändern.

Voraussetzungen

• Zugriff auf Site Creator:
  • Hier klicken, um auf die Verwaltung Ihres Produkts im Infomaniak Manager zuzugreifen (Hilfe benötigt?).
  • 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 in Site Creator befinden:

1. Klicken Sie auf Design im linken Seitenmenü.
2. Klicken Sie auf Weitere Parameter.
3. Klicken Sie unten auf Benutzerdefinierter Code:
   
4. Geben Sie benutzerdefinierten HTML-, JavaScript- (mit seinen Tags script) oder CSS-Code (mit seinen Tags style) ein - lesen Sie weiter unten einige Beispiele.
5. Speichern Sie die Änderungen am Ende der Seite.

Metadaten in HEAD & BODY

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

1. Klicken Sie auf Einstellungen im linken Seitenmenü.
2. Klicken Sie auf SEO & Metadaten im Abschnitt Website-Konfiguration:
   
3. Gehen Sie zu Benutzerdefinierter Code
4. Wählen Sie aus, unter welchen Registerkarten hinzugefügt werden soll HEAD oder unter BODY.
5. Speichern Sie die Änderungen am Ende der Seite:
   

CSS-Anpassungsbeispiele

Diese Beispiele ermöglichen den Einstieg in die erweiterte Anpassung der Webseiten. Es besteht jedoch das Risiko, dass Sie je nach den vorgenommenen Änderungen nicht mehr auf den Editor selbst zugreifen können, was Sie zwingt, von vorne zu beginnen.

Anpassen des Hintergrundbildes der Website

Um das Bild Ihrer Wahl (das in der Dateibibliothek hochgeladen werden soll) als Hintergrundbild zu setzen und dessen Anzeige anzupassen:

1. Gehen Sie zu Punkt 3, der auf dem ersten Bild oben in diesem Leitfaden 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 die Befehle eingefügt werden können,
4. dann background-image: url("../data/files/fond01.jpg"); mit dem genauen Pfad & Namen des in der Bibliothek hochgeladenen Bildes, ohne das Semikolon zu vergessen, um den nächsten Befehl einfügen zu können.
5. background-repeat: repeat; um das eingefügte Bild zu wiederholen.
6. background-attachment: fixed; damit das Hintergrundbild auch dann fest bleibt, wenn der Besucher die Seite nach unten oder oben scrollt, um den Inhalt zu lesen.
7. } um den zuvor geöffneten Einfügebereich zu schließen.
8. </style> um anzugeben, dass der Code hier endet.

Buchstabenabstand aller Links der Website erhöhen

Um den Abstand zwischen den Buchstaben bei klickbaren Wörtern (Links) stark 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 anzugeben, dass Sie den CSS-Code ändern möchten,
3. dann .container div a { um anzugeben, dass Sie die Blöcke der Seite und insbesondere die Links ("a") ändern möchten, und das "{" um den Raum zu öffnen, in dem die Befehle eingefügt werden können,
4. dann letter-spacing:1em; durch Verringerung des Werts (0.9em zum Beispiel) ohne das Semikolon zu vergessen, um den nächsten Befehl einfügen zu können oder abzuschließen.
5. } um den zuvor geöffneten Einfügebereich zu schließen.
6. </style> um anzugeben, dass der Code hier endet.

Nehmen Sie sich die Zeit, diese anderen CSS-Codebeispiele kennenzulernen, die Sie auf Ihrer Website einfügen können.