Card-Style ygrid: Pic left + Title + Descr + Button

20190929-DSC06363-Bearbeitet

Titel Seite 1

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Pellentesque habitant morbi

20190929-DSC06364-Bearbeitet

Titel Seite 2

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Pellentesque hab

20190929-DSC06370-Bearbeitet

Titel Seite 3

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.

20190929-DSC06372-Bearbeitet

Titel Seite 4

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.

20190929-DSC06373-Bearbeitet

Titel Seite 5 long long long long title

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Pellentesque habitan



Pic - colored boxes from page-css - title - description


Isotope Cards Limit Sizes

20190929-DSC06363-Bearbeitet

Titel Seite 1

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…

20190929-DSC06364-Bearbeitet

Titel Seite 2

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…

20190929-DSC06370-Bearbeitet

Titel Seite 3

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…

20190929-DSC06372-Bearbeitet

Titel Seite 4

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…

20190929-DSC06373-Bearbeitet

Titel Seite 5 long long long long title

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…


Card-Style D1: Shadow & Grow

20070717-DSC 1142

Titel Seite 1

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…

20070719-DSC 1605

Titel Seite 2

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…

20150912-DSC00199 w

Titel Seite 3

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…

20150926-DSC00325

Titel Seite 4

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…

20150926-DSC00334

Titel Seite 5 long long long long…

Teaser from: Description - Ut non enim eleifend felisInteger ante arcu, accumsan…


Icons in Cards with full over



background-pic - cards with up to four fields inside pic


Simple big shadow

20070717-DSC 1142

Titel Seite 1

20070719-DSC 1605

Titel Seite 2

20150912-DSC00199 w

Titel Seite 3

20150926-DSC00325

Titel Seite 4

20150926-DSC00334

Titel Seite 5 long long long long…

20160107-DSC02261

Titel Seite 6

20160107-DSC02273

Titel Seite 7

20070717-DSC 1142

Titel Seite 8

20070719-DSC 1605

Titel Seite 9

20150912-DSC00199 w

Titel Seite 10

20150926-DSC00325

Titel Seite 11

20150926-DSC00334

Titel Seite 12

20160107-DSC02261

Titel Seite 13

20160107-DSC02273

Titel Seite 14


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

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.  

 

05482 925480