Das Template „fhs-magicHero“

Ein Template für CMSimple_XH ab Version 1.7

Merkmale

• unterschiedliche Hero-Bilder auf jeder Seite
• alle Heros haben individuelle Texte auf jeder Seite
• Hero-Overlay, Seiten-Hintergund, Überschriften und diverse Style-Elemente mit zwei Farbangaben harmonisch aufeinander abgestimmt, aber auf jeder Seite unterschiedlich gestalten

Die Geschichte

Eigentlich sollte mein nächstes Template „Black Magic Women“ heißen. Diesen alten Santana-Titel hatte ich nämlich mal wieder gehört – sehr schön. Der stammt aus einer Zeit, in der besonders coole Typen die Damen mit den Worten zum Tanzen aufforderten: „Woll’n wir ’ne Runde wackeln?“ Und wenn man zu allem noch eine prächtige „Matte“ trug (Matte = Mähne, sehr lange Haare), dann standen die Chancen nicht schlecht. Aber, was erzähle ich da? Das ist lange her.

Black sollte das neue Template werden. Hm, gut. Aber nur schwarz? Langweilig – lieber was Wechselndes. Und da sind wir auch schon beim Thema.

Bei meiner Suche nach Inspiration fand ich viele schöne Seiten mit wechselnden „Hero“s, die man auch Landingpage oder Jumbotron oder sonstwie nennen kann.  Und mit einem „kleinen Schwarzen“ wollte ich es auch mal versuchen.

Es kam dann alles ein bisschen anders. Das Ergebnis ist hier zu sehen. Der geplante Name passte dann auch nicht mehr. Deshalb eben „magic Hero“. Auch gut.

Voraussetzungen

• CMSimple_XH ab Version 1.7 
• jQuery-Plugin Autoload „an“ wichtig
• FA-Plugin Require-Auto „an“ wichtig
• Plugin Morepagedata (im Template-Download enthalten)

Die Heros

Wie macht man das nun aber mit diesen wechselnden Hero-Bildern?

Tja, viele Wege führen nach Rom. Im XH-Forum wird häufig so etwas nachgefragt und mindestens ebenso viele Lösungsmöglichkeiten werden besprochen. Einige sind sehr elegant, andere zu kompliziert, manche beides. Damit ich es Tipsy (der Sekretärin*) erklären kann, habe ich mich hier für das Plugin „Morepagedata“ von Svasti in der für XH 1.7 angepassten Version 1.2.2 von Christoph entschieden. Diese Plugin-Version ist im Download enthalten.

Es soll bloß keiner glauben, dass ich ein verkommener Macho bin. Sekretärin „Tipsy“ ist hier nur ein fiktiver Name. Und Sekretärinnen sind sowieso meistens viel cleverer als der Chef.

Der neue Tab „Extra“

Mit dem Plugin „Morepagedata“ können auf jeder einzelnen Seite verschiedene Variablen gesetzt werden. Das Template wertet diese aus und zeigt das Ergebnis anschließend an. Dazu erscheint über dem Editor ein neuer Tab „Extra“ (siehe Bild). Ein Klick darauf öffnet den Eingabebereich, in dem man das passende Hero-Bild für die Seite auswählen kann. Weiterhin kann man die Farbe des Seiten-Hintergrundes eingeben. Diese Farbangabe hat gleichzeitig Auswirkungen auf ein Overlay des Hero-Bildes, das eine „Tönung“ verursacht. Außerdem werden hier noch die Hero-Texte eingegeben. Für die Hero-Überschrift kann ebenfalls eine Farbe gewählt werden – die wiederum Auswirkungen auf verschiedene Elemente der Seite hat. Ausprobieren.

Alle Eingabemöglichkeiten können auch ignoriert, also frei gelassen werden. Dann werden Standardwerte übernommen. Die Hero-Überschrift entspricht dann dem Seitentitel, so wie er in der Navigation steht.

Im hiesigen Beispiel habe ich schwarz-weiß-Bilder in der Größe 1365 x 768 px (Seitenverhältnis 16 : 9) gewählt. Die farbliche Tönung hat bei schwarz-weiß-Bildern den besten Effekt. Besonders geeignet sind Bilder, die ihr wichtigstes Element im Zentrum (in der Mitte) haben. Bei kleinen Bildschirmen werden nämlich, je nach Format, die Ränder abgeschnitten.

Die Hero-Bilder müssen in folgendem Ordner vorhanden sein:

..\userfiles\images\heros\

Die Wirkung der Hero-Bilder solltest du nicht allzusehr überbewerten. Sie sind nur Schmuck oder Beiwerk mit großem visuellen Effekt – aber auch nicht mehr. Man kann hier zwar auch Produkt-Bilder verwenden, für eine „echte“ Produkt-Präsentation sollte man aber besser ein „gutes“ Bild in den Inhalt setzen.

Beispiel für ein Produkt-Bild in voller Größe. Es ist exakt das selbe Bild, wie im Hero auf dieser Seite.

Übrigens: Die hier verwendeten Bilder stammen von Pixabay. Ich habe sie unter dem Stichwort „Vintage“ gesucht und gefunden. Vielen Dank für die Bereitstellung.

Das Menü

Es gibt Websites, die haben nur wenige Menüpunkte mit wenigen oder keinen Unterseiten. Ebenso gibt es das Gegenteil – eine tiefgehende Menüstruktur mit Unmengen an Unterseiten.

Je nachdem, was nun gerade der Fall ist, könnte es sein, dass du das Navigations-Menü lieber vollständig geöffnet haben willst – das heißt, alle Menüebenen werden mit ihren Unterseiten permanent angezeigt.

Das kannst du ganz leicht erreichen. In der template.htm (im Template-Ordner) kannst du das Aussehen des Menüs bestimmen. Gleich ganz oben findest du diese Einstellung:

$fullMenue = "no"; = Das CMSimple_XH Standard-Menü wird angezeigt.

Eine Änderung zu "yes" bewirkt:

$fullMenue = "yes"; = Das Menü wird vollständig geöffnet angezeigt.

Bootstrap

Meine Inspiration für dieses Template stammt aus den verschiedensten Quellen. Dadurch ist es – mehr oder weniger durch Zufall – passiert, dass für das Grundlayout  Bootstrap v3.3.5 ins Template geriet ;-)

Es ist nur das Bootstrap-CSS integriert. Das hat allerdings auch Vorteile. Einige Formatierungen für Standardelemente sind dadurch schon vorhanden. Unbedarfte Nutzer brauchen sich nicht darum zu kümmern.

Interessierte, erfahrene Nutzer können bei Bedarf auf Bootstrap-Formatierungen auch für den Inhalt zurückgreifen. Dazu muss allerdings im Editor manuell codiert werden.

Browser ohne JavaScript?

Das Template funktioniert eingeschränkt auch ohne JavScript. Am oberen rechten Rand wird dann ein Hinweis darauf ausgegeben, dass man ohne JavaScript nicht die volle Funktionalität der Website erleben kann. Es gibt dort noch einen Link zur Inhaltsübersicht (Sitemap), damit man navigieren kann. Die Heros werden ohne JavScript allerdings nicht angezeigt.