LogoLogo
10.0.x
10.0.x
  • Overview
    • About Varbase
    • Roadmap
    • Release Cycle and Supported Versions
    • How to Get Support
  • Developers
    • Getting Started
    • Installing Varbase
      • Requirements
      • Installing Varbase locally with DDEV
      • Installing Varbase locally with Lando
    • Understanding Varbase
      • Basic Concepts
      • Core Components
        • Varbase Core
          • Varbase Admin
          • Varbase Page
          • Varbase Security
          • Varbase Webform
          • Varbase Default Content
          • Varbase Tour
        • Varbase Media
        • Varbase Editor
        • Varbase Email
        • Varbase SEO
        • Varbase Workflow
        • Varbase Dashboards
        • Varbase Layout Builder
          • Varbase Landing page (Layout Builder)
          • Varbase Heading Block
          • Varbase Rich Text Block
          • Varbase HTML Code Block
          • Varbase Media (Image/Video) Block
          • Varbase Gallery Block
        • Varbase Components
        • Vartheme Claro
        • Vartheme BS5
      • Optional Components
        • Varbase AI
          • Varbase AI Default recipe
          • Varbase AI Editor Assistant recipe
          • Varbase AI Image Alt recipe
          • Varbase AI Taxonomy Tagging recipe
          • Varbase AI Agents recipe
        • Varbase API
        • Varbase Internationalization
        • Varbase Hero Slider
        • Varbase Carousels
        • Varbase Blog
        • Varbase Search
        • Varbase Social Single Sign-On
        • Varbase Media Twitter
        • Varbase Media Instagram
        • Varbase Content Planner
        • Varbase Bootstrap Paragraphs
          • Varbase Bootstrap Paragraphs Text and Image
        • Varbase Landing Page (Paragraphs)
      • Additional Components
        • Varbase Media Header
        • Varbase FAQs
        • Varbase Reports
        • Varbase Commerce
        • Varbase YouTube Import
      • Development Components
        • Varbase Development
        • Reroute Email
        • Varbase Updates Helper
      • Deprecated Components
        • Varbase Media Hero Slider
        • Varbase Style Guide
        • Vartheme BS4
        • Varbase Total Control Dashboard
    • Configuring a Varbase Site
      • Navigation
        • Defining Active Menu Trail Using Menu Position
      • Using View Modes Inventory
      • Content Moderation and Workflows
      • URL Aliases in Varbase/Drupal
        • Configuring URL Aliases
        • Managing URL Aliases
      • Managing URL Patterns for Multilingual Websites
      • Managing Date and Time Formats to Display Across the Site
      • Using Varbase Layout Builder
        • Creating a Landing Page With Varbase Layout Builder
        • Activating Varbase Layout Builder for Content Types
      • Configuring Pathologic When Going Live
      • Configuring SEO Features
        • Disallow Oembed Media Links
      • Configuring Security Features
        • Spam Protection
        • Password Policies
        • Other Security Kits
        • Flood Contorl
        • Enable HTTP Password Authentication
      • Configuring JSON:API Features
      • Configure Varbase Media Hero Slider
      • Configuring Varbase Media Header
      • Configuring Varbase Mailer Settings
        • Configure Symfony Mailer
      • Configure Level of Logging and Errors
      • Entity Definition Update Manager Class
      • Module Installer Factory Class
      • Configure Ckeditor 5 Media Embed
    • Theme Development with Varbase
      • Understanding The Vartheme Starterkit Theme
      • Creating Your Own Theme
      • Integration of Varbase with Storybook 1.0 - CL Server
      • Integration of Varbase with Storybook 2.0
      • Customize a Varbase Single Directory Components (SDC) In a Custom Theme
      • Local Tasks and Moderation Sidebar
      • Add Preloaded Fonts in Vartheme
      • Command to Install Needed Theming Tools
      • Manually Install Needed Theming Tools
    • Launching a Varbase Site to Production
    • Updating a Varbase Site
      • Understanding Varbase Updater Package
      • Handling Patches When Updating
      • Handling Configuration Updates
      • Updating Varbase to work with Composer 2.0
      • Updating Drush to the Latest Stable Version
      • Version Update Guides
        • Updating Varbase ~9.0 to Drupal 10
        • Updating from Varbase 8.x to 9.x
    • Varbase Patches
    • Frequently Asked Questions (FAQs)
    • Extending Varbase
      • Overriding Varbase
      • Creating Your Own Feature
      • Install Needed YARN and Webpack Tools
      • Compiling Provided Component Styles
      • Check Standards/Practice Coding And Linting
  • Content Designers
    • Accessing the Administration Area
      • Website Environments
    • Dashboard
      • Reports
    • Content Management
      • Create Content
        • Rich-Text Editor “WYSIWYG”
      • Modify Content
      • Delete Content
      • Preview Content
      • Bulk Edit Content
      • Publish Content
      • Authoring Information
    • Content Structure
      • EntityQueues
        • Add a New Term
      • Menu Management
        • Add Menu Items
        • Update Menu Items
        • Adding a Page to the Menu
      • Taxonomies
        • List Terms
        • Add Terms
        • Reorder and Edit Terms
    • Content Translation
      • Translating Content
      • Language Switcher
      • Deleting a Translation
      • Editing a Translation
    • Content Workflow
    • Layout Builder
      • Section
        • Section Styles
      • Block Management
        • Block Styles
      • Reordering Blocks
    • Webforms
      • Create New Webform View
      • Setting up Emails Handler Conditions
      • Setting up Confirmations Message Settings Types
    • Media Management
      • Accessing the Media Library
      • Uploading Media Files
        • Image
        • Remote Video
        • Video
      • Applying Metadata and Descriptions
      • Resizing Images
    • User Management
      • Login & Registration
      • Add User
      • Edit User
      • Delete User
      • Simulating Another User
      • Default Roles and Site Personas
        • Edit Roles' Permissions
        • Managing Roles
    • URL Management
      • URL Aliases
      • Generating URL Alias
      • URL Redirects
      • Domain Redirects
    • SEO Management
      • XML Sitemap
      • Meta Tags in Varbase
      • Disallow Indexing for Content Items
    • Site Configuration
      • System
        • Clearing Varbase Cache
        • Google Analytics
        • Mail Templates
      • User Interface
        • Coffee
        • External Links
        • Gin Moderation Sidebar
        • Layout Builder Modal
        • Moderation Sidebar
        • Shortcuts
        • Taxonomy Manager
        • Tours
        • CL Components
        • Antibot
        • Responsive Preview
        • Navigation Settings
      • Development
      • Varbase Settings
      • Web Services
        • OpenAPI
    • Additional Tips
      • Content Uploading Standards
      • Common Error Handling Tips
      • Glossary
  • Contributing
    • Contributing to Documentation
