Willkommen

In den folgenden Abschnitten werden Ihnen sämtliche Grundfunktionen und Inhaltselemente ausführlich erklärt. Bitte nehmen Sie sich die Zeit und schauen Sie sich alles in Ruhe an, damit der Aufbau Ihrer Seite so reibungslos wie möglich abläuft. Sollten doch mal Probleme auftauchen oder Sie wünschen weitere Features, können Sie auch gerne direkt Kontakt mit uns aufnehmen.

Grundfunktionen

Webseiten-Einstellungen

Unter „Webseiten-Einstellungen“ finden Sie alle Grund-Informationen, welche auch in bestimmten Bereichen der Website automatisiert ausgegeben werden. Dieser Bereich sollte sorgfältig und gewissenhaft ausgefüllt werden.

Erläuterung

Soziale Netzwerke

Alle sozialen Netzwerke, welche sie in den Einstellungen eintragen sind, werden ganz unten im Menü mit dem entsprechenden Logo ausgegeben auf die eingetragene URL verlinkt. Ausgenommen ist das Feld „Kundenportal, dieses wird im Menü unter „Kundenlogin“ verlinkt. Bitte sämtliche URLs immer beginnend mit „http://“ eintragen.

Erläuterung

Design-Einstellungen

Hier müssen Sie Ihr Logo zweimal hochladen:

  • Logo für Navigationsleiste: in schwarz oder in Ihren Farben (muss auf weiss gut lesbar sein)
  • Logo für Intro: die Farben müssen sich von dem eingestellten „Kopfbild“ deutlich abheben, damit das Logo auch hier optimal lesbar ist

Das „Kopfbild“ ist das Hintergrundbild des Intros und sollte ein sehr aussagekräftiges und interessantes Foto sein. Das „Fav- & Touchicon“ sollte eine simple .png Grafik im Format 1024*1024px sein, welche im Browser als Favicon und auf mobilen Geräten als Touchicon dargestellt wird.

Artikel-, Seiten- & Dateiverwaltungsstruktur

Bei diesen drei Menüpunkten sieht die Struktur immer ähnlich aus und verhält sich auch gleich.

Info

Ebenen ein-/auszublenden

Um die unterliegenden Ebenen ein-/auszublenden, klicken Sie auf das kleine Icon vor dem Titel.

Info

Alternative

Alternativ können Sie auch direkt auf den Titel klicken. Dabei geht man direkt in die gewünschte Ebene und alle anderen Seiten (auf den höheren Ebenen) sind nicht mehr sichtbar.

Info

Zurück

Um wieder in die Hauptebene zurückzugelangen und alle Seiten angezeigt zu bekommen, muss man in der gelben Box auf „Alle“ klicken.

Aliase

Mit dem Alias definieren Sie den abschließenden Teil der Internetadresse, mit der die Seite oder der Beitrag im Browser aufgerufen werden kann:


Sie müssen den Alias nicht unbedingt selbst festlegen. Wenn Sie das Feld einfach leer lassen, generiert Contao automatisch einen passenden Alias, basierend auf dem Titel der Seite oder des Beitrags. In den meisten Fällen ist dieser absolut ausreichend.


Wenn Sie den Alias selbst festlegen möchten, dann müssen Sie die folgenden technischen Regeln beachten:

  • Für den Alias können Sie die 26 Buchstaben des Alphabets a-z, Zahlen 0-9, den Bindestrich - und den Unterstrich _ einsetzen. Nutzen Sie keine anderen Sonderzeichen (&, +, ...) und auch keine Umlaute (ä, ü, ö) bzw. Sonderbuchstaben (ß, é, â, ...)
  • Schreiben Sie den gesamten Alias klein
  • Wenn Sie mehrere Worte nutzen, dann verbinden Sie diese mit Binde- oder Unterstrichen. Der Alias darf keine Leerzeichen enthalten!
  • Der Alias muss mit einem Buchstaben anfangen

Referenz-Seiten anlegen/verwalten

Wie Sie Referenz anlegen und verwalten, sehen Sie in folgenden Videos.

Video

Referenz-Seite und Unterkategorien anlegen und befüllen

Video

Referenz-Seite bearbeiten und löschen

Dateiverwaltung

Die grundlegende Dateiverwaltung wird in folgendem externen Artikel sehr gut und detailliert erklärt:
contao-cms-tutorials.de - Perfekte Dateiverwaltung

Aktuelles & Blog

In folgendem Video zeigen wir Ihnen, wie Sie Beiträge anlegen können:

Video

Beiträge anlegen

Info

Beiträge bearbeiten

