Code (Quelle / CSS) auf Site Creator bearbeiten

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

Voraussetzungen

• Gelangen Sie zu Site Creator:
  1. Klicken Sie hier, um auf die Verwaltung Ihres Produkts im Manager Infomaniak zuzugreifen (Hilfe benötigen?).
  2. Klicken Sie direkt auf den Name des betreffenden Produkts.
  3. Klicken Sie auf Meine Website anpassen:
     

Benutzerdefinierten Code hinzufügen

Sobald Sie in Site Creator sind:

1. Klicken Sie auf Design im linken Seitenmenü.
2. Klicken Sie auf Mehr Einstellungen.
3. Klicken Sie unten auf Benutzerdefinierter Code:
   
4. Geben Sie HTML-Code, JavaScript (mit seinen Tags Skript oder CSS (mit seinen Tags Stil) - lesen Sie weiter unten für einige Beispiele.
5. Speichern Sie die Änderungen unten auf der Seite.

Metadaten im HEAD & BODY

Um JavaScript-Code oder jeden anderen Code im Abschnitt Kopf oder BODY des Quellcodes Ihrer Website:

1. Klicken Sie auf Einstellungen im linken Seitenmenü.
2. Klicken Sie auf SEO & Metadaten im Abschnitt Websites-Konfiguration.
3. Scrollen Sie nach unten zu Benutzerdefinierter Code.
4. Wählen Sie aus, ob Sie unter den Registerkarten Kopf oder unter BODY.
5. Speichern Sie die Änderungen unten auf 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 zugreifen können, was Sie zwingen wird, von vorne zu beginnen.

Den Hintergrund des Websites anpassen

Um Ihr gewünschtes Bild (das in der Dateibibliothek hochgeladen werden soll) als Hintergrundbild zu verwenden und dessen Anzeige anzupassen:

1. Gehen Sie zu Punkt 3, der auf dem ersten Bild oben in dieser Anleitung 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 Seitenkörper ä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.

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

Um die Buchstaben in den anklickbaren Wörtern (Links) weit auseinander zu setzen:

1. Gehen Sie zu Punkt 3, der auf dem ersten Bild oben in dieser Anleitung 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; indem der Wert verringert wird (z.B. 0.9em) und das Semikolon nicht vergessen wird, um den nächsten Befehl einzufügen oder zu beenden.
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-Code-Beispiele zu durchstöbern, die Sie auf Ihrer Website einfügen können.