Inhaltselement: Akkordeon

Dieses Inhaltselement erstellt den beliebten Akkordeon-Effekt auf der Webseite.

Sie können auf der Seite beliebig viele Akkordeon-Inhaltselemente nacheinander anlegen. Der Effekt wirkt sich dann standardmäßig auf alle Akkordeon-Inhaltselemente aus, sodass davon immer nur eines auf einmal seinen Inhalt darstellt, während die Inhalte der anderen Akkordeon versteckt werden und nur ihre Überschriften sichtbar sind.

Wenn der Besucher auf eine Überschrift klickt, dehnt sich der Platz unter dieser Überschrift aus und der Inhalt wird angezeigt (»der Inhalt fährt unter der Überschrift heraus«), während alle anderen Akkordeon-Inhalte wieder versteckt werden.

Beispiel für vom Webdesigner grafisch gestylte Akkordeon-Inhaltselemente

Achtung

Der Akkordeon-Effekt hat den entscheidenden Vorteil, dass man damit platzsparend Inhalte aufbereiten kann. Gleichzeitig erkennen aber unerfahrene Besucher nicht intuitiv, wie sie ein Akkordeon auf der Webseite nutzen können. Deshalb ist es wichtig, dass der Webdesigner das Akkordeon besonders grafisch aufwertet, damit Besucher verstehen, dass sie auf die Akkordeon-Überschriften klicken müssen, um die weiteren Inhalte zu sehen.

Sie sollten den Akkordeon-Effekt deshalb in Maßen und nur nach Abstimmung mit Ihrem Administrator bzw. Webdesigner einsetzen. Ein Akkordeon mit nur einem Akkordeon- Inhaltselement macht keinen Sinn. Sie sollten es daher nur nutzen, wenn Sie mehrere Akkordeon-Inhaltselemente erstellen.

Betriebsart

Sie können das Akkordeon in zwei Varianten einsetzen.

Akkordeon-Variante a: Einzelnes Element

Als Einzelnes Element wird der Akkordeon-Effekt auf ein Textfeld mit dem Rich Text Editor und der Möglichkeit ein Bild einzubinden angewendet.

Klicken Sie bei Betriebsart in das runde Feld vor Einzelnes Element.

Akkordeon-Variante b: Umschlag Anfang und Umschlag Ende

In der zweiten Variante können Sie mit Umschlag Anfang und Umschlag Ende beliebig viele andere Inhaltselemente umschließen und mit dem Akkordeon-Effekt versehen.

Klicken Sie bei Betriebsart in das runde Feld vor Umschlag Anfang. Füllen Sie dann alle weiteren gewünschten Felder aus und erstellen Sie nach dem Speichern ein neues Akkordeon-Inhaltselement. Bei diesem Element wählen Sie als Betriebsart das Feld Umschlag Ende.

Nun können Sie zwischen diesen beiden Inhaltselementen Umschlag Anfang und Umschlag Ende beliebige weitere Inhaltselemente anlegen, die dadurch Bestandteil dieses Akkordeon-Abschnitts werden.

Bereichsüberschrift

Geben Sie hier die Bereichsüberschrift des Akkordeon-Abschnitts ein. Das dient als eindeutige Kennzeichnung der einzelnen Akkordeon-Abschnitte. Wenn der Besucher der Webseite auf die Bereichsüberschrift klickt, wird der Inhalt dieses Abschnitts angezeigt.

Hinweis

Auch wenn das Feld Bereichsüberschrift heißt, wird es technisch nicht automatisch mit dem entsprechenden HTML-Element ausgezeichnet. Diesen Missstand können Sie in Absprache mit Ihrem Webdesigner ändern, indem Sie die Bereichsüberschrift mit dem passenden HTML-Überschriftenelement anlegen.

Statt Bereich XYZ schreiben Sie dann einfach z. B. <h3>Bereich XYZ</h3> in das Feld für die Bereichsüberschrift. So können auch blinde Nutzer die einzelnen Akkordeon-Abschnitte direkt anvisieren, da sie als echte Überschriften gekennzeichnet wurden.

CSS-Format

Hier können Sie direkt CSS-Formatierungen für die Akkordeon-Bereichsüberschrift eingeben.

Hinweis

