Contao (Teil 13): Inhaltselemente (1)

Im Frontend wurde bislang eine Startseite angelegt. Diese setzt sich aus einer Überschrift und einem Text zusammen. Beide Elemente laufen in Contao unter dem Namen Inhaltselemente. In diesem Tutorial wird gezeigt, welche Inhaltselemente Contao noch zu bieten hat und wie sich diese effizient nutzen lassen.

Wir empfehlen:
Contao CMS-Training

Das Wissen um die verschiedenen Inhaltselemente und deren HTML-Definitionen ist entscheidend, wenn es um die Gestaltung der Seite im Frontend geht. Grund genug also, einen detaillierten Blick auf die wichtigsten von Contao angebotenen Inhaltselemente zu werfen.

Um die verschiedenen Inhaltselemente zu testen/auszuprobieren, ruft ihr am besten Inhalte>Artikel auf und klickt bei Impressum auf das Stiftsymbol. (Solltet ihr kein Impressum angelegt haben, verwendet ihr einfach eine andere Seite).

Folgt anschließend dem Link Neues Element und legt die Position des neuen Elements fest. Entscheidend ist in dem sich öffnenden Fenster das Feld Elementtyp.

Darüber wird letztendlich das Inhaltselement bestimmt, das in die Seite eingefügt werden soll. Die Einträge dieses Auswahlfeldes sind in die Kategorien Text-Elemente, Link-Elemente, Media-Elemente, Datei-Elemente und Include-Elemente unterteilt. Je nachdem, welchen Typ man einstellt, werden unterschiedliche Optionen angezeigt.

Die beiden Inhaltselemente Überschrift und Text habt ihr bereits kennengelernt.

HTML

Der Elementtyp HTML bietet sich immer dann an, wenn ihr HTML-Syntax verwenden wollt, die von Contao nicht gefiltert werden soll. Tatsächlich sind in Contao nämlich von Hause aus einige HTML-Elemente aus Sicherheitsgründen gesperrt. Welche Elemente erlaubt sind, kann man unter System>Einstellungen>Sicherheitseinstellungen im Feld Erlaubte HTML-Tags festlegen. Stellt man den Elementtyp HTML ein, wird der Filtermechanismus allerdings ignoriert.

Aufzählung

Mit dem Element Aufzählung kann man einfache Listen erstellen. Zur Auswahl stehen geordnete und ungeordnete Listen. Über das Feld Listentyp stellt man die Art der Liste ein. Die einzelnen Listeneinträge werden in jeweils in Feld im Bereich Listeneinträge eingefügt. Über das Pluszeichen lassen sich zusätzliche Felder für weitere Einträge hinzufügen.

Tabelle

Weiter geht es mit dem Elementtyp Tabelle. Darüber lassen sich – das verwundert jetzt sicherlich wenig – Tabellen erstellen und einfügen. Das Generieren der Tabellen hierüber ist sicherlich etwas gewöhnungsbedürftig. Über das obere Symbol kann man Spalten einfügen.

Zeilen werden hingegen über das Symbol eingefügt, das rechts zu sehen ist.

Über die Pfeiltasten lassen sich die Spalten und Zeilen auch nachträglich noch verschieben. Im Bereich Tabellenkonfiguration kann man allgemeine Angaben zur Tabelle machen. In das Feld Zusammenfassung trägt man eine Beschreibung des Tabelleninhalts ein. Soll es sich bei der ersten Zeile um die Kopfzeile der Tabelle handeln, aktiviert ihr die Option Tabellenkopfzeile. Wollt ihr, dass die letzte Zeile als Fußzeile verwendet wird, müsst ihr die Option Tabellenfußzeile aktivieren.

Interessant ist auch der Bereich Sortieroptionen. Aktiviert man diese, ist die Tabelle sortierbar. Die Tabelleninhalte können dann durch Anklicken der Einträge in der Kopfzeile sortiert werden. Damit das funktioniert, muss aber tatsächlich eine Kopfzeile vorhanden und JavaScript muss im Browser aktiviert sein. Nach Aktivierung der Option Sortierbare Tabelle werden zwei zusätzliche Felder eingeblendet. Über das Feld Sortierindex gibt man die Spaltennummer an, nach der anfangs sortiert werden soll. Die Zählung beginnt bei 0. Stellt zusätzlich im Feld Sortierreihenfolge ein, ob zunächst auf- oder absteigend sortiert wird.

Akkordeon

Hinter diesem – auf den ersten Blick vielleicht merkwürdig erscheinenden – Elementtyp verbirgt sich ein sehr interessanter Effekt. Tatsächlich lassen sich hierüber nämlich auf- und zuklappbare Webseitenbereiche definieren. Ruft ein Besucher die Seite auf, werden ihm zunächst die zugeklappten Bereiche angezeigt.

