Studio Editor: Den Hintergrund eines Abschnitts ändern

9 Min. Lesezeit
Gestalte jeden einzelnen Abschnitt den Anforderungen deines Kunden entsprechend. Du kannst eine Farbe, einen Farbverlauf, ein Bild oder ein Video für den Hintergrund deines Abschnitts auswählen. Füge eine interessante Musterüberlagerung hinzu und passe die Deckkraft so an, dass der Hintergrund nicht zu viel Aufmerksamkeit vom Inhalt ablenkt.
Mit Breakpoints arbeiten:
Du kannst den Abschnittshintergrund pro Breakpoint festlegen, damit er auf jedem Gerät ideal aussieht.
In diesem Artikel erfährst du mehr über folgende Themen:
Tipp:
Um den Designprozess zu beschleunigen, haben wir im Hinzufügen-Panel unter Abschnitte eine Vielzahl vorgefertigter und vollständig responsiver Abschnitte bereitgestellt.

Eine Farbe zum Abschnittshintergrund hinzufügen

Wähle eine beliebige Farbe für den Hintergrund deines Abschnitts, egal ob es eine deiner Designfarben ist oder eine benutzerdefinierte Farbe. Du kannst dann die Deckkraft einstellen, wenn du einen dezenteren Hintergrund bevorzugst.

