Studio Editor: Den Hintergrund eines Abschnitts ändern und anpassen
10 Min. Lesezeit
Gestalte jeden von dir auf der Website erstellten Abschnitt. Du kannst eine Farbe, einen Farbverlauf, ein Bild oder ein Video für den Hintergrund auswählen und Musterüberlagerungen und Scroll-Effekte hinzufügen, um das Design weiter anzupassen.
Mit Breakpoints arbeiten:
Du kannst den Abschnittshintergrund für jeden Breakpoint separat 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:
- Wähle den entsprechenden Abschnitt aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
. - Klicke unter Design auf das Farbfeld.
- 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-deine-website-stile-verwalten#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.
- (Optional) Verwende den Schieberegler, um die Deckkraft der Farbe zu erhöhen oder zu verringern.
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:
- Wähle den entsprechenden Abschnitt aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Klicke unter Design auf das Farbfeld.
- Klicke unten, um zu erfahren, wie du je nach Bedarf die einzelnen Farbverlaufstypen erstellst:
Einen linearen, sternenförmigen oder konischen Farbverlauf hinzufügen
.
.
.
Einen fließenden Farbverlauf hinzufügen
.
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:
- Wähle den entsprechenden Abschnitt aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Klicke unter Medien auf + Bild oder Video hinzufügen.
- (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
- Klicke auf Hintergrund ändern.
- (Optional) Passe deinen Bildhintergrund im Inspektor-Panel an:
- Fokuspunkt einrichten
: Wähle den Teil des Bildes aus, 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.
- Fokuspunkt einrichten
- (Optional) Klicke auf das Symbol für Hintergrund-Scroll-Effekte
, um einen Scroll-Effekt zu wählen (z. B. Parallax).
Du hast eine Website von Editor X auf Studio aktualisiert?
Wenn du einen Parallax-Effekt auf ein Hintergrundbild angewendet hast, bleibt er in Studio gleich, es sei denn, du löschst den Effekt oder ersetzt das Bild.
Im Studio Editor kannst du einem Bild auf eine der folgenden Arten einen Parallax-Effekt hinzufügen:
- Lege das Bild als Abschnittshintergrund fest und wende dann einen Hintergrund-Scroll-Effekt auf den Abschnitt an.
- Füge das Bild zum Abschnitt hinzu und wende dann eine Scroll-Parallax-Animation auf das Bild an. Achte darauf, dass du keine anderen Animationen auf das Bild anwendest.
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:
- Wähle den entsprechenden Abschnitt aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Klicke unter Medien auf + Bild oder Video hinzufügen.
- (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
- Klicke auf Hintergrund ändern.
- (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.
- Fokuspunkt: Klicke auf das Symbol für Fokuspunkt
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.
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:
- Wähle den entsprechenden Abschnitt aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Aktiviere unter Hintergrundüberlagerung den Schalter Musterüberlagerung anwenden.
- 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.
Einen Scroll-Effekt zum Abschnittshintergrund hinzufügen
Hintergrund-Scroll-Effekte verleihen deinem Abschnitt Bewegung, wenn Besucher auf der Website nach oben und unten scrollen. Dir stehen eine Menge Effekte zur Verfügung (z. B. Parallax, 3D, Vergrößern), die du nutzen kannst, um die Inhalte deines Kunden hervorzuheben.
Hinweis:
Die verfügbaren Scroll-Effekte hängen von der Hintergrundart ab, die du für den Abschnitt ausgewählt hast.
Um einen Hintergrund-Scroll-Effekt hinzuzufügen:
- Wähle einen Seitenabschnitt aus.
- Klicke auf das Symbol für Hintergrund-Scroll-Effekte
.
- Wähle einen Effekt aus der Liste aus.
War das hilfreich?
|