Muster & Infos

Aktuelle Hinweise

Auf der Seite ToDo Redaktion findet sich eine Liste der noch ausstehenden Punkte, die redaktionell bearbeitet werden sollten.

Empfohlene Bildgrößen

Zu große Bilder werden automatisch runtergerechnet.

Seiteneigenschaften: Kachel-Infos > Vorschaubild
944×531 Pixel (16:9)

Inhaltselement "Video" > Vorschaubild
1920×1080 Pixel (16:9)

Inhaltselement "Bild"
Breite: 1952 Pixel

Inhaltselement "Teaserbox"
1280×640 Pixel (2:1)

Inhaltselement "Text" > Bild neben Text
Breite: 1000 Pixel

Headlines & RTE Formatierungen

Zu jeder Überschrift, die im Überschriften-Feld eingegeben wird, kann optional ein Icon gewählt werden. Dieser Text hat den Stil "Intro" und ist daher etwas größer.

<h3> Sub-Sub-Headline

<h4> Sub-Sub-Sub-Headline

Fließtext, mit fettem Text.
Textstil-Tarifzone: A B oder C

Aufzählung:

  • Aufzählung
  • zweiter Punkt
  • dritter Punkt

Aufzählung – Stil "Pfeile":

  • erster Punkt
  • zweiter Punkt
  • dritter Punkt

Link

Interner Link

Externer Link

Download Link

Button

Button

Button

2. Button

2. Button

2. Button

Simple-Button

Simple-Button

Simple-Button

Dieser Text ist für iOS nicht sichtbar (z.B. Link zum Android-Store).

Dieser Text ist für Android nicht sichtbar (z.B. Link zum iOS-Store).

Fließtext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Bild neben Text

Box neben Text

Je nach Layout auf grauem oder rotem Grund. Link.

Fließtext lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Box neben Text

Je nach Layout auf grauem oder rotem Grund. Link.

Preisvariablen (auch in Headlines möglich: 9,99 €)

Über den {€}-Button können Preisvariablen eingefügt werden, die zuvor mit dem Listenmodul im Backend unter "Preisvariablen" angelegt wurden, z. B. "{ { musterbenr } }" (ohne Leerzeichen). Im Frontend wird dieser Platzhalter automatisch durch den entsprechenden Wert ersetzt, z. B. "9,99 €".

Inhaltselement Sektionsmenü

Dieses Element generiert automatisch Links zu den Inhaltselementen der aktuellen Seite, für die in den jeweiligen Inhaltselementen ein Sektionstitel eingegeben wurde. Es sollte nicht auf Elemente verweisen, die sich im Bereich "Desktop-Randinfos", da diese meist dupliziert werden (mittels Inhaltselement "Mobile Randinfos") und somit das Linkziel des Sektionslinks nicht mehr zu ermitteln ist.

Inhaltselement Kacheln

Layout "1-Spalter mit roter Box", mit Filter

Filter

Box neben Text

Link.

Inhaltselement Tabelle

Für Tabellen stehen die Layouts "Standard" und "Responsiv" zur Verfügung. Im responsiven Layout wird jede Zeile auf schmalen Endgeräten als eigenständige, zweispaltige Tabelle ausgegeben. Die ursprünglichen Spaltenbeschriftungen (Kopfzellen) werden dabei auf der linken Seite angeordnet.

Layout "Standard"

Tarifzone Preisstufe Preis
A oder B oder C 1 9,99 €
A B oder B C 2 9,99 €
A B und C 3 9,99 €

Layout "Responsiv"

Unternehmen Adresse Telefon
Anselm Winterhalter, Spedition und Omnibusbetrieb Im Brühl 25 79254 Oberried 07661 90 19 200
Anselm Winterhalter, Spedition und Omnibusbetrieb Im Brühl 25 79254 Oberried 07661 90 19 200
Anselm Winterhalter, Spedition und Omnibusbetrieb Im Brühl 25 79254 Oberried 07661 90 19 200
Unternehmen Anselm Winterhalter, Spedition und Omnibusbetrieb
Adresse Im Brühl 25 79254 Oberried
Telefon 07661 90 19 200
Unternehmen Anselm Winterhalter, Spedition und Omnibusbetrieb
Adresse Im Brühl 25 79254 Oberried
Telefon 07661 90 19 200
Unternehmen Anselm Winterhalter, Spedition und Omnibusbetrieb
Adresse Im Brühl 25 79254 Oberried
Telefon 07661 90 19 200

Inhaltselement Bild

Bildunterschrift lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.

Inhaltselement Textboxen

Das Inhaltselement steht sowohl mit zweispaltigem, als auch mit dreispaltigem Layout zur Verfügung. Wird es in eine schmale Spalte der Produktdeteilseite eingefügt, erfolgt die Ausgabe automatisch einspaltig.

