CMS-Layout Richtlinien
Hier werden sämtliche Richtlinien festgehalten, wie CMS-Seiten aufgebaut werden müssen.
Einleitung
Dieses Konzept beschreibt den Aufbau und die Gestaltung der Inhaltsseiten auf unseren Webseiten. Ziel ist es, eine einheitliche Struktur zu schaffen, die für alle Marken, Länder und Sprachen funktioniert – und gleichzeitig flexibel genug ist, um verschiedene Inhalte darzustellen.
Die Seiten bestehen aus wiederverwendbaren Bausteinen (Area Bricks) wie Textblöcken, Bildern, Videos oder Formularen. Diese Bausteine können beliebig kombiniert werden – je nachdem, was auf der Seite gezeigt werden soll.
Das Layoutkonzept sorgt dafür, dass:
Konsistenz unter den CMS Seiten besteht
die Inhalte für die Nutzer übersichtlich und verständlich sind
die Pflege im CMS einfach bleibt
In den folgenden Abschnitten wird erklärt, wie eine Seite grundsätzlich aufgebaut ist, welche Inhaltsmodule zur Verfügung stehen und worauf bei Gestaltung, Technik und Pflege zu achten ist.
Anwendungsbereiche
In Pimcore gibt es verschiedene Möglichkeiten, Inhalte zu verwalten und darzustellen. Content kann je nach Struktur und Verwendungszweck in Dokumenten, Datenobjekten, Assets oder konfigurierenden Objekten wie SiteSettings abgelegt werden.
Dieses Layoutkonzept konzentriert sich jedoch ausschliesslich auf die Inhalte, die über Pimcore-Dokumente und Snippets gepflegt werden – also auf klassische CMS-Inhalte im Seitenbaum.
Nicht Teil dieser Dokumentation sind:
Inhalte, die aus Datenobjekten stammen (z. B. Produktdaten, News, Ansprechpartner)
Konfigurationen über SiteSettings oder ShopSettings
Medienverwaltung über Assets
Der Fokus liegt auf den Layoutvorgaben für redaktionelle Seiten, die modular mit Editables und AreaBlocks aufgebaut sind – und auf wiederverwendbaren Snippets, die zentral gepflegt und an mehreren Stellen eingebunden werden können.
Content auf Dokumenten
[draft]
Content auf Snippets
In Pimcore gibt es Seitenbereiche, die nicht über den CMS-Seitenbaum (Dokumente) gepflegt werden können, weil sie technisch über Produkt- oder Kategoriestrukturen aufgebaut sind. Dazu gehören zum Beispiel:
Kategorieseiten im Shop
Produktgruppenseiten
Produktdetailseiten
Diese Seiten basieren auf hardcodierten Templates oder auf Datenobjekten, bei denen keine klassischen Editierfunktionen (z. B. WYSIWYG, Areablocks) im Backend zur Verfügung stehen.
Um dort dennoch redaktionelle Inhalte pflegbar zu machen, werden an diesen Stellen Snippets eingebunden. Diese Snippets können zentral im CMS gepflegt und flexibel referenziert werden – z. B. nach Kategorie, Sprachversion oder Shop-Kontext. Dadurch lassen sich auch in technischen oder datengetriebenen Bereichen redaktionelle Inhalte verwalten.
Weitere Informationen zu Snippets findest du hier.
Content auf Kategorien oder Produktgruppen
Beispiel: https://motorex.com/de-ch/bike-line--5622?page=1
Content auf Produktdetailseiten
Beispiel: https://motorex.com/de-ch/chainwax--785602
Erstellung eines neuen Snippets
Aktuell stehen noch keine vordefinierten Templates für Inhaltsseiten zur Verfügung. Das bedeutet, dass jede neue Seite manuell und individuell aufgebaut werden muss. Wenn Inhalte für Kategorien, Produktgruppen oder Produktdetailseiten bereitgestellt werden sollen, erfolgt dies über sprachspezifische Snippets, die im Snippet-Ordner im CMS des jeweiligen Tenants angelegt werden. Diese Snippets können dann gezielt in die entsprechenden Bereiche eingebunden werden, um redaktionelle Inhalte trotz fehlender Template-Struktur pflegbar zu machen.
Snippet Konfiguration
Sprach-Konfiguration und Vererbung
Um Inhalte effizient in mehreren Sprachen bereitzustellen, werden Snippets in Pimcore initial in allen verfügbaren Website-Sprachen angelegt. In vielen Fällen wird dabei der Inhalt einer Hauptsprache (z. B. Deutsch oder Englisch) vererbt – muss aber bewusst so eingerichtet werden.
Warum das so gemacht wird:
Inhalte erscheinen sofort in allen Sprachen – auch wenn noch keine Übersetzung vorhanden ist.
Nur eine Version muss gepflegt werden, bis gezielt eine sprachspezifische Anpassung nötig ist.
Der redaktionelle Aufwand wird reduziert, und leere Seitenbereiche werden vermieden.
So funktioniert die Vererbung korrekt:
Snippet in der Hauptsprache (z.B
de) anlegen.Snippets in allen Webseite Sprachen kopieren via Kontextmenu (Hauptsprache kopieren > Einfügen > Einfügen als neue Sprachvariante )
In den Varianten, die den Inhalt vererben sollen: (Hauptsprache kopieren > Einfügen (Vererbung) > Einfügen als neue Sprachvariante )
Wird ein Snippet korrekt vererbt, bleibt der Benutzer beim Sprachwechsel auf der gleichen Inhaltsseite und sieht den entsprechenden (fallback-)Content in der neuen Sprache.
Wird ein Snippet hingegen nicht korrekt vererbt (z. B. weil es in der Zielsprache fehlt oder nicht im Sprachbaum vorhanden ist), kommt es zu einem Fallback auf die Startseite der gewählten Sprache.
Short-URL
In den Eigenschaften kann optional eine Short-URL für das Snippet bzw. die Landingpage gesetzt werden.
Platzierung des Snippets im Frontend
Die im CMS gepflegten Snippets werden im Frontend an klar definierten Positionen ausgespielt, abhängig vom Seitentyp:
Auf Line- und Produktgruppenseiten wird der Content direkt unterhalb der Produktliste dargestellt.
Auf Produktdetailseiten erscheint der Inhalt unterhalb der Produktdaten-Tabelle.
Die Trennung zwischen der Produktdarstellung und dem redaktionellen Content erfolgt visuell über ein Parallax Image, das als gestalterisches Element den Übergang einleitet. Dieses Bild signalisiert den Beginn des Snippet-Inhalts und sorgt für eine klare visuelle Abgrenzung im Layout.
Diese strukturierte Platzierung gewährleistet eine konsistente Nutzerführung und macht die redaktionellen Inhalte für den Benutzer gut auffindbar (siehe Video).
Layout / Grundstruktur
Das Layout für Content in Kategorien, Produktgruppen oder Produktdetailseiten ist immer gleich aufgebaut und setzt sich aus folgenden CMS-Komponenten (Area Bricks) in der Reihenfolge zusammen:
1
Parallax Bild (3:2)
Header-Image (Parallax)
keine
2
Content Haupttitel
Heading
Headline 1
CAPSLOCK
Full width
3
Einleitungstext (links)
Wysiwyg Text
Wysiwyg Text with Link
Width: 50%
Spacing right
3
Bild oder Video (rechts)
Image
Video
Image: -Width: 50% -Image Format: Individuell -Image Link: Individuell
-Hide Image Text: Individuell Video: -Width: 50% -Autoplay video: Ja -Loop Video: Ja -Mute video: Ja
4
Überschrift 1
Heading
Headline 2
Normale Schriftgrösse
5
Text 1
Wysiwyg Text
Wysiwyg Text with Link
Width: 50%
Spacing right
5
Bildgallerie 1
Gallery
Width: 50%
Hide Image Text: Individuell
6
Überschrift 2
Heading
Headline 2
Normale Schriftgrösse
7
Text 2
Wysiwyg Text
Wysiwyg Text with Link
Width: 50%
Spacing left
7
Bildgallerie 2
Gallery
Width: 50%
Hide Image Text: Individuell
usw.
...
...
...
Die unten beschriebene Grundstruktur ist verbindlich vorgegeben und muss bei allen Content-Bereichen in Kategorien, Produktgruppen und auf Produktdetailseiten in exakt dieser Reihenfolge eingehalten werden.
Es handelt sich nicht um eine gestalterische Empfehlung, sondern um eine feste Layoutvorgabe. Nur wenn die Grundstruktur genau wie in der Tabelle dargestellt aufgebaut wird, kann ein konsistent gepflegtes Layout über alle Seiten hinweg sichergestellt werden. Abweichungen führen zu Inkonsistenzen im Design und führen systemseitig zur Deaktivierung der betroffenen Inhalte.
Last updated