Powered by GitBook
On this page
  • Steps to Activate
  • Create a New Content Type
  • Enable the Full Content display mode
  • Full Example with Code and Configs
  1. Developers
  2. Configuring a Varbase Site
  3. Using Varbase Layout Builder

Activating Varbase Layout Builder for Content Types

PreviousCreating a Landing Page With Varbase Layout BuilderNextConfiguring Pathologic When Going Live

Last updated 1 year ago

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

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

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

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

  • 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

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

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

  • Add Section to 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

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

  • 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.

Full Example with Code and 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

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.

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

Varbase Blog
https://git.drupalcode.org/project/varbase_blog
Issue #3163199: Switch Blog section, Blog post, Blog categories, and Tags to use Varbase Layout Builder
Manage Display for the Post Content Type
Use custom display settings for the selected view modes
Full Content display tab for the Full content view mode
Use Layout Builder
After Activating the Use Layout Builder
Select the Default Supported Varbase Layout Builder Layouts
Manage layout for the Full Content Display Mode
Edit Layout for Post Content Items
Choose a Layout for New Sections
Configure Bootstrap 2 Cols Section
Add Section After Configuring Section Styling options
Placeholder for the "Moderation control" Field in a Section with Bootstrap 1 Col Layout
Edit Blog Site Section Layout
Edit Layout for Blog Post Content Items