Dreispaltig

Zweispaltig

Inhaltselement FAQ (Aufklapper)

Inhaltselement Formular

Gewinnspiel Formular mit besonderen Features

Features

  • Formular wird in Datenbank gespeichert
  • E-Mail-Adresse wird auf Duplikate geprüft
  • Automatische Vorschläge für Postleitzahl / Ort. Bei Klick auf eine Option werden PLZ + Ort automatisch ausgefüllt.

Inhaltselement Dateilinks

Inhaltselement Teaserbox

Alternativtext
Jetzt das Deutschland-Ticket über den RVF bestellen!
Zum Abo!

Inhaltselement geOps Komponente

Demo und Dokumentation siehe https://rvf-mobility-web-component-geops.vercel.app/

Die folgenden Buttons wurden mittels HTML-Inhaltselement erstellt. Bei Bedarf duplizieren und entsprechend anpassen.

Karten können auch im Vollbild dargestellt werden. Hierfür gibt es ein eigenes Seitenlayout "Karte im Vollbild (ohne Footer)". Zur Beispielseite >

geOps Notifications via HTML-Inhaltselement

siehe eigene Unterseite geOps Notifications
Dokumentation: https://rvf-mobility-web-component-geops.vercel.app/notifications.html

Inhaltselement Video

Beim Klick auf das Bild, werden Inhalte von YouTube (youtube.com) geladen.

Inhaltselement Datensätze einfügen

Mit diesem Element können Inhaltselemente eingefügt werden, die auf anderen Seiten abgelegt sind (z. B. im Ordner "Referenz-Inhaltselemente"). Im folgenden Beispiel wird eine Tabelle aus diesem Ordner eingebunden:

Unternehmen Adresse Telefon
Anselm Winterhalter, Spedition und Omnibusbetrieb Im Brühl 25, 79254 Oberried +49 7661 90 19 200
Binninger Omnibusbetrieb GmbH & Co. KG Breisacher Str. 1, 79279 Vörstetten +49 7666 22 47
Heinrich Oestreicher Hauptstr. 24, 79348 Freiamt +49 7645 424
Rast Reisen GmbH Ährenweg 1, 79258 Hartheim +49 7633 92 620
Rist Reisen KG Tullastr. 7, 79341 Kenzingen +49 7644 227
Tuniberg-Express Emletweg 1, 79291 Merdingen +49 7668 330
Will Markgräfler Reisen GmbH & Co. KG Eisenbahnstr. 10, 79379 Müllheim +49 7631 17 860
Stadtwerke Bad Krozingen Basler Str. 30, 79189 Bad Krozingen +49 7633 40 72 64
Stadt Breisach am Rhein Münsterplatz 1, 79206 Breisach am Rhein +49 7667 83 261
Stadtwerke Emmendingen GmbH Am Gaswerk 1, 79312 Emmendingen +49 7641 46 89 90
Unternehmen Anselm Winterhalter, Spedition und Omnibusbetrieb
Adresse Im Brühl 25, 79254 Oberried
Telefon +49 7661 90 19 200
Unternehmen Binninger Omnibusbetrieb GmbH & Co. KG
Adresse Breisacher Str. 1, 79279 Vörstetten
Telefon +49 7666 22 47
Unternehmen Heinrich Oestreicher
Adresse Hauptstr. 24, 79348 Freiamt
Telefon +49 7645 424
Unternehmen Rast Reisen GmbH
Adresse Ährenweg 1, 79258 Hartheim
Telefon +49 7633 92 620
Unternehmen Rist Reisen KG
Adresse Tullastr. 7, 79341 Kenzingen
Telefon +49 7644 227
Unternehmen Tuniberg-Express
Adresse Emletweg 1, 79291 Merdingen
Telefon +49 7668 330
Unternehmen Will Markgräfler Reisen GmbH & Co. KG
Adresse Eisenbahnstr. 10, 79379 Müllheim
Telefon +49 7631 17 860
Unternehmen Stadtwerke Bad Krozingen
Adresse Basler Str. 30, 79189 Bad Krozingen
Telefon +49 7633 40 72 64
Unternehmen Stadt Breisach am Rhein
Adresse Münsterplatz 1, 79206 Breisach am Rhein
Telefon +49 7667 83 261
Unternehmen Stadtwerke Emmendingen GmbH
Adresse Am Gaswerk 1, 79312 Emmendingen
Telefon +49 7641 46 89 90

Seitenlayout "Produktseite"

Das Seitenlayout "Produktseite" bietet die zusätzlichen Inhaltsspalten "Links", "Rechts" und "Unten (mit Vererbung auf Unterseiten, von Indexsuche ausgeschlossen)".

