Textelemente

Mit Textelementen binden Sie verschiedene Arten von Textinhalten in Ihre Seite ein.
Contao bietet spezielle Elemente, die für die Pflege im Backend optimiert sind und im Frontend eine korrekte Ausgabe liefern. In den folgenden Abschnitten werden die Eigenschaften der einzelnen Elementtypen beschrieben und erklärt.

Überschrift

Das Überschrift-Element fügt Ihrer Seite eine einzelne Überschrift hinzu. Die Ebene der Überschrift können Sie von h1 bis h6 festlegen.

Die erste Überschrift auf dieser Seite wurde mit einem Überschrift-Element der Ebene h1 erstellt.

Sie müssen dieses Element aber nicht verwenden, um Ihrer Seite eine Überschrift hinzuzufügen. Fast jedes andere Element bietet ein zusätzliches Eingabefeld für eine Überschrift, ebenfalls mit den Ebenen h1 bis h6.

Text

Das Text-Element stellt im Backend einen Rich-Text-Editor bereit, mit dem Sie die Textausgabe ähnlich wie in gängiger Office-Software formatieren können. Sie können Wörter oder Wendungen fett oder kursiv setzen, unterstreichen und (Hyper-)Links zu anderen Seiten derselben Website, Links zu Dateien oder Datei-Downloads oder externe URLs einbinden, um nur einige Funktionen des verwendeten TinyMCE-Editors zu nennen.

Das Element erlaubt außerdem, ein einzelnes Bild hinzuzufügen, das relativ zum Text positioniert werden kann. Das Bild kann über oder unter dem Text stehen oder links bzw. rechts vom Text umflossen werden. Ihnen stehen mehrere Optionen zur Verfügung, um das Bild anzupassen, z. B. es zu skalieren oder sogar zuzuschneiden und mit einer Contao-Seite, einer externen URI oder der Vollansicht des Bildes zu verlinken. Sie können festlegen, ob die verlinkte Seite in einem neuen Fenster oder Tab Ihres Browsers geöffnet wird. Die Vollansicht des Bildes wird in einem Overlay auf derselben Seite geöffnet, wenn dies im Seitenlayout so festgelegt ist.

HTML

Mit dem HTML-Element können Sie reinen HTML-Code eingeben.

Die erlaubten Tags werden im Bereich Sicherheit der Contao-Einstellungen festgelegt. Die meisten HTML-Tags sind standardmäßig erlaubt. Einige sicherheitsrelevante Tags wie script müssen bei Bedarf manuell hinzugefügt werden. Alternativ können Sie das Inhaltselement „Unfiltered HTML“ verwenden, wenn Ihnen die Sicherheitsfolgen bewusst sind.

Dieses ganze div ist nur ein Beispiel für HTML-Code, den Sie im HTML-Element verwenden können.

Liste

Um geordnete oder ungeordnete Listen als eigenes Element – nicht innerhalb des Text-Elements – einzufügen, bietet Contao das Listen-Element. Mit einem speziellen Backend-Widget fügen Sie jeden Listeneintrag über ein eigenes Eingabefeld hinzu, sortieren die Einträge, fügen neue ein oder kopieren sie.

Beispiel geordnete Liste

  1. Beispiel geordnete Liste 1
  2. Beispiel geordnete Liste 2
  3. Beispiel geordnete Liste 3
  4. Beispiel geordnete Liste 4

Beispiel ungeordnete mehrstufige Liste

  • Beispiel Listeneintrag
  • Beispiel Listeneintrag
    • Beispiel Listeneintrag
    • Beispiel Listeneintrag
      • Beispiel Listeneintrag
  • Beispiel Listeneintrag

Beispiel ungeordnete Liste

  • Beispiel ungeordnete Liste 1
  • Beispiel ungeordnete Liste 2
  • Beispiel ungeordnete Liste 3
  • Beispiel ungeordnete Liste 4

Beschreibungsliste

Mit dem Element Beschreibungsliste ordnen Sie eine Liste von Begriffen und Beschreibungen an. Typische Anwendungsfälle sind ein Glossar oder eine Liste von Schlüssel-Wert-Paaren.

Überschrift
Titel eines Textes
Unterzeile
Kurze Erläuterung der Überschrift
Vorspann
Einleitender Absatz
Ausleitung
Abschließender Absatz

Tabelle

Um eine Tabelle zu erstellen, verwenden Sie das Tabellen-Element. Contao bietet ein spezielles Backend-Widget, ähnlich dem für Listen, mit dem Sie Spalten und Zeilen hinzufügen, eine Kopf- und Fußzeile festlegen und eine Zusammenfassung des Tabelleninhalts angeben. In der Frontend-Ausgabe können der Tabelle, den Zeilen und Zellen spezielle Klassen hinzugefügt werden. Sehen Sie sich einfach den HTML-Code der Seite Inhaltselemente an, um die möglichen Klassen zu erkunden.

Zusätzlich können Sie eine Sortieroption für das Frontend hinzufügen, damit die Tabelle nach allen Spalten sortiert werden kann.

Beispiel

Kopf 1 Kopf 2 Kopf 3
Spalte 1 Spalte 2 Spalte 3
Spalte 1 Spalte 2 Spalte 3
Spalte 1 Spalte 2 Spalte 3

Code

Um einen Ausschnitt Programmcode, z. B. PHP oder JavaScript, bereitzustellen, verwenden Sie das Code-Element. Der Code wird im Frontend der Seite nicht ausgeführt.

<script>
  alert("Hallo Welt!!");
</script>

Markdown

Seit Contao 3.3.x wird Contao mit dem Inhaltselement Markdown ausgeliefert.

Was ist Markdown?

Markdown ist eine Auszeichnungssprache mit einer Syntax für einfachen Text, die so gestaltet ist, dass sie sich mit einem gleichnamigen Werkzeug in HTML und viele andere Formate umwandeln lässt.

Aus der Wikipedia

Mehr erfahren