Musterseite mit Basics für Redakteurinnen und Redakteure

Auf dieser Seite haben wir die verschiedenen Möglichkeiten der Spalteneinteilungen (Rows) von OpenCMS für Sie zusammengestellt und als Muster mit Inhalt gefüllt. Wenn Sie das Browserfenster schmaler schieben, können Sie auch sehen, wie sich die Darstellung in der mobilen Version jeweils anpasst. Alternativ können Sie auch mit der Tastenkombination Strg + Umschalt + i in die Tablet- bzw. Smartphone-Ansicht wechseln (Symbol links oben in dem Fenster, das dadurch geöffnet wird).

Row 1 Spalte (12 - Voll) = Volle Bildschirmbreite

Man sieht ein Graffity an einer Mauer mit der Aufschrift 'Jesus lebt'

Wenn Sie sich für das Template-Element 1 Spalte entscheiden, sollten Sie neben dem Fließtext auf alle Fälle ein Bild einsetzen. Sonst wird die Zeile zu lang und das Lesen erschwert. 

Dieses Layout eignet sich als Aufmacher, wenn Sie ein gutes, aussagekräftiges Bild und einen normal großen Einstiegstext haben. In diesem Beispiel ist das Bildverhältnis 58 % der gesamten Breite. Das Bild sollte mindestens 50 % der vollen Breite einnehmen und maximal 75 % (wenn Sie einen sehr kurzen Einleitungstext haben).

In den Einstellungen (Icon Rädchen) können Sie auch das Bildformat ändern. Für den Aufmacher in voller Breite eignen sich besonders die schmalen Bildformate: 16:9 oder "Widescreen" oder "Ultrawidescreen". Ein Hochformat eignet sich nur, wenn man einen besonders langen Text hat. Hier wurde das Format 2:1 (doppelte Breite) ausgewählt.

Achtung: Beim Aufmacher bitte keinen Rahmen verwenden!

Zwei Spalten (Row 6 - 6)

Für die Aufteilung in zwei gleich große Elemente finden Sie drei verschiedene Template-Elemente: 

  • Row 2 Spalten (6 - 6) [ab Bildschirmgröße LG]
  • Row 2 Spalten (6 - 6) [ab Bildschirmgröße MD]
  • Row 2 Spalten (6 - 6) [alle Bildschirmgrößen]

Damit ist gemeint, ab welcher Bildschirmgröße bei der mobilen Version tatsächlich zwei Spalten angezeigt werden. Ist der Bildschirm kleiner, werden die beiden Elemente untereinander dargestellt. In der Regel sollten Sie das Element "ab Bildschirmgröße MD" auswählen. In einzelnen Fällen - abhängig vom Inhalt - kann es sinnvoll sein, erst ab der Größe LG die beiden Elemente nebeneinander darzustellen.

Probieren geht über Studieren...

Wenn Sie Ihr Browserfenster mit der Maus schmaler schieben (bis auf Handybreite), können Sie sehen, wie sich die Darstellung je nach Bildschirmbreite verändert. Probieren Sie es doch direkt hier aus!

Tipp: Mit Strg + Umschalt + i können Sie ebenfalls schnell in die mobile Ansicht wechseln.

Row 2 Spalten (6 - 6) [ab Bildschirmgröße MD] - Standard

Diese Aufteilung ist sowohl sinnvoll, wenn Sie Fließtext mit Bild haben, als auch Text mit kurzen Zeilen, wie z. B. einen Kontakt, eine Icon-Box oder eine Kachel mit wenigen Worten. Auf dem Tablet werden noch zwei Spalten dargestellt, auf dem Smartphone eine Spalte. 

Lächelnde Frau vor hellem Hintergrund

Martina Musterfrau

Leiterin
Synodenbüro
Liebfrauenstraße 8
54290 Trier
Telefon:0651 7105-XXX
E-Mail:
Portrait eines Mannes mit Brille vor hellem Hintergrund

Max Mustermann

Sachbearbeitung
Synodenbüro
Liebfrauenstraße 8
54290 Trier
0651 7105-XXX

Generalvikar

und zugeordnete Einheiten

Leitender Direktor

und zugeordnete Einheiten

Row 2 Spalten (6 - 6) [ab Bildschirmgröße LG]

sh_709000879

Diese Aufteilung ist vor allem dann sinnvoll, wenn Sie Fließtext in Kombination mit einem Bild haben. Bereits ab Tabletgröße springt die Darstellung auf eine Spalte. So wird das Feld für den Text nicht zu schmal.

