Visual Layout Suite (VLSuite)
VLSuite is a comprehensive content editing experience built on top of Drupal's Layout Builder, providing an out-of-the-box WYSIWYG editing experience with highly configurable layouts, blocks, utility classes, animations, and collection components.
vlsuite
Install
composer require 'drupal/vlsuite:^2.3'
Overview
Visual Layout Suite (VLSuite) delivers maximum value in the shortest possible time for site and content building with Drupal's Layout Builder. It provides a What You See Is What You Get (WYSIWYG) experience at both the layout and content level, including live preview of appearance variants.
The module offers a set of highly configurable layouts (1-4 columns plus slider), basic blocks (Image, Icon, Text, CTA, Local Video, Remote Video for YouTube/Vimeo), and compound collection blocks with extensible preset variants like Hero, Card, Gallery, and Statement/Quote.
VLSuite uses a CSS utility classes concept with an identifier-based system that allows switching actual CSS classes without editing previously created content. This provides great flexibility and independence from the theme or CSS framework used. By default, it works out of the box with Bootstrap 5 based themes.
The module includes comprehensive permission controls allowing different levels of content editing for users, with utilities that can be marked as 'Advanced' for experienced editors. It has no distribution, profile, or theme dependency, and is compatible with other Layout Builder approaches.
Features
- Built upon Drupal Core's Layout Builder with enhanced editing experience
- WYSIWYG experience at layout and content level with live preview of appearance variants
- Configurable layouts: 1-4 columns with optional top/bottom regions, plus slider support
- Basic blocks: Image, Icon, Text, CTA, Local Video, Remote Video (YouTube/Vimeo)
- Collection blocks: Hero, Card, Gallery, Statement/Quote with extensible preset variants
- CSS utility classes system with Bootstrap 5 defaults (configurable for any CSS framework)
- Identifier-based class system allowing CSS changes without content updates
- Live preview of utility classes on hover with click-to-apply functionality
- Scroll-triggered animations using Animate.css with configurable entrance/exit effects
- Slider functionality for sections and multi-value fields using customizable parameters
- Icon font integration with Material Icons by default (configurable)
- Modal dialogs for improved Layout Builder UX
- Section library integration for reusable sections and complete layouts
- Landing page content type ready for immediate use
- Permission-based access control with 'Advanced' utility marking
- Drush generator for creating custom VLSuite modules
- Media background support for sections (images and videos)
- Tabs layout for horizontal tabs and accordion functionality
- Block duplication feature in Layout Builder
- Content top/bottom view modes for fixed header/footer sections
Use Cases
Landing Page Creation
Create visually rich landing pages using the vlsuite_landing content type. Add Hero sections with background media, Card grids for features, Gallery sections for portfolios, and CTA blocks for conversions. Use utility classes to customize spacing, colors, and typography without custom CSS.
Marketing Campaign Pages
Quickly build promotional pages by combining collection blocks (Hero, Cards, Statements) with configurable layouts. Apply animations for scroll-triggered entrance effects. Use the slider functionality for testimonial carousels or feature showcases.
Content Editor Empowerment
Enable content editors to create professional-looking pages without developer assistance. The live preview feature allows editors to see utility class effects on hover before applying. Permission controls ensure editors only see appropriate options (basic vs advanced utilities).
Component Library Development
Use VLSuite as a foundation for building a site-specific component library. Extend existing collection blocks or create new ones using the generator. Section Library integration allows saving and reusing approved layouts across the site.
Brand Consistency Implementation
Configure utility classes to match your brand's design system. Set up approved colors, spacing values, and typography options. Content editors can only choose from these pre-approved options, ensuring brand consistency across all pages.
Responsive Page Building
Create responsive layouts using the column width configurations and responsive utility classes. Media backgrounds automatically handle responsive behavior. Slider components include responsive breakpoint configuration.
Animation-Rich Experiences
Add scroll-triggered animations to sections and blocks for engaging user experiences. Choose from entrance, exit, and infinite animation types. Configure intersection observer settings for precise animation timing.
Custom Block Development
Extend VLSuite by creating custom block types using the generator or manually. New blocks automatically inherit utility class and animation support when following VLSuite conventions.
Tips
- Enable VLSuite Demo for the fastest initial setup with all features, sample content, and proper configurations
- Use the identifier-based utility class system to change CSS implementations without editing content
- Mark specialized utilities as 'Advanced' to keep the editor interface clean for basic users
- Leverage the live preview feature - hover over utility options to see effects before clicking to apply
- Use the Section Library to save and reuse successful section designs across your site
- Configure media types for backgrounds in VLSuite Media settings before using background media in layouts
- The Headings Menu block requires proper HTML formatting - ensure your text format allows 'id' attributes on heading tags
- For custom themes, adjust utility class mappings in the settings form to match your CSS framework
- Use 'Edge to edge background' with contained content for full-width visual sections with readable content width
- Test animations at different scroll speeds and device sizes to ensure good user experience
Technical Details
Admin Pages 7
/admin/config/vlsuite
Main configuration hub for Visual Layout Suite modules. Provides access to all VLSuite submodule settings.
/admin/config/vlsuite/utility-classes
Configure CSS utility classes that editors can apply to layouts, sections, regions, and blocks. Define class prefixes, values, icons, and specify which elements each utility can be applied to.
/admin/config/vlsuite/animations
Configure scroll-triggered animations using CSS animation classes. Default configuration uses Animate.css library classes.
/admin/config/vlsuite/icon-font
Configure icon font settings for use throughout VLSuite components. Default uses Google Material Icons.
/admin/config/vlsuite/block
Configure which entity fields and block types can have utility classes applied to them.
/admin/config/vlsuite/media
Configure which media types can be used as backgrounds and main media in VLSuite components.
/admin/config/vlsuite/modal
Configure modal dialog settings for Layout Builder integration.
Permissions 5
Hooks 2
hook_entity_view_alter
Adds vlsuite_full_content_top and vlsuite_full_content_bottom view modes to entities using Layout Builder for fixed header/footer content sections.
hook_help
Provides help page content by rendering README.md with Markdown filter if available.
Drush Commands 1
drush generate vlsuite-module
Generate a custom VLSuite module with block components based on library templates. Creates module structure, entity definitions, and configuration.
Troubleshooting 8
Ensure your views-view.html.twig template adds a 'div.view-content' wrapping rows output. Check that the artisan:views SDC component is used as reference.
Make sure you are using 'vlsuite_x' block variants, not core block plugins. Grant VLSuite permissions to your user role.
Grant VLSuite permissions ('Use advanced utility classes', 'Use advanced layout options', etc.) to the appropriate user role.
If using a Bootstrap 5 theme, ensure the 'container' class is not added to pages using Layout Builder and VLSuite. The editor chooses edge-to-edge per section.
Check Layout Builder Restrictions configuration in 'Layout options' to allow the new block type. This is configurable per entity display.
Verify the utility class is configured to apply to the correct 'apply_to' targets. Check that the CSS framework classes are available in your theme.
Verify Animate.css (or your custom animation CSS) is loaded. Check the threshold setting (default 0.25) and root_margin configuration. Ensure JavaScript is not blocked.
Verify the media type is enabled in VLSuite Media settings (bg_types). Ensure the 'vlsuite_background' view mode exists for your media type.
Security Notes 5
- The 'administer vlsuite settings' permission has 'restrict access: true' and should only be granted to trusted administrators
- Utility class identifiers are transliterated to prevent special characters that could cause injection issues
- Media backgrounds use entity reference validation to ensure only proper media entities are used
- Block content follows Drupal's standard entity access controls
- Layout Builder access permissions are respected for all VLSuite layout operations