Contao 3 Grundkurs

Features: Ein Akkordeon

Testen Sie unsere 1984 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Akkordeons helfen bei der Strukturierung von Inhalten innerhalb eines Artikels. Legt man mehrere solche Inhaltselemente untereinander, wird im Frontend das jeweils angeklickte Element ausgebreitet, die anderen Elemente werden zusammengeklappt.
05:04

Transkript

Auf der Seite "Features" sollen Informationen in Form von Akkordeons gruppiert werden. Ich gehe auf Ebene der "Artikel" in die "Features", lege ein neues Inhaltselement an vom Typ "Akkordeon". Contao prüft nun, ob die Voraussetzungen dafür überhaupt erfüllt sind und stellt fest, das erforderliche Template, entweder MooTools oder jQuery, ist noch nicht im Seitenlayout eingebunden. Bekomme ich hier oben den Hinweis, merke ich mir, hole ich gleich nach. Überschrift: "Die Toolbar". und jetzt leihe ich mir hier etwas Text aus, wieder zurück und hinein. Neben diesem Einzelelement kann ich Akkordeons auch so konfigurieren, dass mehrere Inhaltselemente in ein Akkordeonelement gepackt werden. Dafür lege ich zunächst ein Akkordeon "Umschlag Anfang" an. Ich trage hier die Bereichsüberschrift ein, "Speichern und schließen". Jetzt kommen beliebig viele Inhaltselemente. "Inhalt 1", hier wieder Text, den dupliziere ich jetzt mal. "Inhalt 2" und um das Ganze zu umschließen, kommt jetzt noch ein Akkordeonelement vom Typ "Umschlag Ende". Das stellt sich dann im Back-End so dar, was man auch ganz gut erkennen kann. Wir haben ein Akkordeonelement als Einzelelement und ein Akkordeonelement, das wiederum zwei Inhaltselemente zusammenfasst. Wir haben eben noch den Hinweis bekommen, dass im Seitenlayout noch ein Template aktiviert werden soll. Und das werden wir jetzt auch schnell nachholen. Und zwar nehmen wir das jQuery "j_akkordion"-Template "Speichern und schließen". Im Front-End schauen wir das nach. Da haben wir jetzt die beiden Elemente. Das Erste ist geöffnet und das Zweite öffnet sich, wenn ich draufklicke. die Toggler, also die Umschalter hier, sind noch nicht so gut als solche zu erkennen, deswegen geben wir denen mal eine Hintergrundfarbe. legen ein neues Style-Element an, betrifft den Toggler und der bekommt erst einmal etwas Abstand innen. Dann als Hintergrundfarbe unsere "$col01" und eine Schrift können wir noch einstellen, Größe, sagen wir "1.2 em", Schriftfarbe weiß. Mal speichern und gucken. Ja, das ist noch ein bisschen schmal oben und unten. Da können wir noch etwas drauflegen, sagen wir "5". Und einen Abstand nach unten können wir auch noch einstellen, Als Kategorie trage ich noch "Akkordeon" ein und kann dann den Style speichern. Im Artikel setze ich über die Akkordeons jetzt noch eine Überschrift. Also neues Inhaltselement an dieser Stelle vom Typ "Überschrift" und Überschrift heißt wie die Seite, "Features", "Speichern und schließen". Für das Einzelelement habe ich im Vorfeld Bilder bereitgestellt und von denen möchte ich jetzt eins hinzufügen. Das suche ich jetzt hier mal aus, aber nicht an dieser Stelle, sondern in meinem Ordner unter "features". Nehmen wir jetzt mal diese Grafik. Einen alternativen Text sollte man immer angeben und das Bild soll nicht skaliert werden. Und speichern. Jetzt im Front-End nachschauen. Gut, damit haben wir jetzt unsere Features platzsparend per Akkordeontechnik gruppiert.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!