Landingpage Vorlage HTML-/contentlastige Teaser

Auf dieser Seite findet ihr alle über den HTML-Teaser einsetzbare Zeichen- & Absatzformate und Elemente sowie weitere Teaser, die eher informativ sind oder inhaltliche Verweise/Verlinkungen bieten.

Allgemeine Vorgaben

• Content, der einen Textfluss inkl. Fließtexten enthält, ist IMMER in einem 2-8-2-Raster einzusetzen, wie hier auf dieser Seite zu sehen. Sofern aber ein 2-spaltiger Bild-Text-Aufbau gewählt wird, ist der Aufbau 5-1-6-Raster oder 6-1-5-Raster zu wählen (Einsatz siehe weiter unten unter "Fließtexte").
• Bild-lastige Teaser und Recoteaser können auch auf contentlastigen Seiten verwendet werden. Hier wechseln sich dann der für Bild-/Recoteaser vorgegebene Rasteraufbau mit dem hier genannten ab.

USP-Leiste

Für die Anzeige der USP-Leiste wird je Selling Point im Teaser ein Tab gepflegt. Es kann ein individuelles Icon als .svg (Look & Format müssen den Beispielen entsprechen) hinterlegt werden und der jeweilige Selling Point kann individuell verlinkt werden.

Inhaltliche Vorgabe ist es, die USPs auf maximal 4 Selling Points zu beschränken.

In der Mobile-Ansicht des Teasers erfolgt ein automatisches Sliding durch die einzelnen Selling Points.

Kategorie-Leiste

1. Layervorlage: Top-Kategorien

Diese Layervorlage dient der Button-artigen Gestaltung von Kategorielinks, um dem User auf Landingpages einen übersichtlichen, klaren Einstieg in Sortimente zu bieten.

Bei dieser Layervorlage ist darauf zu achten, dass möglichst eine durch 3 teilbare Zahl gepflegt wird aufgrund des 3-spaltigen Aufbaus im Frontend.

Im Gegensatz zu den anderen Teasern auf dieser Seite, ist dieser Teaser in dieser Layervorlage NUR im 100% Raster anzuwenden.

2. Layervorlage: Kategorie-Tags Content

Die Layervorlage dient der Tag-artigen Gestaltung in Contentseiten. Die Pflege erfolgt entsprechend der anderen Layervorlage, nur dass hier nicht auf die Teilbarkeit durch 3 geachtet werden muss.

Die Pflege der Überschrift hat im Gegensatz zu der Layervorlage Top-Kategorien hier KEINEN Effekt auf das Frontend, sie wird nicht angezeigt.

Da diese Layervorlage in den allermeisten Fällen nicht für sich steht, sondern im Kontext eines Fließtextes zu verwenden ist, ist diese Layer in dem entsprechenden Raster zu pflegen, in dem auch der dazugehörige Fließtext gepflegt ist.

Jump Mark Teaser

Dieser Teaser dient dazu, eine Liste an Sprungmarken innerhalb einer Seite zu definieren, die auf contentlastigen, langen Landingpages dazu dient, in sehr zurückgenommener Link-Optik auf Bereiche unten auf der Seite zu verweisen.

Der Eintrag im Teaser muss folgendermaßen gepflegt werden: "Text, der verlinkt werden soll | #eindeutigerverweis". "eindeutigerverweis" muss sich als id-Attribut eines willkürlichen HTML-Elements unten auf der Seite, zu dem gesprungen werden soll, wiederfinden, z.B. "(...)p id="eindeutigerverweis"(...)Text, zu dem gesprungen werden soll(...)/p(...)".

Einsatz im Raster:
Sofern der Sprungmarken-Teaser eher zu dem Textfluss gehört, ist er im 2-8-2-Raster zu verwenden. Er kann aber auch über die gesamte Breite gezogen werden, wenn er beispielsweise als Seiteneinstieg unterhalb eines vollflächigen Bildes eingesetzt wird, dies liegt im eigenen Ermessen.

Verhalten im Frontend:

• Der Teaser baut sich von links nach rechts auf.
• Sobald die gepflegten Verweise nicht mehr alle auf die Breite des Screens passen, erscheint eine Pfeilnavi, mit der man sich durch die Verweise navigieren kann.

HTML-Teaser

