> For the complete documentation index, see [llms.txt](https://docs.varbase.vardot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.varbase.vardot.com/9.1.x/developers/configuring-a-varbase-site/using-varbase-layout-builder/activate-varbase-layout-builder-for-content-types.md). # 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://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-1b8de636487791bef6de1197f6e2bc7b21545b5b%2Fmanage-display-dev-varbase9c1-post-1.png?alt=media) * Click on "Custom display settings" tab to show the list of view modes ![Use custom display settings for the selected view modes](https://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-c3e5292747671edfc0a74852edb002b46a335ef4%2Fmanage-display-dev-varbase9c1-post-2.png?alt=media) * Check the "Full content" checkbox and press save to activate it ![Full Content display tab for the Full content view mode](https://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-a4beb533c70d11becd57ef395a6cc85d0fd5feb4%2Fmanage-display-dev-varbase9c1-post-3.png?alt=media) * Check the "Use Layout Builder" under the "Layout options" settings group and press save ![Use Layout Builder](https://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-95222fe489d3c09d8d2314cb7382f9ba27c13bbf%2Fmanage-display-dev-varbase9c1-post-4.png?alt=media) ![After Activating the Use Layout Builder](https://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-853aae43290e2a2a50fff9078518d9a23a5328f3%2Fmanage-display-dev-varbase9c1-post-5.png?alt=media) * 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://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-3b4bb55b0cbb18f4a4653de6017510bc22dd4c6b%2Fmanage-display-dev-varbase9c1-post-6.png?alt=media) * 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://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-5dbb5f6fe38ac1d3c03364fc9128bcee5b29be3e%2Fmanage-display-dev-varbase9c1-post-7.png?alt=media) * The default set of fields as a block are placed in a default section will show up ![Edit Layout for Post Content Items](https://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-019bb707e4613033d6f0fcdcbc50c708a0561f93%2Fmanage-display-dev-varbase9c1-post-8.png?alt=media) * Add Section to choose a layout for new sections ![Choose a Layout for New Sections](https://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-41b2b5eefb4f7914aa77c2a925d2a6ed9eabbe2a%2Fmanage-display-dev-varbase9c1-post-9.png?alt=media) * 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://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-301f7b540f54da8ab27ebfaaa1467ac498699da8%2Fmanage-display-dev-varbase9c1-post-10.png?alt=media) * 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://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-198611b924dbd224e7e24b7d7a1c5a631d06af56%2Fmanage-display-dev-varbase9c1-post-11.png?alt=media) * 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://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-54a5a066577dcf756df19c6a96e268bd7ef2f031%2Fmanage-display-dev-varbase9c1-post-12.png?alt=media) ## 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://1127434795-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPp0n1Zud7iJeGbDEjdP%2Fuploads%2Fgit-blob-09ef605658696a8378aef5fe215ac6771339a822%2Fedit-layout-for-blog-dev-varbase9c1.png?alt=media)
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 %}