Sie sind hier:
  • Beispiele - Modulseiten

Artikelteaser

Artikelteaser gibt es für 1-, 2- und 3-spaltige Module. Die Höhe beträgt immer 2 HE (460px). Es gibt den Artikelteaser in 2 Varianten: mit und ohne Bild. Der Artikelteaser besteht aus einem Header- und einem Body-Element. Im Artikelteaser mit Bild wird das Bild über die komplette Modulbreite dargestellt, d.h. die Bildbreite liegt bei 290, 600 oder 910px. Die Höhe ist nicht vorgegeben. Das in diesem Teaser verwendete Bild hat die Abmessungen 910x220 px.

  • Artikelteaser

Artikelteaser ohne Bild

Hier jetzt ein Beispiel für einen Artikelteaser 1-spaltig ohne Bild - dafür mit einem Trennstrich im Header. Bitte beachten: Die beiden Varianten des Artikelteaser bauen auf demselben Basiselement auf, d.h. es kann beim Erstellen des Teasers auch in einen "Teaser ohne Bild" ein Image-Element eingebaut werden - das Bild wird in der Ausgabe dann aber nicht angezeigt. Umgekehrt gilt das auch für den Trennstrich: dieser wird nur in der Variante "Teaser ohne Bild" dargestellt.

zum Auftritt der LEL
  • Artikelteaser

Artikelteaser 2-spaltig ohne Bild

Hier jetzt ein Beispiel für einen zweispaltigen Artikelteaser ohne Bild. Die Artikelteaser können entweder für Kurzmeldungen genutzt oder als Einführungsmeldung für einen längeren Artikel verwendet werden, der dann über einen Link erreichbar ist. Links im Text des Artikelteasers wird übrigens automatisch ein Icon (Pfeil/Dreieck) vorangestellt. Grundsätzlich kann das Inhaltselement des Artikelteasers mit beliebigen Inhalten gefüllt werden, also z.B. auch mit Listen, Formularen etc. Allerdings sollte in diesem Fall dann eher das "Allgemeine Modul" Verwendung finden. Wenn der Platz für den Inhalt nicht erreicht, erscheinen automatisch Navigationssschaltflächen zum Weiterscrollen.

Nach der Trennlinie (die auch über die gesamte Breite geht), jetzt noch ein wenig Fülltext: Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Lesen Sie weiter...

pixabay.com
  • Beispiele

Artikelteaser 2-spaltig mit Bild

Jetzt nochmals ein Artikelteaser mit Bild, diesmal 2-spaltig. Das Bild hat hier jetzt die Abmessungen 460x150 px. Im nebenstehenden Beispiel ohne Bild wurde als Überschrift "Überschrift H2" aus dem Header verwendet, hier Überschrift H3 aus dem Inhalt.
Hier wird der Text jetzt auch nicht ganz so lang, damit man den "Weiter-Link" sieht, ohne scrollen zu müssen. In den nächsten Zeile kommen dann noch Beispiele für 1-spaltige Artikelteaser in unterschiedlichen Varianten. Die 3-spaltige Variante ohne Bild sparen wir uns auf dieser Seite. Lesen Sie weiter...

pixabay.com

Mit Bild - ohne Header

Ein kleiner Rand bleibt oben und unten übrigens immer - auch wenn, wie hier auf einen Header mit Spitzmarke und/oder Datum verzichtet wird. Überschrift hier: H3 aus dem Inhaltselement.

Mit Bild - andersrum

Das Bild kann auch unter der Überschrift und dem Text stehen (oder dazwischen), so wie in diesem Fall. Ganz an den unteren Rand ist es aber nicht zu bekommen.
 

  • Beispiele Artikelteaser

Hier wurde jetzt einfach mal die Überschrift weggelassen, auch wenn dann schon irgendetwas fehlt. Aber hier muss die Spitzmarke jetzt einfach mal reichen. Auch auf dieser Seite gilt: alle Bilder stammen von pixabay.com und stehen unter CC0 Public Domain. Jetzt kommt noch eine Zeile Text und dann gilt: Lesen Sie weiter...

  • Beispiele

Teaser ohne Bild und Trennstrich

Wenn die Kombination "Mit Spitzmarke und Überschrift, ohne Trennstrich, ohne Bild" gewählt wird, sollte die Überschrift (so wie hier) aus dem Inhaltselement kommen und nicht aus dem Header, da sonst der Abstand zwischen Spitzmarke und Überschrift zu gering ist.

Noch eine Anmerkung zu Artikelteasern mit Bild: wenn mehrere Teaser mit Bild nebeneinander stehen, sollten alle Bilder gleich hoch und gleich ausgerichtet sein - nicht so wie in dieser Zeile.

Dies ist ein Teasertext, der ziemlich lang werden muss. Dazu muß ich leider viel schreiben, das ist aber richtig lästig. Ich glaube, wir müssen mal zählen, wie viele Wörter und Zeichen in einen Artikelteaser hineinpassen. Ich schreibe immer noch weiter, denn der Text muss noch viiiiiieeeeel länger werden, damit er ja nicht mehr in den Kasten hineinpasst. Warum das ganze? Um zu test, ob die Schaltflächen noch funktionieren. So ein Ärger. Jetzt schreibe ich noch etwas mehr Text, damit es immer noch länger wird. Mal schauen, ob sie jetzt wieder kommen.

Text