Getting started

Prerequisites to use VLSuite

First steps are to install the module and make sure you are using a Bootstrap 5 Drupal theme.

General approach

VLSuite pushes the functionality of Drupal core and Layout Builder improving its editorial experience and adding more functionalities. Thus, content is edited using Layout Builder with the magic VLSuite adds. It is recommended to be familiar with Layout Builder as this guide can't and should not explain how Layout Builder works.

Enabling the full power of VLSuite

VLSuite is ships a submodule called "VLSuite - Shuttle". It enables most of the VLSuite submodules to make sure you can use the full potential of VLSuite.

"VLSuite - Shuttle" is automatically uninstalled after doing its job as it is only a setup module (it will probably replaced with a Drupal recipe, though).

Once you understand the purpose of the different submodule you may enable only the ones you are interested in.

Preparing a content type to use VLSuite

Go to the "manage display" tab of your content type (for example, /admin/structure/types/manage/page/display for the Page content type) and enable both "Use Layout Builder" and "Allow each content item to have its layout customized" options in the view modes you would like to manage using VLSuite.

Once done, edit any node of this content type and use the "Layout" tab to access the Layout Builder interface (enhanced by the VLsuite).

This configuration is typical for landing pages, as it allows each node to have its own layout. But you can use the VLSuite to define a layout for a view mode that will be used by all nodes.  For that, do not check the "Allow each content item to have its layout customized." checkbox. 

Evaluating VLSuite

Let's say you only want to see what VLSuite offers. For this, enable the "VLSuite Demo" module. This module is similar to VLSuite Shuttle (it enables most of the VLSuite submodules to make sure you can use the full potential of VLSuite) but also adds some configurations like adding a "Landing (VLSuite)" preconfigured to be used with VLSuite.

Adding a Landing page

Once "VLSuite - Shuttle" has finished its job, go to /node/add and click on "Landing (VLSuite)".  You will see a node creation form with a few fields. Complete the fields, save the node and then click in "Layout" to go to the Layout Builder interface.

Configuration

Check the VLSuite configuration section to customise much of the behaviour of the suite: utility classes, collection blocks view modes, medias to be used as background among other.

If you don't need all landings to have same content top & botom structure disable "Full content bottom (VLSuite)" & "Full content top (VLSuite)" displays in "/admin/structure/types/manage/vlsuite_landing/display".