Dokumentation für Montviso Layout-Blöcke
Inhaltsangabe
Allgemeiner Spaltenaufbau im Layout-Block
Der Layout Builder ist in Drupal ein spezieller Feldtyp, der einem Inhaltstyp – z. B. einfache Seite, Blog, Team, Referenz usw. – hinzugefügt werden kann.
Er ist in ein Theme integriert, das auf dem bewährten Framework Bootstrap basiert. Dieses orientiert sich am klassischen 12-Spalten-Raster, wie es viele Entwickler aus modernen Frontend-Frameworks kennen.
Inhalte können somit flexibel Breiten von 1/12 bis 12/12 (volle Seitenbreite) einnehmen.
Typische Spalten-Layouts sind beispielsweise:
3/12 und 3/12 und 3/12 und 3/12
4/12 und 4/12 und 4/12
6/12 und 6/12
5/12 und 7/12
4/12 und 8/12
Viele weitere Spaltenanordnungen sind denkbar.
Redakteure können:
beliebig viele Layout-Blöcke hinzufügen
die Layout-Blöcke frei in der Reihenfolge verschieben
die einzelnen Blöcke mit unterschiedlichem Inhalt befüllen
Inhalte innerhalb der Blöcke individuell formatieren
Wenn ein neuer Layout-Block hinzugefügt wird, stehen folgende Optionen zur Verfügung:
Spalten-Layout wählen:
Es sind 1 bis 5 Spalten möglich – von einspaltig bis fünfspaltig.CSS-ID vergeben:
Ein eindeutiger Bezeichner für den Layout-Block, der pro Seite nur einmal vorkommen sollte.
Diese ID kann für gezielte, abweichende Formatierungen per CSS verwendet werden.Hintergrundfarbe festlegen:
Die Hintergrundfarbe kann aus einem vordefinierten Farbpool mit neun CI-konformen Farben gewählt werden.
Dieser Farbpool wird im Vorfeld individuell mit Ihnen abgestimmt.Breite des Layout-Blocks:
Der gesamte Block kann eine Breite von 1/12 bis 12/12 einnehmen – also von schmaler Teaserkachel bis zur vollen Seitenbreite.Spaltenbreiten definieren:
Je nach gewähltem Spalten-Layout erscheinen 1 bis 5 Eingabefelder zur Festlegung der Spaltenbreiten.
Jede Spalte kann zwischen 1/12 und 12/12 Breite erhalten. Die Summe aller Spalten muss genau 12 ergeben, um ein harmonisches Layout zu gewährleisten.
Erst, wenn die Summe stimmt, wird der „Speichern“-Button freigeschaltet.
Ersten Layout-Block einer Seite anlegen
Wird eine neue einfache Seite angelegt oder ein neuer Blogbeitrag erzeugt, dann ist noch kein Layout-Block vorhanden.
Ein neuer Layout-Block wird mit Klick auf dieses Element angelegt:
Leerer Layout-Block
Dies ist ein Beispiel für einen leeren Layout-Block ohne Hintergrundfarbe, der zwei Drittel der Seitenbreite einnimmt und eine einzelne Spalte enthält.
Ein solcher Layout-Block dient als Container, der grundsätzlich aus drei Bereichen besteht:
Kopfbereich (Header)
Inhaltsbereich (Content)
Fußbereich (Footer)
Der Kopf- und Fußbereich erstreckt sich stets über die gesamte Breite des Layout-Blocks – unabhängig von der gewählten Spaltenanzahl.
Die ausgewählte Spaltenanzahl bezieht sich ausschließlich auf den Inhaltsbereich.
Diese Struktur wird gezielt genutzt, wenn zum Beispiel ein dreispaltiger Inhaltsbereich eine überschriftliche Einleitung erhalten soll, die sich über alle Spalten erstreckt.
Gleiches gilt für abschließende Hinweise oder Texte im Fußbereich.
In allen drei Bereichen – Kopf, Inhalt und Fuß – können Redakteure beliebige Inhaltselemente hinzufügen.
Layout-Elemente
Redakteure Layout-Element "Abstand"
Die Voreinstellungen sind so gewählt, dass automatisch Abstände vor dem ersten Layout-Block (außer beim Headerbild) und nach dem letzten Layout-Block eingefügt werden.
Zwischen den Layout-Blöcken hingegen wird standardmäßig kein Abstand gesetzt – da dies je nach Design und Aufbau nicht immer gewünscht ist.
Hier liegt es in der Verantwortung der Redakteure, bei Bedarf ein Layout-Element „Abstand“ einzufügen.
Bei diesem Element stehen verschiedene vordefinierte Werte zur Auswahl.
Mehrere Abstandselemente lassen sich miteinander kombinieren:
Beispielsweise ergeben die Werte 30 + 50 erwartungsgemäß einen Gesamtabstand von 80 Pixeln.
Im Interesse eines einheitlichen Erscheinungsbilds sollten Abstände innerhalb einer Website konsistent gewählt werden – idealerweise auf Basis eines gemeinsam definierten Designrasters.
Layout-Element "Bild"
Beim Einfügen eines Bildes kann dessen Position gewählt werden – links, zentriert oder rechts.
Zudem kann optional eine Rahmenfarbe aus dem vordefinierten CI-Farbpool ausgewählt werden.
Für jedes Bild stehen zwei Textfelder zur Verfügung:
ALT-Text – wichtig für die Barrierefreiheit
Titel – hilfreich für die Suchmaschinenoptimierung (SEO)
Wird ein Bild hochgeladen, das breiter als die zugewiesene Spalte ist, wird es automatisch auf die Spaltenbreite skaliert.
Per Klick auf das Bild kann es vom Website-Besucher vergrößert werden – dabei wird es maximal auf seine Originalgröße oder die Bildschirmbreite erweitert.
Layout-Element "Headerbild" mit optionalem Text und Button
Das Headerbild wird in der Regel im ersten Layout-Block einer Seite eingefügt und erhält automatisch keinen oberen Abstand.
Damit es die volle Bildschirmbreite einnimmt, muss der Layout-Block sowohl bei „Breite des Inhalts“ als auch bei „Spaltenbreite“ auf 12/12 gesetzt werden.
Optional können innerhalb des Blocks ergänzt werden:
ein Textfeld, z. B. mit Überschrift oder Teasertext
ein oder mehrere Buttons mit weiterführenden Links
Ein Beispiel für diese Funktionalität finden Sie auf unserer Demo-Webseite für Autor:innen – ganz oben auf der Startseite.
Dieser Block benötigt in der Regel eine CSS-ID mit deren Hilfe die Platzierung des Textes und der Button individuell gestylt werden kann.
Layout-Element "Button"
Mit diesem Layout-Element können ein oder mehrere Buttons erstellt und eingebunden werden.
In der Eingabemaske stehen folgende Optionen zur Verfügung:
Ausrichtung der Buttons:
Die Buttons können links, zentriert oder rechts ausgerichtet werden.Hintergrundfarbe:
Die Farbe kann aus dem vordefinierten Farbpool ausgewählt werden, der im Vorfeld auf Basis Ihrer Corporate Identity festgelegt wurde.
Optional kann dem Button eine CSS-ID zugewiesen werden.
Damit ist eine individuelle Gestaltung per CSS möglich – z. B. besondere Abstände, Schriftarten oder Hover-Effekte.
Layout-Element "Kontaktformular"
In diesem Layout-Element können vorgefertigte Formulare ausgewählt und eingebunden werden.
Die zur Verfügung stehenden Formulare werden in der Auswahlmaske automatisch angezeigt.
Auf der Demo-Webseite für Autor:innen stehen beispielsweise folgende Formulare zur Verfügung:
ein klassisches Kontaktformular
ein Formular zur Anmeldung bei einer Veranstaltung
Nach Auswahl des gewünschten Formulars sind keine weiteren Einstellungen notwendig – das Formular wird automatisch korrekt eingebunden und angezeigt.
Layout-Element "Link"
In diesem Layout-Element kann ein einzelner Hyperlink eingefügt werden.
Das URL-Feld bietet drei Möglichkeiten der Eingabe:
Externer Link:
Tragen Sie die vollständige URL inklusive Protokoll ein – also z. B.https://www.beispielseite.de.
Wichtig: Das Protokoll (http://oderhttps://) ist zwingend erforderlich.Interner Link über Autovervollständigung:
Beginnen Sie mit der Eingabe des Seitentitels (z. B. „Kontakt“).
Es erscheinen automatisch passende Seitenvorschläge zur Auswahl.Direkteingabe eines internen Pfads:
Geben Sie den relativen Pfad ein – z. B./kontaktoder/blog/aktuelles.
Diese Variante ist besonders bei komplexeren Seitenstrukturen hilfreich.
Verhalten beim Klick:
Standardmäßig öffnen sich alle Links im gleichen Fenster.
Durch eine systemseitige Einstellung haben wir dafür gesorgt, dass externe Links automatisch in einem neuen Browser-Tab geöffnet werden. In neueren Versionen kann der Benutzer wählen, welches Ziel der Link ansteuert.
Layout-Element „Textfeld“
Dieses Layout-Element erlaubt es, Text einzugeben und zu formatieren – direkt im integrierten WYSIWYG-Editor.
Mögliche Formatierungen:
Fettschrift, Kursivschrift
Ausrichtung: linksbündig, zentriert, rechtsbündig
Verlinkungen (intern und extern)
Aufzählungen: mit Punkten oder Zahlen
Einfügen von Tabellen, Bildern, Trennstrichen
Überschriften in verschiedenen Ebenen
Auf Wunsch können zusätzliche Editor-Buttons aktiviert werden, z. B. zur Formatvorlagen, für bestimmte Icons oder Quelltextansicht.
Layout-Element: "View"
Einer der großen Vorteile von Drupal ist das leistungsstarke Werkzeug Views.
Damit lassen sich Reports und strukturierte Übersichten über Inhalte erstellen – mit individuell einstellbaren Feldern, Sortierungen und Filtern.
Das ist ideal für:
Produktkataloge
Blogübersichten
Veranstaltungskalender
u. v. m.
Wir haben mehrere dieser Views vorbereitet. Über das Layout-Element „View“ können Sie aus den freigegebenen Varianten die gewünschte Ansicht auswählen.
Beispiele für den Einsatz auf der Demo-Seite für Autoren:
Anzeige ausgewählter Bücher auf der Startseite
Ausgabe der fünf neuesten Blogartikel
Darstellung kommender Veranstaltungstermine
Hinweis: In den meisten Fällen empfiehlt sich vorab eine kurze Klärung des gewünschten Einsatzbereichs. Danach sind den Möglichkeiten praktisch keine Grenzen gesetzt – Inhalte können auf vielfältige Weise automatisiert und dynamisch eingebunden werden.