In diesem Artikel stellen wir dir die unterschiedlichen Optionen vor, wie du Hintergründe im Editor designen kannst.
Inhaltsangabe
Basiswissen
Ein Hintergrund kann für jedes Container-Element hinzugefügt werden (da Section-Templates auch aus einem oder mehreren Containern bestehen, kann auch dort ein Hintergrund einstellt werden).
Um auf die Hintergrund-Einstellungen zuzugreifen, öffne mit einem Doppelklick auf ein Container-Element das linke Einstellungspanel und wechsle dort auf den Tab Hintergrund.
Du hast immer drei generelle Auswahlmöglichkeiten für den Hintergrund:
- Ohne: Das bedeutet, dass kein Hintergrund genutzt wird.
- Farbe/Verlauf: Hier kannst du festlegen, ob du eine Farbe oder einen Farbverlauf mit mehreren Farben nutzen möchtest.
- Element: Hier hast du die Möglichkeit, zwischen bestimmten Elementen zu wählen:
Wir werden uns alle Optionen und ihre Einstellungen in diesem Artikel genauer anschauen.
Tipp: Wenn du mit verschachtelten Elementen arbeitest, also wenn du einen Container über einem anderen Container-Element hast, z.B. in einem Header, dann siehst du hier zusätzlich die Option Hintergrund auf übergeordnetem Element bearbeiten. Wenn du auf den Button klickst, wirst du zu dem Container geführt, der den Hintergrund bereitstellt.
Du kannst aber auch einen anderen Hintergrund in einer der untergeordneten Elemente einstellen. Beim Evergreen Template siehst du z.B. dass der Hintergrund des übergeordneten Containers eine Farbe hat und der Hintergrund des untergeordneten Containers ein Bild ist.
Farb- & Farbverlauf-Hintergrund
Wenn du auf Farbe/Verlauf klickst, kannst du zwischen den folgenden Optionen wählen:
- Farbe: Du kannst eine Farbe auswählen, die im Hintergrund angezeigt wird.
- Verlauf: Du kannst einen Farbverlauf mit diesen Möglichkeiten aufsetzen:
- Farben: Du kannst so viele Farben hinzufügen wie du möchtest und den Prozentsatz hinterlegen, zu dem sie im Farbverlauf vertreten sein sollen. Die Farben automatisch nach dem Prozentsatz sortiert.
- Invertieren: Du kannst die Farben, die du ausgewählt hast, umdrehen
- Zufällig: Hier erhältst du eine zufällige Kombination aus Farben und Prozentsätzen
- Style: Wähle zwischen einem
- linearem Verlauf, wo die Farben von einer Seite zur anderen sortiert werden. Diese Option kommt mit der Winkel-Einstellung, bei der du den "Schräge" des Verlaufs auswählen kannst und der Dauer-Einstellung, bei der der Verlauf sich über deinen Hintergrund "bewegt"
- radialem Verlauf, wo die Farben von der Mitte nach außen angeordnet werden
- linearem Verlauf, wo die Farben von einer Seite zur anderen sortiert werden. Diese Option kommt mit der Winkel-Einstellung, bei der du den "Schräge" des Verlaufs auswählen kannst und der Dauer-Einstellung, bei der der Verlauf sich über deinen Hintergrund "bewegt"
Beide Optionen sind eine wunderbare Grundlage, um weitere Elemente darauf abzubilden, welche die Aufmerksamkeit von Website-Besuchern bekommen sollen, wie bspw. Bilder, Texte, Logos oder Icons.
Element-Hintergrund
Der Element-Tab zeigt dir eine Auswahl an bestimmten Elementen, die du für einen Hintergrund nutzen kannst:
Es gibt zwei Einstellungen, die für jedes Element angezeigt werden:
- Farb-Overlay: Mit dieser Einstellung kannst du ein Overlay über das Element legen, wenn du bspw. etwas Farbe aus dem Hintergrund nehmen und ihn verdunkeln möchtest oder wenn du den Hintergrund passend zu den Website-Farben einfärben möchtest.
- Parallax: Damit wird der Hintergrund, z.B. ein Bild, mit einer anderen "Geschwindigkeit" gescrollt als der Content im Vordergrund.
Bild
Mit dem Bild-Element kannst du ein Bild als Hintergrund einstellen. Du kannst das Bild entweder direkt hochladen, aus Dateien auswählen oder die kostenfreien, integrierten Stockfotos nutzen.
Du kannst die folgenden Einstellungen vornehmen:
- Lazyload: Wenn Lazyload aktiviert ist, dann wird das Bild geladen, nachdem die Seite geladen wurde, um die Ladegeschwindigkeit der Website zu verbessern.
- Responsive: Wenn Responsive aktiviert ist, dann werden automatisch Retina-Bilder und kleinere Bilder auf Smartphones geladen.
- Optimiert: Wenn Optimiert aktiviert ist, werden die Bilder komprimiert, um die Ladegeschwindigkeit der Website zu verbessern. Wenn die Einstellung aber deaktiviert ist, wird die Originalgröße geladen - unabhängig davon, wie groß die Datei ist. Außerdem ist die Responsive-Einstellung dann nicht mehr nutzbar.
- Größe: Hier kannst du zwischen unterschiedlichen, voreingestellten Größen-Optionen wählen.
- Position: Hiermit kannst du die Position bzw. den Ausschnitt des Bildes anpassen. Du kannst unter Richtung die vorgegebenen Optionen nutzen oder du wechselst zu Benutzerdefiniert, um konkrete Werte für den X-Versatz und Y-Versatz einzugeben.
- Alternativtext: Du kannst einen Alternativtext hinterlegen, um die Web-Zugänglichkeit zu verbessern und um eine Beschreibung des Bildes zu haben, falls die Datei mal nicht angezeigt werden kann.
Bild-Slider
Mit dem Bild-Slider kannst du mehrere Bilder im Hintergrund anzeigen, die sich immer wieder abwechseln.
Du kannst die folgenden Einstellungen vornehmen:
- Angezeigte Slides: Bestimmt wie viele Slides - also Bilder - auf einmal anzeigt werden
- Slides scrollen: Hier kannst du festlegen, wie viele Bilder sich auf einmal bewegen
- Zentrieren: Hier kannst du das Bild zentrieren, sodass Teile der vorherigen/nachfolgenden Bilder angezeigt werden - sollte am besten bei einer ungeraden Anzahl an angezeigten Slides gemacht werden.
- Animation: Hier kannst du bestimmen, mit welchem Effekt die Bilder wechseln sollen: Slide oder Fade.
- Geschwindigkeit: Lege fest, wie schnell der Wechsel zwischen den Bildern sein soll. Je geringer die Zahl, desto schneller und abrupter ist die Animation. Je höher die Zahl, desto geschmeidiger ist der Übergang.
- Automatisch: Wenn die Checkbox aktiviert ist, dann startet die Animation von alleine - sollte für den Hintergrund aktiviert sein.
- Pause: Bestimmt, wie lange ein Bild gezeigt wird.
- Pause bei Hover: Stoppt die Animation, wenn man über das Bilder hovert.
- Schleife: Wenn die Checkbox aktiviert ist, dann startet der Slider immer wieder von Neuem, sobald alle Bilder gezeigt wurden.
- Lazyload: Hier kannst du bestimmen, ob du Lazyload nutzen möchtest und falls ja, ob es auf Abruf oder progressiv sein soll.
- Pfeile: Zeigt zwei Pfeile auf beiden Seiten, damit man die Bilder (zusätzlich) manuell wechseln kann.
- Punkte: Zeigt Punkte am unteren Rand, damit man die Bilder (zusätzlich) manuell wechseln kann.
Karte
Mit diesem Element kannst du eine Google-Karte im Hintergrund anzeigen.
Bitte beachte, dass die Karte im Embed-Modus geladen wird und dort nur einige Funktionen zur Verfügung stehen. Um alle Funktionen nutzen zu können, musst du einen Google Maps API-Schlüssel unter Mehr > SEO hinterlegen.
Du kannst die folgenden Einstellungen vornehmen - je nachdem, ob du einen API-Schlüssel hinterlegt hast:
- Typ (mit API-Schlüssel): Du kannst zwischen unterschiedlichen Arten von Karten wählen, z.B. einer Straßenkarte, Satellitenbild oder einer Terrainkarte.
- Style (mit API-Schlüssel): Du hast unterschiedliche Möglichkeiten, die Karte einzufärben oder die Beschreibungen von der Karte zu entfernen.
- Zoomstufe: Hiermit kannst du einstellen, wie sehr du reinzoomst. Mit einer kleinen Zahl siehst du mehr von der Welt, mit einer großen Zahl zoomst du in einen bestimmten Bereich rein.
- Zoom-Steuerung: Bestimme, ob du die Steuerungselemente +/- an der Seite aktiviert haben möchtest.
- Maßstab: Wenn die Checkbox aktiviert ist, dann siehst du den Maßstab in der unteren rechten Ecke.
- Mausrad aktiv?: Wenn die Checkbox aktiviert ist, dann kann der Website-Besucher mit dem Mausrad rein- und rauszoomen.
- Neuer Marker (mit API-Schlüssel): Du hast die Möglichkeit mehrere Marker zu setzen und diese anzupassen, bspw. in dem du ein eigenes Icon oder Bild für die Marker hochlädst.
Video
Mit dem Video-Element kannst du im Hintergrund ein Video abspielen lassen. Du kannst entweder dein eigenes Video hochladen oder du nutzt die kostenlosen, integrierten Stockvideos, die du unter Dateien findest. Die unterstützten Dateitypen sind MP4 und WebM.
Du kannst die folgenden Einstellungen vornehmen:
- Automatisch abspielen
- Stumm schalten
- Endlosschleife: Wenn aktiviert, startet das Video immer wieder von Neuem, sobald es fertig ist.
- Vorschaubild: Du kannst ein Bild hochladen, dass gezeigt wird, wenn das Video nicht läuft. Das ist allerdings nur sichtbar, wenn Automatisch abspielen deaktiviert wurde.
YouTube
Mit diesem Element kannst du ganz einfach den Link unter Video-URL mit deiner URL austauschen, um hier das gewünschte YouTube-Video anzuzeigen.
Du kannst die folgenden Einstellungen vornehmen:
- Lazyload: Hiermit bestimmst du, ob das Video vorher geladen werden soll oder erst, wenn der Play-Button gedrückt wurde.
- Steuerelemente: Du kannst einstellen, ob du die Steuerelemente wie Play-Button, Lautstärke, etc. anzeigen möchtest.
- Ähnliche Videos: Wenn das Video vorbei ist, würden hier ähnliche Videos von YouTube angezeigt werden, wenn die Checkbox aktiviert wurde.
Vimeo
Mit diesem Element kannst du ganz einfach den Link unter Video-URL mit deiner URL austauschen, um hier das gewünschte Vimeo-Video anzuzeigen. Außerdem kannst du auswählen, in welchem Seitenverhältnis das Video angezeigt werden soll.
HTML
Wenn du das HTML-Element auswählst, gibt es keine Optionen im linken Einstellungspanel. Stattdessen öffnet sich das HTML-Panel von unten, wo du deinen Code einfügen kannst.
Kommentare
0 Kommentare
Zu diesem Beitrag können keine Kommentare hinterlassen werden.