Benutzerdefiniertes HTML und CSS zu Sitebuilder hinzufügen

Sitebuilder bietet umfangreiche Anpassungsmöglichkeiten, aber manchmal möchten Sie mehr. Mit benutzerdefiniertem HTML und CSS können Sie einzigartige Funktionen hinzufügen und Ihr Design bis ins Detail perfektionieren. Diese Anleitung zeigt Ihnen, wie Sie sicher und effektiv eigenen Code hinzufügen.

Wann benutzerdefinierten Code verwenden

Benutzerdefinierter Code ist in verschiedenen Situationen nützlich:

  • Einzigartige visuelle Effekte und Animationen
  • Externe Widgets und Tools integrieren
  • Spezifische Stiländerungen vornehmen
  • Tracking-Pixel für Marketing hinzufügen
  • Erweiterte Animationen implementieren
  • Funktionen, die Sitebuilder standardmäßig nicht bietet
  • Chat-Widgets von Drittanbietern integrieren
  • Angepasste Schriftarten verwenden

HTML-Block hinzufügen

HTML-Element platzieren

Das Hinzufügen eines HTML-Blocks ist einfach:

  1. Öffnen Sie die Seite im Editor
  2. Klicken Sie auf das Plus-Symbol, um ein Element hinzuzufügen
  3. Suchen Sie in der Elementbibliothek nach HTML oder Code
  4. Ziehen Sie den HTML-Block an die gewünschte Position auf Ihrer Seite

Code eingeben

Nach dem Platzieren des Blocks:

  1. Klicken Sie auf den HTML-Block, um ihn auszuwählen
  2. Klicken Sie auf Code bearbeiten, um den Editor zu öffnen
  3. Fügen Sie Ihren HTML-Code in das Textfeld ein oder tippen Sie ihn ein
  4. Klicken Sie auf Speichern, um die Änderungen anzuwenden
  5. Sie sehen das Ergebnis sofort in der Vorschau

Beispiele für die Verwendung von HTML

Sie können HTML für verschiedene Zwecke verwenden. Denken Sie an das Einbetten externer Widgets, das Erstellen angepasster Strukturen mit divs und Klassen oder das Hinzufügen interaktiver Elemente, die Sitebuilder standardmäßig nicht bietet.

CSS hinzufügen

Methode 1: Website-weites CSS

Fügen Sie CSS hinzu, das auf allen Seiten funktioniert:

  1. Gehen Sie zu Einstellungen im Dashboard
  2. Klicken Sie auf Benutzerdefinierter Code oder Erweitert
  3. Finden Sie den Abschnitt Benutzerdefiniertes CSS
  4. Fügen Sie Ihren CSS-Code hinzu
  5. Klicken Sie auf Speichern, um zu bestätigen

Dieses CSS wird auf jeder Seite Ihrer Website geladen.

Methode 2: Seiten-spezifisches CSS

CSS, das nur auf einer bestimmten Seite funktioniert:

  1. Öffnen Sie die Seite, die Sie anpassen möchten
  2. Gehen Sie zu Seiteneinstellungen
  3. Finden Sie den Abschnitt Benutzerdefiniertes CSS oder Head-Code
  4. Fügen Sie Ihr CSS mit Style-Tags hinzu
  5. Speichern Sie die Seite

Methode 3: Inline-Styling

Direkt auf ein Element in HTML:

  1. Fügen Sie einen HTML-Block hinzu
  2. Verwenden Sie Inline-Stile in Ihren HTML-Elementen
  3. Dies ist nützlich für einmalige Anpassungen

CSS-Grundlagen erklärt

Selektoren verstehen

CSS-Selektoren bestimmen, welche Elemente Sie gestalten:

Element auswählen: Gestalten Sie alle Elemente eines Typs, wie alle h2-Überschriften oder alle Absätze.

Klasse auswählen: Gestalten Sie Elemente mit einem bestimmten Klassennamen. Klassen beginnen mit einem Punkt und können wiederverwendet werden.

ID auswählen: Gestalten Sie ein bestimmtes Element mit einer eindeutigen ID. IDs beginnen mit einem Rautezeichen und sind pro Seite einzigartig.

Häufig verwendete CSS-Eigenschaften

Farben und Hintergründe: Passen Sie Textfarben, Hintergrundfarben und Randfarben an, um Ihr Design zu personalisieren.

Abstände und Ränder: Bestimmen Sie den Raum innerhalb von Elementen (Padding) und außerhalb von Elementen (Margin) für ein gutes Layout.

Typografie: Passen Sie Schriftgröße, Gewicht, Zeilenhöhe und Ausrichtung für lesbaren Text an.

Layout-Eigenschaften: Verwenden Sie Display, Flexbox und Grid für komplexe Layouts und Positionierung.

Erweiterte CSS-Techniken

Hover-Effekte erstellen

Hover-Effekte machen Ihre Website interaktiv. Wenn Besucher mit der Maus über ein Element fahren, kann sich das Styling ändern. Denken Sie an Farbänderungen, Schatteneffekte oder subtile Bewegungen.

Übergänge hinzufügen

