Constructeur de mise en page simplifié. Aperçu du module de création de mise en page Bootstrap.
Layout Builder est une fonctionnalité complexe qui, dès son installation, peut ne pas convenir à tous les sites web. Cependant, elle peut être personnalisée pour fonctionner correctement sur presque tous les sites. Une telle procédure peut sembler compliquée et coûteuse. Heureusement, il existe des modules disponibles pour étendre la fonctionnalité standard. Dans ce texte, nous allons en examiner un - le Bootstrap Layout Builder qui vise à adapter le Layout Builder aux spécificités de Bootstrap.
Bootstrap Layout Builder - informations générales
Le module Drupal Bootstrap Layout Builder ajoute la prise en charge des grilles réactives et de nombreuses améliorations UX. Il prend en charge les versions Bootstrap 3 et 4 et est prêt pour la version 5. De plus, le module permet son adaptation à d'autres frameworks. Cependant, cela nécessite du temps et une bonne compréhension des spécificités du framework en question.
Les principales fonctionnalités du module incluent :
- prise en charge des appareils mobiles,
- possibilité de configurer les sections ou l'interface du Layout Builder,
- possibilité de définir des images ou des vidéos comme arrière-plan de la section,
- et de nombreux paramètres avancés, permettant de configurer pratiquement tout ce que le module propose.
Popularité du module
Le module Bootstrap Layout Builder est utilisé par environ 5500 sites web. La grande majorité des sites utilisent la version 2.0.x de cet outil.
Source : Drupal.org
Auteurs du module
Le développeur principal du module est Mahmoud Zayed (mahmoud-zayed), avec Aaron Christian (AaronChristian) également répertorié en tant que mainteneur. De plus, le module est soutenu par deux organisations : Dexalo, qui développe et soutient le module, et ImageX, qui a partiellement soutenu le développement du module en version 2.x.
Installation du module
Le module en version 2.x définit une dépendance à un autre module Drupal, Bootstrap Styles. En sélectionnant Composer, toutes les bibliothèques et modules nécessaires seront installés automatiquement. Pour cette raison, nous recommandons l'installation avec cet outil, en utilisant la commande :
$ composer require drupal/bootstrap_layout_builderPermissions
Le module fournit une nouvelle permission unique - Configurer le Bootstrap Layout Builder. Accorder cette permission permet un accès complet au formulaire de configuration du module. Par conséquent, cette permission ne devrait être accordée qu'aux rôles de confiance.
Configuration du module Bootstrap Layout Builder
Nous avons déjà installé le module et attribué les permissions. La prochaine étape est de le configurer. Sous le chemin
/admin/config/bootstrap-layout-builder/breakpoints
nous trouverons toutes les options de configuration, divisées en 4 sections : Breakpoints, Layouts, Styles, et Paramètres.
Configuration des Breakpoints
Avec l'installation du module, nous recevons 3 breakpoints prédéfinis. Pour ajouter un nouveau breakpoint, nous devons lui donner un nom et spécifier une classe de base. Chaque breakpoint existant a également un drapeau, permettant de l'activer ou de le désactiver.
La liste des breakpoints est ensuite utilisée dans les mises en page du Layout Builder pour modifier l'apparence des sections à différentes largeurs de navigateur.
Configuration des Layouts
Dans cet onglet, nous trouverons une liste de toutes les mises en page définies par le module Bootstrap Layout Builder. Ici, nous pouvons renommer chacune de ces mises en page et définir une liste de leurs options. L'option de mise en page dans ce cas est une chaîne de valeurs numériques spécifiant combien de colonnes une section doit occuper. Par exemple, donner une valeur de 6 6 avec douze colonnes dans la grille pour la mise en page Bootstrap 2 Cols fera que la première et la deuxième section auront la même largeur. Si nous utilisons la valeur 9 3, la première section occupera 75% de la largeur et la deuxième section 25%. Nous pouvons activer ou désactiver chaque option de mise en page pour tout breakpoint.
Configuration des Styles
Cet onglet est chargé d'activer et de désactiver la possibilité de configurer les paramètres qui donnent des styles supplémentaires aux sections.
Configuration dans l'onglet Paramètres du Bootstrap Layout Builder
Ici, nous pouvons définir une classe globale à utiliser dans une mise en page contenant une seule section. De plus, nous pouvons activer ou désactiver l'affichage des paramètres avancés lors de la création et de la configuration des mises en page.
Comment créer une mise en page personnalisée en utilisant le Bootstrap Layout Builder?
Après avoir configuré le Bootstrap Layout Builder, il est temps de créer la mise en page. Les étapes et options ressemblent à toutes les mises en page ajoutées par le module. Nous illustrerons tout cela avec un exemple de l'une des mises en page disponibles après l'installation du module - Bootstrap 3 Cols.
Configuration de la mise en page
Lors de l'ajout d'une nouvelle section, la première chose à définir est le type de conteneur. Par défaut, nous pouvons choisir parmi trois - Boxed, Full, et Edge to Edge. Ensuite, nous pouvons décider si nous voulons ou non utiliser des marges pour cette section. La prochaine étape consistera à choisir quel pourcentage une colonne donnée doit occuper à un breakpoint donné.
Configuration des styles
Dans cet onglet, nous pouvons choisir l'arrière-plan de la section, la couleur et l'alignement du texte, les marges et le rembourrage, la bordure, le rayon de la bordure ou le type d'animation lors du défilement.
Sélection des couleurs de l'arrière-plan de la section et du texte.
Définition des marges et des espacements.
Ajustement des paramètres liés à la bordure pour une section.
Un large choix d'effets de défilement.
Configuration des paramètres de la section
Dans l'onglet troisième et final, nous trouverons des options pour changer le titre de la section. Ici, nous pouvons également définir les classes et attributs pour le conteneur, les rangées et les colonnes. Nous devons fournir les attributs au format YAML.
Bootstrap Layout Builder - résumé
Le module Bootstrap Layout Builder étend considérablement les fonctionnalités de Layout Builder. La flexibilité de ce module est un avantage considérable. Si votre site web d'entreprise sous Drupal utilise Bootstrap ou un autre framework qui fonctionne de manière similaire et que vous souhaitez bénéficier de la liberté qu'offre Layout Builder, utiliser le module Bootstrap Layout Builder sera une bonne décision.