Um die Hintergrundfarbe eines Abschnitts zu ändern:

  1. Wähle den entsprechenden Abschnitt aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
  3. Klicke unter Design auf das Farbfeld.
  4. Wähle je nach Bedarf eine Farbe aus:
    • Designfarben: Wähle eine deiner [Website-Farben(data-composite="true" href="https://support.wix.com/de/article/studio-editor-managing-your-site-styles#changing-the-site-colors" target="_blank").
    • Meine Farben: Wähle eine vorhandene individuelle Farbe aus.
    • Eine neue Farbe: Klicke auf + Hinzufügen, um der Farbauswahl eine neue Farbe hinzuzufügen.
  5. (Optional) Verwende den Schieberegler, um die Deckkraft der Farbe zu erhöhen oder zu verringern.
Eine Farbe für den Abschnittshintergrund aus der Farbauswahl im Inspektor-Panel im Studio Editor auswählen

Einen Farbverlauf zum Abschnittshintergrund hinzufügen

Der Studio Editor bietet verschiedene Arten von Farbverläufen für den Hintergrund deines Abschnitts:
  • Sternenförmiger, linearer oder konischer Farbverlauf : Wähle bis zu 8 Farben und steuere die Deckkraft jeder einzelnen Farbe in diesen Verläufen. Du kannst auch den Winkel (linear), den Fokuspunkt (sternenförmig) oder beides (konisch) anpassen, um den gewünschten Effekt zu erzielen.
  • Fließender Farbverlauf : Mit diesem Farbverlauf kannst du einen gitterartigen Effekt erzeugen, bei dem so viele Farben gemischt werden, wie du benötigst. Du kannst die Deckkraft, Größe und Verteilung jeder einzelnen Farbe in diesem Farbverlauf steuern.

Um einen Hintergrund mit Farbverlauf zu einem Abschnitt hinzuzufügen:

  1. Wähle den entsprechenden Abschnitt aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
  3. Klicke unter Design auf das Farbfeld.
  4. Klicke unten, um zu erfahren, wie du je nach Bedarf die einzelnen Farbverlaufstypen erstellst:
Einen fließenden Farbverlauf für den Abschnittshintergrund im Studio Editor einrichten

Ein Bild zum Abschnittshintergrund hinzufügen

Füge ein Bild zum Hintergrund deines Abschnitts hinzu und passe den Fokuspunkt so an, dass der entsprechende Teil immer angezeigt wird. Du kannst deine eigenen hochgeladenen Bilder verwenden, ein kostenloses Bild von Wix oder Unsplash wählen oder ein Bild von Shutterstock kaufen.
Tipp:
Du kannst deinem Bild eine Farb- oder Farbverlauf-Überlagerung hinzufügen. Klicke auf das Farbfeld, um eine Farbe oder einen Farbverlauf auszuwählen, und ziehe dann den Schieberegler, um die Deckkraft dieser Ebene anzupassen.

Um einen Bildhintergrund zu einem Seitenabschnitt hinzuzufügen:

  1. Wähle den entsprechenden Abschnitt aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
  3. Klicke unter Medien auf + Bild oder Video hinzufügen.
  4. (In der Medienverwaltung) Wähle aus, was du als Nächstes tun möchtest:
    • Dein eigenes Bild auswählen oder hochladen
    • Auf den Tab Medien von Wix/Unsplash klicken, um eines unserer kostenlosen Bilder zu verwenden
    • Auf den Tab Shutterstock klicken, um ein Bild von Shutterstock zu kaufen
  5. Klicke auf Hintergrund ändern.
  6. (Optional) Passe deinen Bildhintergrund im Inspektor-Panel an:
    • Fokuspunkt: Klicke auf das Symbol für Fokuspunkt ,um den Teil des Bildes auszuwählen, der immer sichtbar sein soll, auch wenn sich die Größe des Bildschirms ändert.
    • Deckkraft: Ziehe den Schieberegler, um die Sichtbarkeit des Bildes zu ändern.
    • Anpassoptionen: Klicke auf das Aufklappmenü, um auszuwählen, wie dieses Bild in den Abschnitt passen soll.
Ein Bild auf den Abschnittshintergrund aus dem Inspektor-Panel im Studio Editor anwenden

Ein Video zum Abschnittshintergrund hinzufügen

Füge einen Videohintergrund hinzu, um deinem Abschnitt ein Gefühl von Bewegung zu verleihen. Du kannst den Fokuspunkt des Videos wählen, die Wiedergabegeschwindigkeit ändern und entscheiden, ob es in einer Schleife abgespielt wird oder nicht.
Wir haben eine ganze Bibliothek mit kostenlosen Videos, die du für deinen Hintergrund verwenden kannst, du kannst aber auch deine eigenen Dateien verwenden oder ein Video von Shutterstock erwerben.
Tipp:
Du kannst deinem Videohintergrund eine Farb- oder Farbverlauf-Überlagerung hinzufügen. Klicke auf das Farbfeld, um eine Farbe oder einen Farbverlauf auszuwählen, und ziehe dann den Schieberegler, um die Deckkraft dieser Ebene anzupassen.

Um einen Videohintergrund zu einem Seitenabschnitt hinzuzufügen:

  1. Wähle den entsprechenden Abschnitt aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
  3. Klicke unter Medien auf + Bild oder Video hinzufügen.
  4. (In der Medienverwaltung) Wähle aus, was du als Nächstes tun möchtest:
    • Dein eigenes Video auswählen oder hochladen
    • Auf den Tab Medien von Wix/Unsplash klicken, um eines unserer kostenlosen Videos zu verwenden
    • Auf den Tab Shutterstock klicken, um ein Video von Shutterstock zu kaufen
  5. Klicke auf Hintergrund ändern.
  6. (Optional) Passe deinen Videohintergrund im Inspektor-Panel an:
    • Fokuspunkt: Klicke auf das Symbol für Fokuspunkt , um den Bereich im Video auszuwählen, der immer sichtbar sein soll, auch wenn sich die Größe des Bildschirms ändert.
    • Deckkraft: Ziehe den Schieberegler, um die Sichtbarkeit des Videos zu ändern.
    • Wiedergabegeschwindigkeit: Klicke auf das Aufklappmenü, um die Geschwindigkeit auszuwählen (z. B. Normal, 0,25x, 1,25x).
    • Wiederholungsschleife: Klicke auf den Schalter, um die Art und Weise zu ändern, wie das Video abgespielt wird:
      • Aktiviert: Das Video wird in einer Endlosschleife im Hintergrund abgespielt.
      • Deaktiviert: Das Video wird nur einmal für Besucher abgespielt und dann gestoppt.
Möchtest du das Video live sehen?
Klicke auf deinem Video auf den Wiedergabe-Button, um zu sehen, wie es direkt auf der Arbeitsfläche aussieht.
Vorschau eines Videohintergrunds auf der Arbeitsfläche im Studio Editor

Eine Musterüberlagerung zum Abschnittshintergrund hinzufügen

Wende ein interessantes Muster auf den Hintergrund deines Abschnitts an. Wir haben eine Vielzahl von Mustern in verschiedenen Farben und Größen zur Auswahl. Stöbere durch die Liste und klicke auf die Muster, um zu sehen, wie sie sich mit dem Hintergrund vermischen.

Um eine Musterüberlagerung zum Abschnittshintergrund hinzuzufügen:

  1. Wähle den entsprechenden Abschnitt aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
  3. Aktiviere unter Hintergrundüberlagerung den Schalter Musterüberlagerung anwenden.
  4. Schau dir die verfügbaren Muster an und klicke eines an, um es als Überlagerung hinzuzufügen und zu sehen, wie es zu deinem Hintergrund passt.
Die verfügbaren Muster-Überlagerungen im Studio Editor erkunden und sie auf einen vorhandenen Abschnitt anwenden

War das hilfreich?

|