Wix Harmony Editor: Elemente gestalten
In diesem Artikel
- Farben auswählen
- Farbverläufe verwenden
- Einzelne Teile von Elementen gestalten
- Den Mouseover-Zustand gestalten (Buttons und Menüs)
- Design-Glossar
Mit dem Design-Panel kannst du deine kreative Vision Detail für Detail verwirklichen. Du kannst Farben aktualisieren, einzelne Teile eines Elements anpassen oder verschiedene Zustände individuell gestalten. So bestimmst du flexibel das Design jedes Bereichs deiner Website.
Jedes Element bietet eigene Stiloptionen. Daher siehst du je nach ausgewähltem Element unterschiedliche Einstellungen.
Wie lege ich los?
Klicke auf ein Element. Klicke dann in der Aktionsleiste auf das Symbol für Alle Designoptionen .
.Farben auswählen
Wenn du auf einen Farbkreis klickst, öffnet sich die Farbauswahl. Dort siehst du die Markenfarben deiner Website und alle benutzerdefinierten Farben, die du verwendest. Du kannst eine neue Farbe auf drei Arten auswählen:
Verschiebe die Punkte im Farbschema, um deine Farbe zu finden.
Gib den Farbcode ein, zum Beispiel #000000 für Schwarz.
Klicke auf das Symbol für Pipette , um eine Farbe von einem Element auf der Seite zu übernehmen.
, um eine Farbe von einem Element auf der Seite zu übernehmen.
Farbverläufe verwenden
Farbverläufe verbinden zwei oder mehr Farben miteinander und lassen sie ineinander übergehen. So wirkt dein Hintergrund lebendiger als mit einer einfarbigen Fläche.
Wähle zwischen „Linear“, „Radial“, „Konisch“ und „Fluid Layout“. Lineare, radiale und konische Farbverläufe erzeugen klarere Farbübergänge. Farbverläufe mit Fluid Layout erzeugen weichere, netzartige Übergänge. Du kannst weitere Farben hinzufügen, die Deckkraft jeder Farbe anpassen und Farbverläufe für deine Marke speichern. So kannst du sie später erneut verwenden.
Tipp:
Farbverläufe sind für Abschnitte, Zellen in Abschnitten, Kopf- und Fußzeilen, Buttons sowie Boxen verfügbar.
Einzelne Teile von Elementen gestalten
Einige Elemente im Editor bieten detaillierte Designoptionen. Damit kannst du einzelne Teile getrennt gestalten. Bei Buttons kannst du zum Beispiel den Button selbst, das Symbol für den Button oder den Text anpassen. So kannst du jedes Detail genau auf deinen individuellen Stil abstimmen. Wähle im Dropdown aus, welchen Teil du anpassen möchtest.
Den Mouseover-Zustand gestalten (Buttons und Menüs)
Klickbare Elemente können ihr Design ändern, wenn Besucher mit der Maus darüberfahren. Verwende Mouseover-Zustände, um Buttons und Menüs interaktiver zu gestalten. So erkennen Besucher leichter, wo sie eine Aktion ausführen können.
Klicke für mehr Kontrolle auf Alle Designoptionen, um das vollständige Design-Panel zu öffnen. Wähle im Dropdown für Zustände die Option Mouseover aus. Passe dann die verfügbaren Designoptionen an.
Gut zu wissen:
Du kannst auch den Mouseover-Zustand anpassen, wenn du Buttons im Marken-Panel gestaltest.
Design-Glossar
In der Tabelle unten findest du alle Designeinstellungen. Du erfährst, was sie bedeuten und wie sie dein Design verbessern.
| Einstellung | Was ist das? |
|---|---|
Hintergrund- und Füllfarben
 | Füge eine Füllfarbe hinzu, die zum Content deines Elements passt. Klicke auf den Kreis neben
Farbe , um eine deiner
Markenfarben oder eine benutzerdefinierte Farbe auszuwählen. Container und Abschnitte: Klicke in der Aktionsleiste auf
Hintergrund ersetzen, um die Hintergrundfarbe zu ändern. Du kannst auch auf das Symbol für
Deckkraft
 klicken, um den Hintergrund mehr oder weniger sichtbar zu machen und einen Glas-Effekt anzuwenden. |
Rand
 | Lege die Ränder deines Elements fest, damit es hervorsticht. Du kannst Farbe, Breite und Stil des gesamten Rands auswählen oder
auf das Symbol für Einzelne Ränder bearbeiten klicken
, um jede Seite einzeln zu gestalten. |
Ecken
 | Ziehe den Slider unter
Radius, um die Ecken deines Elements eckiger oder runder zu machen. Klicke auf das Symbol für
Einzelne Ecken bearbeiten
, um jede Ecke einzeln zu gestalten. |
Schatten
 | Wende einen Schatten an, um dem Element einen interessanten 3D-Effekt zu geben. Du kannst einen Schatten innerhalb des Elements hinzufügen (Innen) und das Element auch einen Schatten werfen lassen (Schlagschatten). Lege Position, Weichzeichnung, Größe, Farbe und Deckkraft des Schattens fest. |
Abstände
 | Gib deinem Content mehr Raum, indem du den Innenabstand um das Element oder den ausgewählten Bereich anpasst. Je nachdem, was du bearbeitest, kannst du einzelne Seiten anpassen, vertikale und horizontale Abstände hinzufügen und mehr. |
Layout
 | Passe die Layout-Einstellungen an, um das Element genau nach deinen Wünschen anzuordnen. Je nachdem, was du bearbeitest, kannst du das Element spiegeln oder ausrichten. Du kannst auch die Richtung festlegen oder Größe und Position genau anpassen. |
Passe Schriftart, Stärke, Größe, Farbe und Formatierung an, um das Design von Text zu bestimmen. Je nachdem, was du bearbeitest, kannst du auf
Weitere Textoptionen klicken. Dann siehst du zusätzliche Einstellungen wie Zeilenabstand, Groß- und Kleinschreibung und mehr. |
Mit Wix Harmony erstellen:
Erlebe die nächste Generation der Website-Erstellung mit
Wix Harmony. Wechsle nahtlos zwischen Prompts für deinen KI-Agenten und präzisem Drag-and-Drop. So fühlt sich das Erstellen so natürlich an wie das Denken.