Blog-Design anpassen

Klicken Sie in der linken Seitenleiste auf Design, um mit der Anpassung des Erscheinungsbilds Ihres Blogs zu beginnen.

Klicken Sie in der linken Seitenleiste auf Design, um mit der Anpassung des Erscheinungsbilds Ihres Blogs zu beginnen.

Logo
- Laden Sie Ihr Logo hoch und legen Sie eine Ziel-URL für Klicks auf das Logo fest.
- Empfohlene Größe: 250×150 oder 400×200
Header-Button
- Wählen Sie zwischen zwei Button-Typen:
  - Subscribe Form
    - "Zeigt beim Klick auf den Button ein Formular zur Lead-Erfassung an."
    - Formularinhalt und Einstellungen können im Tab „Form“ konfiguriert werden.
  - Zur eingegebenen URL wechseln
    - Verknüpfen Sie den Button mit einer beliebigen internen/externen URL.
Navigationsleiste
- Primäre Navigation
  - Legen Sie eine feste Menüleiste oben in Ihrem Blog fest.
- Dropdown-Menü
  - Konfigurieren Sie Dropdown-Einträge, die beim Klick auf einen Menüpunkt erscheinen.
Benutzerdefinierter Code
- Sie können außerdem benutzerdefiniertes CSS oder HTML einfügen, um Ihren Blog vollständig an die Markenrichtlinien Ihrer Website anzupassen.

Blog-Titel und -Beschreibung
- Passen Sie den Titel- und Beschreibungstext an, der auf der Startseite Ihres Blogs angezeigt wird.
Textfarbe
- Legen Sie die Farbe Ihres Banner-Texts fest.
Banner-Layout
- Wählen Sie die Textausrichtung: Linksbündig oder Zentriert.
Hintergrund (Farbe oder Bild)
- Passen Sie den Banner-Hintergrund an:
  - Legen Sie eine einfarbige Hintergrund-Farbe fest
  - Oder laden Sie ein Hintergrund-Bild hoch
    - Empfohlene Größen: 1680×450 für Desktop / 390×300 für Mobilgeräte
Benutzerdefinierter Code
- Sie können außerdem benutzerdefiniertes CSS oder HTML einfügen, um Ihren Blog vollständig an die Markenrichtlinien Ihrer Website anzupassen.

Layout

inblog bietet drei Standard-Beitragslayouts zur Auswahl.
Sie können zusätzlich visuelle Anpassungen über benutzerdefinierten Code vornehmen.
- Benutzerdefinierter Code: Verwenden Sie HTML/CSS für vollständig maßgeschneiderte Layouts.

Fügen Sie Ihre Unternehmensinformationen im Footer-Bereich hinzu.
Wie andere Bereiche kann auch der Footer mit Code angepasst werden.

Benutzerdefinierten Code eingeben und speichern

Wenn die Code-Felder nicht sichtbar sind oder nicht bearbeitet werden können, prüfen Sie zunächst den Tarif Ihres Blogs. Die Einstellungen für benutzerdefinierten Code sind im Free-Tarif gesperrt. Wenn benutzerdefinierter Code für Ihren Blog verfügbar ist, öffnen Sie Design → Allgemein und aktivieren Sie den Schalter Eigener Header, Eigener Banner-Code oder Eigener Footer-Code für den Bereich, den Sie ändern möchten. Wenn der Schalter deaktiviert ist, zeigt die Seite anstelle des Editors die Meldung Switch ON to insert custom ... code. an. Aktivieren Sie für das Layout der Beitragsliste die entsprechende Einstellung für benutzerdefinierten Code im Abschnitt Layout.

Die Custom Code-Bereiche unter Header, Banner, Layout und Footer verwenden alle denselben Editor. Er verfügt über ein HTML-Feld oben und ein Style-CSS-Feld unten. Geben Sie CSS-Regeln direkt ein oder schließen Sie sie wie unten gezeigt in <style>-Tags ein. Neu erstellte oder bearbeitete CSS-Regeln werden beim Anwenden des Codes automatisch in <style>-Tags eingeschlossen.

<style>
  h2 {
    font-size: 20px;
  }
</style>

Unverändert gespeichertes CSS bleibt erhalten. Das Bearbeiten anderer Einstellungen oder nur des HTML konvertiert vorhandenes CSS nicht. Um zuvor gespeichertes CSS ohne Tags zu aktivieren, überprüfen Sie es und schließen Sie es explizit in <style>-Tags ein. Überprüfen Sie das Design vor dem Speichern in der Vorschau. Unvollständige CSS-Regeln oder <style>-Blöcke sowie voreingestellte Namen wie cover führen zu einem Fehler in roter Schrift. Fügen Sie dem CSS-Feld kein HTML oder Skripte hinzu. Falls ein bestehendes Feld diese bereits enthält, können Sie dessen CSS-Inhalte bearbeiten, während der übrige Code, die Style-Attribute und die Reihenfolge unverändert bleiben.

Ihr Code wird erst nach beiden dieser Schritte auf den Blog angewendet:

Klicken Sie auf Code anwenden. Der Code wird validiert und in der Vorschau im Editor dargestellt. Er ist noch nicht gespeichert.
Klicken Sie oben im Einstellungsbereich auf Speichern. Erst nach diesem Schritt wird die Änderung in Ihrem Blog live geschaltet.

Wenn Sie auf Code anwenden klicken und dann den Design-Bildschirm verlassen, ohne zu speichern, gehen Ihre Änderungen verloren. Ein Bestätigungsdialog wird angezeigt, wenn Sie versuchen, die Seite mit ungespeicherten Änderungen zu verlassen.

Benutzerdefinierter Code wird pro Bildschirm und pro Bereich gespeichert. Die Tabs Allgemein, Startseite / Kategorie, Beitrag, Autor und 404 oben auf dem Design-Bildschirm verwalten jeweils ihren eigenen Code, und innerhalb von Allgemein sind Header, Banner und Footer ebenfalls separate Felder. Geben Sie Ihren Code in dem Tab für den Bildschirm ein, den Sie ändern möchten – passen Sie beispielsweise die Abstände des Beitragsinhalts unter dem Tab Beitrag an.
Weit gefasste CSS-Selektoren wie a oder button können sich auf Ihren gesamten Blog auswirken. Der Editor zeigt in diesem Fall eine Warnung an – schränken Sie den Gültigkeitsbereich des Selektors ein, wenn die Regel nur für einen bestimmten Bereich gelten soll.

404-Fehlerseite

Sie können eine benutzerdefinierte 404-Fehlerseite für den Fall konfigurieren, dass ein Nutzer auf einer nicht existierenden URL landet.

Unterstützung für die mobile Vorschau

"Das Design Ihres Blogs ist vollständig responsiv." Sehen Sie sich direkt im Editor an, wie Ihr Blog sowohl in der Desktop- als auch in der Mobilansicht aussieht.

Zuletzt aktualisiert 2026-10-14

ZurückÜbersicht über die Blog-Einstellungen WeiterTeammitglieder verwalten