Optimierter Layout-Builder. Übersicht über das Bootstrap Layout Builder Modul
Layout Builder ist eine komplexe Funktionalität, die, sobald sie installiert ist, möglicherweise nicht für jede Website geeignet ist. Sie kann jedoch angepasst werden, um für nahezu jede Website geeignet zu sein. Ein solches Verfahren mag kompliziert und kostspielig erscheinen. Glücklicherweise gibt es Module, die die Standardfunktionalität erweitern. In diesem Text schauen wir uns eines davon an - den Bootstrap Layout Builder, der darauf abzielt, den Layout Builder an die Besonderheiten von Bootstrap anzupassen.
Bootstrap Layout Builder - allgemeine Informationen
Das Drupal Bootstrap Layout Builder Modul fügt Unterstützung für responsive Grids und viele Verbesserungen der Benutzererfahrung hinzu. Es unterstützt die Bootstrap-Versionen 3 und 4 und ist bereit für Version 5. Darüber hinaus unterstützt das Modul seine Anpassung an andere Frameworks. Dies erfordert jedoch Zeit und ein gutes Verständnis der Besonderheiten des jeweiligen Frameworks.
Die Hauptfunktionen des Moduls umfassen:
- Unterstützung für mobile Geräte
- Möglichkeit zur Konfiguration von Abschnitten oder der Benutzeroberfläche des Layout Builders
- Möglichkeit, Bilder oder Videos als Hintergrund des Abschnitts festzulegen
- und viele erweiterte Einstellungen, die es ermöglichen, praktisch alles zu konfigurieren, was das Modul bietet.
Beliebtheit des Moduls
Das Bootstrap Layout Builder Modul wird von etwa 5500 Websites genutzt. Die überwiegende Mehrheit der Websites verwendet Version 2.0.x dieses Tools.
Quelle: Drupal.org
Autoren des Moduls
Der Hauptentwickler des Moduls ist Mahmoud Zayed (mahmoud-zayed), mit Aaron Christian (AaronChristian) ebenfalls als Betreuer aufgeführt. Zusätzlich wird das Modul von zwei Organisationen unterstützt: Dexalo, das das Modul entwickelt und unterstützt, und ImageX, das die Entwicklung des Moduls in Version 2.x teilweise unterstützt hat.
Installation des Moduls
Das Modul in Version 2.x definiert eine Abhängigkeit zu einem anderen Drupal Modul, Bootstrap Styles. Durch die Auswahl von Composer werden alle notwendigen Bibliotheken und Module automatisch installiert. Aus diesem Grund empfehlen wir die Installation mit diesem Tool, indem Sie den Befehl verwenden:
$ composer require drupal/bootstrap_layout_builderBerechtigungen
Das Modul bietet eine neue Berechtigung - Bootstrap Layout Builder konfigurieren. Das Erteilen dieser Berechtigung erlaubt vollen Zugriff auf das Konfigurationsformular des Moduls. Daher sollte diese Berechtigung nur vertrauenswürdigen Rollen zugewiesen werden.
Konfiguration des Bootstrap Layout Builder Moduls
Wir haben das Modul bereits installiert und Berechtigungen zugewiesen. Der nächste Schritt ist die Konfiguration. Unter dem Pfad
/admin/config/bootstrap-layout-builder/breakpoints
finden Sie alle Konfigurationsoptionen, die in 4 Abschnitte unterteilt sind: Breakpoints, Layouts, Styles und Einstellungen.
Konfiguration von Breakpoints
Mit der Installation des Moduls erhalten wir 3 vordefinierte Breakpoints. Um einen neuen Breakpoint hinzuzufügen, müssen wir ihm einen Namen geben und eine Basisklasse angeben. Jeder vorhandene Breakpoint hat auch eine Flagge, die es ermöglicht, ihn zu aktivieren oder zu deaktivieren.
Die Liste der Breakpoints wird später in den Layout Builder Layouts verwendet, um das Erscheinungsbild der Abschnitte bei unterschiedlichen Browserbreiten zu ändern.
Konfiguration der Layouts
In diesem Tab finden Sie eine Liste aller von dem Bootstrap Layout Builder Modul definierten Layouts. Hier können wir eines dieser Layouts umbenennen und eine Liste ihrer Optionen definieren. Die Layout-Option ist in diesem Fall ein String aus numerischen Werten, der angibt, wie viele Spalten ein Abschnitt einnehmen soll. Wenn wir beispielsweise den Wert 6 6 mit zwölf Spalten im Grid für das Bootstrap 2 Cols Layout angeben, werden der erste und der zweite Abschnitt die gleiche Breite haben. Wenn wir den Wert 9 3 verwenden, nimmt der erste Abschnitt 75% der Breite ein und der zweite Abschnitt 25%. Wir können jede Layout-Option für jeden Breakpoint aktivieren oder deaktivieren.
Konfiguration der Styles
Dieser Tab ist verantwortlich für das Aktivieren und Deaktivieren der Fähigkeit zur Konfiguration von Parametern, die zusätzliche Styles für Abschnitte bieten.
Konfiguration im Bootstrap Layout Builder Einstellungen Tab
Hier können wir eine globale Klasse definieren, die in einem Layout verwendet wird, das nur einen Abschnitt enthält. Zusätzlich können wir die Anzeige von erweiterten Einstellungen beim Erstellen und Konfigurieren von Layouts aktivieren oder deaktivieren.
Wie erstellt man ein benutzerdefiniertes Layout mit dem Bootstrap Layout Builder?
Nach der Konfiguration des Bootstrap Layout Builders ist es an der Zeit, das Layout zu erstellen. Die Schritte und Optionen sehen für jedes vom Modul hinzugefügte Layout gleich aus. Wir werden alles an einem Beispiel eines der nach der Installation des Moduls verfügbaren Layouts illustrieren - Bootstrap 3 Cols.
Konfiguration des Layouts
Beim Hinzufügen eines neuen Abschnitts kann zunächst der Containertyp festgelegt werden. Standardmäßig können wir aus drei Optionen wählen - Boxed, Full und Edge to Edge. Als Nächstes können wir entscheiden, ob wir Rinnen für diesen Abschnitt verwenden möchten oder nicht. Der nächste Schritt besteht darin, zu wählen, welchen Prozentsatz eine bestimmte Spalte bei einem bestimmten Breakpoint einnehmen soll.
Konfiguration der Styles
In diesem Tab können wir den Abschnittshintergrund, die Textfarbe und Ausrichtung, Ränder und Polsterungen, den Rand, den Radius des Randes oder den Typ der Animation beim Scrollen auswählen.
Auswahl der Farben des Abschnittshintergrunds und des Textes.
Festlegen von Rändern und Polsterungen.
Anpassen der Rand-Einstellungen für einen Abschnitt.
Eine breite Auswahl an Scroll-Effekten.
Konfiguration der Abschnitteinstellungen
Im dritten und letzten Tab finden wir Optionen, um den Abschnittstitel zu ändern. Hier können wir auch Klassen und Attribute für den Container, die Zeilen und die Spalten festlegen. Wir sollten Attribute im YAML-Format bereitstellen.
Bootstrap Layout Builder - Zusammenfassung
Das Bootstrap Layout Builder Modul erweitert die Funktionen des Layout Builders erheblich. Die Flexibilität dieses Moduls ist ein erheblicher Vorteil. Wenn Ihre Unternehmenswebsite auf Drupal Bootstrap oder ein anderes ähnliches Framework verwendet und Sie die Freiheit gewinnen möchten, die Layout Builder bietet, wird die Nutzung des Bootstrap Layout Builder Moduls ein guter Schritt sein.
