Beispielseite

Beispiele für die Inhalte und Elemente der Website.

Überschrift H2

Die Überschrift wird in der Regel als Abschnittüberschrift genommen.

Überschrift H3

Zwischenüberschrift

Überschrift h4

Zwischenüberschrift innerhalb einer Zwischenüberschrift.

Aus Design-technischen Gründen kann es notwendig sein, den visuellen Stil unabhängig der eigentlichen Überschriften-Struktur zu setzen:

Überschrift H2, sieht aber aus wie H3

Dafür kann man in der rechten Menu-Leiste unter “Block” -> “Erweitert” eine zusätzlich “CSS-Klasse” mit geben:

Entsprechend auch

Überschrift H3, sieht aus wie H4

und es geht so auch,

einen Absatz im Look einer Überschrift

zu gestalten, oder eine

Überschrift H4, die aussieht, wie eine H2

Bei manchen (Unter)Seiten ist es nicht gewünscht, dass der Seitentitel ausgegeben wird, da diese Unterseiten ja als Inhaltsabschnitte der übergeordneten Seite auftauchen, und es da ggf. zu unnötigen Wiederholungen kommen kann. Sowird z.B. auf der Seite “Aufgaben und Ziele”, die als erster Abschnitt der eigentlich leeren “Über uns” Seite ausgegeben wird, der Titel ausgeblendet, und startet stattdessen direkt mit dem Abschnittsüberschrift “Träume brauchen Räume”, die, wie im vorigen Abschnitt gezeigt, visuell als Überschrift H4 daher kommt, intern aber eine H3 ist.

Eine Seite muss aber immer einen Seitentitel haben, einen leeren Titel akzepiert WordPress nicht, weil darüber u.a. auch die URLs gebildet werden. Um den Titel auszublenden, gibt es unten an einer Seite unter “Meta-Boxen” -> “Individuelle Felder” ein “hide_title”. Mit dem Wert “true” wird der Titel ausgeblendet.

Manche Elemente benötigen eine bestimmte Gruppierung und/oder CSS-Klassen, damit sie im gewünschten Design erscheinen. Dazu gehören z.B.:

• Die Link-Elemente bei Partnerprogramm und bei Links – “/link-item”
• Die zurückliegende Veranstaltungen-Elemente bei Events – “/event-item”
• Die Meta-Angaben bei Aktuelles (“Karlsruhe, 03.03.25”) – “/meta”
• Die Zitate-Slider oben auf manchen Seiten – “/hero-slide”

Für diese Elemente gibt es Vorlagen, die mit Eingabe eines “/” und dann tippen des Namens eingesetzt werden können:

“/even-item”

Seiten im Frontend der Website haben keine Unterseiten, sondern die Inhalte der Unterseiten werden als Abschnitte der übergeordneten Seite angezeigt, die über die Navigationspunkte “angespungen” werden (die Seite scrollt dann an die Position).

(“Hero”Bilder)

Ein Bild, was an einer Seite in der rechten Spalte, “Seite” -> “Beitragsbild festlegen” angegeben wird, erscheint als “Hero” Bild oben im Frontend der Website:

Die Größe des Bildes (die Höhe) wird über ein weiteres “Individuelles Feld” unten an der Seite im Bereich “Meta-Boxen” gesteuert (“hero_size”):

Mögliche Werte: “small” und “medium”. Wenn kein Wert angeben wird, ist das “Hero” Bild am höhesten.

Hero-Bilder mit Zitaten

werden anders gepflegt: Dafür gibt es die erwähnte Vorlage “/hero-slider”, diese wird sinnvollerweise am Anfang einer Seite als Inhalt gesetzt, auch wenn es im Frontend dann getrennt vom Inhalt ausgegeben wird.

Auch hier kann mit “Indiviuelle Felder” -> “hero_size” auf die Größe/Höhe Einfluss genommen werden

Hinweis: Diese “Hero”-Bilder sind gestalterisch ausgewählt und sollten nur nach Absprache geändert werden. Vorgabe für diese Bilder: 3600px Breite für den Upload.

Für Bilder, die im Inhalt verwendet werden, reicht 1200-2400px Breite. WordPress erstellt beim Upload Größenvarianten und diese werden fürs Frontend angeboten, sodass die möglichst optimale Bildgröße für die jeweilige Darstellungsgröße verwendet wird.

Für Bilder gibt es den “/Bild” für einzelne Bilder oder den “/Galerie” Block für eine Gruppe von Bildern (Links führen zur Dokumentation bei WordPress). Wenn man die Bilder in der Galerie auf Klick vergrössert zeigen möchte, dann das Bild mit “Link zur Bilddatei” verlinken.
Hinweis: NICHT das “Vergrößern bei Klick” verwenden – das würde auf den ersten Blick auch gehen, macht aber wirklich nur jedes Bild einzeln vergrößert auf, ohne die Möglichkeit, in der Vergrößerung dann durch die Bilder links/rechts durchzugehen.

Bilder bei “Downloads”

Die Übersichts-Bilder bei Downloads sind auch mit dem “/Galerie” Block gemacht, allerdings haben diese Galerien eine eigene CSS-Klasse “thumbnails”, die dafür sorgt, dass die Bilder klein und gleichmässig erscheinen:

Die Verlinkung zu den Download-Dateien erfolgt in den Bild-Untertiteln.

Die Unterseite “Mitgliedsunternehmen” wird mit einem sog. “Shortcode” verwaltet.

Als Datengrundlage dient eine CSV-Datei, die in die Mediathek hochgeladen wurde.

Im Shortcode kann angegeben werden, welche CSV Datei als Quelle dient, sowie Optionen, nach was die Liste sortiert erscheint.

Die CSV kann in MS Excel oder LibreOffice Calc geöffnet werden und nachdem Ergänzungen oder Änderungen gemacht wurden, wieder als CSV gespeichert und dann neu hochgeladen werden.

Wichtig ist allerdings, dass die Reihenfolge der Spalten beibehalten wird.

Titel / Strasse / Plz / Ort / Tel / Inhalt / Gründung / Wohnungen / Einheiten / Mitglieder

Falls neue Spalten dazukommen oder sich dort was ändern soll, bitte BNT.DE Bescheid sagen, da dann auch Änderungen am PHP-Code des Shortcodes nötig sind.

Einträge unter “Aktuelles” werden als “Beiträge” in WordPress gepflegt. Die Unterscheidung, ob es Siedlungswerk- oder Mitgliedunternehmen-News sind, wird über die Beitrags-Kategorie gesteuert.

Für das Bild, das in der Übersicht angezeigt wird, wird das “Beitragsbild” genommen. In der Einzelansicht des Beitrags wird dieses Bild momentan nicht ausgegeben, um eine größere Flexibilität in Hinsicht, wo man das Bild erscheinen lassen möchte zu geben. Das Bild muss also noch einmal mittels des “/Bild” Blocks eingesetzt werden.

Für die Angabe “Karlsruhe, 1.1.2026” bitte die Vorlage “/meta” benutzen.

Für den Text der Übersicht wird der erste Absatz-Textblock genommen und ggf. gekürzt. Alternativ kann mit “Textauszug” in der rechten Spalte unterhalb des “Beitragsbildes” ein gesonderter Text für die Übersicht angeben werden.