Zum Hauptinhalt springen

Wie gestaltet man das Design: Farbpalette und Farbverlauf

In diesem Artikel erfährst du, wie du Farbpaletten und Multi-Point-Farbverläufe anwendest.

Dmytro avatar
Verfasst von Dmytro
Vor über 2 Monaten aktualisiert

Onepage bietet dir eine Vielzahl an Möglichkeiten, deine Projekte ganz individuell anzupassen


Inhalt:


Farbpalette auswählen

Klicke auf Design ➡️ Farbe, um die Farbpaletten deines Projekts aufzurufen.

Wie du siehst, kannst du eine unserer vorgefertigten Farbpaletten wählen – jede besteht aus abgestimmten Farben für ein modernes Design

Wähle eine Palette aus der Liste oder erstelle deine eigene:

Wenn du eine individuelle Farbpalette möchtest, aber unsicher bist, welche Farben gut zusammen passen, empfehlen wir dir Generatoren wie coolors oder colorhunt.

📌 Hinweis: Projekte teilen sich Schrift‑ und Farbeinstellungen. Sobald du in einem Projekt die Farbpalette änderst, wirkt sich das automatisch auf alle Seiten deiner Website aus


Schriftarten wählen

Unter Typografie findest du unsere beliebten Schriftarten. Die Presets sind so zusammengestellt, dass dein Projekt ein einheitliches Erscheinungsbild erhält. Mehr Informationen findest du in unserem dazugehörigen Artikel:


Farbverlauf-Hintergrund

In Onepage kannst du Farbverläufe für ganze Abschnitte, einzelne Container innerhalb eines Abschnitts oder für CTA Buttons hinzufügen. Im Folgenden zeigen wir dir, wie du zu den Einstellungen gelangst, erklären die drei Farbverlaufstypen (Linear, Radial, Netz) und wie du deine Lieblingskombinationen als Presets speicherst.

Farbverlauf auf Abschnitt anwenden

Fahre mit dem Mauszeiger über den gewünschten Abschnitt. Klicke im Control‑Panel oben rechts auf das Pinsel‑Symbol. Wechsle im geöffneten Panel zur dritten Option (Gradient).

Farbverlauf auf einzelne Container anwenden

Fahre mit dem Mauszeiger über den gewünschten Container, bis das Control‑Panel erscheint. Klicke auf das Pinsel‑Symbol. Klicke im Popup auf Hintergrund und wähle die vierte Option (Gradient).

Farbverlauf auf Button anwenden

Du kannst einem Button auch einen Farbverlauf‑Hintergrund zuweisen. Klicke dazu auf den Button, wechsel in die Style‑Einstellungen (Pinsel‑Symbol), klicke auf Hintergrund und wähle die vierte Option (Gradient).

Farbverlauf auf Text anwenden

Um einem Textelement oder einer Überschrift einen Farbverlauf hinzuzufügen, fahre bitte mit dem Mauszeiger über das gewünschte Element. Links neben dem Element wird ein Drei‑Punkte‑Button angezeigt, bitte anklicken. Wähle dann Stil und öffne Textfarbe. Anschließend bitte die vierte Option (Gradient) auswählen.


Farbverlaufstypen & Steuerung

Bevor du loslegst, kannst du zuerst die Basisfarbe unter Hintergrund auswählen.

In Onepage stehen dir drei Farbverlaufstypen zur Verfügung – Linear, Radial und Netz.

  • Der lineare Verlauf lässt dich Farbpunkte festlegen und den Winkel des Verlaufs einstellen, mit einem einfachen Toggle, um die Richtung umzukehren.

  • Radiale Verläufe erlauben dir, mehrere Farbpunkte hinzuzufügen, die von einem Mittelpunkt ausgehen, dessen horizontale Position du frei anpassen kannst. Eine Umkehrung der Position ist ebenfalls möglich.

  • Netz-Verläufe bieten dir die größte kreative Freiheit: Du platzierst mehrere Farbpunkte beliebig im Bereich und passt die X‑ und Y‑Position jedes Punktes fein an. Du kannst die Farbpalette sogar randomisieren, entweder beschränkt auf die vordefinierten Projektfarben oder komplett zufällig generiert.


Farbverlaufspunkte hinzufügen und entfernen

Klicke einfach irgendwo in den Verlaufseinstellungen, um einen neuen Farbstopp hinzuzufügen. Klicke auf den Farbstopp, um die Farbe zu bearbeiten.

Um einen Farbpunkt zu entfernen, klicke auf den Burger-Button unter den Verlaufseinstellungen. Es wird eine Liste aller Farbpunkte angezeigt, in der du Farbpunkte löschen und hinzufügen kannst.


Presets speichern & wiederverwenden

Nachdem du deinen Farbverlauf erstellt hast, klick auf Farbe hinzufügen, um das Preset zu speichern. Dein neues Preset erscheint in der Preset‑Liste und kann schnell in jedem Abschnitt oder Container wiederverwendet werden.


Verwandte Artikel


💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂

Hat dies deine Frage beantwortet?