Kopfbereich: Logo
Kopfbereich: Suchfeld
Kopfbereich: Menü
Startseite Header-Bild
Startseite Inhalts-Block
Startseite neue Bücher
Startseite Verkauf Bücher
Bücher: Tabelle

Veranstaltungen nächster Termin
Kundenstimmen / Leserstimmen
Fußbereich
Blog Übersicht
Blog Detail
Veranstaltung Umkreissuche
Veranstaltung Kalender

Um die wichtigsten Funktionen unseres Drupal-Pakets mit Layout-Blöcken zu demonstrieren, haben wir eine Demo-Webseite speziell für Autoren erstellt.

Die dort gezeigten Funktionen lassen sich problemlos auf andere Branchen übertragen.
Statt Büchern könnten ebenso gut Dienstleistungen, Produkte oder Referenzen präsentiert werden.

Layout-Blöcke mit maximaler Flexibilität

Kern des Systems sind die Layout-Blöcke, basierend auf dem Modul Layout Paragraphs und dem Theme Bootstrap.
Sie ermöglichen ein flexibles Spalten-Layout und bieten zahlreiche vorgefertigte Inhaltsbausteine, die Redakteure:

• ohne Programmierkenntnisse befüllen,
• in Spalten anordnen,
• farblich gestalten und
• frei verschieben können.

Alle Inhaltselemente sind so angelegt, dass sie sich intuitiv bedienen und jederzeit erweitern lassen.

Die Demo zeigt eine Variante mit einem einfach gehaltenen Logo, das lediglich aus einem typografisch abgesetzten Schriftzug besteht.

Selbstverständlich kann an dieser Stelle jedes gelieferte Firmenlogo eingebunden werden.
Alternativ kann auch bewusst auf ein Logo verzichtet werden – in diesem Fall lässt sich der Firmenname zusammen mit einem Slogan oder Claim eintragen.

Die Platzierung des Logos oder Namens erfolgt oben links und entspricht damit der Erwartung vieler Besucher auf der Suche nach visueller Orientierung.

Die Demo-Webseite enthält ein Suchfeld mit Autovervollständigung (Autocomplete-Funktion).

Sobald ein Besucher eine Zeichenfolge eingibt, wird im Hintergrund eine Suche gestartet. Dabei werden passende Seitentitel durchsucht und direkt als Vorschläge angezeigt.

Die Trefferanzeige ist auf maximal zehn Ergebnisse begrenzt, ein weiterführender Link zeigt eine Seite mit allen Suchergebnissen.

Die Demo zeigt ein einfaches Dropdown-Menü mit einer Unterebene.

Die Demoseite verwendet eine Auswahl an Social Media Icons von Fontawesome.
Diese Icons können wie Schriften beliebig in der Größe verändert werden, ohne unscharf zu werden.
 

Das Headerbild auf der Demo-Webseite wird bildschirmfüllend bis zu einer Auflösung von 1920 px dargestellt.
Auf größeren Bildschirmen bleibt die Darstellung zentriert, sodass das Bild nicht verzerrt wird.

Ein weißer Textblock mit optionalen Buttons kann von Redakteuren frei mit Inhalten befüllt werden.
Die Ausrichtung dieses Textbereichs  – etwa linksbündig, zentriert oder rechts unten – wird von uns individuell an den Kundenwunsch angepasst.

Alternativ zum statischen Headerbild lassen sich an dieser Stelle auch mehrere Bilder in einem Karussell (Slider) darstellen, die automatisch oder manuell durchwechseln.

Dieser Textblock ist zweispaltig aufgebaut, besitzt keine Hintergrundfarbe und nimmt drei Viertel des Inhaltsbereichs ein.

Unterhalb des Texts wurde ein Inhaltselement „Button“ eingefügt.

Der Button kann flexibel angepasst werden:

• Ausrichtung: z. B. linksbündig, zentriert oder rechts

• Farbe: Auswahl aus dem vordefinierten Farbpool

• Verlinkung: zu einer internen Seite innerhalb der Website oder auf eine externe Adresse

An dieser Stelle befindet sich eine sogenannte View, die automatisch die drei zuletzt veröffentlichten Bücher anzeigt.

Sobald Autoren ein neues Buch anlegen (stellvertretend auch für ein Produkt oder eine Dienstleistung), wird es automatisch an erster Stelle dieser Ansicht ausgegeben – ganz ohne manuelle Anpassung.

Unterhalb der Buchanzeige befindet sich ein Button, der auf die Übersichtsseite aller Bücher verweist.

Der gesamte Contentbereich wurde so gestaltet, dass er etwas breiter erscheint, weil die Einstellung „Ganze Breite“  gewählt wurde.

Tabellen im Textfeld – mobil optimiert

Das Inhaltselement Textfeld erlaubt auch das Einfügen von Tabellen mit beliebiger Spalten- und Zeilenanzahl.

