# Varbase Layout Builder

Provides default configuration and enhancements to utilize Drupal core's Layout Builder.

Utilizing the [**Bootstrap Layout Builder**](https://www.drupal.org/project/bootstrap_layout_builder) module. Optimized for Varbase standard layouts and styling configurations. Having custom Layout options, and custom styling plugins.

## Varbase Layout Builder Module

{% hint style="info" %}
Varbase layout builder features are bundled through the **Varbase Layout Builder** module.\
GitHub: <https://github.com/Vardot/varbase_layout_builder>\
Drupal.org: <https://www.drupal.org/project/varbase_layout_builder>

After building a project using the `varbase-project` template, you can see the code of the **Varbase Layout Builder** module in:
{% endhint %}

```
project_directory
|-- docroot
    |-- modules
        |-- contrib
            |-- varbase_layout_builder
```

Brings in the following core and contributed modules to your site:

| Module                                                                                                        | Purpose                                                                                      |
| ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| <p><strong>Layout Builder</strong></p><p><em>(in Drupal core)</em></p>                                        | Allows users to add and arrange blocks and content fields directly on the content.           |
| [**Layout Builder Restrictions**](https://www.drupal.org/project/layout_builder_restrictions)                 | Manage which fields & layouts are available in Layout Builder                                |
| [**Entity Blocks**](https://www.drupal.org/project/entity_block)                                              | Let site administrators place content entities as blocks.                                    |
| [**Block Form Alter**](https://www.drupal.org/project/block_form_alter)                                       | Provides block form alter functions                                                          |
| [**Media Library Form API Element**](https://www.drupal.org/project/media_library_form_element)               | A Form API element to select / add new media item.                                           |
| [**Bootstrap Layouts**](https://www.drupal.org/project/bootstrap_layouts)                                     | This module is going to generate layouts with Bootstrap grid system.                         |
| [**Layout Builder Blocks**](https://www.drupal.org/project/layout_builder_blocks)                             | Add UI styles support to blocks from Layout Builder module.                                  |
| [**Layout Builder Modal**](https://www.drupal.org/project/layout_builder_modal)                               | Open blocks in a modal in the Layout Builder UI.                                             |
| [**Layout Builder Asymmetric Translation**](https://www.drupal.org/project/layout_builder_at)                 | Allows to have separate layout overrides per translation.                                    |
| [**Layout Builder Component Attributes**](https://www.drupal.org/project/layout_builder_component_attributes) | Allows editors to add HTML attributes to Layout Builder components (blocks)                  |
| [**Layout Builder Advanced Permissions**](https://www.drupal.org/project/layout_builder_perms)                | Allows for more granular access control to Layout Builder by providing a set of permissions. |
| [**Layout Builder Library**](https://www.drupal.org/project/layout_library)                                   | Provides a library of layouts for content-editors to select from                             |
| [**Section Library**](https://www.drupal.org/project/section_library)                                         | Create reusable templates for single or multiple sections at the layout builder.             |
| [**Bootstrap Styles**](https://www.drupal.org/project/bootstrap_styles)                                       | Add a plugins builder and a collection of reusable plugins to the Layout Builder module.     |
| [**Bootstrap Layout Builder**](https://www.drupal.org/project/bootstrap_layout_builder)                       | Add Bootstrap Grid support to Layout Builder module.                                         |
| [**Block Library**](https://www.drupal.org/project/block_library)                                             | Adds additional functionality to the core block library.                                     |
| [**Allowed Formats**](https://www.drupal.org/project/allowed_formats)                                         | Limit which text formats are available for each field instance.                              |

## Used Varbase Components

### Varbase Media Module

Manages type of media contents and entity browsers in the site.

{% content-ref url="/pages/-MePkGsRz2V-jUTLLtNF" %}
[Varbase Media](/10.1.x/developers/understanding-varbase/core-components/varbase-media.md)
{% endcontent-ref %}

## Sub Modules

### Varbase Landing Page (Layout Builder) Module

Having a **Landing page (Layout Builder)** content type and related configuration. To be used for building pages with custom sections and layouts to display content in a modern way.

{% content-ref url="/pages/-MePzL6T8APTkka6Di07" %}
[Varbase Landing page (Layout Builder)](/10.1.x/developers/understanding-varbase/core-components/varbase-layout-builder/varbase-landing-page-layout-builder.md)
{% endcontent-ref %}

Utilizing a number of block types to be used in layout builder display&#x73;**.**

### **Varbase Heading block** Module

A heading block is used to add headings to your page or sections. Headings help structure your page making your content easier to read by humans and search engines.

{% content-ref url="/pages/-MeQ0Zrg0DRfTgL-F9DG" %}
[Varbase Heading Block](/10.1.x/developers/understanding-varbase/core-components/varbase-layout-builder/varbase-heading-block.md)
{% endcontent-ref %}

###

### **Varbase Rich text block** Module

A rich text block contains a title and a body with a rich text format.

{% content-ref url="/pages/-MePvDpwBUfiL1jb3eJ\_" %}
[Varbase Layout Builder](/10.1.x/developers/understanding-varbase/core-components/varbase-layout-builder.md)
{% endcontent-ref %}

###

### **Varbase HTML code block** Module

An HTML Code block contains a title and a body with an HTML text format.

{% content-ref url="/pages/-MeQ0HxbXWtou2HIaOSU" %}
[Varbase HTML Code Block](/10.1.x/developers/understanding-varbase/core-components/varbase-layout-builder/varbase-html-code-block.md)
{% endcontent-ref %}

###

### **Varbase Media (image/video) block** Module

A media block contains a title and media.

{% content-ref url="/pages/-MeQ1D8TPYuRIGOL2uPB" %}
[Varbase Media (Image/Video) Block](/10.1.x/developers/understanding-varbase/core-components/varbase-layout-builder/varbase-media-image-video-block.md)
{% endcontent-ref %}

###

### **Varbase Gallery block** Module

A gallery block contains a title and a gallery of images and videos.

{% content-ref url="/pages/-MeQ1NPt0\_V7VBwaYcOA" %}
[Varbase Gallery Block](/10.1.x/developers/understanding-varbase/core-components/varbase-layout-builder/varbase-gallery-block.md)
{% endcontent-ref %}

## Extra Layout Styling Options

Varbase Layout Builder add more layout settings. And more styling plugins.

### Block Alignments

Vertical and horizontal alignments for all blocks in a section.

### Edge to Edge Background

Having an edge to edge background for sections or boxed background.

### Container Width for Boxed Container Type

Having more options for boxed container type. A number of width options of ( Wide, Medium, Narrow, or Tiny ).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.varbase.vardot.com/10.1.x/developers/understanding-varbase/core-components/varbase-layout-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