Dieses Feld sollten Sie ausschließlich nach Absprache mit Ihrem Webdesigner nutzen!

Klassennamen

Wenn Sie auf einer Seite zwei Akkordeon-Sammlungen betreiben wollen, die voneinander unabhängig agieren, können Sie für die zweite Akkordeon-Sammlung von der Norm abweichende Klassen vergeben.

Das erste Eingabefeld überschreibt die Standardklasse toggler für die Bereichsüberschrift. Das zweite Eingabefeld überschreibt die Standardklasse accordion für den Inhalt des Akkordeon-Abschnitts.

Achtung

Nutzen Sie diese Funktion nur in Absprache mit Ihrem Administrator, da er für die neuen Klassen das normale mootools-Script für Akkordeons entsprechend erweitern muss!

Text

(nur Akkordeon-Variante Einzelnes Element)

Die Bedienung des Rich Text Editors wird in Kapitel, Der Rich Text Editor (TinyMCE), ausführlich beschrieben.

Rich Text Editor

Ein Bild hinzufügen

(nur bei Akkordeon-Variante Einzelnes Element)

Mit dieser Funktion können Sie die Bildfunktion von Contao nutzen und damit ein Bild zum Text dazu fügen, das vom Text links oder rechts umflossen bzw. darüber oder darunter platziert wird.

Wenn Sie den Haken bei Ein Bild hinzufügen setzen, werden darunter die weiteren Bildfunktionen eingeblendet.

Quelldatei

(nur bei Akkordeon-Variante Einzelnes Element)

Pflichtfeld, wenn der Haken bei Ein Bild hinzufügen gesetzt ist.

Hier legen Sie fest, welches Bild hinzugefügt werden soll.

Falls das Bild noch nicht im Dateisystem der Webseite hinterlegt ist, können Sie auf das Symbol Dateimanager in einem Popup-Fenster öffnen rechts neben der Abschnittsüberschrift Quelldatei klicken. So können Sie die Dateiverwaltung für das Hochladen des Bildes nutzen, ohne dabei den Eingabemodus des Inhaltselements zu verlassen. Die Benutzung der Dateiverwaltung wird in Kapitel, Die Dateiverwaltung, beschrieben.

Wenn das Bild hingegen schon im Dateisystem der Webseite verfügbar ist, müssen Sie einen Haken bei Auswahl ändern setzen. Dadurch öffnet sich die Dateiansicht.

Zum Text ein Bild hinzufügen

Hinweis

Der für Sie sichtbare Inhalt des Dateisystems hängt von den Einstellungen ab, die der Administrator für Ihre Benutzergruppe eingestellt hat. Es kann daher sein, dass Sie nur ein paar Dateien sehen, oder aber viele Ordner, Unterordner und darin abgelegte Dateien.

Klicken Sie im Dateisystem auf die Symbole Bereich öffnen / Bereich schliessen vor den Ordnernamen. Dadurch klappt der Ordner auf und Sie können den darin hinterlegten Inhalt (weitere Ordner oder Dateien) sehen.

Wählen Sie das gewünschte Bild aus, indem Sie in das runde Feld rechts neben dem Dateinamen klicken.

Bild im Dateisystem auswählen

Alternativer Text

(nur bei Akkordeon-Variante Einzelnes Element)

Sie sollten für Bilder möglichst immer einen Alternativtext, sprich eine Kurzbeschreibung des Bildinhaltes angeben. Das wirkt sich einerseits positiv für blinde Nutzer aus.

Andererseits dient es auch für Suchmaschinen als Informationsquelle, da diese genauso wie blinde Besucher sonst nicht erkennen können, was auf dem Bild zu sehen ist.

Bildbreite und Bildhöhe

(nur bei Akkordeon-Variante Einzelnes Element)

Wenn Sie in diese Felder nichts eintragen, zeigt Contao das Bild in seiner Originalgröße an. Falls Sie Angaben für die Bildbreite und/oder Bildhöhe machen, zeigt Contao das Bild auf der Webseite mit den entsprechenden Maßen an. Das Originalbild bleibt dabei unverändert im Dateisystem erhalten, sodass Sie es ohne Probleme mehrfach in der Webseite mit unterschiedlichen Maßen einbinden können.

Achtung