Achten Sie darauf, bei den Layouteinstellungen anzugeben, dass der Text das Bild umfließen soll. 

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Bei einem Akkordeon ist in der Regel auch die Spaltenaufteilung ab Bildschirmgröße LG zu empfehlen, da sonst die Überschriften der einzelnen Reiter wegen der häufigen Zeilenumbrüche schlechter lesbar werden. Auch Fließtext unter den jeweiligen Reitern ist in dieser Darstellung angenehmer zu lesen. Generell sollten aber immer kurze Überschriften in den einzelnen Reiter gewählt werden; lange Überschriften sind in der Mobilversion unvorteilhaft.

Row 2 Spalten (6 - 6) [alle Bildschirmgrößen] - in seltenen Fällen

Diese Aufteilung sollte nur in sehr wenigen Ausnahmefällen gewählt werden, wenn die beiden Spalten auch auf dem Smartphone angezeigt werden sollen. Dies ist eventuell möglich, wenn es sich z. B. um eine Icon-Box oder eine Kachel mit nur einem Wort handelt. Für einen Text wie diesen ist es ein absolutes No-Go.  

Kontakt

Row 3 Spalten (4 - 4 - 4) [Ab Bildschirmgröße LG]

Wenn Sie drei Kontakte haben, können Sie die Spaltenaufteilung "3-3-3" verwenden und das Bild im Passbildformat anzeigen.

Günstig ist es, die Links (Telefon, E-Mail, Fax, Website) als Icon darzustellen (Zahnrädchen, "Stil des Labels"). So wird Platz gespart und es passt mit der meist langen E-Mail-Adresse besser.

Lächelnde Frau vor hellem Hintergrund

Martina Musterfrau

Leiterin
Synodenbüro
Liebfrauenstraße 8
54290 Trier
0651 7105-XXX
Portrait eines Mannes mit Brille vor hellem Hintergrund

Max Mustermann

Sachbearbeitung
Synodenbüro
Liebfrauenstraße 8
54290 Trier
0651 7105-XXX
Mann in einem Zimmer mit Möbeln

Niclas Nett

Bundesfreiwilligendienst
Synodenbüro
Liebfrauenstraße 8
54290 Trier
0651 7105-XXX

Alternative mit großen Bildern

Alternativ können Sie auch das Bild in den Einstellungen über die Überschrift setzen und das Bildformat auf 4:3 setzen. Dies eignet sich besonbders, wenn Sie die Bilder deutlich hervorheben möchten und auf der Seite ansonsten genügend Platz ist.

Lächelnde Frau vor hellem Hintergrund

Martina Musterfrau

Leiterin
Synodenbüro
Liebfrauenstraße 8
54290 Trier
0651 7105-XXX
Portrait eines Mannes mit Brille vor hellem Hintergrund

Max Mustermann

Sachbearbeitung
Synodenbüro
Liebfrauenstraße 8
54290 Trier
0651 7105-XXX
Mann in einem Zimmer mit Möbeln

Niclas Nett

Bundesfreiwilligendienst
Synodenbüro
Liebfrauenstraße 8
54290 Trier
0651 7105-XXX

Unser Style-Guide

So könnte eine Übersichtsseite aussehen

Fragen?

 Kontaktieren Sie uns gerne.

Row 2 Spalten (8 - 4) [ab Bildschirmgröße LG]

Diese Aufteilung eignet sich für die Darstellung von längerem Fließtext (gerne auch mit Bild) und gleichzeitig kurzen hilfreichen Informationen, wie z. B. Kontaktadressen, Öffnungszeiten, Links, Downloads, Hinweise etc.

Zugleich wird das Bild dadurch optisch aufgelockert. Bei den Kästen in der rechten Spalte können auch die verschiedenen Farben als Hintergrund genutzt werden.

Wenn die rechte Spalte noch schmaler sein kann oder soll, nutzen Sie die 9-3-Aufteilung. In jedem Fall sollte aus Layout-technischen Gründen vermieden werden, dass die rechte Spalte länger ist als die linke. Anders herum ist es allerdings kein Problem, d. h. die linke Spalte darf länger sein als die rechte. 

Eine Spaltenaufteilung in dieser Form ist freilich nur dann sinnvoll, wenn genügend Fließtext in der breiten Spalte vorhanden ist bzw. der Platz durch ein Bild gefüllt wird. Ansonsten können die Informationskästchen statt neben dem Text auch darunter dargestellt werden (z. B. Aufteilung 3 - 3 - 3 oder 4 - 4 - 4 - 4  bzw. 2 - 2). 

Etwas breiteres Akkordeon

Dieses Akkordeon liegt in einer Spaltenaufteilung von "8-4". Bitte legen Sie die Akkordeons nie in voller Breite an, da der Text sonst schlecht lesbar wird. Wenn Sie nichts haben, um den rechten Seitenbereich zu füllen, kann dieser auch leer bleiben - ab und zu Weißraum im rechten Seitenbereich schadet nicht und lockert die Seite etwas auf.