Zum Bearbeiten der Beiträge klicken Sie auf „Beitragseinstellungen bearbeiten“:

Gutscheine

Um Gutscheine zu verwalten, gehen Sie links im Menü auf „Gutscheine“. Hier haben Sie nun die Möglichkeit neue Gutscheine anzulegen, bestehende zu bearbeiten oder auch zu löschen.

Info

Preis

Die Bezeichnung muss immer zusammen mit dem Preis eingetragen werden, da die Daten später im Gutschein-Formular als Select-Menü dargestellt werden.

Inhaltselemente

Aktion

Das Inhaltselement „Aktion“ ist für die Seiten „Aktionen“ und „Referenzen / Kategorie / Aktionen“ bestimmt. Wählen Sie ein quadratisches Bild aus, tragen Sie die gewünschte Überschrift ein und geben Sie den Zeitraum, eine kurze, aber deutliche Beschreibung und den Preis (ohne „€“-Zeichen) ein:

Bilder-Blöcke (1er/2er/3er/4er)

Die Inhaltselemente „Bilder-Block“ gibt es für 1 bis 4 Bilder und sie dienen gut als Trennung zwischen z. B. 2 Textblöcken oder wenn noch ein paar Bilder gezeigt werden sollen. Wählen Sie das oder die gewünschten Bilder aus:

Info

Optional

Sie können bestimmen, ob die Bilder bei Klick vergrößert werden oder nicht. Klicken Sie zum Deaktivieren der Vergrößerung auf die Checkbox bei „Bild bei Klick NICHT vergrößern“.

GoogleMaps + Anschrift

Das Inhaltselement „GoogleMaps + Anschrift“ erzeugt - wie der Name schon sagt - eine Google-Karte und zeigt daneben die Anschrift und Kontaktmöglichkeiten an.


Im Normalfall befindet sich dieses Element auf der Kontaktseite, kann aber auch gut für mehrere Standorte eingesetzt werden.


Wenn Sie dieses Element anlegen, sind alle Felder schon vorausgefüllt. Die Daten werden automatisch aus Ihren Stammdaten („Webseiten-Einstellungen“) importiert.


Möchten Sie dieses Element nun z. B. für einen weiteren Standort anlegen, so können Sie die vorausgefüllten Felder problemlos überschreiben.


Mit „Zoom-Faktor der Karte“ bestimmen Sie, wie stark an die Adresse herangezoomt wird (je höher der Wert, um so dichter dran).

Gutschein-Formular

Das Inhaltselement „Gutschein-Formular“ sollte lediglich auf der dazugehörigen Seite „Gutscheine“ eingesetzt werden.


Hier können Sie lediglich die Überschrift einstellen:

Info

Gutscheine verwalten

Wie Sie die Gutscheine selbst verwalten können, sehen Sie hier: Grundfunktionen: Gutscheine

Kontakt-Formular

Das Inhaltselement „Kontakt-Formular“ können Sie im Grunde überall platzieren, wo Sie ein Formular haben möchten. In der Regel sollte man dieses aber lediglich auf der Kontakt-Seite haben und auf anderen Seiten immer auf diese verweisen.

Kundenstimme

Das Inhaltselement „Kundenstimme“ wird lediglich auf der dazugehörigen Seite („Kundenstimmen“) eingesetzt.


Es besteht aus dem Namen, Datum, Foto und dem Text Ihres Kunden.

Info

Optimale Bilder

Die Bilder sollten immer quadratisch und das Gesicht mittig positioniert sein, damit die Köpfe nicht an- oder abgeschnitten werden.

Letzter "Aktuelles & Blog"-Eintrag (für Startseite)

Wie der Name dieses Inhaltselements schon aussagt, wird damit der aktuellste Artikel dargestellt. Eingesetzt werden sollte es deshalb auch lediglich auf der „Startseite“ (unter „Home“).

Newsletter (MailChimp)

Das Inhaltselement „Newsletter (MailChimp Code)“ befindet sich auf der „Newsletter“-Seite und dient zur Darstellung Ihres individuellen MailChimp-Formulars.

Anleitung

Formular anpassen

Das Formular selbst wird direkt auf MailChimp.com bearbeitet:

  • Gehen Sie oben Links auf „Lists“
  • Bei der Liste Ihrer Wahl klicken Sie nun auf den Pfeil rechts von „Stats“ und dort auf „Signup forms“
  • Über „General forms“ können Sie sich nun Ihr individuelles Formular aufbauen
Anleitung

Inhaltselement nutzen

