toujou
+49 911 23980-870

Four Image Cards, 1:1

Vier Imagecards (1:1), jeweils mit einem Link

Item-ID: 04-008

 Beispielansicht   Anleitung   Verhalten


Beispielansicht


Anleitung

Imagecards anlegen

  • Klicken Sie auf den Button Inhaltum eine Imagecard zu erstellen.
  • Im Reiter Card Elements wählen Sie Four image cards, 16:9.

Bilder einfügen

  • Klicken Sie auf den Button Bild hinzufügen.
  • Wählen Sie eine Bilddatei aus Ihrer Fileliste aus oder laden Sie eine Datei in den entsprechenden Ordner hoch.

Links einfügen

  • Geben Sie einen Titel in die Titelmaske ein.
  • Klicken Sie auf den Link-Button um eine Verlinkung einzufügen.
  • Wählen Sie aus einem der verfügbaren Reiter, um innerhalb der Unterseiten, Elemente oder auf eine externe URL zu verlinken.

Element Design für mehr Individualität

In diesem Element können Sie zudem das Erscheinungsbild ganz leicht mit dem Element Design mit einem Klick ändern. Mit der Auswahl von Standard Design, Primary Design, Secondary Design oder Umgekehrtes Design wechseln Sie Hintergrundfarbe des Elements und ggfs. die Hintergrundfarbe der Headline oder Pfeile bzw. des Textbereichs entsprechend der in den Theme-Settings definierten Farbe.

  

  • Mit Klick auf das Element Design im Reiter Allgemein / General erhalten Sie im Dropdown-Menü die Wahl für eine individuelle Designfarbe.
  • Wählen Sie aus den Optionen Standard, Primary, Secondary sowie Umgekehrt die gewünschte Option aus.
  • Speichern Sie die Änderungen im Element, damit sie sichtbar werden.

Verhalten

Vier Karten mit Bild, 1:1 sind vier nebeneinander stehende Schaltflächen. Mit unterschiedlichen Optionen für Hover-Effekte (ggf. Template-abhängig) bestehen Sie aus einem quadratischen Bild und einer Beschriftung. Der dazugehörige Link macht das gesamte Element jeweils zu einer Schaltfläche. 

Responsive: Auf kleiner werdenden Endgeräten werden die Karten in zwei Zeilen dargestellt. Auf kleinen Darstellungsflächen werden alle Schaltflächen untereinander angezeigt.


Verknüpfte Themen

Erläuterungen aus dem toujou- & TYPO3-Setup, die mit dieser Elementanleitung in Verbindung stehen.

Bildbearbeitung  Dateiliste