Öffnungszeiten

Dienstag, Mittwoch und Donnerstag

8:30 - 16:45 Uhr

Montag und Freitag geschlossen

Zur Terminvereinbarung nutzen Sie bitte unser Kontaktformular.

H3: Linkliste

Bei mehreren Links oder Downloads nutzen Sie am besten das Inhaltslement "Linksequenz". Sie können die H3 auch in der Themenfarbe verwenden, wenn Sie den Einstiegstext nutzen. Dies können Sie im Einstellungsrädchen abändern.

H3: Download

Row 2 Spalten (9 - 3) [ab Bildschirmgröße LG]

Ein kleines Mädchen mit einer Wollmütze umarmt einen Husky

Die Aufteilung 9 - 3 eignet sich für die Darstellung von längerem Fließtext und gleichzeitig kurzen hilfreichen Informationen, wie z. B. Kontaktadressen, Öffnungszeiten, Links, Downloads, Hinweise etc.

Zugleich wird das Bild durch die Kästchen in der rechten Spalte optisch aufgelockert. Hier können auch die verschiedenen Farben als Hintergrund genutzt werden.

Bitte beachten Sie, dass bei der 9-3-Aufteilung die rechte Spalte relativ schmal wird. Gegebenenfalls kann eine 8-4-Aufteilung günstiger sein. In jedem Fall sollte aus Layout-technischen Gründen vermieden werden, dass die rechte Spalte länger ist als die linke. Anders herum ist es allerdings kein Problem, d. h. die linke Spalte darf länger sein als die rechte. 

Eine Spaltenaufteilung in dieser Form ist freilich nur dann sinnvoll, wenn genügend Fließtext in der breiten Spalte vorhanden ist bzw. der Platz durch ein Bild gefüllt wird. Ansonsten können die Informationskästchen statt neben dem Text auch darunter nebeneinander dargestellt werden (z. B. Aufteilung 3 - 3 - 3 oder 4 - 4 - 4 - 4  bzw. 2 - 2)

Max Mustermann

Bischöfliches Generalvikariat
Mustorstraße 2
54290 Trier
0651 7105-xxx

H3: Download

Row 4 Spalten (3 - 3 - 3 - 3) [ab Bildschirmgröße LG]

Besonders für Bildkacheln oder andere Formen von verlinkten Kacheln eignet sich die Darstellung von vier Elementen nebeneinander. Auch Nachrichten-Verlinkungen (bzw. Lockvögel) sind gut als Vierer-Reihe darzustellen. 

1_Pfingsnovene_Hand_connect-4811173_final_by_congerdesign_pixabay_pfarrbriefservice

H3: Teaser mit Bild 16:9

Der Teaser verweist auf eine Unterseite. Hier wird der Inhalt der Seite in einem Satz beschrieben.

mehr Infos
melissa-askew-tSlvoSZK77c-unsplash

Gruppierungen

Zahlreiche Vereine, Organisationen und Gruppen prägen das bunte Leben im Pastoralen Raum XY.

mehr Infos
2021_11_08_shutterstock_321921797_Mystik

Beratung

Für Gespräche steht Ihnen ein engagiertes Team von Haupt- und Ehrenamtlichen zur Verfügung.

mehr Infos
Aufgeschlagenes Notenheft

Gottesdienstgestaltung

Beim Deutschen Liturgischen Institut finden Sie ein reichhaltiges Angebot an Materialien und Anregungen zur musikalischen oder inhaltlichen Gestaltung von Gottesdiensten.

mehr Infos

Bei Bildkacheln ist auch eine zweite Reihe darunter möglich; dann sollte aber nicht das quadratische, sondern ein flacheres Format (z. B. HDTV, Widescreen) gewählt werden, um vor allem auf der mobilen Darstellung nicht zu viel Platz pro Kachel einzunehmen. 

Bei zwei Reihen mit Bildkacheln ist es zu empfehlen, die zweite Reihe als neues Template-Element einzufügen. So bleibt auch in der mobilen Ansicht die Reihenfolge (erste Reihe, zweite Reihe) erhalten. Wird stattdessen die untere Kachel in das selbe Template-Element der Kachel darüber hinzugefügt, ändert sich in der mobilen Darstellung die Reihenfolge (erste Spalte, zweite Spalte...). 

Pastorale Räume

Pastorale Räume

© Benjamin Davies auf Unsplash
Angebote für Kinder

Angebote für Kinder

© CC0 1.0 - Public Domain (von unsplash.com)
Trauer

Trauer

© Rita Heyen
man sieht verschiedene Pfarrbriefe übereinander liegen

Pfarrbriefservice

© Christian Schmitt In: Pfarrbriefservice.de

