Hintergrund-Bilder austauschen: So bearbeitest du die Hintergrundbilder (gelb und blau) auf der Startseite

Schritt 4 von 7 – Hintergrundbilder austauschen über den Visual Editor von Headway

WICHTIGER HINWEIS:

Diese Anpassungen wirst du innerhalb des Design-Themes “Headway” vornehmen. Headway ist eine Art “Drag&Drop Baukasten”, mit welchem wir deine Webseite aufgebaut und gestaltet haben. Dafür verwendet Headway einen eigenen Editor, den Visual Editor. Das bedeutet, dass dieser Visual Editor von deinem Spreadmind-Backend “losgelöst” ist, du befindest dich also während den Anpassungen nicht mehr im Spreadmind-Backend.

Über den Menüpunkt “Design” → “Anpassen” wirst du in den Visual Editor von Headway weitergeleitet.

Wie dieser Visual Editor von Headway aufgebaut ist und wie er überhaupt funktioniert, erfährst du hier in unserem Handbuch in der letzten Rubrik “Weitere Anleitungen & Tipps” und dort bei “Aufbau des Visual Editors für die gestalterische Anpassung deiner Webseite”.

Wichtig: Solltest du in Headways Visual Editor nicht arbeiten können oder dieser sich “zu Tode laden”, dann überprüfe bitte, ob in der Browser-Adress-Zeile das https:// fehlt. Wenn ja, füge es bitte vor deine URL ein, z. B.: https://wilkommen.spreadmind.de/visual….

Am Anfang kannst du mit den individuellen Design-Anpassungen auch erst einmal warten. Denn das Wichtigste ist, dass du unsere Beispiel-Texte änderst und ein Bild von dir auf die Webseite einfügst. Wenn du dies alles gemacht hast, kannst du dich mit dem Visual Editor von Headway befassen. Eine Anpassung des Designs ist natürlich auch zu einem späteren Zeitpunkt möglich.

Siehe daher die Schritte 4 und 5 als optionale Möglichkeiten an. Diese sind nicht unbedingt notwendig, damit deine Webseite online gehen kann.

 

Wenn du dir das Video “Aufbau des Visual Editors für die gestalterische Anpassung deiner Webseite”  angeschaut hast, dann kannst du nun mit den folgenden Anleitungen für die Hintergrundbilder anfangen.

 

Auf diesen Seiten kannst du überall die Hintergrundbilder austauschen:

 

Und das sind die zwei Hintergrundbilder, die immer wieder auf deiner Plattform auftauchen:


Gelber Hintergrund
(z. B. bei der Startseite beim Testimonial und Über-mich-Vorschau)
Dateiname: bg_shattered_gelb.jpg

 

Auf der Startseite (Layout: FrontPage): ↑ nach oben

In diesem Video zeigt dir Anke, wie du die drei Bilder auf der Startseite austauschen kannst.

 

Design-Option “Background”: So funktionieren die einzelnen Background-Optionen: ↑ nach oben

02_background-optionen_01Die Design-Option “Background” bringt insgesamt sieben weitere Funktionen mit sich. Einige arbeiten unabhängig von einander, aber bei den meisten ist das richtige Zusammenspiel wichtig. Die sieben Optionen sind: Color, Image, Repeat, Position, Behavior, Size, Parallax, Parallax Ratio.

 

Die Option Image hast du ja bereits kennengelernt. Hierüber kannst du ein Bild in den Hintergrund einfügen.

Bei der Option Color kannst du eine Hintergrundfarbe definieren. Hierfür ist es aber wichtig, dass du bei Image kein Bild hinterlegt hast. Um es komplett zu löschen, musst du auf das x-Symbol hinter dem Bild klicken. Oder auf das x-Symbol hinter Image. Dort erscheint der Hinweis “Delete this customization” = “Diese Anpassung löschen”. Diese Vorgehensweise gilt übrigens für jede Design-Option, wenn du eine Anpassung wieder rückgängig machen möchtest.

02_background-optionen_01-image

