🧭 Contao 5 – Kurzanleitung für Redakteure

Ein Handout von [PANORAMA] Werbung & Vertriebs GmbH


🔹 1. Anmeldung & Übersicht

Anmeldung:
https://IHRE-DOMAIN.de/contao
Benutzername & Passwort wie von der Agentur vergeben.

Nach dem Login sehen Sie das Backend-Dashboard mit folgenden Hauptbereichen:

Bereich Beschreibung
Seitenstruktur Aufbau der gesamten Website (alle Seiten in Baumstruktur)
Artikel Texte, Bilder und Module auf einer Seite
Dateiverwaltung Bilder, PDFs, Dokumente
Inhalte (Module) Erweiterte Bausteine wie Slider, Galerien, Formulare
Benutzerverwaltung (Nur für Administratoren) – Benutzer & Rechte

🔹 2. Seitenstruktur verstehen

Die Seitenstruktur ist das Herzstück des Backends.

  • Jeder Menüpunkt im Frontend entspricht einer Seite.

  • Klick auf das Stift-Symbol ✏️ öffnet die Seiteneinstellungen.

  • Artikel sind Inhalte innerhalb einer Seite.

  • Eine Seite kann mehrere Artikel enthalten (z. B. Hauptinhalt + Footer-Element).

Tipp:
🟢 Seiten nie löschen – lieber deaktivieren (grauer Kreis). So bleibt der Inhalt erhalten.


🔹 3. Artikel & Inhalte bearbeiten

👉 Einen Artikel öffnen

  1. In der Seitenstruktur auf das Ordnersymbol 📁 klicken.

  2. In der Artikelliste den gewünschten Artikel auswählen.

  3. Das Stift-Symbol ✏️ öffnet den Artikel-Editor.

👉 Inhaltselemente hinzufügen

  • Klick auf „Inhaltselement anlegen“.

  • Typ auswählen: Text, Bild, Galerie, Trennlinie, Modul, RSCE-Element, usw.

  • Reihenfolge ändern mit den Pfeilen ⬆️⬇️.

👉 Text bearbeiten

  • Im Feld „Text“ einfach schreiben oder einfügen.

  • Formatierungen wie Fett, Kursiv, Links und Überschriften stehen im Editor oben bereit.

  • Für Barrierefreiheit:

    • Bilder immer mit Alt-Text versehen

    • Keine reinen Großbuchstaben

    • Überschriften korrekt hierarchisieren (H1, H2, H3)


🔹 4. Bilder & Dateien verwalten

📁 Dateiverwaltung öffnen

→ In der linken Spalte „Dateiverwaltung“.
Hier können Sie Bilder, PDFs oder andere Dateien hochladen.

Regeln für Bilder:

  • Aussagekräftige Dateinamen (z. B. team-bettina-schroer.jpg)

  • Keine Leerzeichen, Umlaute oder Sonderzeichen

  • Alt-Texte und Bildunterschriften ergänzen

  • Weboptimierte Größe (z. B. max. 2000 px Breite, 200 KB)

Hinweis: Contao erzeugt automatisch mehrere Bildgrößen (responsive Images).


🔹 5. Seiteninformationen & SEO

In jeder Seite können Sie im Tab „Meta“ oder „Experten-Einstellungen“ SEO-Texte pflegen:

Feld Zweck Empfehlung
Seitentitel erscheint im Browser-Tab & bei Google 50–60 Zeichen
Beschreibung (Description) Kurztext für Suchergebnisse 140–155 Zeichen
Alias Seiten-URL (automatisch generiert) Keine Sonderzeichen
Sichtbarkeit Seite im Menü anzeigen oder verbergen nur aktivierte Seiten sichtbar

Tipp:
✅ Immer relevante Schlüsselbegriffe (Ort + Leistung) verwenden, z. B.
„Fahrzeugbeschriftung Dessau – Werbung in Bewegung“


🔹 6. Änderungen prüfen & veröffentlichen

  1. Speichern Sie Inhalte mit 💾 Speichern & schließen.

  2. Prüfen Sie die Seite über den Link „Frontend-Vorschau“ (oben rechts).

  3. Falls Caching aktiv ist: Seite im Frontend einmal mit Strg + F5 neu laden.


🔹 7. Nützliche Tipps aus der Praxis

Barrierefreiheit:

  • Kontraste, Alt-Texte, sinnvolle Überschriften, klare Sprache.

  • Keine Texte als Bild.

SEO:

  • Kurze Absätze, Zwischenüberschriften, Listen.

  • Interne Links setzen (z. B. von „Leistungen“ zu „Referenzen“).

Sicherheit:

  • Passwörter regelmäßig ändern.

  • Kein Copy-Paste aus Word → lieber reinen Text verwenden.

PageSpeed:

  • Nur optimierte Bilder hochladen.

  • Keine zu großen Videos direkt einbinden (YouTube nutzen).


🔹 8. Hilfe & Support

🧩 PANORAMA Support-Team
E-Mail: agentur@panorama-werbung.com
Telefon: 0340 540 735 44


👉 Empfohlene Tutorials

Zurück

// Mobile-Optimierung nur für STARTSEITE document.addEventListener("DOMContentLoaded", function () { // 1) Prüfen ob wir auf der STARTSEITE sind (per Body-ID) // Contao setzt body[id="top"] beim Startpunkt const isStartseite = document.body.id === "top"; if (!isStartseite) return; // 2) Mobile-Erkennung (sehr sicher) const isMobile = /Android|iPhone|iPad|iPod|Mobile|webOS|BlackBerry|Windows Phone/i .test(navigator.userAgent); if (!isMobile) return; // 3) Folgende Dateien auf der Startseite blockieren const blockList = [ "rocksolid-slider", "rstslider", "slider.min.js", "slider.min.css", "rstslider.min.css", "jquery.min.js", "flex-images.css", "glightbox.min.js" ]; // 4) und