Teaser-Elemente

Visual Overlay

Visual Overlay – 2 Spalten

Visual Overlay – 3 Spalten

Visual Overlay – 4 Spalten

Alle Teaser-Varianten und Bildoptionen

Jedes Beispiel ist ein bearbeitbares Contao-Teaser-Element. Die farbige Demografik macht die Bildfilter erkennbar. Schwarzweiß → Farbe: Mit der Maus oder Tastaturfokus wird das Bild farbig.

Bildposition

Bildhöhe

Bildfarbe

Link, Button und Klickbereich

Seitenabstand

Dreispaltiges Teaser-Grid

Vierspaltiges Teaser-Grid

Teaser: weitere Muster

Die fünf Grundvarianten stehen oben. Hier folgen Bilddarstellungen, native Inhalte und Layoutbeispiele. Alle Aktionen bleiben ohne Hover erreichbar.

Bildkarte – Bild oben

Horizontal – Bild links und rechts

Einspaltig – Feature im Inhaltscontainer

Zweispaltig – gemischte Typen

Dreispaltig – kurze Einstiege

Vierspaltig – kompakte Inhalte

Zentriert – zwei Teaser

Kennzahl – drei Schritte zum Ergebnis

01 – Verstehen
Ziele und Anforderungen gemeinsam klären.
02 – Gestalten
Struktur und Gestaltung entwickeln.
03 – Umsetzen
Die Lösung umsetzen und prüfen.

News / Editorial – native Contao-Ausgabe

von Planyt

Was klare Inhalte ausmacht

Ein ausdrücklich gekennzeichnetes redaktionelles Demonstrationsbeispiel.

Beispiel lesen

Video / Medien – vorbereitet, noch ohne Film

Für dieses Muster fehlt eine geeignete lokale Videodatei. Die spätere Ausgabe verwendet den nativen Contao-Player mit sichtbaren Bedienelementen und ohne Autoplay. Hier wird kein funktionsloser Play-Button gezeigt.

Eignung der Beispiele

  • Overlay, Icon, kurze Bildkarte und Mini: je nach Inhalt 1–4 Spalten.
  • Description und Mehrfachlinks: vorzugsweise 1–3 Spalten.
  • Horizontal und Feature: vorzugsweise 1–2 Spalten.

Hover betont nur die Karte; Texte und Aktionen bleiben immer sichtbar. Bento bleibt eine gesondert zu entscheidende Layout-Erweiterung.

Gerahmte Bildkarte – zwei Zielgruppen

Bild mit Innenabstand, zweizeiliger Titel und eine klare Aktion. Mit der Maus wird das Bild leicht vergrößert. Auf Touch-Geräten bleiben alle Inhalte direkt sichtbar; reduzierte Bewegung schaltet den Bildzoom aus.

Dein Zuhause – Demo-Zielbereich

Dieser Bereich zeigt das interne Linkziel der jeweiligen Beispielkarte. In einem Kundenprojekt führt die Aktion zur passenden Inhaltsseite.

Ihr Business – Demo-Zielbereich

Dieser Bereich zeigt das interne Linkziel der jeweiligen Beispielkarte. In einem Kundenprojekt führt die Aktion zur passenden Inhaltsseite.

Was klare Inhalte ausmacht

Dies ist ein redaktionelles Demonstrationsbeispiel. Klare Überschriften, passende Bilder und verständliche Links helfen bei der Orientierung.

Zwei unabhängige Inhaltsspalten

Die linke und rechte Spalte werden als native Contao-Untergruppen unabhängig gepflegt. Die Scroll-Synchronisierung folgt erst nach der Asset-Integration.

Raum für eigene Inhalte

Diese Spalte verbindet Texte, aufklappbare Inhalte und einen Teaser mit nativem Slider. Die rechte Spalte enthält vier eigenständige Teaser.

Vier Fragen zum Projekt

Wir halten gemeinsam fest, welches Ergebnis das Projekt erreichen soll.

Wir ordnen die Informationen und machen ihre Zusammenhänge verständlich.

Wir verbinden die Inhalte mit einer zugänglichen und responsiven Gestaltung.

Wir prüfen Inhalte und Funktionen und verbessern sie anhand konkreter Rückmeldungen.

Von der Idee zur Umsetzung

Am Anfang stehen Ziele und die Menschen, die das Angebot später nutzen.

Eine klare Struktur hilft dabei, Inhalte zu finden und Zusammenhänge zu verstehen.

Die Gestaltung unterstützt diese Struktur auf großen und kleinen Bildschirmen.

Zum Abschluss prüfen wir die Umsetzung und entwickeln sie mit den gewonnenen Erkenntnissen weiter.

Projektziele konkretisieren

Ein gutes Ergebnis beginnt mit klaren Fragen.

Wir sammeln Anforderungen, ordnen die wichtigsten Ziele und halten fest, wie sich Erfolg später überprüfen lässt. So entsteht eine verständliche Grundlage für alle Beteiligten.

Inhalte mit Struktur

Verständliche Inhalte brauchen einen roten Faden.

Wir entwickeln eine sinnvolle Reihenfolge, benennen Zusammenhänge und prüfen, ob jede Aussage ihren Platz hat. Auch umfangreichere Themen bleiben dadurch zugänglich.

Zugänglichkeit prüfen

Gute Lösungen funktionieren für unterschiedliche Menschen.

Wir betrachten Lesbarkeit, Tastaturbedienung und verständliche Interaktionen frühzeitig. Das erleichtert spätere Anpassungen und erhöht die Qualität.

Vom Entwurf zur Lösung

Ein Konzept wächst mit den gewonnenen Erkenntnissen.

Zunächst prüfen wir die Struktur, dann die Gestaltung und schließlich das Verhalten im Detail. Jeder Schritt liefert neue Fragen und Antworten.

Qualität im Alltag

Eine Oberfläche muss nicht nur im Entwurf überzeugen.

Wir testen unterschiedliche Bildschirmgrößen, längere Inhalte und wechselnde Nutzungssituationen. Auch nachladende Bilder und Komponenten gehören zur Überprüfung.

Ein gemeinsamer Abschluss

Am Ende zählen die Inhalte und ihre Nutzbarkeit.

Wir führen die Ergebnisse zusammen, dokumentieren offene Punkte und schaffen eine verständliche Übergabe.