Sie sollten Bilder über diese Funktion niemals vergrößern, sondern nur verkleinern! Wenn Sie Bilder technisch künstlich vergrößern, ergibt das abhängig vom Grad der Vergrößerung meist ein sehr unsauberes Ergebnis.

Geben Sie in das erste Feld die Bildbreite und in das zweite Feld die Bildhöhe (in Pixel) ein. Daneben können Sie im Ausklappfenster wählen, nach welchem Prinzip das Bild skaliert werden soll. Standard ist hierbei die Einstellung Exaktes Format.

Hinweis

Wenn Sie nur einen Wert angeben (Bildhöhe oder Bildbreite), ist es irrelevant, welchen Skalierungstyp Sie wählen. Contao greift dann automatisch auf die proportionale Skalierung zurück.

Vermeiden Sie Formatwechsel! Wenn das Originalbild z. B. ein horizontales Format hat, sollten Sie es möglichst nicht auf ein vertikales Format skalieren.

Exaktes Format

Die kürzere Seite des Bildes wird auf das vorgegebene Maß skaliert, während die längere Seite exakt beim angegebenen Maß abgeschnitten wird. Die Skalierung geht von der Mitte des Bildes aus.

Das Bild entspricht exakt dem Zielmaß.

Achtung

Das Ergebnis kann beim exakten Format problematisch sein, falls sich wichtige Bildbestandteile auf dem abgeschnittenen Bereich befinden.

Proportional

Wenn die Originalbreite größer als oder gleich groß wie die Originalhöhe ist, dann passt Contao die Originalbreite exakt auf die neue Zielbreite an und skaliert die Originalhöhe proportional dazu.

Falls die Originalbreite kleiner als die Originalhöhe ist, passt Contao hingegen die Originalhöhe exakt auf die neue Zielhöhe an, während die Originalbreite proportional dazu skaliert wird.

Achtung

Das Bild kann das vorgegebene Maß auf der kürzeren Seite unter- oder überschreiten.

An Rahmen anpassen

Hierbei rechnet Contao mit der Formel (Originalhöhe * Zielbreite / Originalbreite). Wenn die Zielhöhe kleiner oder gleich dem Ergebnis der Formel ist, dann passt Contao die Originalbreite exakt auf die neue Zielbreite an, während die Originalhöhe proportional dazu skaliert.

Falls die Zielhöhe hingegen größer ist als das Ergebnis der Formel, passt Contao die Originalhöhe exakt auf die neue Zielhöhe an, während die Originalbreite proportional dazu skaliert.

Achtung

Das Bild überschreitet das vorgegebene Maß auf keinen Fall, kann aber kleiner sein.

Bildabstand

(nur bei Akkordeon-Variante Einzelnes Element)

Hier können Sie den Abstand des Bildes zu den umgebenden Elementen bestimmen. Befüllen Sie die ersten vier Felder bei Bedarf mit einem Abstandswert:

  1. Feld: Abstand nach oben
  2. Feld: Abstand nach rechts
  3. Feld: Abstand nach unten
  4. Feld: Abstand nach links

Mit der Auswahl einer Option im nachfolgenden Ausklappfenster legen Sie die verwendete Maßeinheit fest. Die üblichsten Einheiten sind px (Pixel), % (Prozent) und em.

Hinweis

Geben Sie Abstände möglichst nur nach Absprache mit Ihrem Webdesigner ein, da derartige Anweisungen im Idealfall global vom Webdesigner definiert werden. Dadurch ist sichergestellt, dass die Abstände auf der ganzen Webseite identisch sind und sich ein gleichmäßiges Formatierungsbild ergibt.

Bildlink-Adresse

(nur bei Akkordeon-Variante Einzelnes Element)

Sie können das Bild hier mit einem Link versehen, sodass der Besucher auf die Zielseite weitergeleitet wird, wenn er auf das Bild klickt. Wenn Sie diese Funktion nutzen, ist der Einsatz der Grossansicht (Lightbox-Effekt) nicht mehr möglich.

Zu einer internen Seite verlinken

