Dieser Leitfaden erklärt, wie Sie den Quellcode anpassen, das CSS ändern, den HEAD- oder BODY-Bereich einer mit Site Creator 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

Wenn 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 HTML-, JavaScript- (mit seinen Tags script) oder benutzerdefinierten 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 jeden anderen Code im 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 den Registerkarten hinzuzufügen HEAD oder unter BODY.
5. Speichern Sie die Änderungen am Ende 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 je nach den vorgenommenen Änderungen nicht mehr auf den Editor selbst zugreifen können, was Sie zwingen wird, von vorne zu beginnen.

Anpassen des Hintergrundbilds der Website

Um das von Ihnen gewünschte Bild (das in der Dateibibliothek hochzuladen) 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 Körper der Seite ändern möchten, und das "{" um den Raum 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 fest bleibt, auch 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 die Buchstaben in den anklickbaren Wörtern (Links) stark zu beabstanden:

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 Verringern 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.