Layout Components
layoutcomponents
A comprehensive extension for Drupal Layout Builder that provides pre-built components, improved UI/UX, live preview capabilities, and extensive customization options for sections and columns.
Overview
Layout Components is a sophisticated module built on top of Drupal's Layout Builder, providing a complete package of components integrated with that system. The module extends the user experience by creating an improved interface that is much more customizable with essential features such as live preview of changes while editing content.
The module provides editors with a series of components already created and available to use out of the box, including text, images, videos, accordions, tabs, timelines, countdowns, and more. For developers, Layout Components offers an API where custom fields can be added while benefiting from all the customization features the module provides.
Layout Components provides 6 types of Bootstrap-based grid layouts (1-6 columns) with the ability to customize backgrounds, colors, borders, spacing, and much more. Editors can add background colors or images with parallax options, configure paddings, add multiple CSS classes and HTML attributes, create section titles with styling, change templates, and set sections to full width.
Install
composer require 'drupal/layoutcomponents:^3.0'
composer require 'drupal/layoutcomponents:^4.0'
Features
- Six Bootstrap-based layout templates supporting 1-6 column configurations with flexible column width distributions
- Live preview of changes while editing content in Layout Builder
- Comprehensive section customization including titles, descriptions, background colors/images, parallax effects, and full-width options
- Column customization with individual title styling, background colors, borders, border radius, and padding controls
- 20+ pre-built component block types including text, images, videos, accordions, tabs, timelines, countdowns, cards, buttons, and more
- Clipboard functionality for copying and pasting sections, columns, and blocks
- Fine-grained permission system with dynamic permissions per entity type for sections, columns, and blocks
- Component API for developers to create custom fields with LC styling and functionality
- Drush commands for exporting and importing blocks
- Integration with Slick carousel for carousel sections
- Support for tabs layout within sections
- Color picker with configurable color palette for editors
- Responsive design with Bootstrap XS, SM, MD, LG, XL breakpoint support
- Media library integration for background images and videos
- Custom wrapper element types (div, span, section, article, header, footer, aside, figure)
Use Cases
Building a Marketing Landing Page
Use Layout Components to create an engaging landing page with a full-width hero section featuring a background video, followed by a three-column feature section with cards, a timeline section showcasing company history, and a contact section with social links. Each section can have its own background color, padding, and styling while maintaining consistent Bootstrap-based responsive design.
Creating Tabbed Product Information
Use the Simple Tabs component to create a product page where specifications, reviews, and related products are organized into separate tabs. Each tab content area supports the full Layout Builder experience, allowing complex layouts within each tab.
Building a Team Directory with Accordions
Create a team page using accordion components where each department is a collapsible section. When expanded, each section reveals team member cards with images, titles, and bios arranged in a multi-column layout.
Photo Gallery with Carousel
Use the Slick integration to convert a section containing multiple image blocks into a smooth carousel gallery. Configure autoplay, navigation arrows, and dots for user control.
Event Countdown Page
Create an event page with a countdown timer component showing days, hours, minutes, and seconds until the event. Combine with image components for event posters and text components for event details.
Content Editor Workflow
Empower content editors to build pages without developer assistance using the live preview feature. Editors can add sections, adjust column widths, set background colors, and position blocks while seeing real-time results.
Tips
- Enable only the component submodules you need - each enabled component creates a block type that appears in the block selection dialog
- Configure default section and column styles to match your site's design system, reducing repetitive styling work for editors
- Use the clipboard feature to quickly duplicate complex sections, columns, or blocks across pages
- Take advantage of the responsive column width options to create different layouts at different breakpoints (XS, SM, MD, LG, XL)
- Use the Extra Class and Extra Attributes fields to add custom CSS classes or data attributes for JavaScript interactions
- For performance, only enable lc_slick if you need carousel functionality, as it adds the Slick library dependency
- The folder path setting in General configuration is essential if you plan to use the export/import Drush commands for deployment workflows
Dependencies
Related Projects
Layout Components is built on top of Drupal core's Layout Builder, extending its functionality with pre-built components, improved UI, and extensive customization options.
Layout Components uses Bootstrap 4/5 grid system for its layouts. The active theme must be based on Bootstrap for proper rendering.
Optional integration via the lc_slick submodule allows converting LC sections into Slick carousels.
Integrates with Drupal's Media Library for selecting background images and videos for sections.
Uses CKEditor for rich text editing in text components.
Integrates with Video Embed Field for embedding external videos from YouTube, Vimeo, etc.
Admin Pages
| Title | Path | Description |
|---|---|---|
| Layout Components - General | /admin/config/layoutcomponents/settings |
Configure general settings for Layout Components including the export folder path for blocks and the width of the lateral configuration menu. |
| Layout Components - Interface | /admin/config/layoutcomponents/settings/interface |
Configure the visual theme for the Layout Components interface. |
| Layout Components - Colors | /admin/config/layoutcomponents/settings/colors |
Configure the color palette available for editors when customizing sections and columns. |
| Layout Components - Section | /admin/config/layoutcomponents/settings/section |
Configure the default styling and behavior settings for Layout Components sections. These defaults will be applied when creating new sections. |
| Layout Components - Column | /admin/config/layoutcomponents/settings/column |
Configure the default styling and behavior settings for Layout Components columns. These defaults will be applied when creating new columns. |
Permissions
| Permission | Description |
|---|---|
|
Access to configure the general Layout Components settings including folder path and menu width. |
|
Access to configure the interface theme settings for Layout Components. |
|
Access to configure the editor color palette for Layout Components. |
|
Access to configure the default section styling and behavior settings. |
|
Access to configure the default column styling and behavior settings. |
|
Permission to create new Layout Components sections for a specific entity type and bundle. |
|
Permission to move/reorder Layout Components sections for a specific entity type and bundle. |
|
Permission to remove Layout Components sections for a specific entity type and bundle. |
|
Permission to configure Layout Components sections for a specific entity type and bundle. |
|
Permission to change the layout type of Layout Components sections for a specific entity type and bundle. |
|
Permission to copy Layout Components sections to clipboard for a specific entity type and bundle. |
|
Permission to configure Layout Components columns for a specific entity type and bundle. |
|
Permission to copy Layout Components columns to clipboard for a specific entity type and bundle. |
|
Permission to add blocks within Layout Components sections for a specific entity type and bundle. |
|
Permission to move blocks within Layout Components sections for a specific entity type and bundle. |
|
Permission to remove blocks from Layout Components sections for a specific entity type and bundle. |
|
Permission to configure blocks within Layout Components sections for a specific entity type and bundle. |
|
Permission to copy blocks to clipboard within Layout Components sections for a specific entity type and bundle. |
Hooks
| Hook | Description |
|---|---|
hook_theme |
Defines theme implementations for Layout Components templates. |
hook_preprocess_block |
Preprocesses block variables for Layout Components blocks. |
hook_theme_suggestions_alter |
Adds theme suggestions for Layout Components templates. |
Drush Commands
| Command | Description |
|---|---|
|
Export all Layout Components blocks to JSON files in the configured folder. Exports blocks that are used by Layout Builder displays along with their entity reference revisions (tabs, accordion items, etc.). |
|
Import Layout Components blocks from JSON files in the configured folder. Deletes existing blocks first, then imports from the JSON files while preserving entity references and translations. |
|
Delete all Layout Components blocks that are used by Layout Builder displays. Also removes associated entity reference revision items. |
Troubleshooting
Ensure your active theme is based on Bootstrap 4 or Bootstrap 5. Layout Components uses Bootstrap's grid system and requires these CSS frameworks to render properly.
Make sure composer-patches is installed and enabled. Add '"enable-patching": true' to the 'extras' section of your composer.json and run 'composer update' to apply the required patches.
The module includes patches for drupal/core and drupal/inline_entity_form. Verify these patches are applied by checking your composer.lock or running 'composer update --dry-run'.
Ensure the lc_commands submodule is enabled along with hal and serialization modules. Verify the export folder path is configured correctly at /admin/config/layoutcomponents/settings and the folder exists and is writable.
Add your hex colors (comma-separated) at /admin/config/layoutcomponents/settings/colors. Format: #ffffff,#000000,#f89456
Layout Components uses dynamic permissions per entity type. Grant the appropriate permissions (create sections, configure blocks, etc.) for each content type at admin/people/permissions.
Security Notes
- Layout Components respects Drupal's permission system with fine-grained dynamic permissions per entity type
- Extra Attributes field allows arbitrary HTML attributes - ensure only trusted users have access to configure sections
- Iframe component can embed external content - review permissions carefully to prevent XSS vectors
- Export/Import commands write files to the filesystem - ensure the configured folder has appropriate permissions and is not web-accessible