Row 6 Spalten (2 - 2 - 2 - 2 - 2 - 2) [Ab Bildschirmgröße XL]

Die Aufteilung von sechs Container-Elementen nebeneinander ist vor allem für Übersichtsseiten relevant, in denen  man verschiedene Themen auflisten und auf andere Seiten verlinken möchte. Dann können beispielsweise sechs Bildkacheln nebeneinander auf Unterseiten oder externe Seiten verweisen. 

man sieht verschiedene Pfarrbriefe übereinander liegen

Pfarrbriefservice

© Christian Schmitt In: Pfarrbriefservice.de
Angebote für Kinder

Angebote für Kinder

© CC0 1.0 - Public Domain (von unsplash.com)
Trauer

Trauer

© Rita Heyen
Pastorale Räume

Pastorale Räume

© Benjamin Davies auf Unsplash
Eine Person steht auf einer Straße, die mit mehreren kryptischen Zeichen und Pfeilen bemalt ist

Anleitungen zu Typo 3

Man sieht ein blaues Fragezeichen auf einer rosafarbenen Fläche liegen

FAQ Pfarrbriefservice

Am obigen Beispiel können Sie sehen, dass

  • sich die 6 Kacheln nebeneinander nur eignen, wenn Sie als Text kurze Wörter haben. Trennstriche und dreizeilige Bezeichnungen sollten Sie vermeiden. 
  • als Motive für die Bildkacheln besser ruhige Bilder ausgewählt werden sollten, da durch die sechs Fotos nebeneinander ohnehin ein eher unruhiges Bild entsteht. Bei einfarbigen Kacheln (z. B. Icon-Boxen) oder den Icon-Kacheln des Bistums ist dieses Problem natürlich nicht gegeben.

Die Icon-Kacheln des Bistums stellen einen Sonderfall von verlinkten Kacheln dar. Sie sind auf der Startseite automatisch angelegt; davon können Sie löschen, was Sie ggf. nicht brauchen. Wenn sie zusätzlich auf einer anderen Seite Icon-Kacheln einsetzen möchten, wenden Sie sich bitte an den Support.  

Alternative: Row für Kachel-Elemente

Die Row für Kachel-Elemente ist eine elegante Alternative zu den Rows mit 4 bzw. 6 Spalten, wenn Sie (Bild-)Kacheln verwenden möchten. Sie hat den Vorteil, dass Sie eine Auswahl an Darstellungsmöglichkeiten in der mobilen Version haben. Diese können Sie über die Einstellungen im Template-Modus festlegen. 

Sie haben auch die Möglichkeit, im Nachhinein über die Einstellungen die Anzahl der Kacheln pro Reihe zu ändern.

Pastorale Räume

Pastorale Räume

© Benjamin Davies auf Unsplash
Angebote für Kinder

Angebote für Kinder

© CC0 1.0 - Public Domain (von unsplash.com)
Trauer

Trauer

© Rita Heyen
man sieht verschiedene Pfarrbriefe übereinander liegen

Pfarrbriefservice

© Christian Schmitt In: Pfarrbriefservice.de

Row 2 Spalten (3 - 9) [ab Bildschirmgröße LG]

Diese Aufteilung wird eher selten genutzt, kann aber dann eingesetzt werden, wenn die Aufmerksamkeit auf einem schmalen Element liegen soll, das dann durch Text und evtl. Bild ergänzt wird.

Wenn Sie nur Text und ein Bild haben, benutzen Sie allerdings bitte nicht zwei getrennte Container dafür, sondern integrieren Sie sie miteinander in einem Text-Bild-Element in voller Seitenbreite. Nur so kann der Text das Bild umfließen, was je nach Bildschirmgröße sinnvoll und optisch ansprechender ist. 

10. Sep. 2023:11:30Hl. Messe

Row 2 Spalten (4 - 8) [ab Bildschirmgröße LG]

Diese Aufteilung wird sehr selten genutzt. Sie kann dann eingesetzt werden, wenn Sie links ein Bild einfügen wollen, bei dem der Rahmen sichtbar sein soll. Dies kann bei Logos mit weißem Hintergrund oder beispielsweise bei Deckblättern von Broschüren mit viel Weiß sinnvoll sein.

Ansonsten integrieren Sie bitte bei Text und Bild normalerweise beides in ein Text-Bild-Element in voller Seitenbreite. Nur so kann der Text das Bild umfließen, was je nach Bildschirmgröße sinnvoll und optisch ansprechender ist. 

Man sieht einen farbigen Pfad. Darüber der Schriftzug Da sein. Für Mensch und Welt

Service

Muster für eine Übersichtseite

Muster für eine Inhaltsseite

Style-Möglichkeiten Fortgeschrittene

Unser Style-Guide

Fragen?

Kontaktieren Sie uns gerne.