Slider

Beim Austesten der neuen Funktion "Auf Breite ausdehnen" und dem Erstellen unserer Musterseite dazu sind uns viele Ideen gekommen. So haben wir überlegt, ob wir die Slideshow umbauen sollen, damit diese dann auf der vollen Bildschirmbreite angezeigt wird. Aktuell ist die Breite auf 1.500 px begrenzt. Wir haben uns dagegen entschlossen und stattdessen einen neuen Content entwickelt, der Slider heißt. Dieser Slider bietet erstmals Möglichkeiten, die wir in die Galerie nicht hätten einbauen können.

 

Ausführliche Beispiele und Erklärungen auf unserer Beispiel-Webseite zu diesem Thema.

 

Dazu einige Informationen.

Erstmals verwenden wir für dieses Inhaltselement einen neuen Fullscreen-Dialog, der ähnlich wie die Dialoge beim Blog gestaltet ist. Der Slider ist ein ganz normales Element des Contents und kann daher überall eingebaut werden, auch mehrmals. Und er besitzt ebenfalls die neue Funktion "Auf Breite ausdehnen".

Einstellungen für die Folie

1) Auf der linken Seite werden alle Folien aufgelistet und du kannst dort auch die Funktion "Neue Folie anlegen" aufrufen. Die Reihenfolge der Folien kannst du verändern, indem du einen Listeneintrag mit gedrückter Maustaste per drag&drop verschiebst.

2) Ganz oben legst du fest, wie der Text auf der Folie angeordnet werden soll. Die Elemente zueinander sind immer mittig und du kannst den ganzen "Block" entweder links, mittig oder rechts auf dem Hintergrund anordnen. In der Mobilansicht werden die Elemente immer mittig angezeigt.

3) Du kannst ein Hintergrundbild einbinden oder eine Hintergrundfarbe vergeben. Das Bild wird immer gecovert. Das bedeutet, es wird immer die verfügbare Fläche ausgenutzt und dass Bild in dieser Fläche mittig zentriert dargestellt.

4) Hier kannst du de Text für eine Überschrift eintragen. Bleibt das Feld leer, wird keine Überschrift angezeigt und auch kein Platz dafür verbraucht.

5) Hier kannst du einen Ergänzungstext eintragen. Auch hier gilt, ein leeres Feld bedeutet, es wird nichts angezeigt.

6 + 7) Auf jeder Folie kannst du auf Wunsch einen Button anlegen und diesen mit einem Text und einem Link versehen.  Ein Button ohne Text wird nicht angezeigt. Ein Button ohne Link schon.

Allgemeine Einstellungen für den Slider

1) Ein Klick auf diesen Link erzeugt eine neue Folie. Es können bis zu 20 Folien angelegt werden

2) Hier werden alle Folien aufgelistet. Hat die Folie eine Überschrift, wird diese hier angezeigt, ansonsten wird der Bildname gezeigt.

3) Mit diesem Button kommst du zu den allgemeinen Einstellungen, also zu diesem Dialog

4) Du stellst nur die Höhe des Sliders ein. Die Breite ist immer 100%.

5) Ein Slider kann automatisch die Folien anzeigen in drei Geschwindigkeiten. Auch mit Automatik kann der Besucher mit Hilfe der Navigationspunkte einzelne Folien aufrufen. Wenn die Automatik ausgeschaltet ist, werden die unsichtbaren Folien erst gezeigt, wenn der Besucher auf die Navigationspunkte klickt.

6) Für die Überschrift kann eine Schriftfamilie, eine Schriftgröße und eine Schriftfarbe eingestellt werden. Außerdem kann der Hintergrund mit einer Farbe belegt sein. Der Papierkorb löscht diese Farbe und macht den Hintergrund transparent.

7) Für den Ergänzungstext kann ebenfalls eine Schriftfamilie, eine Schriftgröße und eine Schriftfarbe eingestellt werden. Außerdem kann der Hintergrund mit einer Farbe belegt sein. Der Papierkorb löscht diese Farbe und macht den Hintergrund transparent.

8) Für den Button kann auch eine Schriftfamilie, eine Schriftgröße und eine Schriftfarbe eingestellt werden.

Zusätzlich kannst du eine Schriftfarbe und auch eine Hintergrundfarbe jeweils für den normalen Zustand und den Hovereffekt (also wenn du mit der Maus über den Button fährst) einstellen.

Der Papierkorb erfüllt hier folgende Funktionen. Löscht du die Schriftfarbe für den Hover-Effekt dann wird der Hover-Effekt für die Schrift deaktiviert.  Löscht du die Hintergrundfarbe, dann wird der Hintergrund transparent.

Zusätzliche Erklärung und Zusammenfassung

Die Besonderheit besteht darin, dass du für den Slider nicht einfach Bilder verwendest wie bei einer Galerie, sondern Folien. Du kannst bis zu 20 Folien anlegen, die dann links in einer Liste angezeigt werden. Die Folien selbst kannst du in dieser Liste per drag & drop verschieben, um ihre Reihenfolge zu ändern. Klickst du auf einen Listeneintrag, dann wird rechts der Inhalt der Folie angezeigt bzw. die Optionen, um Inhalte zu einer Folie hinzuzufügen.

 

