Den Code (Quellcode / CSS) im Site Creator bearbeiten

Dieser Leitfaden erklärt, wie Sie den Quellcode anpassen, CSS ändern und den HEAD- oder BODY-Teil einer Website bearbeiten, die mit Infomaniaks Site Creator erstellt wurde.

Hinzufügen von benutzerdefiniertem Code

Um auf den Site Creator zuzugreifen:

1. Melden Sie sich im Infomaniak Manager (manager.infomaniak.com) über einen Webbrowser wie Brave oder Edge an
2. Klicken Sie auf das Symbol oben rechts in der Benutzeroberfläche (oder navigieren Sie durch das linke Seitenleistenmenü)
3. Wählen Sie Hosting (Web & Domain Universum)
4. Klicken Sie auf den Namen des betreffenden Objekts in der angezeigten Tabelle
5. Klicken Sie im linken Seitenleistenmenü auf Site Creator
6. Klicken Sie auf Meine Website anpassen

Einmal im Site Creator:

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

Metadaten in HEAD & BODY

Um JavaScript-Code oder einen anderen Code zum HEAD oder BODY Abschnitt des Quellcodes Ihrer Website hinzuzufügen:

1. Klicken Sie im linken Seitenleistenmenü auf Einstellungen
2. Klicken Sie auf SEO & Metadaten im Abschnitt Websit Konfiguration
3. Scrollen Sie nach unten zu Benutzerdefinierter Code
4. Wählen Sie aus, ob Sie unter den Registerkarten HEAD oder unter BODY hinzufügen möchten
5. Speichern Sie die Änderungen unten auf der Seite
   

Beispiele für CSS-Anpassung

Diese Beispiele ermöglichen den Einstieg in die erweiterte Anpassung von Website-Seiten. Es besteht jedoch ein Risiko, je nach vorgenommenen Änderungen möglicherweise nicht mehr auf den Editor zugreifen zu können, was Sie dazu zwingt, von vorne zu beginnen.

Website-Hintergrund anpassen

Um das Bild Ihrer Wahl (das in der Dateibibliothek hochgeladen werden soll) als Hintergrundseite festzulegen und seine Anzeige anzupassen:

1. Gehen Sie zu Punkt 3, der im ersten Bild oben in diesem Handbuch sichtbar ist
2. Fügen Sie den Code <style> ein, um anzugeben, dass Sie den CSS-Code ändern möchten
3. Dann body {, um anzuzeigen, dass Sie den Seitenkörper ändern möchten, und "{", um den Platz zum Einfügen von Befehlen zu öffnen
4. Dann background-image: url("../data/files/fond01.jpg"); mit dem genauen Pfad & Namen des in der Bibliothek geladenen Bildes, ohne das Semikolon zu vergessen, um den nächsten Befehl einzufügen
5. background-repeat: repeat;, um das eingefügte Bild zu wiederholen
6. background-attachment: fixed;, damit das Hintergrundbild fixiert bleibt, auch wenn der Besucher die Seite nach oben oder unten scrollt, um ihren Inhalt zu lesen
7. }, um den zuvor geöffneten Platz zum Einfügen zu schließen
8. </style>, um anzugeben, dass der Code hier endet

Abstand zwischen den Buchstaben aller Website-Links vergrößern

Um (viel) die Buchstaben in klickbaren Wörtern (Links) auseinander zu ziehen:

1. Gehen Sie zu Punkt 3, der im ersten Bild oben in diesem Handbuch 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 ändern möchten und insbesondere die Links ("a") und "{", um den Platz zum Einfügen von Befehlen zu öffnen
4. Dann letter-spacing:1em;, indem Sie den Wert verringern (z. B. 0.9em) und das Semikolon nicht vergessen, um den nächsten Befehl einzufügen oder zu beenden
5. }, um den zuvor geöffneten Platz zum Einfügen zu schließen
6. </style>, um anzugeben, dass der Code hier endet

Siehe weitere Beispiele für CSS-Code, die Sie auf Ihrer Website einfügen können.