Mit Custom CSS (Cascading Style Sheets) kannst du dein Heyflow über die vielen Designeinstellungen, die Heyflow standardmäßig bietet, hinaus individuell gestalten.

Flache Grafik, die einen Browser mit einer benutzerdefinierten Codeumschaltung zeigt

Technisch gesehen, kannst du jeglichen validen CSS-Code schreiben, der dann in deinem Heyflow geladen wird. In der aktuellen Heyflow-Version arbeiten wir mit Less. Du kannst den Less-Dialekt auch in deinem Custom CSS verwenden.

Du findest das benutzerdefinierte CSS auf der Code-Seite auf der linken Seite im Abschnitt Bauen deines Heyflows.

Beispiele

Beispiel 1: Hintergrundverlauf

Angenommen, du möchtest über die Möglichkeiten von Heyflow hinaus die Hintergrundfarbe deines Flows anpassen. Dafür kannst du einfach folgendes Standard-CSS schreiben und speichern.

body {
    background: linear-gradient(162deg, rgba(200,199,221,1) 0%, rgba(148,148,255,1) 35%, rgba(0,212,255,1) 100%);
}

V
ergiss nicht auf CSS speichern zu klicken.

Beispiel 2: Spezifische Elements anpassen

Achtung: Wir können nicht garantieren, dass die HTML-Struktur deines Heyflows stabil ist. Wenn wir Heyflow aktualisieren, um es zu verbessern, müssen wir möglicherweise auch Teile der HTML- und CSS-Struktur ändern, sodass dein benutzerdefiniertes CSS nie 100% zuverlässig ist, wenn du einen Heyflow erneut veröffentlichst. Du kannst jedoch jede veröffentlichte Version als stabil betrachten: der HTML-Code wird sich nicht ändern, wenn du deinen Heyflow nicht erneut veröffentlichen.

Mit Custom CSS kannst du auch bestimmte HTML-Elemente in deinem Heyflow gestalten. Zunächst benötigst du einen Bezeichner bzw. Identifier, z.B. eine ID oder eine Klasse. Jeder Block hat eine ID, z. B. text-block-headline-f6a338f1.

Du kannst diese ID im Elemente-Panel deiner Entwicklertools nachschlagen. Klicke dafür mit der rechten Maustaste auf ein Element in der Vorschau und klicke auf Inspizieren (wir verwenden hier Chrome). Dadurch werden die Entwicklertools auf der Registerkarte Elemente geöffnet. Suche einen geeigneten Bezeichner und kopiere ihn.

Auf der CSS-Code Seite definierst du nun dein CSS und speicherst deine Änderungen. Hier überschreiben wir die Schriftart (font-family) der H2 im Text Block zu 'Courier'.