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.
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.
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.
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.
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:
- Feld: Abstand nach oben
- Feld: Abstand nach rechts
- Feld: Abstand nach unten
- 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.
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.