Klicken Sie rechts neben dem Eingabefeld auf das Seitenwähler-Symbol. Es öffnet sich ein kleines Browser-Fenster, in dem Sie aus dem Ausklappfenster die gewünschte Seite auswählen können. Bestätigen Sie die ausgewählte Seite mit einem Mausklick oder der Enter-Taste. Contao schreibt nun in das Eingabefeld eine kryptische Angabe wie z. B. {{link_url::14}}. Dabei handelt es sich um ein sogenanntes Insert-Tag, also einen technischen, internen Aufruf der Seite im CMS. Mehr Informationen zu Insert-Tags erhalten Sie im Abschnitt Insert-Tags – Platzhalter für Inhalte.

Bild-Link zu einer internen Seite

Zu einer externen Seite verlinken

Schreiben Sie in das Eingabefeld die Adresse der externen Webseite.

Achtung

Geben Sie den Link zur externen Webseite unbedingt mit http:// am Anfang ein!

Falsch: www.contao.org
Korrekt: http://www.contao.org

Großansicht/Neues Fenster

(nur bei Akkordeon-Variante Einzelnes Element)

Setzen Sie hier den Haken, wenn Sie für das Bild die Grossansicht (Lightbox-Effekt) aktivieren wollen. Wenn der Besucher dann auf das Bild klickt, öffnet sich das Bild in einem kleinen Extrafenster in Originalgröße.

Achtung

Dieser Effekt funktioniert nur, wenn das Feld der Bildlink-Adresse leer ist. Außerdem muss Ihr Administrator für die Webseite im Seitenlayout die Mediabox oder Slimbox aktiviert haben.

Bildunterschrift

(nur bei Akkordeon-Variante Einzelnes Element)

Sie können dem Bild hier eine kurze Bildunterschrift zuweisen.

Bildausrichtung

(nur bei Akkordeon-Variante Einzelnes Element)

Legen Sie hier fest, wie das Bild im Verhältnis zum Text ausgerichtet ist. Solange Sie nichts auswählen, wird es oberhalb des Textes ausgegeben.

  • Oberhalb: Bild wird über dem Text platziert und es findet kein Textumfluss statt
  • Linksbündig: Bild wird links platziert und rechts vom Text umflossen
  • Rechtsbündig: Bild wird rechts platziert und links vom Text umflossen
  • Unterhalb: Bild wird unter dem Text platziert und es findet kein Textumfluss statt

Element schützen

Setzen Sie hier den Haken, wenn Sie möchten, dass dieses Inhaltselement nur für angemeldete Mitglieder auf der Webseite (Frontend) sichtbar ist. Für unangemeldete Besucher wird es nicht angezeigt.

Erlaubte Mitgliedergruppen

Pflichtfeld, wenn Element schützen ausgewählt ist.

Sobald Sie den Haken bei Element schützen gesetzt haben, werden darunter die vorhandenen Mitgliedergruppen eingeblendet. Klicken Sie in die Felder der Mitgliedergruppen, die das Inhaltselement sehen sollen, wenn sie auf der Webseite angemeldet sind.

Nur Gästen anzeigen

Diese Funktion bewirkt genau das Gegenteil von Element schützen. Das Inhaltselement ist für normale Besucher der Webseite sichtbar und wird ausgeblendet, sobald sich der Besucher als Mitglied anmeldet.

Hinweis

Wenn Sie irrtümlich die Funktionen Element schützen und Nur Gästen anzeigen gleichzeitig ausgewählt haben, setzt sich die Schutzfunktion durch.

CSS-ID/Klasse

(nicht für Akkordeon-Variante Umschlag Ende)

Hier können Sie dem Inhaltselement eine neue CSS-ID (ins erste Feld) und -Klassen (ins zweite Feld) zuweisen. Die notwendigen Angaben hierfür erhalten Sie normalerweise von Ihrem Webdesigner oder Administrator.

Abstand davor und dahinter

(nicht für Akkordeon-Variante Umschlag Ende)

Im ersten Feld können Sie den Abstand vor und im zweiten Feld den Abstand nach dem Inhaltselement in Pixel festlegen.

Hinweis

Geben Sie Abstände möglichst nur nach Absprache mit Ihrem Webdesigner ein, da derartige Anweisungen im Idealfall global vom Webdesigner definiert werden. Dadurch ist sichergestellt, dass die Abstände auf der ganzen Webseite identisch sind und sich ein gleichmäßiges Formatierungsbild ergibt.