Bei der Option Repeat legst du fest, ob das Bild in x-Richtung (also nach links und rechts) oder in y-Richtung (also nach oben und unten) bis ins Unendliche dupliziert werden soll. Der Standard-Wert liegt hier bei Tile = nach x- und y-Richtung duplizieren. Dies bietet sich vor allem bei Bildern an, bei denen das möglich ist. So wie bei unseren beiden Bildern mit dem Beton Hintergrund und dem gelben Hintergrund. Wenn du bei dieser Option den Wert auf No Tiling setzt, erscheint das Hintergrundbild nur einmal:

02_background-optionen_02-repeat

Bei der Option Behavior gibst du an, wie sich das Bild verhalten soll, wenn du auf der Seite scrollst. Der Standard-Wert ist hier Stay at top of document und bedeutet, dass das Bild sich mit bewegt, wenn du scrollst. Wählst du allerdings Stay in same position as you scroll aus, bleibt das Bild immer an der selben Stelle stehen und wird nach und nach vom folgenden Inhalt verdeckt.
02_background-optionen_04-behaviour
Bei der Option Size bestimmst du, wie groß das Bild in Relation zu seinem Elternelement (also dem Wrapper, dem das Bild hinzugefügt wurde) sein soll. Der Standard-Wert ist Default. Setzt du den Wert bei Size auf Contain, dann wird das Bild komplett dargestellt und zusätzlich auf die kleinste Breite/Höhe seines Elternelements hochskaliert:
02_background-optionen_05-size-contain
Setzt du den Wert bei Size auf Cover, dann wird das Bild über die komplette Höhe und Breite seines Elternelementes dargestellt. Es wird also über die gesamte Fläche hochskaliert. Diese Option bietet sich an, wenn du z. B. ein Natur-Bild in den Hintergrund legen möchtest und dieses soll, egal wie groß das Browser-Fenster später sein wird, IMMER die komplette Hintergrundfläche bedecken.
02_background-optionen_06-size-cover
02_background-optionen_07-parallaxBei den beiden letzten Optionen Parallax und Parallax Ratio muss man ein wenig ausprobieren. Dieser Effekt bewirkt, dass sich das Hintergrundbild beim Scrollen entweder langsamer und schneller mitbewegen soll. Wie gesagt, musst du hier ein wenig mit den Werten rumspielen, um herauszufinden, was für dich am besten passt. Tipp: Verwende diesen Effekt nur bei einem “einfachen” Hintergrundbild, wie z. B. ein Natur-Bild. Sobald du als Experte zu sehen sein sollst, ist es fast unmöglich, die perfekten Einstellungen zu finden, damit du immer klar oder zu mindest am Anfang deutlich zu erkennen bist.

Auf der Blog-Seite (Layout: BlogIndex): ↑ nach oben

Im Grunde ist dieser Prozess genau der gleiche, wie im obigen Video beschrieben. Wenn du das Video noch nicht kennst, schaue es dir am besten kurz an. Danach kannst du hier die Text-Anleitungen befolgen.

Im Design-Modus wählst du dir das Layout BlogIndex zum Bearbeiten über den Layout-Selector aus (klick auf den blauen Button “edit”). Dort haben wir in der Sidebar das Bild “concrete_seamless.jpg” hinter den Expertentext gelegt. Also als ein Hintergrundbild für das Content-Blockelement.

Fahre mit der Maus über diesen Content-Block, klicke mit der rechten Maustaste darauf und dann auf Edit this Instance. Achte darauf, dass du auch wirklich den Content-Block auswählst und nicht z. B. den Text o.ä. Du kannst dich hierfür an dem Bild unten orientieren.

02_hintergrundbild_sidebar_1

Nachher sollte rechts im Navigator der “expertentext sidebar – Page Entry Container” ausgewählt sein.

Klicke dann auf die Design-Option Background. Hier kannst du nun bei Image über den Button “Choose” ein neues Bild aus der Mediathek auswählen. Wenn es ein Bild ist, welches sich problemlos nach links und rechts duplizieren lässt, kannst du alle anderen Background-Optionen ignorieren. Ansonsten kannst du hier mehr über die Background-Optionen erfahren.

02_hintergrundbild_sidebar_2

 

Auf der Beitrags-Seite (Layout: Beitrag): ↑ nach oben

