前回の記事:Layout BuilderがDrupal9からコアモジュールに
Drupal8,9のLayout Builder 拡張モジュール
Layout Builder Modal
Layout Builderの標準機能では、フィールドやカスタムブロックなど配置した項目の設定はサイドバー内に表示されます。Layout Builder Modalモジュールを使用することで、それらをモーダルで表示することができるようになります。このモジュールは、特にカスタムブロックのコンテンツ更新の際に役立ちます。
![Layout Builder Modalを使用していない時](/sites/default/files/assets/images/article-image/Asako/410-1.png)
Layout Builder Modalを使用していない時、設定項目がサイドバーに表示されます。(標準機能)
![Layout Builder Modalを使用している時](/sites/default/files/assets/images/article-image/Asako/410-2.png)
Layout Builder Modalを使用すると、設定項目がモーダルで表示されます。
![カスタムブロック](/sites/default/files/assets/images/article-image/Asako/410-3.png)
Bootstrap Layout Builderは、その名のとおりLayout BuilderでBootstrapのレスポンシブグリッドレイアウトを使えるようになります。ブレイクポイントを決めたり、レイアウト応じて、各カラムの幅も自由に設定できるようになります。
また、背景に画像や動画を設定したり、アニメーション設定など豊富なカスタマイズオプションも使用可能になります。
![Bootstrap Layout Builder ブレイクポイントの設定](/sites/default/files/assets/images/article-image/Asako/410-5.png)
Bootstrap Layout Builderのブレイクポイントの設定画面。
![Bootstrap Layout Builder レイアウトに応じたカラム幅の設定](/sites/default/files/assets/images/article-image/Asako/410-6.png)
Bootstrap Layout Builder レイアウトに応じたカラムごとの幅の設定画面。ここで設定したオプションがLayout Builderの設定画面で選択できるようになります。
![Bootstrap Layout Builder セクションごとのレイアウト設定](/sites/default/files/assets/images/article-image/Asako/410-7.png)
Layout Builderで、セクションごとのレイアウトをBootstrapのグリッドレイアウトから選択できます。
![Bootstrap Layout Builder セクションごとのレイアウト詳細設定](/sites/default/files/assets/images/article-image/Asako/410-8.png)
セクションのコンテナサイズ、両端の余白、ブレイクポイントごとのカラム幅の設定ができます。
その他の拡張モジュール
Layout Builder Restrictions
Layout Builderで定義されているレイアウトをサイト内で使用できるかできないかを管理画面上で選択できるようになります。
Layout Builder Asymmetric Translation
多言語サイトの場合に、言語ごとに異なるレイアウトを選択することができます。
今回はLayout Builderの拡張モジュールの一部を紹介しましたが、他にも便利な機能を追加できる拡張モジュールが多数ある上、今後も新しいもののリリースが期待されます。
Layout Builderを活用して、ユーザーフレンドリーなサイトの構築をしていきたいと思います!