Wissensfeed
Der Wissensfeed wird aus dem Modul DataSet Ticker erstellt. Hierbei wird ein Datensatz angelegt, um Daten für die einzelnen Karten zu speichern. Inhalte sowie Icons können dann entsprechend über diese Tabelle gepflegt und automatisiert eingebunden werden.
Nachdem du den Datensatz sowie die Daten angelegt und die Komponenten in dein Layout kopiert hast, kannst du den Datensatz innerhalb der Komponente ändern, indem du das Modul auswählst und auf Back klickst.
Dann kannst du im Auswahlfeld Datensatz deinen eigenen Datensatz auswählen und durch Speichern in die Komponente laden. Damit die Daten aus dem Datensatz geladen werden, musst du die Snippets unter "Vorlagen / Main" ändern. Snippets erkennst du an den eckigen Klammern, z.B. [Titel|1]. Durch Klick auf das Auswahlfeld "Snippets" werden dir die verfügbaren Snippets angezeigt. Wähle das passende aus und lösche das gleichnamige Snippet aus dem Text. In der Regel sollte sich dann die Zahl hinter dem Strich ändern.
Identifikator
Neu ist der Identifikator in dem Wissensfeed. Hier gibts du der einzelnen Karte einen eindeutigen Namen. WICHTIG! Dieser sollte keine Leerzeichen und Umlaute enthalten. Am besten mit Bindestrichen trennen.
Darstellung ändern
Die Komponente ist ideal auf die Darstellung von zwei Karten ausgelegt. Möchtest du allerdings stattdessen drei Karten anzeigen, kannst du durch Auswahl des Tabs Darstellung einige Werte ändern.
Hintergrundfarbe
Durch Änderung des Farbcodes kannst du die Hintergrundfarbe des Moduls anpassen. Eine Übersicht der Farbcodes findest du unter Farben.
Effekt
Hier kannst du die Animation der Karten flexibel ändern. Aufgrund der Darstellungsform solltest du allerdings in der Kategorie "Paged" bleiben, um keine Fehler hervorzurufen.
Komponente ohne Vorlage erstellen
Du kannst die Komponente auch ohne Vorlage erstellen, hierfür benötigst du aber ein fortgeschrittenes technisches Verständnis. Grundlage der Darstellung sind dabei die Einstellungen unter dem Tab Vorlagen. Kopiere dazu die folgenden Code-Zeilen in die vorgesehenen Felder.
Main - HTML-Code
Für die Darstellung der Karten sowie die Einbindung der entsprechenden Daten aus dem Datensatz kopierst du den HTML-Code in das Feld Main. Solltest du Spalten im Datensatz angepasst haben, musst du die Werte zwischen den eckigen Klammern, z.B. [Kategorie|2] austauschen. Der erste Wert ist dabei die Überschrift, der zweite Wert die Sortierungsreihenfolge der Spalte.
<style type="text/css">
#icon-[Identifikator|116]::before {
font-family: font awesome free solid solid;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
content: "\[Icon|4]";
}
</style>
<div class="card-wrapper">
<div class="card">
<div class="card-header">
<span class="card-cat">[Kategorie|2]</span>
</div>
<div class="card-body">
<h4 id="icon-[Identifikator|116]" class="card-icon"></h4>
<h4 style="font-family: Overpass, sans-serif;">[Titel|1]</h4>
<p class="card-content">[Text|3]</p>
</div>
</div>
Optionaler Stylesheet - CSS
Für die visuelle Gestaltung und Positionierung fügen wir den CSS-Code unter Optionaler Stylesheet hinzu. Hier hast du auch noch die Möglichkeit, weitere Anpassungen vorzunehmen.
.cycle-slide {
padding-top: 258px;
display: flex !important;
flex-direction: column;
height: 822px !important;
}
.cycle-slide .item {
height: 48% !important;
width: 100% !important;
margin-bottom: 1% !important;
}
.card-wrapper {
padding: 0 24px;
height: 100%;
}
.card {
font-family: overpass regular;
border-radius: 10px;
background-color: #ffffff;
margin-bottom: 10px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card .card-header {
padding: 10px;
text-align: right;
}
.card .card-cat {
display: inline-block;
background-color: #4DBBEA;
padding: 8px 16px;
border-radius: 15px;
font-size: 18px;
line-height: 18px;
font-weight: bold;
color: #ffffff;
}
.card .card-body {
padding: 40px;
}
.card .card-icon {
font-size: 42px;
margin-bottom: 24px;
}
.card h4 {
font-family: overpass black regular;
margin-bottom: 16px;
font-size: 40px;
color: #009EE0;
line-height: 1;
text-transform: uppercase;
}
.card .card-content {
font-size: 20px;
color: #1D1E20;
text-align: left;
line-height: 22px;
font-weight: bold;
}