Wenn Ihr Formular fertig ist, gehen Sie erneut auf die Seite „Signup forms“ und gehen Sie wie folgt vor:

  • Klicken Sie nun auf „Embedded forms“
  • Wählen Sie bei den verschiedenen Varianten „Naked“ aus
  • Entfernen Sie den Haken bei „Include form title“ und „Show format options“

Anschließend kopieren Sie den gesamten Code in der Box unter „Copy/paste onto your site“ in das „Code“-Feld des „Newsletter (MailChimp Code)“-Inhaltselements und speichern Sie dieses ab.

Info

Bei Formularanpassungen Code aktualisieren

Wenn Sie irgendwelche Anpassungen an Ihrem MailChimp-Formular vornehmen, müssen Sie danach den Code neu kopieren und in das Inhaltselement einfügen.

Preisliste

Das Inhaltselement „Preisliste“ wird bei den Referenz-Seiten auf den dazugehörigen Unterseiten „Kurzinfo & Preise“ verwendet.


Geben Sie die Bezeichnung an und wählen Sie die entsprechende PDF-Datei aus. (Optional können Sie noch die Dateigröße angeben.)

Seitentitel (mit/ohne Hintergrundbild)

Das Inhaltselement „Seitentitel (mit/ohne Hintergrundbild)“ wird einmal auf den normalen Inhaltselementen eingesetzt (ganz oben) und ist für die Hauptüberschrift der Seite verantwortlich.


Optional können Sie ein Hintergrundbild auswählen, welches die Seite dadurch für den Besucher attraktiver macht.

Teammitglied

Das Inhaltselement „Teammitglied“ wird lediglich auf der dazugehörigen Seite („Team“) eingesetzt und dient zur Darstellung einer Person so wie auch dessen Kontakt-Informationen.


Geben Sie den Namen, die Tätigkeit, eine kurze Beschreibung, die Telefonnummer, die E-Mail-Adresse an und wählen Sie ein Foto aus:

Text-Block

Das Inhaltselement „Text-Block“ ist für normale Texte und kann so gut wie überall eingesetzt werden.


Sollten einmal 2 oder mehrere Text-Blöcke direkt untereinander stehen, sollten diese mit einem Trennbalken oder einem der Bilder-Blöcke getrennt werden, da dies optisch wesentlich angenehmer ist als eine „Textwüste“.

Optional

Text-Block als Trenner

Falls Sie das Element als Trenner z.B. zwischen zwei Bilder-Rastern einsetzen möchten, dann setzten Sie einfach einen Haken bei „Text-Block als Trenner verwenden“:


Dadurch wird folgendes angepasst:

  • Deutlich größere Abstände und somit mehr Weißraum
  • Größere und kräftigere Überschrift
  • Größerer und zentrierter Fließtext

Trennbalken

Das Inhaltselement „Trennbalken“ dient zur Trennung von anderen Elementen und hat einen rein optischen Nutzen. Es dient u.a. perfekt dazu, zwischen zwei Text-Blöcken positioniert zu werden und somit eine optisch dezente Trennung zu erzielen.

Videos (Selbst gehostet/Vimeo/YouTube)

Es gibt 3 verschiedene Inhaltselemente für Videos:

  • [»] Video (selbst gehostet)
  • [»] Video (Vimeo)
  • [»] Video (YouTube)

Die Verwendung der Video-Inhaltselemente, wird Ihnen in den folgende Anleitungen erklärt.

Wie Sie die erforderlichen Dateien für selbst gehostete Videos hochladen, sehen Sie etwas weiter unten.

Anleitung

Vimeo und Youtube Videos einpflegen

Anleitung

Selbst gehostetes Video einpflegen

Info

Selbstgehostetes Video hochladen

Um ein selbst gehostetes Video hochzuladen, benötigen Sie folgende Dateien:

  • Das Video in den Formaten .mp4 und .webm
  • Bild der ersten Sekunde als .jpg
Anleitung

Selbstgehostetes Video hochladen

Slideshow

Das Inhaltselement „Slideshow“ kann im Prinzip überall eingesetzt werden, wo eine Slideshow sinnvoll ist.


Wählen Sie die gewünschten Bilder aus und bestimmen Sie die Reihenfolge (mit der Maus per Drag & Drop oder über das „Sortieren nach“-Select-Menü).

Bilder-Raster

Das Inhaltselement „Bilder-Raster“ darf ausschließlich in den dafür vorgesehenen Seiten-Artikeln verwendet werden: Unter „Home“ aus „Startseite (Bilder-Raster)“, unter „Referenzen“ in dem Hauptartikel (gleichnamig mit der Referenz-Seite).

Anleitung

Verwendung des Bilder-Rasters