Sehr geehrte Kunden,
ab heute ist es möglich Grafiken in verschiedenen Arten zeitgesteuert auf einer Responsive-Startseite anzuzeigen.
Um dieses Feature zu nutzen kann man unter Layout > Startseite > Zeitgesteuerte Grafiken neue Einträge und Gruppen anlegen.
Eine Gruppe kann mehrere Einträge enthalten, die sich automatisch abwechseln.
In diesem Beispiel werden die hier abgebildeten 6 Grafiken durch dynamische ersetzt.
Unter Layout > Startseite > Zeitgesteuerte Grafiken > Dynamische Grafiken Gruppen legt man dazu unter Gruppen eine neue Gruppe an:
In diesem Fall heißt die neue Gruppe "Startseite - 6er". Hier sollten möglichst eindeutige Gruppennamen verwendet werden, damit man später auch noch weiß worum es geht.
Über den Button "Übersicht Dynamische Grafiken" kommt man zurück zur Übersicht der dynamischen Grafiken, dort legen wir auch direkt über den Button "NEU" einen Eintrag an.
In der neuen Maske hat man die Möglichkeit zu wählen, wie viele Grafiken auf welche Art angezeigt werden sollen:
Zur Erklärung: in die erste Zahl vor dem x gibt an, wie viele Grafiken in einer Reihe angezeigt werden sollen. Die Zahl nach dem x zeigt an wie viele Reihen untereinander es gibt.
Um die oben genannten Grafiken zu ersetzen braucht man also drei Grafiken in zwei Reihen (3x2).
Nun kann man in den neu erschienen Feld Links, Grafiken, Alt-Attribute und Texte eintragen.
Darunter wird der, nur intern wichtige, Name des Eintrags angeben und die Gruppe sowie der Zeitraum für die Grafiken angeben.
Über die Lupe in der Gesamtübersicht, in die man mit dem Button "zurück", zurückgekehrt ist gibt es hinter dem Eintrag einen Button mit einer Lupe.
Ein Klick darauf öffnet eine Vorschau, samt der Synonyme, die man braucht um die Grafiken oder die Grafik-Gruppe anzuzeigen:
Damit alles so aussieht, wie hier in der Vorschau muss man noch etwas CSS einfügen (Layout > Schriften / CSS > All (Root)), dieses ist am Ende des Beitrags zu finden.
Um die Grafiken auf der Startseite anzuzeigen muss man unter Layout > Startseite > Templates den Code der aktuell verwendeten Grafiken mit dem neuen synonym ersetzen:
Aus:
Wird dann:
Sollten Probleme oder Schwierigkeiten auftauchen, helfen wir natürlich gern bei der Einrichtung weiter.
CSS:
.dyn_graf{display:flex;flex-wrap:wrap;margin:0;padding:0;}
.dyn_graf li{box-sizing:border-box;list-style:none;padding:0;position:relative;margin-right: 1%;margin-bottom:1%;}
.dyn_graf[class*="_4x"] li[class$="-4"], .dyn_graf[class*="_3x"] li[class$="-3"], .dyn_graf[class*="_2x"] li[class$="-2"], .dyn_graf[class*="_1x"] li[class$="-1"] {margin-right:0;}
.dyn_graf li a{display:block;width:100%;height:100%;transition: all .3s}
.dyn_graf li:hover a{opacity:.7}
.dyn_graf li a img{width:100%}
.dyn_graf[class*="_4x"] li{width:24.25%}
.dyn_graf[class*="_3x"] li{width:32.3333333%}
.dyn_graf[class*="_2x"] li{width:49.5%}
.dyn_graf[class*="_1x"] li{width:100%}
.dyn_graf li span{font-size: 1.6rem;display: block;color: rgb(255,255,255);background: rgba(0,0,0,0.5);width: 100%;padding: 20px;box-sizing: border-box;bottom: 0;position: absolute;}
@media(max-width:760px){
#shopMitte .dyn_graf[class*="_3x"] li{margin-right:1%}
.dyn_graf[class*="_4x"] li[class$="-2"],#shopMitte .dyn_graf[class*="_3x"] li:nth-child(even)
, .dyn_graf[class*="_2x"] li[class$="-1"] {margin-right:0;}
.dyn_graf[class*="_2x"] li{width:100%}
.dyn_graf[class*="_4x"] li{width:49.5%}
.dyn_graf[class*="_3x"] li{width:49.5%}
}
ab heute ist es möglich Grafiken in verschiedenen Arten zeitgesteuert auf einer Responsive-Startseite anzuzeigen.
Um dieses Feature zu nutzen kann man unter Layout > Startseite > Zeitgesteuerte Grafiken neue Einträge und Gruppen anlegen.
Eine Gruppe kann mehrere Einträge enthalten, die sich automatisch abwechseln.
In diesem Beispiel werden die hier abgebildeten 6 Grafiken durch dynamische ersetzt.
Unter Layout > Startseite > Zeitgesteuerte Grafiken > Dynamische Grafiken Gruppen legt man dazu unter Gruppen eine neue Gruppe an:
In diesem Fall heißt die neue Gruppe "Startseite - 6er". Hier sollten möglichst eindeutige Gruppennamen verwendet werden, damit man später auch noch weiß worum es geht.
Über den Button "Übersicht Dynamische Grafiken" kommt man zurück zur Übersicht der dynamischen Grafiken, dort legen wir auch direkt über den Button "NEU" einen Eintrag an.
In der neuen Maske hat man die Möglichkeit zu wählen, wie viele Grafiken auf welche Art angezeigt werden sollen:
Zur Erklärung: in die erste Zahl vor dem x gibt an, wie viele Grafiken in einer Reihe angezeigt werden sollen. Die Zahl nach dem x zeigt an wie viele Reihen untereinander es gibt.
Um die oben genannten Grafiken zu ersetzen braucht man also drei Grafiken in zwei Reihen (3x2).
Nun kann man in den neu erschienen Feld Links, Grafiken, Alt-Attribute und Texte eintragen.
Darunter wird der, nur intern wichtige, Name des Eintrags angeben und die Gruppe sowie der Zeitraum für die Grafiken angeben.
Über die Lupe in der Gesamtübersicht, in die man mit dem Button "zurück", zurückgekehrt ist gibt es hinter dem Eintrag einen Button mit einer Lupe.
Ein Klick darauf öffnet eine Vorschau, samt der Synonyme, die man braucht um die Grafiken oder die Grafik-Gruppe anzuzeigen:
Damit alles so aussieht, wie hier in der Vorschau muss man noch etwas CSS einfügen (Layout > Schriften / CSS > All (Root)), dieses ist am Ende des Beitrags zu finden.
Um die Grafiken auf der Startseite anzuzeigen muss man unter Layout > Startseite > Templates den Code der aktuell verwendeten Grafiken mit dem neuen synonym ersetzen:
Aus:
Wird dann:
Sollten Probleme oder Schwierigkeiten auftauchen, helfen wir natürlich gern bei der Einrichtung weiter.
CSS:
.dyn_graf{display:flex;flex-wrap:wrap;margin:0;padding:0;}
.dyn_graf li{box-sizing:border-box;list-style:none;padding:0;position:relative;margin-right: 1%;margin-bottom:1%;}
.dyn_graf[class*="_4x"] li[class$="-4"], .dyn_graf[class*="_3x"] li[class$="-3"], .dyn_graf[class*="_2x"] li[class$="-2"], .dyn_graf[class*="_1x"] li[class$="-1"] {margin-right:0;}
.dyn_graf li a{display:block;width:100%;height:100%;transition: all .3s}
.dyn_graf li:hover a{opacity:.7}
.dyn_graf li a img{width:100%}
.dyn_graf[class*="_4x"] li{width:24.25%}
.dyn_graf[class*="_3x"] li{width:32.3333333%}
.dyn_graf[class*="_2x"] li{width:49.5%}
.dyn_graf[class*="_1x"] li{width:100%}
.dyn_graf li span{font-size: 1.6rem;display: block;color: rgb(255,255,255);background: rgba(0,0,0,0.5);width: 100%;padding: 20px;box-sizing: border-box;bottom: 0;position: absolute;}
@media(max-width:760px){
#shopMitte .dyn_graf[class*="_3x"] li{margin-right:1%}
.dyn_graf[class*="_4x"] li[class$="-2"],#shopMitte .dyn_graf[class*="_3x"] li:nth-child(even)
, .dyn_graf[class*="_2x"] li[class$="-1"] {margin-right:0;}
.dyn_graf[class*="_2x"] li{width:100%}
.dyn_graf[class*="_4x"] li{width:49.5%}
.dyn_graf[class*="_3x"] li{width:49.5%}
}