Klickt er dann auf eine der Überschriften, öffnet sich das, was darunter steht.

Wird auf eine andere Überschrift geklickt, schließt sich der Bereich und der andere wird angezeigt. Das ist natürlich vor allem immer dann interessant, wenn man viel Inhalt, aber wenig Anzeigeplatz hat.

Das Akkordeon kennt verschiedene Betriebsarten.

Bei den beiden Varianten Umschlag Anfang und Umschlag Ende kann man beliebig viele Elemente mit dem Akkordeon-Effekt ausstatten. Dazu erstellt man zunächst ein Element vom Typ Umschlag Anfang und speichert dieses ab. Erzeugt anschließend ein Element vom Typ Umschlag-Ende. Nachdem auch dieses gespeichert wurde, könnt ihr innerhalb der beiden Elemente beliebig viele Inhalte anlegen.

Normalerweise genügt es allerdings, wenn ihr Einzelnes Element wählt. Auf diese Weise lässt sich dann die Akkordeon-Funktionalität umsetzen. Legt hier einfach so viele Einzelelemente an, wie ihr benötigt.

Aber Achtung: Damit das Akkordeon tatsächlich funktioniert, müssen die MooTools aktiviert sein. Das geschieht unter Layout>Themes>Die Seitenlayouts des Theme ID xx bearbeiten. Klickt in der sich öffnenden Übersicht auf das Stiftsymbol. Aktiviert anschließend MooTools laden und die Option moo_accordion im Bereich MooTools-Templates.

Nachdem die Einstellungen gespeichert wurden, kann das Akkordeon im Frontend genutzt werden. Ohne MooTools werden die definierten Inhalte als statische Bereiche angezeigt.

Code

Auch wenn man es vielleicht anders vermuten könnte, das Inhaltselement Code ist etwas anderes als das bereits vorgestellte HTML-Inhaltselement. Tatsächlich könnt ihr mit Code nämlich Inhalte in formatiertem Programmcode darstellen. Interessant ist das also beispielsweise, wenn ihr hier auf PSD-Tutorials.de in einem Tutorial erklären wollt, wie man mittels HTML und CSS Webseiten gestaltet.

Über das Auswahlfeld Syntaxhervorhebung wird die Sprache bestimmt, die man verwendet. Dieser Aspekt ist wichtig, da die Schlüsselwörter, Befehle usw. der einzelnen Sprachen hervorgehoben werden. Und das funktioniert eben nur richtig, wenn man auch tatsächlich die richtige Sprache angibt.

Hyperlink

Über dieses Inhaltselement lässt sich ein Hyperlink in die Seite einfügen. Dieser Link kann auf eine projektinterne Seite oder eine externe Webseite zeigen. Ebenso sind auch E-Mail-Links möglich. Um auf eine interne Seite zu verweisen, klickt man das blaue Symbol neben dem Feld Link-Adresse an.

In dem sich öffnenden Fenster kann das Verweisziel ausgewählt werden. Auf externe Seite verweist man, indem man die Ziel-Adresse in das Feld Link-Adresse einträgt. (Vergesst hier aber nicht das Protokoll, also beispielsweise http://.)

Interessant ist vor allem auch das Feld Den Link einbetten. Darüber könnt ihr den Link in einen Text einfügen. Verwendet wird dafür die Zeichenfolge %s. Angenommen also, es wurde als Linktext Preisliste angegeben. Jetzt könnt ihr in das Feld Den Link einbetten Folgendes eintragen: Klicken Sie hier, um sich unsere %s anzusehen. Im Frontend wird daraufhin Klicken Sie hier, um sich unsere Preisliste anzusehen angezeigt.

Eine interessante Option verbirgt sich zudem im Bereich Bildlink-Einstellungen. Aktiviert man die Option Einen Bildlink erstellen, wird der Hyperlink nicht als Text, sondern als Bild angezeigt. In diesem Fall muss das gewünschte Bild über die Schaltfläche Auswahl ändern eingestellt werden.

Top-Link

Dieser Link-Typ wird verwendet, um einen Link einzufügen, der auf den Seitenanfang zeigt. Praktisch ist das natürlich vor allem, wenn sich auf einer Seite sehr viel Inhalt befindet. Dank eines Top-Links müssen die Besucher, wenn sie sich am Ende einer Seite befinden, nicht nach oben scrollen, sondern brauchen nur den Link anzuklicken.

Wir empfehlen:
HTML5- & CSS3-Video-Training

Unsere Empfehlung für dich

Contao-CMS-Training

Contao-CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • Über 8 Stunden Video-Trainings zum beliebten CMS Contao
  • 40 Praxis-Lektionen in Text/Bild als PDF (über 470 Seiten)
  • Blog, Newsletter, Google Maps, Formulare, Suchmaschinenoptimierung, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training