Contao Grundverständnis

Grundsätzliches zum Verständnis

diese Grafik stammt von https://docs.contao.org/books/manual/3.5/de/03-seiten-verwalten/komponenten.html

Contao ist ein Seiten-basiertes CMS (wie dimX). Das Zusammenspiel von Seiten, Artikeln, Inhaltselementen und Modulen zu verstehen, ist der Schlüssel zum Erlernen von Contao.

Seitenstruktur : alle Seiten der Website

Über die Seitenstruktur sind die Eigenschaften der Seiten einzustellen.

Eine neue Seite anlegen

Conto: Seite anlegen
mit Klick auf dieses Bild die Vollansicht öffnen

Seitenanzeige und -nutzung

Bedeutung Contao Seiteneinstellung
Seite ist per Button in der Hauptnavigation erreichbar Veröffentlichung / Seite veröffentlichen
Seite ist nur per Link erreichbar und NICHT über die Hauptnavigation Veröffentlichung / Seite veröffentlichen
Experten-Einstellungen / Im Menü verstecken
Seite ist nicht erreichbar, aber ist als Einblendung evtl. Baustein für andere Seiten (nützlich bei Mehrfachnutzung) Veröffentlichung / KEIN Seite veröffentlichen
Seite ist erst nach Login sichtbar Zugriffsschutz / Seite schützen
Seite wird bei Suche in der Website erfasst Sucheinstellungen / KEIN Nicht durchsuchen
Seite wird in der Sitemap der Website aufgelistet Experten-Einstellungen / In der Sitemap zeigen
Seitenlayout : wie alles auf jeder Seite angeordnet ist

Die wichtigsten Seitenlayouts sind vorbereitet:

  • Full width (gesamte Breite des Browserfenster)
  • Home (Startseite)
  • Left Column (Zusatzbereich links)
  • Left-Right Column (Zusatzbereiche links + rechts)
  • Right Column (Zusatzbereich rechts)

Das gewünschte Seitenlayout wird in der Startseite in der Seitenstruktur für die gesamte Website eingestellt. Abweichungen von dieser globalen Einstellung werden dann pro Seite einzeln andere Seitenlayouts eingestellt (z.B. bei Home).

Beispiele zum Einsatz verschiedener Seitenlayouts sind zu sehen unter Vorlagen / Pages:

  • Die Breite der Website wird über die globale Variable $wrapperwidth in den Theme-Einstellungen festgelegt.
  • Die Kopfzeile enthält die Bereiche Top-Balken, Header und Afterheader.
  • Nur im "boxed" Layout ist der Browser-Hintergrund sichtbar.
  • Die Breite der linken und/oder rechten Spalte (falls vorhanden) wird im Seitenlayout eingestellt.
contao Layout Spalten einstellen
mit Klick auf dieses Bild die Vollansicht öffnen

Die Inhalte der seitenweit meist gleich bleibenden Bereiche werden über diesen zugewiesene Artikel bearbeitet:

  • Top-Balken
  • Header
  • Afterheader
  • Fußzeile
  • einklappbarer Seitenbereich rechts
  • einklappbares info-Center oben

Dazu vorbereitet Artikel finden sich in der Seitenstruktur unter dem Punkt "Layout-Komponenten"

Artikel : Inhalte für Seiten

Artikel liefern die Inhalte für die Bereiche des Layouts einer Seite (auch mehrere untereinander im gleichen Bereich).

Beispiele zum Einsatz verschiedener Elemente sind zu sehen im Bereich Vorlagen / Elemente der Theme-Installation.

Tipp: Artikel zuerst mit den gewünschten Elementtypen aus dem Vorlagen-Bereich in die eigene Website kopieren.

Elementtypen:


  • Text-Elemente
    • Überschrift
    • Text
    • HTML
    • Aufzählung
    • Tabelle
    • Code
    • Markdown
  • Tabs
  • Akkordeon
  • Content-Slider
  • Link-Elemente
  • Media-Elemente
    • Bild
    • Galerie
    • Video/Audio
    • YouTube
    • GoogleMap
  • Downloads
  • Include-Elemente
    • Artikel
    • Inhaltselemente
    • Formular
    • Modul
    • Artikelteaser
    • Kommentare
  • CTS (Contao Themes-Shop)
    • Call-To-Action
    • Colorbox
    • Contentbox
    • Animated Counter
    • Trennlinie
    • Headerimage
    • Hover
    • Effects
    • Hyperlink-Extended
    • Imagebox
    • Infobox
    • Aufzählung - erweitert
    • Preistabelle
    • Produktbox
    • Projektdetail
    • Zitat
    • Text mit Hintergrundbild
    • Text-Bild erweitert
    • Animierter
    • Text
  • hCard - Visitenkarte
  • CTS Slider
  • CTS Vegas Slider
  • CTS Element-Container
CSS : wie alles gestaltet ist

Sämtliche Formatierungen der Elemente, Inhalte und Bausteine sind über Stylesheets realisiert.

Falls es nicht möglich ist, alle benötigten Anpassungen über die globalen Variablen vorzunehmen, werden Sie an der ein oder anderen Stelle Änderungen in den Stylesheets vornehmen müssen.

Contao beinhaltet einen CSS-Editor zur Bearbeitung der Stylesheets und zur Erzeugung neuer Formatierungen.

Den Editor erreicht man durch Klicken auf Layout -> Themes und in der dann erscheinenden Ansicht auf das CSS-Symbol.

Das wichtigste und umfangreichste Stylesheet ist die main. Führen Sie hier keine Änderungen durch! Fügen Sie statt dessen ihre eigenen Klassen in das anfangs leere Stylesheet "Anpassungen" ein. Alle hier festgelegten Formatierungen überschreiben die der anderen Stylesheets.

mit Klick auf dieses Bild die Vollansicht öffnen

Die Klassen können hier auch nach Kategorien gefiltert werden.

Frontend-Module : wie alles zum Funktionieren gebracht wird

Fast jede benötigte Funktionalität bringen unsere Themes vorgefertigt mit. Diese können individuell mit Hilfe von über 100 Frontend-Modulen in Seiten eingebunden werden.

Einige Funktionen sind:

  • verschiedene Navigationsmodule (auch Navigationspfad, Mobil-Navigation, Meta-Navigation usw.)
  • Benutzerregistrierung und -anmeldung (im Frontend als "Mitglieder")
  • Webseite durchsuchen
  • Newsletter An- und Abmeldung
  • RSS-Feeds importieren
  • usw. usw.

Die Einbindung erfolgt entweder im Seitenlayout zur Positionierung in einer Seite oder in einem Artikel mit den Elementtyp "Modul".

Tipp: Vorgefertigte Seiten mit den gewünschten Funktionen aus dem Vorlagen-Bereich (Service, News & Events) in die eigene Website kopieren.