Da Tabellen auf Smartphones oft nicht gut lesbar sind, verwenden wir ein spezielles Modul zur mobilfreundlichen Darstellung:

• Die Begriffe aus der Tabellenüberschrift werden automatisch als Labels verwendet.
• Die einzelnen Spalteninhalte werden untereinander dargestellt – jeweils mit dem zugehörigen Label vorangestellt.

So bleibt auch auf kleineren Bildschirmen die Lesbarkeit und Struktur der Inhalte erhalten.

Zweispaltiger Layout-Block mit Terminübersicht

In diesem zweispaltigen Layout-Block befindet sich auf der rechten Seite ein individuell eingetragener Text.

Auf der linken Seite wurde eine View eingebunden, die automatisch den nächsten anstehenden Termin anzeigt.

Unterhalb dieser Ansicht befinden sich zwei Buttons:

• Ein Button führt zur Übersichtsseite aller Termine.
• Ein weiterer Button öffnet die Kartenansicht, auf der alle Termine geografisch dargestellt sind.

Kundenstimmen im Karussell anzeigen

Für das Sammeln und Anzeigen von Kundenstimmen steht ein eigener Inhaltstyp zur Verfügung.

Die Ausgabe erfolgt automatisch über eine View, die jeweils vier aktuelle Einträge anzeigt. Nach einer bestimmten Zeit werden automatisch die nächsten vier Einträge eingeblendet.

Zun Navigieren stehen Vor- und Zurück-Buttons zur Verfügung.

Jeder Eintrag besteht aus:

• Titel
• einem kurzen Text der Kundin oder des Kunden
• einer Sterne-Bewertung (optional)

Footer Block auf jeder Unterseite

Dieser Bereich wird automatisch auf jeder Unterseite der Demo-Webseite angezeigt.

Unser Drupal-Paket stellt dafür einen benutzerdefinierten Block zur Verfügung, der von Redakteuren mit denselben Inhaltselementen befüllt und formatiert werden kann, wie alle anderen Layout-Blöcke.

Im gezeigten Beispiel befindet sich in diesem Bereich ein zusätzliches Menü, das auf wichtige Seiten verweist – zum Beispiel auf:

• das Impressum
• die Datenschutzerklärung
• weitere rechtlich relevante oder häufig besuchte Inhalte

Blog-Übersicht mit Filterfunktion

In unserem Drupal-Paket ist eine vorgefertigte View enthalten, die alle Blog-Artikel absteigend nach Erscheinungsdatum anzeigt.

Auf der Demo-Webseite steht zusätzlich ein Filter zur Verfügung, mit dem sich Blog-Beiträge nach bestimmten Themen selektieren lassen.

Die Blog-Übersicht enthält für jeden Beitrag folgende Informationen:

• ein Beitragsbild
• Name des Autors bzw. der Autorin
• Datum der Veröffentlichung
• zugeordnetes Thema
• ein Anrisstext
• ein Weiter-Link zur Detailansicht

Einzeldarstellung eines Blog-Artikels

Auf der Demo-Webseite wird das Vorschaubild eines Blog-Artikels beispielhaft als schmales Header-Bild oberhalb des Textes dargestellt.

Direkt darunter folgen die Angaben zum:

• Autor
• Datum der Veröffentlichung
• zugeordneten Thema

Unterhalb des eigentlichen Artikels befinden sich mehrere Buttons:

• zur PDF-Generierung
• zum Teilen auf Social Media Plattformen
• zur Rückkehr auf die Übersichtsseite

Zwischen dem Artikeltext und diesen Buttons befindet sich zusätzlich eine Navigationsleiste, mit der Leser:innen bequem zum vorherigen oder nächsten Blog-Beitrag blättern können.

Die PDF-Ansicht ist auf der Demo-Webseite in einer einfachen Standardversion gehalten, ohne gestalterische Anpassungen.

Adressen-Modul mit Umkreissuche

Auf der Demo-Webseite ist das Adressen-Modul installiert. Es ermöglicht, bei beliebigen Inhaltstypen Adressfelder hinzuzufügen.

Anhand der eingegebenen Adresse werden automatisch Geokoordinaten ermittelt. Diese dienen als Grundlage für eine Umkreissuche nach:

• Postleitzahl oder Ort
• gewünschter Entfernung (z. B. 10, 50 oder 100 km)

Der integrierte Filter bietet zusätzlich die Möglichkeit, gezielt nach Online-Veranstaltungen zu suchen – in diesem Fall entfällt die Umkreissuche.

Ebenfalls möglich ist die Filterung nach dem Thema der Veranstaltung.

Kalenderansicht mit interaktiven Veranstaltungstiteln

Die Kalenderansicht auf der Demo-Webseite zeigt ein Beispiel von mehreren möglichen Darstellungsvarianten für Veranstaltungen.

Veranstaltungstitel, die im Kalender angeschnitten dargestellt sind, werden bei Mauskontakt automatisch vollständig ausgeklappt, sodass alle Informationen sichtbar werden.