First:

Original Hover Effects:

Second:

Third:

Fourth:

Fifth:

Sixth:

Seventh:

Eighth:

Ninth:

Tenth:

Übersicht: Card-Themes

Cards - Infos

Varianten
Varianten
Auf den Card-Theme-Seiten zeigen wir die populären Kachelmenü-Varianten. Es gibt für jedes Theme zahlreiche zusätzliche Konfigurations-Optionen, wie: Bilder-Zoom bei Mouse Over, zusätzliche Felder, Seitentitel über dem Bild, und viele weitere Varianten.
Wie Cards im Backend angelegt werden können
Wie Cards im Backend angelegt werden können
In unseren TYPO3-Installationen, die unsere Provider-Extension min_themes nutzen, gibt es drei Möglichkeiten, Cards anzulegen. Im Glossar weiter unten sind die drei Varianten genauer erläutert.

Cards - Glossar

Kacheln oder Cards
Teaser
Responsivität
Cards als Menü
Cards als News
Cards als CE

Kacheln oder Cards

Was nun, Cards oder Kacheln? Das ist egal, damit ist das gleiche Konstrukt gemeint. Wir nutzen hier meistens den Begriff "Card", da er im Content-Management-Kontext geläufiger ist.

Teaser

Ein Teaser ist ein kurzes, attraktives Design-Element, das dazu dient, die Aufmerksamkeit eines Benutzers auf eine spezifische Seite, ein Produkt oder eine Dienstleistung zu lenken. Teaser werden normalerweise in der Header- oder Footer-Sektion einer Website platziert und enthalten häufig ein ansprechendes Bild oder eine Video-Kurzdarstellung. Ziel ist es, den Benutzer dazu zu bringen, weitere Informationen zu einem bestimmten Thema abzurufen.

Responsivität

Fähigkeit einer Website, auf verschiedene Bildschirmgrößen zu reagieren = Responsive Webdesign

Quelle (und Danke an): Wikipedia

Cards als Menü

Wir haben für unsere Provider-Extension zwei Cardmenüs erstellt: 1. Cards-Dir, dieser Menütyp gibt alle Unterseiten einer Seite/eines Backend-Ordners als Menü aus. 2. Cards-List: gibt alle ausgewählten Seiten aus. Cards als Menü: Das ist die von uns bevorzugte und empfohlene Variante. Denn hier werden sie als "echtes" Menü von Seiten angelegt. Die Informationen für das Menü stammen aus den jeweiligen Seiteneigenschaften:

# Titel = Seitentitel
# Teaser = Description (Meta), dieser Eintrag ist auch für die Kurzbeschreibung bei Google-Ergebnisseiten relevant
# Bild = media (Ressourcen), hier können Contentmanager auch die Tools für das Image-Processing nutzen: Bilder beschneiden, Formate wählen, Responsive Varianten einstellen

Dieses Menü ist sehr flexibel und kann auf bis zu zehn Feldern (Seiteneigenschaften) erweitert werden. Und es ist für die OnPage-Suchmaschinenoptimierung ideal!

Cards als News

Ca. 90% unserer Kunden-TYPO3-Seiten, die News einsetzen, nutzen unser Card-Template für News. Hier ergeben sich die Card-Inhalte aus den News-Datensätzen:
# Titel = News-Titel
# Teaser = News-Teaser
# Bild = News-Bild (auch hier können die Image-Processing Tools genutzt werden.

Auch für diesen Einsatz haben wir zahlreichen Varianten verfügbar gemacht und es stehen bis zu acht verschiedene News-Felder für die Ausgabe zur Verfügung.

Cards als CE

Um Cards als Individuelles Content Element (CE oder FCE) nutzen zu können, haben wir für unsere Kunden eigene Inhaltselement erstellt. So haben wir Cards via TYPO3-Core-Technologie verfügbar gemacht. User können einfache Kacheln im Backend selbst erstellen.