Onepage ermöglicht es dir, mit Farbpaletten und Farbverläufen das Design deiner Projekte individuell anzupassen.
Farbpalette auswählen
Schritt 1: Einstellung öffnen
Gehe in die Bearbeitung der Seite und öffne Design → Farben. Hier kannst du entweder eine eigene Farbpalette zusammenstellen oder aus vorgefertigten Paletten wählen, damit dein Corporate Design automatisch in allen Designs berücksichtigt wird.
Schritt 2: Wähle deine Farbpalette aus
Du hast hier zwei Möglichkeiten:
Entweder stellst du eine eigene Farbpalette zusammen, indem du auf „+ Farbpalette“ klickst und deine gewünschten Farben entweder über die Farbpalette oder per Hex-Code einsetzt:
Oder du wählst eine vorgefertigte Farbpalette aus, die du im Nachgang jederzeit noch anpassen kannst:
Allgemein kannst du für deine Webseite Farben für Hell, Primärfarbe, Sekundärfarbe und Dunkel hinterlegen. Wichtig ist, dass du die Änderungen am Ende speicherst, damit sie übernommen werden.
Wenn du eine eigene Farbpalette erstellen möchtest, dir aber unsicher bist, welche Farben harmonieren, empfehlen wir dir Tools wie Coolors oder ColorHunt.
📌 Hinweis: Innerhalb eines Projekts werden Schrift- und Farbeinstellungen zentral verwaltet. Änderst du die Farbpalette, wird diese automatisch auf alle Seiten deiner Website angewendet.
Bedeutung der Farben in der Farbpalette
Die Farbpalette legt fest, wie Farben in deinem Projekt eingesetzt werden und welche Elemente sie jeweils beeinflussen.
Hell: Diese Farbe wird hauptsächlich als Hintergrund für Container und Abschnitte verwendet und bildet die Basis für ein übersichtliches und ruhiges Seitenlayout.
Primärfarbe: Die zentrale Akzentfarbe deiner Website. Sie wird vor allem für Buttons, Call-to-Actions und hervorgehobene Elemente eingesetzt, um die Aufmerksamkeit der Besucher gezielt zu lenken.
Sekundärfarbe: Eine ergänzende Akzentfarbe, die unter anderem bei Bulletpoints, Spaltenhintergründen und weiteren Designelementen zum Einsatz kommt und das Design visuell auflockert.
Dunkel: Diese Farbe dient in erster Linie als Schriftfarbe für die Website und Formulare. Zusätzlich kann sie als Overlay für Titelbilder verwendet werden, um Kontraste zu erhöhen und die Lesbarkeit zu verbessern.
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 und Netz und wie du deine Lieblingskombinationen als Presets speichern kannst.
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, öffne im Popup den Bereich "Hintergrund" und wähle die vierte Option "Gradient".
Farbverlauf auf Button anwenden
Du kannst einem Button ebenfalls einen Farbverlauf-Hintergrund zuweisen. Klicke dazu auf den Button, öffne die Style-Einstellungen über das Pinsel-Symbol, wähle "Hintergrund" und klicke auf die vierte Option "Gradient".
Farbverlauf auf Text anwenden
Um einem Textelement oder einer Überschrift einen Farbverlauf hinzuzufügen, fahre mit dem Mauszeiger über das gewünschte Element. Klicke auf den Drei-Punkte-Button links neben dem Element, wähle "Stil" und öffne "Textfarbe". Anschließend wähle die vierte Option "Gradient" aus.
Farbverlaufstypen & Steuerung
Bevor du loslegst, kannst du zuerst die Basisfarbe unter "Hintergrund" auswählen.
In Onepage kannst du zwischen drei Farbverlaufstypen wählen: Linear, Radial und Netz.
Der lineare Verlauf ermöglicht es, Farbpunkte festzulegen und den Winkel des Verlaufs anzupassen. Mit einem einfachen Toogle kannst du zudem die Richtung des Verlaufs umkehren.
Radiale Verläufe ermöglichen es, mehrere Farbpunkte hinzuzufügen, die von einem Mittelpunkt ausgehen. Die horizontale Position des Mittelpunkts kann frei angepasst werden, und eine Umkehrung der Position ist ebenfalls möglich.
Netz-Verläufe bieten die größte kreative Freiheit: Du kannst mehrere Farbpunkte frei im Bereich platzieren und die X‑ und Y-Position jedes Punktes genau anpassen. Die Farbpalette lässt sich zudem randomisieren, entweder nur mit den vordefinierten Projektfarben oder vollständig zufällig generiert.
Farbverlaufspunkte hinzufügen und entfernen
Klicke in den Verlaufseinstellungen an eine beliebige Stelle, um einen neuen Farbstopp hinzuzufügen. Klicke anschließend auf den Farbstopp, um die Farbe zu bearbeiten.
Um einen Farbpunkt zu entfernen, klicke auf den Burger-Button unter den Verlaufseinstellungen. Es öffnet sich eine Liste aller Farbpunkte, in der du Farbpunkte löschen oder hinzufügen kannst.
Presets speichern & wiederverwenden
Nachdem du deinen Farbverlauf erstellt hast, klicke 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.
💡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. 🙂