# 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://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1FJnP5SYHk_arCFpX%2F-Mg1FNQaP3PIaee8lHHK%2FManage-display-dev-varbase9c1-post-1.png?alt=media\&token=5d438c64-08b5-4321-b6bd-8413f01b0d79) * Click on "Custom display settings" tab to show the list of view modes ![Use custom display settings for the selected view modes ](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1FJnP5SYHk_arCFpX%2F-Mg1FyDO3FSGRtf42ssA%2FManage-display-dev-varbase9c1-post-2.png?alt=media\&token=e5cc8ee0-cfc9-4318-9b9a-1a1e96b2e2f3) * Check the "Full content" checkbox and press save to activate it ![Full Content display tab for the Full content view mode](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1FJnP5SYHk_arCFpX%2F-Mg1GDZxczBP781AS8Z9%2FManage-display-dev-varbase9c1-post-3.png?alt=media\&token=910ed487-0b25-4e01-a0e2-681be6f3c2b6) * Check the "Use Layout Builder" under the "Layout options" settings group and press save ![Use Layout Builder](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1GfGEtTRUJfLlh-6O%2F-Mg1H-VjSveqZ3JmHL1Q%2FManage-display-dev-varbase9c1-post-4.png?alt=media\&token=a10f0072-27c1-4988-aaa7-608dffc0c3c6) ![After Activating the Use Layout Builder](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1GfGEtTRUJfLlh-6O%2F-Mg1HTOtqZ1PTBdlXTAT%2FManage-display-dev-varbase9c1-post-5.png?alt=media\&token=81458276-814f-4963-ba33-ee36fd37af20) * 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://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1GfGEtTRUJfLlh-6O%2F-Mg1Hbx_aISFbEzFlHeO%2FManage-display-dev-varbase9c1-post-6.png?alt=media\&token=efd3100e-eae9-49ca-9650-8d1476fd5553) * 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://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1JyM-0Y3xT8aVW0CK%2F-Mg1KDWLHuw_W1DNuor-%2FManage-display-dev-varbase9c1-post-7.png?alt=media\&token=b3114bac-e8a5-45a5-9714-6ebef843e765) * The default set of fields as a block are placed in a default section will show up ![Edit Layout for Post Content Items](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1KQa1JzZY96ljvME3%2F-Mg1Kz8T1X9tRiuVKMHl%2FManage-display-dev-varbase9c1-post-8.png?alt=media\&token=81351c5a-6fe6-4401-835b-33ea9a1d57fa) * Add Section to choose a layout for new sections ![Choose a Layout for New Sections](https://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1L6rO1whyvIQTumkO%2F-Mg1LgrNWmnuvgPJwTUF%2FManage-display-dev-varbase9c1-post-9.png?alt=media\&token=86f1e45b-f5fe-4d9f-8c9c-bfe157cc115b) * 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://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1LwhO5FL4FbI53smh%2F-Mg1MTh5SQm0ynVj1A7m%2FManage-display-dev-varbase9c1-post-10.png?alt=media\&token=2cb76b78-595c-4117-8368-b53a6db83e9f) * 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://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1NQBdrXiEz1DyofU9%2F-Mg1OUoZKdPlFamvyhOS%2FManage-display-dev-varbase9c1-post-11.png?alt=media\&token=9ffb3474-4610-4774-9a43-df5e7221ead3) * 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://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1OkcqqOaBlB5t4aRO%2F-Mg1QGumLZr3M9om1GHo%2FManage-display-dev-varbase9c1-post-12.png?alt=media\&token=def0e213-4c1d-4765-b811-efc236bbeb3d) ## 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://1741922406-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMp_PWjEdZQrVE520s3%2F-Mg1V12K0kNLH5d7G7ln%2F-Mg1VOPz6DzmL96NWDmy%2FEdit-layout-for-Blog-dev-varbase9c1.png?alt=media\&token=c6e23328-606f-403d-bd92-2810f7f39d9a)
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 %}