Activating Varbase Layout Builder for Content Types

The logical use for Varbase Layout Builder configs is with the "Full Content" display mode for most planed content types. If the Content type has an access permission for users to open a page with a URL to see the full content. It's better to activate the Layout Builder for the default layout for that full content.

Steps to Activate

Create a New Content Type

Example: Let consider creating a "Post" content type

• Go to "/admin/structure/types/add" link to add a new content type

• Fill in "Post" in the "Name" field

• Fill in "Use the Post to add posts to the website. So that they will show up under the posts site section." in the "Description" field

• Press the "Save and manage fields" submit button to create the content type

• Then the website will be directed to the "Manage fields" page

• Add more fields as needed for the project

Enable the Full Content display mode

• Go to "/admin/structure/types/manage/post/display" page

Manage Display for the Post Content Type

• Click on "Custom display settings" tab to show the list of view modes

Use custom display settings for the selected view modes

• Check the "Full content" checkbox and press save to activate it

Full Content display tab for the Full content view mode

• Check the "Use Layout Builder" under the "Layout options" settings group and press save

Use Layout Builder

After Activating the Use Layout Builder

• Select the following layouts from "Layout available for sections" and press save

  • Bootstrap 1 Col

  • Bootstrap 2 Cols

  • Bootstrap 3 Cols

  • Bootstrap 4 Cols

  • Bootstrap 6 Cols

Select the Default Supported Varbase Layout Builder Layouts

• Click on the "Manage layout" button to change the default layout for the "Full content" display

Manage layout for the Full Content Display Mode

• The default set of fields as a block are placed in a default section will show up

Edit Layout for Post Content Items

• Add Section to choose a layout for new sections

Choose a Layout for New Sections

• On choosing the "Bootstrap 2 Cols" section layout. Another styling settings tray options will show up to configure the section

Configure Bootstrap 2 Cols Section

• Set the desired Layout options, Styling options then click on the "Add Section" button in the setting try

Add Section After Configuring Section Styling options

• Important to manage to have only the supported Varbase Layout Builder layouts. having the "Moderation control" field in a section with Bootstrap 1 Col layout, and the Body and other fields or needed blocks in other sections.

Placeholder for the "Moderation control" Field in a Section with Bootstrap 1 Col Layout

Full Example with Code and Configs

Varbase Blog is the standard example for how a content type could be configured, then packaged to work with Varbase. Using Varbase Layout Builder default configs.

Use the learn by example method. In case of wanting to create a custom Varbase compatible features.

Have a look at the default configs and code for Varbase Blog

https://git.drupalcode.org/project/varbase_blog

Edit Blog Site Section Layout

Edit Layout for Blog Post Content Items

Install Varbase Blog in a Varbase site. It comes with Varbase by default.

Have a look at the default Varbase Blog configs. Manage custom content types using the same configs.

Have a quick look at the following link. More enlightenment on how to use Varbase Layout Builder.

Issue #3163199: Switch Blog section, Blog post, Blog categories, and Tags to use Varbase Layout Builder