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

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 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 unten auf 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 welchen Registerkarten Sie hinzufügen möchten HEAD oder unter BODY.
5. Speichern Sie die Änderungen am unteren Rand der Seite:
   

CSS-Anpassungsbeispiele

Diese Beispiele helfen Ihnen, mit der erweiterten Anpassung der Webseiten zu beginnen. 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.

Hintergrundbild der Website anpassen

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

1. Gehen Sie zu Punkt 3, der in der ersten Abbildung 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 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ügungsbereich zu schließen.
8. </style> um anzugeben, dass der Code hier endet.

Buchstabenabstand aller Links der Website ändern

Um den Buchstabenabstand in den anklickbaren Wörtern (Links) stark zu vergrößern:

1. Gehen Sie zu Punkt 3, der in der ersten Abbildung 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 z.B.) 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ügungsbereich zu schließen.
6. </style> um anzugeben, dass der Code hier endet.

Nehmen Sie Kenntnis von diesen anderen CSS-Codebeispielen, die auf Ihrer Website eingefügt werden können.