Im folgenden alle unterschiedlichen Formatierungsoptionen, die man über den HTML-Teaser einsetzen kann:

Absatzformate

1. Überschriften-Styles

Alle der folgenden Überschriften-Styles stehen als Absatzformate im WYSIWYG-Editor zur Verfügung, können aber bei komplexerem Aufbau eines HTML-Teasers auch genauso in der Quellcode-Ansicht eingefügt werden.

Obwohl die Absatzformate zur Verfügung stehen, sind folgende UX-Einschränkungen bei der Verwendung zu beachten:

1. Überschriften-Hierarchie: H1 ist die wichtigste Headline und darf nur einmal pro Seite eingesetzt werden. Sie dient als Einleitung oder Überschrift für die gesamte Seite. Alle weiteren Headlines folgen der definierten Hierarchie (H2, H3 …), immer kleiner werdend. Anm.: Die Verwendung der Schriftschnitte von H1, H2, etc. muss nicht der Anwendung im HTML Code entsprechen. Sollte aus SEO-Sicht eine andere Hierarchie gewünscht sein, wird mit den Formatvorlagen (F1-x) gearbeitet, die optisch den H-Überschriften entsprechen.
2. Schriftfarben (UX-Guidelines): Die Standard-Schriftfarbe ist Hagebau Schwarz (HB Black: #1C1C1C). Weitere Farben sind im Content-Einsatz nicht vorgesehen. Ausnahmen gelten nur für spezielle Anwendungsfälle:
   • Rot: Für Fehlermeldungen und Warnhinweise – signalisiert Fehler und Dringlichkeit.
   • Grün: Für gezielte Userführung, z. B. Öffnungszeiten, Benachrichtigungen oder Kundenkartenpreise.
   • Grau: Für „disabled“-Zustände – signalisiert klar die Nicht-Aktivierbarkeit einer Funktion.
3. Die hier genannten Anweisungen zu Schriftfarben gelten generell für Texte, nicht nur die Überschriften. Sie werden hier allerdings genannten, da im HTML-Editor Absatzformaten mit diesen Farben (rot, grün, grau) zur Verfügung stehen, die aber mit entsprechender Vorsicht einzusetzen sind.

Klassische H1 bold, schwarz

Klassische H2 regular, schwarz

H2 Lookalike regular, schwarz

Kassische H2 bold, schwarz

Klassische H3 regular, schwarz

H3 Lookalike regular, schwarz

Klassische H3 regular, grau

Klassische H3 bold, schwarz

Klassische H3 Versalien Bold, schwarz

Klassische H3 Versalien Bold, grau

Klassische H4 regular, schwarz

H4 Lookalike regular, schwarz

Klassische H4 bold, schwarz

Klassische H4 regular, grau

Klassische H4 regular, hellgrau (SEO-relevant) --> sollte nicht mehr verwendet werden (Barrierefreiheit!!!)

Klassische H4 regular, hellgrün

Klassische H4 regular, dunkelgrün

Klassische H4 Versalien Regular, schwarz

Klassische H4 Versalien Bold, schwarz

Klassische H4 Versalien Bold, Grau

Klassische H5 regular, schwarz

H5 Lookalike regular, schwarz

Klassische H5 regular, schwarz

Klassische H5 regular, grau

Klassische H5 regular, rot

Klassische H5 regular, hellgrün

Klassische H5 Versalien Bold, Schwarz

Klassische H6 regular, schwarz

H6 Lookalike regular, schwarz

Klassische H6 bold, Schwarz

Klassische H6 regular, grau

Klassische H6 regular, rot

Klassische H6 regular, hellgrün

Klassische H6 Versalien BolD, Schwarz

2. Fließtexte

Jeder Fließtext muss in dem dazugehörendem HTML-Tag umwickelt werden, damit Abstände und Schriftgrößen einheitlich sind und die Texte auch semantisch korrekt ausgezeichnet sind. Fließtext kann auch über den WYSIWYG-Editor formatiert werden (Format: "Absatz"). Innerhalb von Fließtexten können einzelne Wörter/Phrasen gefettet werden oder verlinkt werden. 

Fließtexte in Kombination mit anderen Elementen

Wie eingangs erwähnt, können Fließtexte natürlich auch mit anderen Elementen kombiniert werden. Im Zusammenspiel mit dem zweispaltigen Einsatz mit einem Bild beispielsweise, ist auf die Rasteraufteilung 6-1-5 (1 steht für eine Spalte Abstand) oder 5-1-6 zurückzugreifen. Auch die Kombination des Fließtextes mit anderen textstrukturierenden und Verweis-Elementen ist hier natürlich denkbar (wie hier die Kombi mit einer Liste und einem Button)

• Listitem 1
• Listitem 2
• Listitem 3

Verlinkungen/Buttons

1. Textlinks

Jeder Textlink muss in dem dazugehörendem HTML-Tag umwickelt werden, damit diese einheitlich erscheinen. Sprungmarken sind mit #Sprungmarke zu verlinken. Hierbei ist es wichtig, dass ein HTML-Tag unten auf der Seite genau diese Sprungmarke als ID hat (id="sprungmarke"). Bei normalen Links bitte die relative URL ausgeben ( https://www.hagebau.de wird weggelassen → /url/ wird eingesetzt ) und den letzten Slash nicht vergessen!

2. Primary Button

Primary Buttons aus dem Content Bereich betiteln in der Regel "ZUM SORTIMENT". Auch hier sind die Links relativ gesetzt: https://www.hagebau.de wird weggelassen. Nicht den Slash am Ende vergessen!

3. "Mehr lesen"-Link

Besonders lange Fließtexte, bei denen es nicht so wichtig ist, alles auf einmal angezeigt zu bekommen, können hinter einem "Mehr lesen" Link versteckt werden. Das Read more-Tag wird einfach innerhalb des Absatzes eingefügt und dann gibt's noch mehr zu lesen für den User, wenn's ihn interessiert.

4. Verlinkung von Bildern

Obwohl Bilder eigentlich vorrangig über Teaser eingebunden werden soll, kann es vorkommen, dass ein verlinktes Bild via HTML-Teaser eingebunden werden soll. Im in diesem Fall die Unterstreichung des Bildes, die durch die Verlinkung erfolgt, so umgehen muss innerhalb des a-Tags mit dem Attribut "style="border: none;" gearbeitet werden. Beispiel: "(...)a href="/test" style="border: none;"(...)img src="bildurl"(...)/a(...)".

Chatbot-Button

Kann genutzt werden, um den homieAI Chatbot einzubinden.

Geordnete/ungeordnete Listen

Geordnete Listen

Aufzählungen sind automatisch korrekt gestylt, wenn man die entsprechende Funktion im Editor verwendet. Man kann sie aber auch entsprechend im Quellcode hinterlegen.

1. Punkt 1
2. Punkt 2
3. Punkt 3

Ungeordnete Listen

Auflistungen sind automatisch korrekt gestylt, wenn man die entsprechende Funktion im Editor verwendet. Man kann sie aber auch entsprechend im Quellcode hinterlegen.

• Auflistungspunkt
• Auflistungspunkt
• Auflistungspunkt

Tabellen

Tabellen können je nach Verwendung im Kontext sowohl im 2-8-2-Raster als auch im 100% Raster eingesetzt werden. Daher sind hier auch beide Varianten abgebildet.

Reguläre Tabellen im schmaleren Raster

Im folgenden ein Standardaufbau einer Tabelle, bei der es nur oben eine Kopfzeile gibt: 

Tabellen mit Überschriften-Spalte im schmaleren Raster

Tabellen können auch so umformatiert werden, dass auch die erste Spalte als Überschriftenspalte gilt:

Reguläre Tabellen im 100% Raster

Im folgenden ein Standardaufbau einer Tabelle, bei der es nur oben eine Kopfzeile gibt: 

Tabellen mit Überschriften-Spalte im 100% Raster

Tabellen können auch so umformatiert werden, dass auch die erste Spalte als Überschriftenspalte gilt:

Infoboxen

Akkordeons/Summaries

Trennlinie

Trennlinien, die vor allem einer optischen Trennung innerhalb contentlastiger Seiten dient, können mit dem Standard HTML-Schnipsel eingebaut werden:

(Sie sind hier auf dieser Seite auch mehrfach zur Trennung von Inhaltselementen im Einsatz)

Videos

Da sich die Videos, die wir einbinden im Seitenverhältnis responsive verhalten müssen, gibt es dafür eine extra CSS-class, die das Video für verschiedene Endgeräte skaliert.