Im Design-Modus wählst du dir das Layout Beitrag zum Bearbeiten über den Layout-Selector aus (klick auf den blauen Button “edit”). Dort haben wir unterhalb der Blog-Artikel das Bild “concrete_seamless.jpg” hinter den Expertentext gelegt. Also als ein Hintergrundbild für das Content-Blockelement.

Fahre mit der Maus über diesen Content-Block, klicke mit der rechten Maustaste darauf und dann auf Edit this Instance. Achte darauf, dass du auch wirklich den Content-Block auswählst und nicht z. B. den Text o.ä. Du kannst dich hierfür an dem Bild unten orientieren.

Nachher sollte rechts im Navigator der “expertentext blogpost single – Page Entry Container” ausgewählt sein.

Klicke dann auf die Design-Option Background. Hier kannst du nun bei Image über den Button “Choose” ein neues Bild aus der Mediathek auswählen. Wenn es ein Bild ist, welches sich problemlos nach links und rechts duplizieren lässt, kannst du alle anderen Background-Optionen ignorieren. Ansonsten kannst du hier mehr über die Background-Optionen erfahren.

02_hintergrundbild_experte_unterhalb_1

Auf den Unterseiten (Layout: Single): ↑ nach oben

Im Design-Modus wählst du dir das Layout Single zum Bearbeiten über den Layout-Selector aus (klick auf den blauen Button “edit”). Dort haben wir oberhalb des Footers das Bild “concrete_seamless.jpg” hinter den Expertentext gelegt. Also als ein Hintergrundbild für den kompletten Wrapper.

Fahre mit der Maus über den Wrapper, klicke mit der rechten Maustaste darauf und dann auf Edit this Instance. Achte darauf, dass du auch wirklich den Wrapper auswählst und nicht z. B. den Text o.ä. von dem Content-Block. Du kannst dich hierfür an dem Bild unten orientieren.

Nachher sollte rechts im Navigator der Wrapper “#single expertentext below content” ausgewählt sein.

Klicke dann auf die Design-Option Background. Hier kannst du nun bei Image über den Button “Choose” ein neues Bild aus der Mediathek auswählen. Wenn es ein Bild ist, welches sich problemlos nach links und rechts duplizieren lässt, kannst du alle anderen Background-Optionen ignorieren. Ansonsten kannst du hier mehr über die Background-Optionen erfahren.

02_hintergrundbild_experte_cta_footer_1

 

Im Internen Header-Bereich (Shared Layout: Intern): ↑ nach oben

Um für den Internen-Bereich im Header (also beim Logo) das Bild austauschen zu können, musst du im Design-Modus du dir das Shared Layout Intern zum Bearbeiten auswählen. Klicke also im Layout-Selector (siehe unteres Bild) zuerst auf Shared Layouts und dann bei Intern auf den blauen Button “edit”. Dort haben wir in den Header-Bereich das Bild “concrete_seamless.jpg” als ein Hintergrundbild für den kompletten Wrapper eingefügt.

02_layout-selector
Der Layout-Selector. Hierüber kannst du alle Layouts zum Bearbeiten auswählen.

Fahre mit der Maus über den Wrapper, klicke mit der rechten Maustaste darauf und dann auf Edit this Instance. Achte darauf, dass du auch wirklich den Wrapper auswählst und nicht z. B. den Text o.ä. von dem Header-Block. Du kannst dich hierfür an dem Bild unten orientieren.

Nachher sollte rechts im Navigator der Wrapper “#intern header” ausgewählt sein.

Klicke dann auf die Design-Option Background. Hier kannst du nun bei Image über den Button “Choose” ein neues Bild aus der Mediathek auswählen. Wenn es ein Bild ist, welches sich problemlos nach links und rechts duplizieren lässt, kannst du alle anderen Background-Optionen ignorieren. Ansonsten kannst du hier mehr über die Background-Optionen erfahren.

02_hintergrundbild_sl-intern_1

Dein Spreadmind-Team

Wir sind immer Montag bis Freitag von 9:00 bis 17:00 Uhr für dich da.

Das, wonach du suchst, kannst du nicht finden?

Wir helfen dir gerne weiter! Fülle am besten unser Support-Formular aus und gemeinsam werden wir eine Lösung finden.

» zum Support-Formular