Das Layout wird über die Seiteneigenschaften gewählt (Karteireiter "Erscheinuingsbild"). Über die Option "Layout (für Unterseiten dieser Seite)" lässt sich das Layout auch auf alle Unterseiten einer bestimmten Seite anwenden.

Inhalt in Spalte "Schmaler Inhalt"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Es folgt ein Inhaltselement vom Typ "Mobile Randinfos", welches in der mobilen Ansicht hier die entsprechenden Infos ausspielt …

Inhalt in Spalte "Desktop-Randinfos" ("sticky")

Der Inhalt der rechten Spalte hat automatisch die Eigenschaft „sticky“. Das bedeutet, dass er beim Scrollen fixiert bleibt, sofern er kürzer ist als der Inhalt der linken Spalte.

Diese Spalte wird nur auf großen Bildschirmen angezeigt. In der mobilen Ansicht ist sie nicht sichtbar.

Für die mobile Ansicht gibt es das Inhaltselement „Mobile Randinfos“. Dieses kann flexibel in der linken Inhaltsspalte eingefügt werden, um die Inhalte der rechten Spalte mobil anzuzeigen. Das Element kann bei Bedarf mehrfach innerhalb der linken Spalte genutzt werden.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Es folgt ein Inhaltselement vom Typ "Mobile Randinfos", welches in der mobilen Ansicht hier die entsprechenden Infos ausspielt …

Inhalt in Spalte "Desktop-Randinfos" ("sticky")

Der Inhalt der rechten Spalte hat automatisch die Eigenschaft „sticky“. Das bedeutet, dass er beim Scrollen fixiert bleibt, sofern er kürzer ist als der Inhalt der linken Spalte.

Diese Spalte wird nur auf großen Bildschirmen angezeigt. In der mobilen Ansicht ist sie nicht sichtbar.

Für die mobile Ansicht gibt es das Inhaltselement „Mobile Randinfos“. Dieses kann flexibel in der linken Inhaltsspalte eingefügt werden, um die Inhalte der rechten Spalte mobil anzuzeigen. Das Element kann bei Bedarf mehrfach innerhalb der linken Spalte genutzt werden.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Inhalt in Spalte "Desktop-Randinfos" ("sticky")

Der Inhalt der rechten Spalte hat automatisch die Eigenschaft „sticky“. Das bedeutet, dass er beim Scrollen fixiert bleibt, sofern er kürzer ist als der Inhalt der linken Spalte.

Diese Spalte wird nur auf großen Bildschirmen angezeigt. In der mobilen Ansicht ist sie nicht sichtbar.

Für die mobile Ansicht gibt es das Inhaltselement „Mobile Randinfos“. Dieses kann flexibel in der linken Inhaltsspalte eingefügt werden, um die Inhalte der rechten Spalte mobil anzuzeigen. Das Element kann bei Bedarf mehrfach innerhalb der linken Spalte genutzt werden.

Inhalt in unterer Spalte

Diese Inhaltsspalte hat eine Vererbungsfunktion. Der Inhalt wird auf Unterseiten durchgereicht, falls diese keinen Inhalt in dieser Spalte haben.

Besonderen Features (bei Änderungen testen)

Plugins / Inhaltselemente

Backend-Features

  • BE-Module
    • Exporter (Verkaufsstellen + Fahrpläne)
    • Formmailadmin mit CSV-Export-Funktion
      Nach einem Gewinnspiel kann darüber ein CSV Exportiert und an Herrn Vathauer übergeben werden. Anschließend Daten löschen. Achtung: die Mails werden nur als gelöscht markiert (deleted = 1). Man sollte dies dann zeitnah auch aus der DB komplett löschen, da Userdaten.
  • Form-Finisher
    • DB-Duplikat-Überprüfung (z. B. für Gewinnspiele).
      Bei den Finishern bitte unbedingt die Reihenfolge beachten: "CheckDbExistance" VOR "StoreToDatabase".
      Der CheckDbExistance Finisher überprüft, ob die Mail-Adresse schon vorhanden ist und bricht alle folgenden Finisher ab. Bei einem Duplikat wird eine Fehlermeldung ausgegeben, es werden danach keine Finisher mehr ausgeführt
    • In Datenbank speichern
  • Mehrere Scheduler Tasks (TBD: alle hier auflisten und Funktion erläutern)

Demo der RVF-Icon-Font

Blindtext ༡ 📅 ↗

Staging-Umgebung

Die neue Staging Umgebung ist eingerichtet unter https://staging.relaunch.rvf.de/. Im Backend der Staging-Umgebung ekennt man diese oben links (oberhalb der TYPO3 Version) bei "RVF" am Zusatz "Staging". Sie hat eine eigene Datenbank und auch ein eigenes Dateisystem.