Als Nächstes kümmern wir uns um noch das letzte offene und wichtige Branding Puzzle Teil: Dein Hero Image bzw. wie wir es im Seiten Hero verwenden.
Der Seiten Hero ist auf unserer WordPress Website im Prinzip auf 3 verschiedene Arten umgesetzt.
Wahrscheinlich fragst Du Dich jetzt: Warum auf 3 verschiedene Arten? Warum nicht einfach überall genau gleich?!
Das wäre natürlich deutlich einfacher. Aber wie Du gleich sehen wirst, wäre das wohl für die Meisten einfach zu einschränkend, weswegen ich eben doch ganz „klassisch“ die 3 Arten umgesetzt habe:
Seiten Hero #1: Die Startseite.
Die Startseite ist ein etwas speziellerer Fall, weil diese ja häufig etwas auffälliger gestaltet werden soll.
Deswegen gestalten wir den Seiten Hero für die Startseite ganz einfach mit dem Gutenberg Editor (siehe separate Lektion).
Seiten Hero #2: Alle anderen „normalen“ Seiten.
Für alle anderen „normalen“ Seiten haben wir einen etwas schlichteren Seiten Hero, der lediglich das Hero Image und den Seitentitel enthält:
Und dieser Seiten Hero wird eben nicht im Gutenberg für jede Seite einzeln erstellt, sondern verwalten wir zentral in einer Vorlage (stell Dir vor, Du möchtest irgendwann das Aussehen des Seiten Hero verändern und müsstest dazu Hunderte Seiten manuell im Gutenberg Editor verändern).
Seiten Hero #3: Blog Beiträge.
Theoretisch könnte man einfach die gleiche Art Seiten Hero nutzen, wie auf allen anderen normalen Seiten.
Aber dieses Layout habe ich bewusst so gewählt:
Einerseits wollen wir zusätzlich zum Seitentitel eben auch uns als Autor präsentieren (das gibt einen idealen Branding und Wiedererkennungseffekt).
Andererseits hast Du normalerweise für jeden Blog Beitrag ein individuelles Bild, welches Du komplett zeigen möchtest. Und das eben nicht hinter dem Titel versteckt und in der Grösse oben und unten abgeschnitten sein soll:
Bevor wir uns jetzt ansehen, wie Du diese 2 Seiten Hero Vorlagen anpassen kannst, noch ein spezielles Thema:
Bilderslider als Seiten Hero?
Bringen wir einen etwas umstrittenen Punkt auf den Tisch:
Den Bilderslider als Seiten Hero.
Ja, Bilderslider können cool und schön aussehen.
In 99% aller Fälle braucht es keinen Slider. Es wird einfach ein Slider benutzt, eben weil er schön aussieht und es „halt so gemacht wird“.
Aber:
In sicher 90%+ aller Fälle ist der Slider schlicht schädlich für die Website:
Studien zeigen immer wieder, dass Bilderslider von den meisten Benutzern ignoriert werden, weil der Besucher automatisch annimmt, dass es sich um Werbung handelt. Und wir Menschen sind in der heutigen Welt darauf trainiert, Werbung automatisch unbewusst auszublenden (dieses Phänomen hat sogar einen Namen: „Banner Blindheit“).
Die Notre Dame Universität hat z.B. bei Tests herausgefunden, dass nur 1% aller Besucher auf irgendein Slider-Bild geklickt haben. Und das obwohl der Slider ja das auffälligste Element auf der Homepage ist.
Ausserdem sind die Bilderslider auf dem Smartphone häufig schlecht lesbar/erkennbar (bzw. Bilderslider sinnvoll responsive zu machen, ist alles andere als einfach).
Und in Googles „mobile first“ Welt ist das definitiv kein Vorteil (übrigens rät sogar Google selbst explizit von Slidern ab).
Schliesslich sind die Slider zu allem Überfluss auch noch echte Performance Killer.
Einerseits, weil die Funktion (also das Plugin dahinter) fast schon etwas vom Kompliziertesten ist an einer Website, andererseits weil dazu natürlich mehrere grosse Bilder heruntergeladen werden müssen.
Hier als kurze Demonstration der Google Page Speed Score der genau gleichen Test-Website, einmal ohne Slider:
Und einmal mit einem ganz simplen Slider (mit nur 2 Slides/Bildern):
Kurz gesagt:
Bilderslider werden aussterben, und darum kannst Du das Thema zum Glück einfach ignorieren 🙂
Und als Ersatz dafür haben wir ja eben den Seiten Hero mit dem statischen Hero Image.
Ausnahme: Du möchtest im Inhalt mehrere Fotos präsentieren (also als Alternative zu einer Bilder-Galerie).
Dafür brauchst Du nicht die völlig überladenen und bekannten Plugins „Revolution Slider“ oder „Layer Slider“, sondern kannst Du das schlanke (und vor allem gratis) Plugin „MetaSlider“ nutzen.
Wobei selbst in diesem Fall würde ich Dir ganz einfach eine Bilder-Galerie empfehlen (siehe separate Lektion). Denn auch in diesem Fall hat der Slider das Problem, dass es auf dem Smartphone schlicht nicht immer auf einen Blick klar ist, dass es mehrere Bilder in einem Slider sind (und nicht nur ein einzelnes Bild).
Wenn also Einfachheit und Benutzerfreundlichkeit im Vordergrund stehen soll, verzichte einfach auf die Bilderslider.
Wie Du die 2 Seiten Hero Vorlagen anpasst
Du findest die Seiten Hero Vorlagen unter „Design – Elements“.
Wie Du siehst, hast Du hier mehr Elemente als nur unsere 2 Seiten Hero Vorlagen (bzw. haben diese hier den Typ „Kopfbereich“). Doch im Moment kannst die anderen Elemente ignorieren (die kommen dann teilweise noch in späteren Lektionen vor):
Hinweis: Diese „Elements“ sind eine Funktion, welche vom GeneratePress Theme kommt (bzw. genau genommen vom dazugehörigen „GP Premium“ Plugin).
Schauen wir uns jetzt zuerst den „Standard Seiten Hero“ an.
Oben hast Du den Inhalt, der dann im Seiten Hero ausgegeben wird. Dieser besteht lediglich aus etwas HTML mit einem Platzhalter für den Seitentitel (aber keine Sorge, hier musst Du jetzt Nichts anpassen):
Was Du jetzt aber ganz nach Bedarf anpassen kannst, sind einige Einstellungen unter dem Reiter „Page Hero“ (Hinweis: Du „musst“ eigentlich nur das „Ausweichbild“ anpassen, den Rest kannst Du auch einfach bleiben lassen wie er ist):
Hier eine Erklärung zu den Optionen:
- Horizontale Ausrichtung: Also ob der Seitentitel links, rechts oder zentriert ausgerichtet ist.
- Padding: Wie viel Abstand Du oben und unten vom Seitentitel haben möchtest (damit mehr vom Hero Image sichtbar wird).
- Hintergrundbild: Falls Du anstatt einem Hero Image einfach nur eine Hintergrundfarbe möchtest, kannst Du hier „Kein Hintergrundbild“ einstellen.
- Ausweichbild: Hier kannst Du Dein Standard Hero Image auswählen.
- Hintergrundposition: Damit kannst Du steuern, wie Dein Hero Image ausgerichtet ist. Normalerweise wird von Deinem Hero Image immer nur ein Ausschnitt angezeigt (auch weil sich die Grösse des Seiten Hero je nach Bildschirmgrösse ja eben responsive ständig anpasst). Ein Beispiel sollte das am besten zeigen. Hier das genau gleiche Bild, von dem aber nur ein Ausschnitt sichtbar ist, weil es zu gross ist (und wie die Positionierung den angezeigten Ausschnitt beeinflusst):
Etwas weiter unten folgt gleich noch ein praktisches Beispiel, wo die „Hintergrundposition“ wichtig ist.
Natürlich kannst Du Dir die anderen Optionen ebenfalls ändern und ausprobieren. Aber die oben aufgezählten sind die grundlegendsten und wichtigsten Einstellungen, welche auch relativ einfach anzupassen sind. Du kannst bei diesen auch nicht viel „falsch“ machen. Also ruhig einfach einmal etwas ausprobieren 🙂
Tipp #1: Dein Hero Image einfärben:
Im Branding Modul habe ich ja schon angedeutet, dass Du Dein Hero Image auch einfärben kannst (um den Kontrast zu erhöhen). Das geht so:
Aktiviere die „Hintergrund Overlay“ Checkbox und dann gibt den Hex-Code für Deine Farbe ein. Danach musst Du aber die Farbe mit dem rechten Schieberegler noch etwas transparent machen (der Hex-Code wird dann automatisch in den RGB-Code umgewandelt, darum musst Du Dich nicht kümmern):
Wie transparent musst Du ausprobieren, aber ca. 50% (also 0.5) sollte ein guter Start sein:
Tipp #2: Hero Image mit Wellen-Effekt/Übergang
Falls Du wie ich ein „zugeschnittenes“ Hintergrundbild mit Übergang hast, musst Du die „Hintergrundposition“ auf irgendetwas mit „bottom“ setzen. Also z.B. „center bottom“ sollte eine gute Wahl sein:
Damit wird das Hintergrundbild an der unteren Kante ausgerichtet und der Welleneffekt ist immer sichtbar:
Soviel zu den Einstellungen, mit denen das Aussehen des Seiten Hero angepasst werden kann. Jetzt wechseln wir noch in den Reiter „Anzeigeregeln“ (Du musst hier jetzt aber nichts ändern).
Mit den Anzeigeregeln wird definiert, wo überall diese Seiten Hero Vorlage verwendet wird. Und wie schon angedeutet, verwenden wir diese auf allen Standardseiten („Komplette Seite“), mit Ausnahme der Startseite („Frontseite“):
Schauen wir uns jetzt noch die andere Vorlage „Blog Post Hero“ an.
Hier siehst Du gleich, dass der Inhalt einiges umfangreicher ist, da ja noch das Foto, Name, etc. im Seiten Hero angezeigt werden (aber auch hier musst Du nichts daran ändern):
Wenn Du jetzt hier herunterscrollst, ist die einzige Option die Du bei Bedarf ändern kannst die „Hintergrundfarbe“. Hier kannst Du z.B. Deine helle Brand Hintergrundfarbe verwenden:
Die restlichen Optionen würde ich so bleiben lassen, da das Layout für Blog Beiträge eben relativ genau definiert ist und sich nicht so einfach anpassen lässt:
Bei den „Anzeigeregeln“ siehst Du jetzt, dass diese Seiten Hero Vorlage nur für den Typ „Beitrag“ verwendet wird:
Hinweis: Wenn Du ganz aufmerksam warst, hast Du gemerkt, dass gemäss den Anzeigeregeln bei Blog Beiträgen beide Seiten Hero Elemente aktiv sein müssten (beim Anderen war ja „Komplette Seite“ gewählt).
In diesem Fall gilt: Das ältere Seiten Hero Element „gewinnt“ (also bei uns eben der „Blog Post Hero“):
Das aber nur als schon sehr „fortgeschrittener“ Hinweis, falls Du eigene zusätzliche Header Elemente erstellen möchtest.
Mit dieser Lektion hast Du jetzt einige Möglichkeiten, Deine Seiten Hero nach Deinen Wünschen zu gestalten.
Natürlich sind auch komplett andere Layouts möglich. Dazu braucht es aber wie Du gesehen hast schon etwas mehr Wissen über HTML und CSS, was jetzt aber den Rahmen sprengen würde und schlicht nicht so schnell erklärt wäre.
Aber:
Du möchtest ein bestimmtes Seiten Hero Layout umsetzen? Dann frag einfach in den Kommentaren (am besten mit einem Link zur „Vorbild“ Website) und ich schaue einmal, ob ich für Dich eine neue Vorlage erstellen kann 🙂
Auch hier kann ich natürlich nicht garantieren, dass alles einfach möglich sein wird. Aber ich denke, auch hier kann ich mit der Zeit sicher eine tolle kleine Sammlung mit kreativen Seiten Hero Layouts zusammenstellen.