Übergänge machen Hover-Effekte fließend. Anstatt abrupter Änderungen erhalten Sie sanfte Animationen. Stellen Sie die Dauer und den Animationstyp für ein professionelles Ergebnis ein.

Animationen implementieren

Mit Keyframe-Animationen können Sie komplexere Bewegungen erstellen. Elemente können einblenden, verschieben oder drehen. Beginnen Sie einfach und bauen Sie langsam auf.

Responsive Styling

Passen Sie Ihr Styling pro Bildschirmgröße mit Media Queries an. Definieren Sie Breakpoints für Mobilgeräte, Tablets und Desktops. Stellen Sie sicher, dass Ihr angepasstes Styling auf allen Geräten gut aussieht.

JavaScript hinzufügen

Head-Skripte platzieren

Für Skripte, die früh geladen werden müssen:

  1. Gehen Sie zu Einstellungen und wählen Sie Benutzerdefinierter Code
  2. Finden Sie den Head-Bereich
  3. Fügen Sie Ihr Skript hinzu
  4. Beachten Sie: Dies kann die Ladezeit beeinflussen

Body-Skripte platzieren

Für Skripte, die später geladen werden können:

  1. Gehen Sie zu Benutzerdefinierter Code
  2. Finden Sie den Body- oder Footer-Bereich
  3. Fügen Sie Ihr Skript hinzu
  4. Dies ist oft besser für die Leistung

Häufig verwendete Skripte

Häufig verwendete Skripte, die Sie hinzufügen können, sind Google Tag Manager für Analysen und Marketing, Facebook Pixel für Werbe-Tracking und Chat-Widgets von Anbietern wie Zendesk oder Intercom.

Best Practices befolgen

Organisation des Codes

Halten Sie Ihren Code organisiert:

  • Verwenden Sie klare Kommentare, um Abschnitte zu markieren
  • Gruppieren Sie verwandte CSS zusammen
  • Verwenden Sie beschreibende Klassennamen, die die Funktion erklären
  • Erstellen Sie Backups Ihres benutzerdefinierten Codes

Leistungsüberlegungen

Halten Sie Ihre Website schnell:

  • Minimieren Sie die Menge an benutzerdefiniertem Code
  • Laden Sie Skripte asynchron, wo möglich
  • Testen Sie die Auswirkungen auf die Ladezeit nach Änderungen
  • Entfernen Sie ungenutzten Code

Wartung planen

Planen Sie für die Zukunft:

  • Dokumentieren Sie, was Ihr Code tut
  • Testen Sie nach Sitebuilder-Updates, ob alles noch funktioniert
  • Erstellen Sie Backups Ihres benutzerdefinierten Codes
  • Führen Sie ein Änderungsprotokoll über Änderungen

Häufige Anwendungsfälle

Benutzerdefinierte Schriftarten integrieren

Verwenden Sie Google Fonts oder andere Webfonts, indem Sie den Schriftimport zu Ihrem CSS hinzufügen und dann die Schriftart auf Ihre Textelemente anwenden.

Scroll-Animationen erstellen

Lassen Sie Elemente animieren, wenn sie in den Bildschirm scrollen. Kombinieren Sie CSS-Animationen mit JavaScript-Scroll-Erkennung für moderne Effekte.

Benutzerdefinierte Buttons stylen

Erstellen Sie auffällige Buttons mit Farbverläufen, Schatten und Hover-Effekten. Passen Sie Farben an Ihr Corporate Design an für ein konsistentes Design.

Tooltips hinzufügen

Fügen Sie informative Tooltips hinzu, die beim Hover erscheinen. Nützlich für zusätzliche Erklärungen bei komplexen Themen oder Produkten.

Tipps zur Fehlerbehebung

CSS funktioniert nicht

Wenn Ihr CSS nicht funktioniert, überprüfen Sie:

  • Sind die Selektoren korrekt geschrieben?
  • Gibt es widersprüchliches CSS vom Thema?
  • Versuchen Sie die !important-Deklaration als letzten Ausweg
  • Überprüfen Sie, ob das CSS tatsächlich geladen wird

JavaScript-Fehler beheben

Bei JavaScript-Problemen:

  • Überprüfen Sie die Browser-Konsole mit F12
  • Überprüfen Sie, ob erforderliche Bibliotheken geladen sind
  • Testen Sie im Inkognito-Modus ohne Erweiterungen
  • Überprüfen Sie die Reihenfolge des Skriptladens

Layout-Probleme debuggen

Bei Layout-Problemen:

  • Untersuchen Sie mit den DevTools des Browsers
  • Überprüfen Sie die Box-Sizing-Einstellungen
  • Überprüfen Sie die Eigenschaften des übergeordneten Elements
  • Suchen Sie nach widersprüchlichen Rändern

Verwandte Artikel

Brauchen Sie Hilfe?

Wir sind für Sie da! Haben Sie Fragen oder stoßen Sie auf Probleme? Unser Support-Team hilft Ihnen gerne persönlich weiter. Senden Sie uns eine Nachricht über das Ticketsystem - wir antworten in der Regel innerhalb weniger Stunden und denken gerne mit Ihnen mit.