Wenn Ihnen die Design-Einstellungen nicht reichen, können Sie Ihrer Homepage eigenes CSS und HTML hinzufügen. Je nachdem, was der Code tun soll, gibt es dafür vier Stellen. Alle stehen in jedem Paket zur Verfügung.
Wohin Ihr Code gehört
- Eigenes Stylesheet für die ganze Homepage: Einstellungen → Header-Bereich, Abschnitt Eigenes, zusätzliches CSS-Stylesheet. Ihre CSS-Regeln gelten auf jeder Seite und auch im mobilen Layout.
- Code im Head-Bereich: Einstellungen → Header-Bereich, Abschnitt Eigener, zusätzlicher HTML-Code (zwischen <head> und </head>). Hier gehören
<style>- und<link>-Tags, zusätzliche Meta-Tags oder Webfonts hin. - HTML am Anfang oder Ende jeder Seite: Einstellungen → Allgemein, Abschnitt Sitewide, Felder Anfang jeder Seite und Ende jeder Seite. Geeignet für Counter-Codes und ähnliche Schnipsel, die auf jeder Seite erscheinen müssen.
- Code innerhalb einer einzelnen Seite: im Inhaltseditor über Block hinzufügen → Spezial → Eingebundenes HTML, zum Beispiel für eine Karte, ein Widget oder den Einbettungscode eines Videos. Mit dem HTML-Editor in der Werkzeugleiste bearbeiten Sie außerdem das HTML des Seiteninhalts direkt.
Eigenes Stylesheet einbinden
- Schreiben Sie Ihre CSS-Regeln in einem Texteditor und speichern Sie die Datei mit der Endung
.css. - Laden Sie die Datei unter Dateien → Dateien hochladen hoch (siehe Dateien hochladen). CSS-Dateien gehören in den Ordner für Code-Dateien; Automatisch Ordner auswählen legt sie dort ab.
- Öffnen Sie Einstellungen → Header-Bereich und wählen Sie die Datei unter Eigenes, zusätzliches CSS-Stylesheet im Feld URL (zur CSS-Datei): aus.
- Klicken Sie auf Speichern und laden Sie Ihre Homepage neu.
Brauchen Sie nur wenige Regeln, können Sie sie stattdessen in das Feld HTML-Code unter Eigener, zusätzlicher HTML-Code (zwischen <head> und </head>) schreiben, eingeschlossen in ein <style>...</style>-Tag.
Code in eine Seite einbetten
- Öffnen Sie die Seite unter Seiten → Seiten verwalten → Seiten-Inhalt bearbeiten.
- Klicken Sie auf Block hinzufügen (oder bei einem vorhandenen Element auf Element danach einfügen), öffnen Sie den Reiter Spezial und wählen Sie Eingebundenes HTML.
- Fügen Sie den Code ein und speichern Sie die Seite.
Gut zu wissen
- Ihre Änderungen sind sofort live; es gibt keine getrennte Testversion Ihrer Homepage.
- Eigenes CSS gilt auch im mobilen Layout. Vermeiden Sie feste Breiten und verwenden Sie
max-width: 100%, damit Ihre Elemente auf kleine Bildschirme passen (siehe Mobile Homepage). - Vollständige HTML-Dateien (
.htm,.html) können nur mit dem Premium-Paket hochgeladen werden. Die Grundlagen von HTML erklärt Was ist HTML?.