Design & Branding

Layout, Farben, Typografie und sichtbare Abschnitte einer Statusseite anpassen.

Design & Branding

Jede Statusseite hat eine visuelle Design-Konfiguration. Bearbeiten Sie sie in der App unter Dashboard → Statusseiten → (Seite) → Design oder über die Design-API. Änderungen werden zusammengeführt — Sie senden nur die Felder, die Sie ändern möchten, der Rest behält seine aktuellen Werte.

Layouts

Wählen Sie eines von acht Layout-Presets. Alle zeigen dieselben Daten (Gesamtstatus, Services, optionale Statistiken und Historie), unterscheiden sich aber in Struktur und Dichte — sehen Sie sich jedes im Design-Editor live an.

LayoutIdeal für
classicDer Standard. Prominentes Hero-Banner mit dem Gesamtstatus, gefolgt von der Service-Liste.
cardsJeder Service als Karte in einem responsiven Raster.
minimalReduzierte, textorientierte Darstellung mit minimalem Rahmen.
sleekModernes Hero-Banner mit Akzentfarben-Verlauf.
boardDashboard-artiges Board, um viele Services auf einen Blick zu sehen.
splitHeader über die volle Breite mit zweispaltigem Body (Status neben Historie).
timelineBetont eine chronologische Timeline von Vorfällen und Wartungen.
compactDichtes Layout, das viele Services auf wenig vertikalem Raum unterbringt.

Erscheinungsbild

OptionWerteStandardBeschreibung
colorSchemelight, dark, autoautoauto folgt der Systemeinstellung des Besuchers.
accentColorHex-Farbe #rrggbb#6366f1Für Hervorhebungen, Links und Verläufe.
headerStylesimple, centered, herosimpleWie prominent der Seiten-Header ist.
fontFamilysystem, monosystemmono gibt einen technischen, dicktengleichen Look.
cardRadiusnone, md, xlmdEckenrundung von Karten und Panels.
pageWidthsm, md, lg, xllgMaximale Inhaltsbreite.

Inhalt & Abschnitte

OptionTypStandardBeschreibung
customTitleString (≤120)Überschreibt den Seitentitel im Header.
customSubtitleString (≤200)Ein Untertitel unter dem Titel.
showUptimeStatsBooleantrueVerfügbarkeitsprozente pro Service anzeigen.
showServiceUrlsBooleanfalseDie URL jedes Service neben dem Namen anzeigen.
showLastCheckedBooleanfalseDen „zuletzt geprüft"-Zeitstempel pro Service anzeigen.
showHistoryBooleantrueDen Abschnitt „Letzte Historie" anzeigen.
historyDaysZahlWie viele Tage Historie einbezogen werden (begrenzt durch das Plattform-Min/Max).
showPoweredByBooleantrueDen „powered by Uptimeify"-Footer anzeigen. Für volles White-Labeling ausschalten.
showHistory steuert, ob der Historien-Abschnitt gerendert wird. Die separaten Schalter Letzte Vorfälle anzeigen und Letzte Wartungen anzeigen (in den Haupteinstellungen der Seite) steuern, was in diesen Abschnitt kommt. Siehe Letzte Historie.

Beispiel (API)

curl -X PATCH "$BASE_URL/api/status-pages/<id>/design" \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "layout": "sleek",
    "colorScheme": "dark",
    "accentColor": "#10b981",
    "showServiceUrls": true,
    "showPoweredBy": false
  }'

Nur die gesendeten Felder werden geändert; alles andere behält seinen aktuellen Wert. Siehe Statusseiten-Design aktualisieren für die vollständige Referenz.

White-Labeling

Für eine vollständig gebrandete Seite ohne Uptimeify-Verweise:

  1. Setzen Sie showPoweredBy auf false.
  2. Konfigurieren Sie eine eigene Domain, damit die Seite auf Ihrem Hostnamen läuft.
  3. Setzen Sie eine accentColor (und optional customTitle/customSubtitle) passend zu Ihrer Marke.