Eine Folie besteht jeweils aus einem Hintergrundbild und / oder einer Hintergrundfarbe. Das Bild selbst wird immer gecovert, das bedeutet: stets so angezeigt, dass die gesamte Fläche, die der Slider einnimmt, ausgefüllt wird. Die Hintergrundfarbe siehst du daher nur, wenn das Bild teilweise durchsichtig (transparent) ist. Du kannst aber auch eine Folie ohne Bild und nur mit Hintergrundfarbe anlegen. Bei einer Galerie macht das wenig Sinn, bei einem Slider schon.

 

Denn neben dem Bild besteht eine Folie aus weiteren Elementen.

Aus Texten. Und zwar aus …

a) … einer Überschrift

Diese wird immer über dem nachfolgenden Text platziert, also ganz oben als Erstes. Die Überschrift kann aus einer oder auch mehreren Zeilen bestehen.

b) … einem Erklärungstext dazu.

Dieser Text steht unter der Überschrift und kann ebenfalls eine oder mehrere Zeilen umfassen.

 

Zusätzlich kann jede Folie

c) einen Button enthalten. Der Button bietet folgende Optionen:

1) Er kann einen Text aufweisen.
2) Du kannst den Button mit einem Ziel verlinken.

 

Alle diese drei Elemente sind untereinander angeordnet und mittig zueinander platziert. Der gesamte Block dieser Elemente steht also immer zentral auf dem Bild, was die Höhe betrifft, und kann insgesamt als Block in der Horizontalen entweder links, mittig oder rechts auf dem Bild platziert werden.

 

Füllst du bestimmte Elemente nicht aus, werden diese auch nicht angezeigt.

 

Da die Folie zum einem aus einem Hintergrund besteht und zum anderen aus Informationen, die auf diesem Hintergrund angezeigt werden, kann es durchaus Sinn machen, anstelle eines Bildes einfach eine farbige Fläche als Hintergrund zu verwenden.

 

Damit man leicht zu einem Ergebnis kommt, der Arbeitsaufwand überschaubar bleibt und vor allem das Ergebnis einheitlich wirkt, werden alle Einstellung zu den Folien gemeinsam vorgenommen: Abgesehen davon, dass jede Folie einen eigenen Hintergrund und eigene Texte sowie Beschriftungen besitzt, und natürlich jeder Button auf einer Folie einen eigenen Link, wird das gesamte Aussehen aller Folien zentral festgelegt.

 

Du verfügst dabei über folgende Optionen:

  1. Du kannst eine Höhe für den Slider festlegen. Die Breite ergibt sich immer daraus, wo der Slider eingebaut wird und ob die Option "Auf Breite ausdehnen" aktiviert ist. (In der mobilen Ansicht ignorieren wir diese feste Höhe und passen sie der Umgebung an.)
  2. Du kannst eine Geschwindigkeit festlegen, mit der die einzelnen Folien eingeblendet bzw. angezeigt werden. Es gibt drei Geschwindigkeiten oder „Aus“. Schaltest du auf „Aus“, dann wechseln die Folien nicht automatisch, sondern der Besucher muss auf die Punkte klicken, die die einzelnen Folien symbolisieren und die unten angezeigt werden. Die Punkte blenden sich automatisch ein, sobald man mit der Maus über den Slider fährt.
  3. Du kannst für die Überschrift die Schriftart, Schriftgröße und Schriftfarbe festlegen.
  4. Das Gleiche lässt sich für den Ergänzungstext einstellen.

 

Wenn die Helligkeit innerhalb der Bilder stark schwankt, die du im Hintergrund verwendest, kann es vorkommen, dass die Schrift darauf sich nicht gleichmäßig gut lesen lässt. Dann mag es hilfreich sein, wenn man die Fläche unter der Schrift einfärbt, um den Kontrast zu erhöhen. Dazu haben wir noch zwei Hintergrundfarben eingebaut: für die Überschrift und für den Ergänzungstext. Beide Texte werden immer in einen Kasten eingefügt, der eine bestimmte Breite besitzt und so hoch ist wie notwendig. Zwischen den Kästen befindet sich ein Abstand. Normalerweise siehst du diese Kästen nicht. Legst du jedoch eine Hintergrundfarbe fest, werden die Kästen sichtbar. Oft reicht es, einen schwarzen oder weißen Hintergrund zu nehmen und dann die Transparenz auf 10 % zu setzen. So wirken die Kästen dezent und helfen lediglich dabei, dass sich die Schrift besser lesen lässt. (Du kannst natürlich jede Farbe verwenden und auch bis zu 100 % Deckung, wenn dir das besser gefällt.)

 

Für den Button bieten wir dir ebenfalls einige Einstellungsmöglichkeiten.

  1. Auch hier kannst du die Schrift festlegen. Wir empfehlen dir, wenn möglich, die gleiche Schrift zu wählen wie für den Ergänzungstext und lediglich die Schriftgröße zu erhöhen sowie eine andere Farbe zu wählen, wenn das Sinn macht, denn du kannst …
  2. … darüber hinaus den Hintergrund vom Button wählen. Und zwar die Hintergrundfarbe, die normalerweise sichtbar ist, und darüber hinaus die Farbe, die bei hover erscheinen soll, also, wenn man mit der Maus über den Button fährt. Achte darauf, dass beide Farben zur jeweiligen Schriftfarbe passen. Der Button selbst ist immer eckig und die Größe wird automatisch bestimmt: je größer die Schrift, umso höher und breiter natürlich der Button.