# 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](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/vNdiWnTZa83kWVfUQmk3/Manage-display-dev-varbase9c1-post-1.png) * Click on "Custom display settings" tab to show the list of view modes ![Use custom display settings for the selected view modes ](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/vRNQLa1fe1Yhif6UpxHq/Manage-display-dev-varbase9c1-post-2.png) * Check the "Full content" checkbox and press save to activate it ![Full Content display tab for the Full content view mode](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/WuLwSkNy8ZVToOQnic63/Manage-display-dev-varbase9c1-post-3.png) * Check the "Use Layout Builder" under the "Layout options" settings group and press save ![Use Layout Builder](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/64SIXeqFtDMF5kWdXC4F/Manage-display-dev-varbase9c1-post-4.png) ![After Activating the Use Layout Builder](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/z7ms86MvuekTf5mZbU8G/Manage-display-dev-varbase9c1-post-5.png) * 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](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/9iRpPsF2LFb33xniIxvB/Manage-display-dev-varbase9c1-post-6.png) * Click on the "Manage layout" button to change the default layout for the "Full content" display ![Manage layout for the Full Content Display Mode](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/D4WsMEIf42uDYwgpd6nK/Manage-display-dev-varbase9c1-post-7.png) * The default set of fields as a block are placed in a default section will show up ![Edit Layout for Post Content Items](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/zLzMx8eqnpurW98sYO4d/Manage-display-dev-varbase9c1-post-8.png) * Add Section to choose a layout for new sections ![Choose a Layout for New Sections](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/ZAHYXgYJcYoYIQjeaFjR/Manage-display-dev-varbase9c1-post-9.png) * 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](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/51NvZDfuuwgDMUxJs3W1/Manage-display-dev-varbase9c1-post-10.png) * 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](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/ZKe1vLl9V2YCASlnKq00/Manage-display-dev-varbase9c1-post-11.png) * 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](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/sCeL2eUvRkrzTsAC0yBD/Manage-display-dev-varbase9c1-post-12.png) ## Full Example with Code and Configs {% hint style="success" %} [**Varbase Blog**](https://www.drupal.org/project/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. {% endhint %} {% hint style="success" %} Have a look at the default configs and code for **Varbase Blog** [https://git.drupalcode.org/project/varbase\_blog](https://git.drupalcode.org/project/varbase_blog/-/tree/9.0.x) {% endhint %} ![Edit Blog Site Section Layout](https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/4G72KIpACY2t0kcruUYd/Edit-layout-for-Blog-dev-varbase9c1.png)
Edit Layout for Blog Post Content Items
{% hint style="success" %} 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. {% endhint %} {% hint style="info" %} 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**](https://www.drupal.org/project/varbase_blog/issues/3163199) {% endhint %}